Changes

2026-03-05 15:50:22 +00:00
parent b331aa1a7d
commit a11683b7dc
23 changed files with 2958 additions and 96 deletions
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -0,0 +1,109 @@
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+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) => {
+  const diff = new Date(target).getTime() - Date.now();
+  if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+  return {
+    days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+    hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
+    minutes: Math.floor((diff / (1000 * 60)) % 60),
+    seconds: Math.floor((diff / 1000) % 60),
+  };
+};
+
+const HeroSection = () => {
+  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: "Días" },
+    { value: timeLeft.hours, label: "Horas" },
+    { value: timeLeft.minutes, label: "Min" },
+    { value: timeLeft.seconds, label: "Seg" },
+  ];
+
+  return (
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
+      {/* Background image */}
+      <div
+        className="absolute inset-0 bg-cover bg-center"
+        style={{ backgroundImage: `url(${heroBg})` }}
+      />
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-gradient-to-b from-foreground/70 via-foreground/50 to-foreground/80" />
+
+      <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="text-primary font-body text-sm uppercase tracking-[0.3em] mb-4"
+        >
+          {EVENT_INFO.dateDisplay} · {EVENT_INFO.city}
+        </motion.p>
+
+        <motion.h1
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="font-display text-5xl md:text-7xl lg:text-8xl font-bold text-primary-foreground mb-4 leading-tight"
+        >
+          {EVENT_INFO.name}
+        </motion.h1>
+
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.6 }}
+          className="text-primary-foreground/80 font-body text-lg md:text-xl mb-10"
+        >
+          {EVENT_INFO.subtitle}
+        </motion.p>
+
+        {/* Countdown */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          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]">
+                <span className="text-2xl md:text-4xl font-display 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="#booking">Reservar Asiento</a>
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;