Feature/21 add sponsors organizers communities

src/app/[city]/page.js

@@ -9,6 +9,7 @@ import CTAFinal from "@/components/CTAFinal";
 import EmptyState from "@/components/EmptyState";
 import CityLogo from "@/components/CityLogo";
 import RegistrationForm from "@/components/RegistrationForm";
+import CitySponsorList from "@/components/CitySponsorList"; // Nuevo import
 import { FeatureGuard } from "@/components/FeatureManagement/FeatureGuard";
 import cityData from "@/data/cities";
 import { generalFAQs } from "@/data/faqs";
@@ -116,6 +117,9 @@ export default async function CityPage({ params }) {
         </section>
       )}
 
+       {/* Patrocinadores específicos de la ciudad */}
+         <CitySponsorList cityName={params.city} />
+
       {/* Registro Section */}
       <section id="registro" className="container-py">
         <div className="bg-black/20 backdrop-blur rounded-lg p-6 md:p-8">

src/app/page.js

@@ -13,7 +13,7 @@ import cityData from "@/data/cities";
 
 export default function Home() {
   // Fecha y hora del próximo evento confirmado de PyDay 2025
-  const firstEventDate = "2025-06-06T14:00:00";
+  const firstEventDate = "2025-06-13T10:00:00";
   const citiesArray = Object.values(cityData);
 
   return (
@@ -105,7 +105,7 @@ export default function Home() {
       {/* Patrocinadores Section */}
       <section id="patrocinadores" className="container-py">
         <h2 className="section-title font-bold tracking-wider text-4xl mb-0">
-          Nuestros Patrocinadores
+          Apoyan este evento:
         </h2>
         <SponsorList />
 

src/app/sponsors/components/DynamicContent.js

@@ -177,8 +177,13 @@ export default function DynamicContent() {
       </motion.section>
       {/* Planes de Patrocinio */}
       <SponsorshipPlans plans={plans} />
-      {/* Patrocinadores anteriores */}
-      <SponsorList sponsors={sponsorshipData.sponsors} />
+      {/* Patrocinadores anteriores - Solo mostrar patrocinadores en la página de sponsors */}
+      <SponsorList 
+        showSponsors={true} 
+        showOrganizers={false} 
+        showCommunities={false} 
+        sponsors={sponsorshipData.sponsors} 
+      />
       {/* Formulario de contacto */}
       <FeatureGuard featureName="sponsorForm">
         <section id="contact-form" className="container mx-auto py-16 px-4">
@@ -203,4 +208,4 @@ export default function DynamicContent() {
       <FAQSection faqs={sponsorshipFAQs} />
     </>
   );
-}
+}

src/app/sponsors/components/SponsorList.js

@@ -4,14 +4,115 @@ import { motion } from "framer-motion";
 import SponsorLogo from "@/app/sponsors/components/SponsorLogo";
 import sponsorsData from "@/data/sponsors";
 
-export default function SponsorList() {
+function SponsorGrid({ items, importance }) {
+  // Reducimos significativamente el padding
+  const paddingByImportance = {
+    large: "p-3 md:p-4",   // Patrocinadores: padding reducido
+    medium: "p-2 md:p-3", // Organizadores: padding reducido
+    small: "p-1 md:p-2",  // Comunidades amigas: padding mínimo
+  };
+
+  const padding = paddingByImportance[importance] || "p-3 md:p-4";
+
+  // Determinamos las columnas y justificación basándose en la cantidad de items
+  const getGridClasses = (itemCount) => {
+    if (itemCount === 1) {
+      return "grid-cols-1 justify-items-center";
+    } else if (itemCount === 2) {
+      return "grid-cols-1 sm:grid-cols-2 justify-items-center";
+    } else if (itemCount === 3) {
+      return "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 justify-items-center";
+    } else {
+      return "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 place-items-center";
+    }
+  };
+
+  return (
+    <div
+      className={`
+        relative z-10 p-4 md:p-6
+        grid ${getGridClasses(items.length)}
+        gap-3 md:gap-4 lg:gap-5
+        ${items.length < 4 ? "max-w-4xl mx-auto" : ""}
+      `}
+    >
+      {items.map((sponsor) => (
+        <SponsorLogo
+          key={sponsor._id}
+          src={sponsor.logo.asset.url}
+          alt={sponsor.name}
+          url={sponsor.url || ""}
+          importance={importance} // Pasamos la importancia al componente
+          className={`group relative ${padding} 
+            bg-gradient-to-br from-[var(--primary-green)]/8 via-[var(--accent-yellow)]/5 to-[var(--primary-green)]/8
+            backdrop-blur-lg rounded-xl transition-all duration-500 hover:duration-300
+            hover:shadow-[0_0_40px_-10px_rgba(61,139,55,0.4)]
+            border-2 border-[var(--primary-green)]/20 hover:border-[var(--accent-yellow)]/40
+            transform-gpu hover:-translate-y-2 cursor-pointer w-full max-w-[200px]`}
+        />
+      ))}
+    </div>
+  );
+}
+
+function SponsorSection({ title, year, items, importance = "medium" }) {
+  const titleSizes = {
+    large: "text-4xl md:text-4xl",
+    medium: "text-3xl md:text-4xl",
+    small: "text-2xl md:text-3xl",
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="max-w-6xl mx-auto bg-gradient-to-br from-[var(--primary-green)]/15 via-[var(--accent-yellow)]/10 to-[var(--outline-red)]/15
+        backdrop-blur-md rounded-3xl border border-[var(--primary-green)]/30
+        shadow-[0_0_80px_-15px_rgba(61,139,55,0.35)] transition-shadow duration-500 relative"
+    >
+      {/* Fondos decorativos sutiles */}
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,225,65,0.15),transparent_70%)] rounded-3xl z-0" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(61,139,55,0.15),transparent_70%)] rounded-3xl z-0" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(242,57,57,0.08),transparent_60%)] rounded-3xl z-0" />
+
+      {/* Título de la sección */}
+      <div className="relative z-10 text-center mb-4 pt-6">
+        <h2
+          className={`font-bold text-[var(--text-white)] mb-2 ${titleSizes[importance]}`}
+        >
+          <span className="border-b-4 border-[var(--primary-green)] pb-2">
+            {title}
+          </span>
+        </h2>
+        <p className="text-text-white">{year}</p>
+      </div>
+
+      {/* Grid de logos con padding dinámico */}
+      <SponsorGrid items={items} importance={importance} />
+    </motion.div>
+  );
+}
+
+export default function SponsorList({ 
+  showSponsors = true, 
+  showOrganizers = true, 
+  showCommunities = true,
+  sponsors: sponsorsProp 
+}) {
   const [sponsors, setSponsors] = useState([]);
-  
+
   useEffect(() => {
-    setSponsors(sponsorsData);
-  }, []);
+    // Si se pasa sponsors como prop, úsalos, sino usa los datos por defecto
+    setSponsors(sponsorsProp || sponsorsData);
+  }, [sponsorsProp]);
+
+  // Filtrar según las props
+  const organizers = showOrganizers ? sponsors.filter((s) => s.type === "organizer") : [];
+  const sponsorsOnly = showSponsors ? sponsors.filter((s) => s.type === "sponsor") : [];
+  const communities = showCommunities ? sponsors.filter((s) => s.type === "community") : [];
 
-  const hasSponsors = sponsors.length > 0;
+  // Verificar si hay al menos una sección para mostrar
+  const hasAnySponsors = sponsorsOnly.length > 0 || organizers.length > 0 || communities.length > 0;
 
   return (
     <motion.section
@@ -20,46 +121,35 @@ export default function SponsorList() {
       viewport={{ once: true }}
       className="container-py relative"
     >
-      <div className="text-center mb-12">
-        <h2 className="text-3xl md:text-4xl font-bold text-[var(--text-white)] mb-4">
-          <span className="border-b-4 border-[var(--primary-green)] pb-2">
-            Patrocinadores
-          </span>
-        </h2>
-        <p className="text-text-white">2025</p>
-      </div>
+      {hasAnySponsors ? (
+        <div className="space-y-16">
+          {sponsorsOnly.length > 0 && (
+            <SponsorSection
+              title="Patrocinadores"
+              year="2025"
+              items={sponsorsOnly}
+              importance="large"
+            />
+          )}
 
-      {hasSponsors ? (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          className="max-w-6xl mx-auto bg-gradient-to-br from-[var(--primary-green)]/15 via-[var(--accent-yellow)]/10 to-[var(--outline-red)]/15
-            backdrop-blur-md rounded-3xl border border-[var(--primary-green)]/30
-            shadow-[0_0_80px_-15px_rgba(61,139,55,0.35)] hover:shadow-[0_0_100px_-20px_rgba(61,139,55,0.45)]
-            transition-shadow duration-500"
-        >
-          {/* Capas de luminosidad */}
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,225,65,0.15),transparent_70%)] rounded-3xl z-0" />
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(61,139,55,0.15),transparent_70%)] rounded-3xl z-0" />
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(242,57,57,0.08),transparent_60%)] rounded-3xl z-0" />
-
-          {/* Grid de sponsors */}
-          <div className="relative z-10 p-8 md:p-10 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 lg:gap-10">
-            {sponsors.map((sponsor) => (
-              <SponsorLogo
-                key={sponsor._id}
-                src={sponsor.logo.asset.url}
-                alt={sponsor.name}
-                url={sponsor.url || ""}
-                className="group relative p-4 md:p-6 bg-gradient-to-br from-[var(--primary-green)]/8 via-[var(--accent-yellow)]/5 to-[var(--primary-green)]/8
-                  backdrop-blur-lg rounded-2xl transition-all duration-500 hover:duration-300
-                  hover:shadow-[0_0_40px_-10px_rgba(61,139,55,0.4)]
-                  border-2 border-[var(--primary-green)]/20 hover:border-[var(--accent-yellow)]/40
-                  transform-gpu hover:-translate-y-2 cursor-pointer"
-              />
-            ))}
-          </div>
-        </motion.div>
+          {organizers.length > 0 && (
+            <SponsorSection
+              title="Organizadores"
+              year="2025"
+              items={organizers}
+              importance="medium"
+            />
+          )}
+
+          {communities.length > 0 && (
+            <SponsorSection
+              title="Comunidades Amigas"
+              year="2025"
+              items={communities}
+              importance="small"
+            />
+          )}
+        </div>
       ) : (
         <motion.div
           initial={{ opacity: 0, scale: 0.9 }}
@@ -74,4 +164,5 @@ export default function SponsorList() {
       )}
     </motion.section>
   );
-}
+}
+

src/app/sponsors/components/SponsorLogo.js

@@ -3,7 +3,16 @@ import { motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 
-export default function SponsorLogo({ src, alt, className, url }) {
+export default function SponsorLogo({ src, alt, className, url, importance = "medium" }) {
+  // Tamaños dinámicos basados en importancia
+  const imageSizes = {
+    large: { width: 220, height: 110 },   // Patrocinadores: más grandes
+    medium: { width: 180, height: 90 },   // Organizadores: tamaño medio
+    small: { width: 140, height: 70 },    // Comunidades: más pequeños
+  };
+
+  const { width, height } = imageSizes[importance] || imageSizes.medium;
+
   const content = (
     <motion.div
       className={className}
@@ -13,40 +22,40 @@ export default function SponsorLogo({ src, alt, className, url }) {
       {/* Hover: Efecto de resplandor */}
       <div
         className="absolute inset-0 bg-gradient-to-r from-[var(--primary-green)]/10 via-[var(--accent-yellow)]/15 to-[var(--primary-green)]/10
-        rounded-2xl opacity-0 group-hover:opacity-40 transition-opacity duration-300 z-0"
+        rounded-xl opacity-0 group-hover:opacity-40 transition-opacity duration-300 z-0"
       />
-
-      {/* Contenedor de imagen */}
-      <div className="relative z-10 p-2">
+      
+      {/* Contenedor de imagen - sin padding adicional */}
+      <div className="relative z-10 flex items-center justify-center h-full">
         <Image
           src={src}
           alt={alt}
-          width={160}
-          height={80}
-          className="mx-auto transform-gpu transition-all duration-500
+          width={width}
+          height={height}
+          className="transform-gpu transition-all duration-500
             filter drop-shadow-[0_2px_4px_rgba(0,0,0,0.2)]
             group-hover:scale-105 group-hover:drop-shadow-[0_4px_8px_rgba(0,0,0,0.25)]
-            group-hover:brightness-110"
+            group-hover:brightness-110 object-contain"
           style={{
             filter: "brightness(115%) contrast(105%)",
             maxWidth: "100%",
             height: "auto",
           }}
         />
       </div>
-
+      
       {/* Halo sutil alrededor del logo */}
       <div
         className="absolute inset-0 -z-10 opacity-0 group-hover:opacity-20 transition-all duration-300
         bg-[radial-gradient(circle_at_center,var(--accent-yellow),transparent_70%)]"
       />
-
+      
       {/* Efecto de partículas sutil */}
       <div
         className="absolute inset-0 opacity-10 group-hover:opacity-20
-          transition-opacity duration-500 pointer-events-none rounded-2xl z-0"
+          transition-opacity duration-500 pointer-events-none rounded-xl z-0"
       >
-        <div className="absolute w-full h-full mix-blend-overlay opacity-40 rounded-2xl" />
+        <div className="absolute w-full h-full mix-blend-overlay opacity-40 rounded-xl" />
       </div>
     </motion.div>
   );
@@ -58,6 +67,6 @@ export default function SponsorLogo({ src, alt, className, url }) {
       </Link>
     );
   }
-
+  
   return content;
-}
+}