Ichitux/lambada-fiesta-live
1
0
Fork 0
mirror of https://github.com/Ichitux/lambada-fiesta-live.git synced 2026-09-27 23:42:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added multi-lingua, english-spanish. Timer conditions and Linting bugfixes.
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
src/components/HeroSection.tsx
+30 -15
View File
@@ -1,11 +1,12 @@
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { useTranslation } from "react-i18next";
import { EVENT_INFO } from "@/data/event-data";
import heroBg from "@/assets/hero-bg.jpg";
/** Calcula diferencia entre ahora y la fecha del evento */
const getTimeLeft = (target: string) => {
export const getTimeLeft = (target: string) => {
const diff = new Date(target).getTime() - Date.now();
if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 };
return {
@@ -17,6 +18,7 @@ const getTimeLeft = (target: string) => {
};
const HeroSection = () => {
const { t } = useTranslation();
const [timeLeft, setTimeLeft] = useState(getTimeLeft(EVENT_INFO.date));
useEffect(() => {
@@ -27,10 +29,10 @@ const HeroSection = () => {
}, []);
const countdownItems = [
{ value: timeLeft.days, label: "Días" },
{ value: timeLeft.hours, label: "Horas" },
{ value: timeLeft.minutes, label: "Min" },
{ value: timeLeft.seconds, label: "Seg" },
{ 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 (
@@ -53,7 +55,7 @@ const HeroSection = () => {
transition={{ delay: 0.2 }}
className="text-primary font-body text-sm uppercase tracking-[0.3em] mb-4"
>
{EVENT_INFO.dateDisplay} · {EVENT_INFO.city}
{t('hero.dates')} · {t('hero.location')}
</motion.p>
<motion.h1
@@ -62,7 +64,7 @@ const HeroSection = () => {
transition={{ delay: 0.4 }}
className="font-hero text-4xl md:text-7xl lg:text-8xl font-bold text-primary-foreground mb-4 leading-tight"
>
{EVENT_INFO.name}
{t('hero.title')}
</motion.h1>
<motion.p
@@ -71,7 +73,7 @@ const HeroSection = () => {
transition={{ delay: 0.6 }}
className="text-primary-foreground/80 font-body text-lg md:text-xl mb-10"
>
{EVENT_INFO.subtitle}
{t('hero.subtitle')}
</motion.p>
{/* Countdown */}
@@ -81,18 +83,31 @@ const HeroSection = () => {
transition={{ delay: 0.8 }}
className="flex justify-center gap-4 md:gap-8 mb-10"
>
{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]">
{timeLeft.days === 0 && timeLeft.hours === 0 && timeLeft.minutes === 0 && timeLeft.seconds === 0 ? (
<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]">
<span className="text-2xl md:text-4xl font-hero font-bold text-primary-foreground">
{String(item.value).padStart(2, "0")}
{t('hero.eventInProgress')}
</span>
</div>
<p className="text-primary-foreground/60 text-xs mt-2 uppercase tracking-wider">
{item.label}
{t('hero.dontMiss')}
</p>
</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
@@ -101,7 +116,7 @@ const HeroSection = () => {
transition={{ delay: 1 }}
>
<Button variant="hero" size="lg" className="text-lg px-10 py-6" asChild>
<a href="#booking">Reservar tu pase</a>
<a href="#booking">{t('hero.bookYourPass')}</a>
</Button>
</motion.div>
</div>