62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
import { motion, useInView } from "framer-motion";
|
|
import { useRef } from "react";
|
|
import { Handshake } from "lucide-react";
|
|
import { useSponsors } from "@/contexts/SponsorsContext";
|
|
|
|
const SponsorsSection = () => {
|
|
const ref = useRef(null);
|
|
const inView = useInView(ref, { once: true, margin: "-100px" });
|
|
const { sponsors } = useSponsors();
|
|
|
|
return (
|
|
<section className="section-padding gradient-dark" ref={ref}>
|
|
<div className="container mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={inView ? { scale: 1 } : {}}
|
|
transition={{ duration: 0.5, type: "spring" }}
|
|
className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6"
|
|
>
|
|
<Handshake className="w-8 h-8 text-primary" />
|
|
</motion.div>
|
|
<h2 className="font-display text-4xl md:text-5xl font-bold tracking-wider text-dark-surface-foreground mb-4">
|
|
NOSSOS <span className="text-primary">PATROCINADORES</span>
|
|
</h2>
|
|
<div className="w-20 h-1 bg-primary mx-auto mb-6" />
|
|
</motion.div>
|
|
|
|
<div className={`grid gap-6 ${sponsors.length >= 4 ? 'sm:grid-cols-2 lg:grid-cols-4' : sponsors.length === 3 ? 'sm:grid-cols-2 lg:grid-cols-3 max-w-4xl mx-auto' : sponsors.length === 2 ? 'sm:grid-cols-2 max-w-2xl mx-auto' : 'max-w-sm mx-auto'}`}>
|
|
{sponsors.map((s, i) => (
|
|
<motion.a
|
|
key={s.id}
|
|
href={s.link || "#"}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.5, delay: i * 0.1 }}
|
|
className="bg-secondary/50 border border-border/10 rounded-xl p-6 text-center card-hover block group"
|
|
>
|
|
<div className="text-5xl mb-4 group-hover:scale-110 transition-transform duration-300">{s.logo}</div>
|
|
<h3 className="font-display text-lg font-semibold text-dark-surface-foreground mb-1">{s.name}</h3>
|
|
<p className="text-sm text-dark-surface-foreground/50">{s.description}</p>
|
|
</motion.a>
|
|
))}
|
|
</div>
|
|
|
|
{sponsors.length === 0 && (
|
|
<p className="text-center text-dark-surface-foreground/40 py-12">Nenhum patrocinador cadastrado.</p>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SponsorsSection;
|