mirror of
https://github.com/Ichitux/lambada-fiesta-live.git
synced 2026-09-27 23:02:20 +00:00
Event finished
This commit is contained in:
@@ -16,6 +16,8 @@ const FloatingButton = () => {
|
|||||||
return () => window.removeEventListener("scroll", onScroll);
|
return () => window.removeEventListener("scroll", onScroll);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const bookingEnabled = SECTIONS.booking || SECTIONS.mixed_booking;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{visible && (
|
{visible && (
|
||||||
@@ -25,6 +27,7 @@ const FloatingButton = () => {
|
|||||||
exit={{ opacity: 0, y: 20 }}
|
exit={{ opacity: 0, y: 20 }}
|
||||||
className="fixed bottom-6 right-6 z-50 flex flex-col gap-2"
|
className="fixed bottom-6 right-6 z-50 flex flex-col gap-2"
|
||||||
>
|
>
|
||||||
|
{bookingEnabled && (
|
||||||
<Button
|
<Button
|
||||||
variant="hero"
|
variant="hero"
|
||||||
size="lg"
|
size="lg"
|
||||||
@@ -48,6 +51,7 @@ const FloatingButton = () => {
|
|||||||
{t("nav.booking")}
|
{t("nav.booking")}
|
||||||
</a>
|
</a>
|
||||||
</Button>
|
</Button>
|
||||||
|
)}
|
||||||
<button
|
<button
|
||||||
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||||
className="self-center bg-gray-500 text-white p-2 rounded-full hover:bg-gray-600 transition-colors shadow"
|
className="self-center bg-gray-500 text-white p-2 rounded-full hover:bg-gray-600 transition-colors shadow"
|
||||||
|
|||||||
@@ -1,8 +1,5 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { EVENT_INFO, SECTIONS } from "@/data/event-data";
|
|
||||||
import heroBg from "@/assets/hero-bg.jpg";
|
import heroBg from "@/assets/hero-bg.jpg";
|
||||||
|
|
||||||
/** Calcula diferencia entre ahora y la fecha del evento */
|
/** Calcula diferencia entre ahora y la fecha del evento */
|
||||||
@@ -19,21 +16,6 @@ export const getTimeLeft = (target: string) => {
|
|||||||
|
|
||||||
const HeroSection = () => {
|
const HeroSection = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [timeLeft, setTimeLeft] = useState(getTimeLeft(EVENT_INFO.date));
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
setTimeLeft(getTimeLeft(EVENT_INFO.date));
|
|
||||||
}, 1000);
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const countdownItems = [
|
|
||||||
{ value: timeLeft.days, label: t('hero.days') },
|
|
||||||
{ value: timeLeft.hours, label: t('hero.hours') },
|
|
||||||
{ value: timeLeft.minutes, label: t('hero.minutes') },
|
|
||||||
{ value: timeLeft.seconds, label: t('hero.seconds') },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
@@ -76,48 +58,23 @@ const HeroSection = () => {
|
|||||||
{t('hero.subtitle')}
|
{t('hero.subtitle')}
|
||||||
</motion.p>
|
</motion.p>
|
||||||
|
|
||||||
{/* Countdown */}
|
{/* Event finished banner — countdown and program links disabled */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, scale: 0.9 }}
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
transition={{ delay: 0.8 }}
|
transition={{ delay: 0.8 }}
|
||||||
className="flex justify-center gap-4 md:gap-8 mb-10"
|
className="flex justify-center mb-10"
|
||||||
>
|
>
|
||||||
{timeLeft.days === 0 && timeLeft.hours === 0 && timeLeft.minutes === 0 && timeLeft.seconds === 0 ? (
|
<div className="text-center">
|
||||||
<div className="text-center">
|
<div className="bg-primary-foreground/10 backdrop-blur-sm border border-primary-foreground/20 rounded-lg px-6 py-4 min-w-[180px]">
|
||||||
<div className="bg-primary-foreground/10 backdrop-blur-sm border border-primary-foreground/20 rounded-lg px-6 py-4 min-w-[180px]">
|
<span className="block text-2xl md:text-4xl font-hero font-bold text-primary-foreground">
|
||||||
<span className="text-2xl md:text-4xl font-hero font-bold text-primary-foreground">
|
{t('hero.eventFinished')}
|
||||||
{t('hero.eventInProgress')}
|
</span>
|
||||||
</span>
|
<span className="block mt-2 text-base md:text-lg font-body text-primary-foreground/90">
|
||||||
</div>
|
{t('hero.thankYou')}
|
||||||
<p className="text-primary-foreground/60 text-xs mt-2 uppercase tracking-wider">
|
</span>
|
||||||
{t('hero.dontMiss')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
</div>
|
||||||
countdownItems.map((item) => (
|
|
||||||
<div key={item.label} className="text-center">
|
|
||||||
<div className="bg-primary-foreground/10 backdrop-blur-sm border border-primary-foreground/20 rounded-lg px-4 py-3 md:px-6 md:py-4 min-w-[60px] md:min-w-[80px]">
|
|
||||||
<span className="text-2xl md:text-4xl font-hero font-bold text-primary-foreground">
|
|
||||||
{String(item.value).padStart(2, "0")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-primary-foreground/60 text-xs mt-2 uppercase tracking-wider">
|
|
||||||
{item.label}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 1 }}
|
|
||||||
>
|
|
||||||
<Button variant="hero" size="lg" className="text-lg px-10 py-6" asChild>
|
|
||||||
<a href={SECTIONS.schedule ? "#schedule" : "#schedule"}>{t('hero.viewSchedule')}</a>
|
|
||||||
</Button>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -506,9 +506,9 @@ export const SECTIONS = {
|
|||||||
org: true,
|
org: true,
|
||||||
staff: true,
|
staff: true,
|
||||||
profesores: true,
|
profesores: true,
|
||||||
schedule: true,
|
schedule: false,
|
||||||
booking: false,
|
booking: false,
|
||||||
mixed_booking: true,
|
mixed_booking: false,
|
||||||
hotel: false,
|
hotel: false,
|
||||||
practical: true,
|
practical: true,
|
||||||
gallery: true,
|
gallery: true,
|
||||||
|
|||||||
@@ -22,6 +22,8 @@
|
|||||||
"seconds": "Sec",
|
"seconds": "Sec",
|
||||||
"eventInProgress": "EVENT IN PROGRESS",
|
"eventInProgress": "EVENT IN PROGRESS",
|
||||||
"dontMiss": "Don't miss it!",
|
"dontMiss": "Don't miss it!",
|
||||||
|
"eventFinished": "Event finished",
|
||||||
|
"thankYou": "Thank you for participating, until next year!",
|
||||||
"bookYourPass": "Book Your Pass",
|
"bookYourPass": "Book Your Pass",
|
||||||
"viewSchedule": "View Schedule"
|
"viewSchedule": "View Schedule"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -22,6 +22,8 @@
|
|||||||
"seconds": "Seg",
|
"seconds": "Seg",
|
||||||
"eventInProgress": "EVENTO EN CURSO",
|
"eventInProgress": "EVENTO EN CURSO",
|
||||||
"dontMiss": "¡No te lo pierdas!",
|
"dontMiss": "¡No te lo pierdas!",
|
||||||
|
"eventFinished": "Evento finalizado",
|
||||||
|
"thankYou": "¡Gracias por participar, hasta el año que viene!",
|
||||||
"bookYourPass": "Reservar tu pase",
|
"bookYourPass": "Reservar tu pase",
|
||||||
"viewSchedule": "Ver Programa"
|
"viewSchedule": "Ver Programa"
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user