Skip to content

Commit 0a1b591

Browse files
LiliGCLiliGC
committed
enhance: SponsorList with categorization for sponsors/organizers/communities
1 parent 2f986c4 commit 0a1b591

1 file changed

Lines changed: 136 additions & 45 deletions

File tree

‎src/app/sponsors/components/SponsorList.js‎

Lines changed: 136 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,115 @@ import { motion } from "framer-motion";
44
import SponsorLogo from "@/app/sponsors/components/SponsorLogo";
55
import sponsorsData from "@/data/sponsors";
66

7-
export default function SponsorList() {
7+
function SponsorGrid({ items, importance }) {
8+
// Reducimos significativamente el padding
9+
const paddingByImportance = {
10+
large: "p-3 md:p-4", // Patrocinadores: padding reducido
11+
medium: "p-2 md:p-3", // Organizadores: padding reducido
12+
small: "p-1 md:p-2", // Comunidades amigas: padding mínimo
13+
};
14+
15+
const padding = paddingByImportance[importance] || "p-3 md:p-4";
16+
17+
// Determinamos las columnas y justificación basándose en la cantidad de items
18+
const getGridClasses = (itemCount) => {
19+
if (itemCount === 1) {
20+
return "grid-cols-1 justify-items-center";
21+
} else if (itemCount === 2) {
22+
return "grid-cols-1 sm:grid-cols-2 justify-items-center";
23+
} else if (itemCount === 3) {
24+
return "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 justify-items-center";
25+
} else {
26+
return "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 place-items-center";
27+
}
28+
};
29+
30+
return (
31+
<div
32+
className={`
33+
relative z-10 p-4 md:p-6
34+
grid ${getGridClasses(items.length)}
35+
gap-3 md:gap-4 lg:gap-5
36+
${items.length < 4 ? "max-w-4xl mx-auto" : ""}
37+
`}
38+
>
39+
{items.map((sponsor) => (
40+
<SponsorLogo
41+
key={sponsor._id}
42+
src={sponsor.logo.asset.url}
43+
alt={sponsor.name}
44+
url={sponsor.url || ""}
45+
importance={importance} // Pasamos la importancia al componente
46+
className={`group relative ${padding}
47+
bg-gradient-to-br from-[var(--primary-green)]/8 via-[var(--accent-yellow)]/5 to-[var(--primary-green)]/8
48+
backdrop-blur-lg rounded-xl transition-all duration-500 hover:duration-300
49+
hover:shadow-[0_0_40px_-10px_rgba(61,139,55,0.4)]
50+
border-2 border-[var(--primary-green)]/20 hover:border-[var(--accent-yellow)]/40
51+
transform-gpu hover:-translate-y-2 cursor-pointer w-full max-w-[200px]`}
52+
/>
53+
))}
54+
</div>
55+
);
56+
}
57+
58+
function SponsorSection({ title, year, items, importance = "medium" }) {
59+
const titleSizes = {
60+
large: "text-4xl md:text-4xl",
61+
medium: "text-3xl md:text-4xl",
62+
small: "text-2xl md:text-3xl",
63+
};
64+
65+
return (
66+
<motion.div
67+
initial={{ opacity: 0 }}
68+
animate={{ opacity: 1 }}
69+
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
70+
backdrop-blur-md rounded-3xl border border-[var(--primary-green)]/30
71+
shadow-[0_0_80px_-15px_rgba(61,139,55,0.35)] transition-shadow duration-500 relative"
72+
>
73+
{/* Fondos decorativos sutiles */}
74+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,225,65,0.15),transparent_70%)] rounded-3xl z-0" />
75+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(61,139,55,0.15),transparent_70%)] rounded-3xl z-0" />
76+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(242,57,57,0.08),transparent_60%)] rounded-3xl z-0" />
77+
78+
{/* Título de la sección */}
79+
<div className="relative z-10 text-center mb-4 pt-6">
80+
<h2
81+
className={`font-bold text-[var(--text-white)] mb-2 ${titleSizes[importance]}`}
82+
>
83+
<span className="border-b-4 border-[var(--primary-green)] pb-2">
84+
{title}
85+
</span>
86+
</h2>
87+
<p className="text-text-white">{year}</p>
88+
</div>
89+
90+
{/* Grid de logos con padding dinámico */}
91+
<SponsorGrid items={items} importance={importance} />
92+
</motion.div>
93+
);
94+
}
95+
96+
export default function SponsorList({
97+
showSponsors = true,
98+
showOrganizers = true,
99+
showCommunities = true,
100+
sponsors: sponsorsProp
101+
}) {
8102
const [sponsors, setSponsors] = useState([]);
9-
103+
10104
useEffect(() => {
11-
setSponsors(sponsorsData);
12-
}, []);
105+
// Si se pasa sponsors como prop, úsalos, sino usa los datos por defecto
106+
setSponsors(sponsorsProp || sponsorsData);
107+
}, [sponsorsProp]);
108+
109+
// Filtrar según las props
110+
const organizers = showOrganizers ? sponsors.filter((s) => s.type === "organizer") : [];
111+
const sponsorsOnly = showSponsors ? sponsors.filter((s) => s.type === "sponsor") : [];
112+
const communities = showCommunities ? sponsors.filter((s) => s.type === "community") : [];
13113

14-
const hasSponsors = sponsors.length > 0;
114+
// Verificar si hay al menos una sección para mostrar
115+
const hasAnySponsors = sponsorsOnly.length > 0 || organizers.length > 0 || communities.length > 0;
15116

16117
return (
17118
<motion.section
@@ -20,46 +121,35 @@ export default function SponsorList() {
20121
viewport={{ once: true }}
21122
className="container-py relative"
22123
>
23-
<div className="text-center mb-12">
24-
<h2 className="text-3xl md:text-4xl font-bold text-[var(--text-white)] mb-4">
25-
<span className="border-b-4 border-[var(--primary-green)] pb-2">
26-
Patrocinadores
27-
</span>
28-
</h2>
29-
<p className="text-text-white">2025</p>
30-
</div>
124+
{hasAnySponsors ? (
125+
<div className="space-y-16">
126+
{sponsorsOnly.length > 0 && (
127+
<SponsorSection
128+
title="Patrocinadores"
129+
year="2025"
130+
items={sponsorsOnly}
131+
importance="large"
132+
/>
133+
)}
31134

32-
{hasSponsors ? (
33-
<motion.div
34-
initial={{ opacity: 0 }}
35-
animate={{ opacity: 1 }}
36-
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
37-
backdrop-blur-md rounded-3xl border border-[var(--primary-green)]/30
38-
shadow-[0_0_80px_-15px_rgba(61,139,55,0.35)] hover:shadow-[0_0_100px_-20px_rgba(61,139,55,0.45)]
39-
transition-shadow duration-500"
40-
>
41-
{/* Capas de luminosidad */}
42-
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,225,65,0.15),transparent_70%)] rounded-3xl z-0" />
43-
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(61,139,55,0.15),transparent_70%)] rounded-3xl z-0" />
44-
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(242,57,57,0.08),transparent_60%)] rounded-3xl z-0" />
45-
46-
{/* Grid de sponsors */}
47-
<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">
48-
{sponsors.map((sponsor) => (
49-
<SponsorLogo
50-
key={sponsor._id}
51-
src={sponsor.logo.asset.url}
52-
alt={sponsor.name}
53-
url={sponsor.url || ""}
54-
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
55-
backdrop-blur-lg rounded-2xl transition-all duration-500 hover:duration-300
56-
hover:shadow-[0_0_40px_-10px_rgba(61,139,55,0.4)]
57-
border-2 border-[var(--primary-green)]/20 hover:border-[var(--accent-yellow)]/40
58-
transform-gpu hover:-translate-y-2 cursor-pointer"
59-
/>
60-
))}
61-
</div>
62-
</motion.div>
135+
{organizers.length > 0 && (
136+
<SponsorSection
137+
title="Organizadores"
138+
year="2025"
139+
items={organizers}
140+
importance="medium"
141+
/>
142+
)}
143+
144+
{communities.length > 0 && (
145+
<SponsorSection
146+
title="Comunidades Amigas"
147+
year="2025"
148+
items={communities}
149+
importance="small"
150+
/>
151+
)}
152+
</div>
63153
) : (
64154
<motion.div
65155
initial={{ opacity: 0, scale: 0.9 }}
@@ -74,4 +164,5 @@ export default function SponsorList() {
74164
)}
75165
</motion.section>
76166
);
77-
}
167+
}
168+

0 commit comments

Comments
 (0)