Ichitux/lambada-fiesta-live
1
0
Fork 0
mirror of https://github.com/Ichitux/lambada-fiesta-live.git synced 2026-05-15 16:32:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added multi-lingua, english-spanish. Timer conditions and Linting bugfixes.
All checks were successful
Deploy NPM app / Deploy NPM (push) Successful in 29s
Details

Browse Source
This commit is contained in:
Antoni Nuñez Romeu
2026-03-27 16:23:06 +01:00
parent 5b663be89f
commit 935921f698
22 changed files with 1220 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/GallerySection.tsx
View File

@@ -1,53 +1,58 @@
import { motion } from "framer-motion";
import { GALLERY_IMAGES } from "@/data/event-data";
import { ImageIcon } from "lucide-react";
import { useTranslation } from "react-i18next";
const GallerySection = () => (
<section
id="gallery"
className="section-padding bg-card relative z-20 -mt-[40px] pt-[120px]"
style={{ borderRadius: "0 100% 0 0 / 0 100px 0 0" }}
>
<div className="container mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: false, amount: 0.15 }}
className="text-center mb-12"
>
<h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
Galería
</h2>
</motion.div>
const GallerySection = () => {
const { t } = useTranslation();
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-5xl mx-auto">
{GALLERY_IMAGES.map((img, i) => (
<motion.div
key={i}
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: false, amount: 0.15 }}
transition={{ delay: i * 0.08 }}
className="aspect-square rounded-xl overflow-hidden bg-muted flex items-center justify-center"
>
{img.src ? (
<img
src={img.src}
alt={img.alt}
className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
loading="lazy"
/>
) : (
<div className="text-center text-muted-foreground/40">
<ImageIcon className="w-10 h-10 mx-auto mb-2" />
<p className="text-xs">{img.alt}</p>
</div>
)}
</motion.div>
))}
return (
<section
id="gallery"
className="section-padding bg-card relative z-20 -mt-[40px] pt-[120px]"
style={{ borderRadius: "0 100% 0 0 / 0 100px 0 0" }}
>
<div className="container mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: false, amount: 0.15 }}
className="text-center mb-12"
>
<h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
{t("gallery.title")}
</h2>
</motion.div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-5xl mx-auto">
{GALLERY_IMAGES.map((img, i) => (
<motion.div
key={i}
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: false, amount: 0.15 }}
transition={{ delay: i * 0.08 }}
className="aspect-square rounded-xl overflow-hidden bg-muted flex items-center justify-center"
>
{img.src ? (
<img
src={img.src}
alt={img.alt}
className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
loading="lazy"
/>
) : (
<div className="text-center text-muted-foreground/40">
<ImageIcon className="w-10 h-10 mx-auto mb-2" />
<p className="text-xs">{img.alt}</p>
</div>
)}
</motion.div>
))}
</div>
</div>
</div>
</section>
);
</section>
);
};
export default GallerySection;