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

Adding animations

Browse Source
This commit is contained in:
Antoni Nuñez Romeu
2026-03-19 16:48:42 +01:00
parent 3f0618829f
commit 3c1ae1643b
10 changed files with 41 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AboutSection.tsx
View File

@@ -13,7 +13,7 @@ const AboutSection = () => (
<motion.div
initial={{ opacity: 0, x: -40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
transition={{ duration: 0.6 }}
>
<img
@@ -27,7 +27,7 @@ const AboutSection = () => (
<motion.div
initial={{ opacity: 0, x: 40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
transition={{ duration: 0.6 }}
>
<h2 className="font-display text-4xl md:text-5xl font-bold mb-6 text-gradient">

4
src/components/BookingSection.tsx
View File

@@ -173,7 +173,7 @@ const BookingSection = () => {
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
className="text-center mb-10"
>
<h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
@@ -187,7 +187,7 @@ const BookingSection = () => {
<motion.form
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
onSubmit={handleSubmit}
className="bg-card rounded-2xl p-6 md:p-10 shadow-elevated space-y-5"
>

11
src/components/FooterSection.tsx
View File

@@ -2,9 +2,16 @@ import { ABOUT_ORG, FOOTER } from "@/data/event-data";
import { Instagram, Facebook, Youtube, Mail } from "lucide-react";
import hacecalor from "@/assets/hacecalor.png";
import activat from "@/assets/activat.png";
import { motion } from "framer-motion";
const FooterSection = () => (
<footer className="bg-foreground text-primary-foreground">
<motion.footer
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: false, amount: 0.15 }}
transition={{ duration: 0.6 }}
className="bg-foreground text-primary-foreground"
>
<div className="container mx-auto px-4 py-12">
<div className="grid md:grid-cols-3 gap-8 mb-8">
{/* Brand */}
@@ -58,7 +65,7 @@ const FooterSection = () => (
<p className="text-sm text-primary-foreground/50">{FOOTER.copyright}</p>
</div>
</div>
</footer>
</motion.footer>
);
export default FooterSection;

4
src/components/GallerySection.tsx
View File

@@ -8,7 +8,7 @@ const GallerySection = () => (
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
className="text-center mb-12"
>
<h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
@@ -22,7 +22,7 @@ const GallerySection = () => (
key={i}
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
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"
>

4
src/components/HotelSection.tsx
View File

@@ -9,7 +9,7 @@ const HotelSection = () => (
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
className="text-center mb-12"
>
<h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
@@ -26,7 +26,7 @@ const HotelSection = () => (
key={room.id}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
transition={{ delay: i * 0.1 }}
className="bg-background rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow"
>

4
src/components/OrgSection.tsx
View File

@@ -16,7 +16,7 @@ const OrgSection = () => (
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
transition={{ duration: 0.6 }}
>
<h2 className="font-display text-4xl md:text-5xl font-bold mb-6 text-gradient">
@@ -69,7 +69,7 @@ const OrgSection = () => (
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
transition={{ duration: 0.6, delay: 0.2 }}
>
<img

6
src/components/PracticalSection.tsx
View File

@@ -8,7 +8,7 @@ const PracticalSection = () => (
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
className="text-center mb-12"
>
<h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
@@ -21,7 +21,7 @@ const PracticalSection = () => (
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
>
<div className="rounded-2xl overflow-hidden shadow-card mb-4 aspect-video">
<iframe
@@ -48,7 +48,7 @@ const PracticalSection = () => (
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
className="space-y-8"
>
{/* Aeropuertos */}

4
src/components/ScheduleSection.tsx
View File

@@ -22,7 +22,7 @@ const ScheduleSection = () => (
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
className="text-center mb-12"
>
<h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
@@ -39,7 +39,7 @@ const ScheduleSection = () => (
key={day.day}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
transition={{ delay: di * 0.15 }}
>
<h3 className="font-display text-xl font-bold text-foreground mb-6 pb-3 border-b-2 border-primary">

4
src/components/StaffSection.tsx
View File

@@ -32,7 +32,7 @@ const StaffSection = () => {
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
className="flex items-end justify-between gap-4 mb-6 md:mb-8"
>
<div className="text-center md:text-left w-full">
@@ -78,7 +78,7 @@ const StaffSection = () => {
key={member.id}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
viewport={{ once: false, amount: 0.15 }}
transition={{ delay: i * 0.05 }}
data-staff-card
className="snap-start shrink-0 w-4/5 sm:w-1/2 lg:w-1/3 xl:w-1/4 bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"