Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,20 +2,53 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState, useEffect, useRef } from "react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TeamCardSix from '@/components/sections/team/TeamCardSix';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import { Award, Shield } from "lucide-react";
-import { Award, Shield, Sparkles, Globe } from "lucide-react";
 
 export default function LandingPage() {
+  const [lang, setLang] = useState('en');
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('lang') || 'en';
+    if (saved !== lang) {
+      setLang(saved);
+    }
+    isInitialMount.current = false;
+  }, []);
+
+  useEffect(() => {
+    if (!isInitialMount.current) {
+      localStorage.setItem('lang', lang);
+    }
+  }, [lang]);
+
+  const toggleLang = () => {
+    setLang(prev => prev === 'en' ? 'es' : 'en');
+  };
+
+  const t = {
+    en: {
+      nav: ["Home", "About", "Menu", "Contact"],
+      hero: { title: "Exceptional Food, Craft Drinks, Unforgettable Moments", desc: "Paröle combines elevated pub cuisine with carefully curated beverages.", btn: "Reserve" },
+      contact: { title: "Book Your Experience", desc: "Secure your table today.", tag: "Contact Us", placeholder: "Enter your email", btn: "Sign Up", terms: "By clicking Sign Up you're confirming that you agree with our Terms and Conditions." },
+      footer: { copyright: "© 2025 Paröle Pub & Food. All rights reserved." }
+    },
+    es: {
+      nav: ["Inicio", "Sobre Nosotros", "Menú", "Contacto"],
+      hero: { title: "Cocina de Excepción, Bebidas Artesanales, Momentos Inolvidables", desc: "Paröle combina una cocina de pub refinada con bebidas cuidadosamente seleccionadas.", btn: "Reservar" },
+      contact: { title: "Reserve su Experiencia", desc: "Asegure su mesa hoy.", tag: "Contáctenos", placeholder: "Ingrese su correo", btn: "Registrarse", terms: "Al hacer clic en Registrarse, confirma que acepta nuestros Términos y Condiciones." },
+      footer: { copyright: "© 2025 Paröle Pub & Food. Todos los derechos reservados." }
+    }
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -30,146 +63,96 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+          <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        { name: "Home / Accueil", id: "hero" },
+              { name: t[lang as 'en' | 'es'].nav[0], id: "hero" },
-        { name: "About / À Propos", id: "about" },
+              { name: t[lang as 'en' | 'es'].nav[1], id: "about" },
-        { name: "Menu", id: "menu" },
+              { name: t[lang as 'en' | 'es'].nav[2], id: "menu" },
-        { name: "Contact", id: "contact" },
+              { name: t[lang as 'en' | 'es'].nav[3], id: "contact" },
-      ]}
+            ]}
-      brandName="Paröle"
+            brandName="Paröle"
-    />
+          />
-  </div>
+          <button onClick={toggleLang} className="fixed top-4 right-20 z-50 p-2 bg-white/10 backdrop-blur rounded-full text-xs font-bold">
+              {lang.toUpperCase()}
+          </button>
+        </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroSplitTestimonial
+          <HeroSplitTestimonial
-      background={{ variant: "gradient-bars" }}
+            background={{ variant: "gradient-bars" }}
-      title="Exceptional Food, Craft Drinks, Unforgettable Moments / Cuisine d'Exception, Boissons Artisanales, Moments Inoubliables"
+            title={t[lang as 'en' | 'es'].hero.title}
-      description="Paröle combines elevated pub cuisine with carefully curated beverages in a vibrant, welcoming space. / Paröle marie une cuisine de pub raffinée avec des boissons soigneusement sélectionnées dans un espace vibrant et accueillant."
+            description={t[lang as 'en' | 'es'].hero.desc}
-      testimonials={[
+            testimonials={[
-        { name: "Sarah J.", handle: "@sarahj", testimonial: "The best pub food I've had in years. / La meilleure cuisine de pub que j'ai eue depuis des années.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/high-angle-friends-having-lunch-restaurant_23-2150491780.jpg" },
+              { name: "Sarah J.", handle: "@sarahj", testimonial: lang === 'en' ? "The best pub food I've had in years." : "La mejor comida de pub que he tenido en años.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/high-angle-friends-having-lunch-restaurant_23-2150491780.jpg" },
-        { name: "David K.", handle: "@davidk", testimonial: "Excellent service and a fantastic selection. / Excellent service et une sélection fantastique.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/group-friends-having-lunch-together-restaurant_23-2150520106.jpg" },
+            ]}
-      ]}
+            buttons={[{ text: t[lang as 'en' | 'es'].hero.btn, href: "#contact" }]}
-      buttons={[{ text: "Reserve / Réserver", href: "#contact" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/delicious-italian-cocktail-with-realistic-background_23-2150062988.jpg?_wi=1"
-      imageSrc="http://img.b2bpic.net/free-photo/delicious-italian-cocktail-with-realistic-background_23-2150062988.jpg?_wi=1"
+            mediaAnimation="slide-up"
-      mediaAnimation="slide-up"
+          />
-    />
+        </div>
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <TestimonialAboutCard
+          <TestimonialAboutCard
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      tag="Our Story / Notre Histoire"
+            tag={lang === 'en' ? "Our Story" : "Nuestra Historia"}
-      title="A Welcoming Space for Everyone / Un espace accueillant pour tous"
+            title={lang === 'en' ? "A Welcoming Space for Everyone" : "Un Espacio Acogedor para Todos"}
-      description="Located in the heart of the city, Paröle is dedicated to creating a space where locals and visitors alike can enjoy elevated pub fare. / Situé en plein cœur de la ville, Paröle se consacre à créer un espace où locaux et visiteurs peuvent profiter d'une cuisine de pub raffinée."
+            description={lang === 'en' ? "Located in the heart of the city, Paröle is dedicated to creating a space for locals and visitors." : "Ubicado en el corazón de la ciudad, Paröle se dedica a crear un espacio para locales y visitantes."}
-      subdescription="From casual after-work drinks to corporate events, our doors are open. / Des verres après le travail aux événements d'entreprise, nos portes vous sont ouvertes."
+            subdescription={lang === 'en' ? "From casual drinks to events, our doors are open." : "Desde bebidas casuales hasta eventos, nuestras puertas están abiertas."}
-      icon={Shield}
+            icon={Shield}
-      imageSrc="http://img.b2bpic.net/free-photo/couple-having-date-night_53876-13928.jpg?_wi=1"
+            imageSrc="http://img.b2bpic.net/free-photo/couple-having-date-night_53876-13928.jpg?_wi=1"
-      mediaAnimation="blur-reveal"
+            mediaAnimation="blur-reveal"
-    />
+          />
-  </div>
+        </div>
 
-  <div id="menu" data-section="menu">
+        <div id="menu" data-section="menu">
-      <ProductCardTwo
+          <ProductCardTwo
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="split-description"
+            textboxLayout="split-description"
-      gridVariant="three-columns-all-equal-width"
+            gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
+            useInvertedBackground={true}
-      products={[
+            products={[
-        { id: "1", brand: "Starter / Entrée", name: "Artisan Charcuterie", price: "$18", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/half-shot-delicious-best-snack-wine-brown-tray-right-side-ice-background_140725-140410.jpg" },
+              { id: "1", brand: lang === 'en' ? "Starter" : "Entrante", name: "Artisan Charcuterie", price: "$18", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/half-shot-delicious-best-snack-wine-brown-tray-right-side-ice-background_140725-140410.jpg" },
-        { id: "2", brand: "Main / Plat", name: "Classic Paröle Burger", price: "$22", rating: 5, reviewCount: "340", imageSrc: "http://img.b2bpic.net/free-photo/medium-fried-pieces-meat-fried-onions_140725-3560.jpg" },
+            ]}
-      ]}
+            title={lang === 'en' ? "Menu Highlights" : "Destacados del Menú"}
-      title="Menu Highlights / Nos Incontournables"
+            description={lang === 'en' ? "Discover our signature dishes." : "Descubre nuestros platos estrella."}
-      description="Discover our signature dishes and curated drink selection. / Découvrez nos plats signatures et notre sélection de boissons."
+          />
-    />
+        </div>
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureBento
+          <FeatureBento
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="split"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      features={[
+            features={[
-        { title: "Events / Événements", description: "Custom catering and space. / Traiteur sur mesure et espace dédié.", bentoComponent: "reveal-icon", icon: Award },
+              { title: lang === 'en' ? "Events" : "Eventos", description: lang === 'en' ? "Custom catering." : "Catering personalizado.", bentoComponent: "reveal-icon", icon: Award },
-        { title: "Private Dining / Dîner Privé", description: "Intimate settings. / Cadre intime.", bentoComponent: "reveal-icon", icon: Shield },
+            ]}
-      ]}
+            title={lang === 'en' ? "Why Choose Paröle" : "Por qué elegir Paröle"}
-      title="Why Choose Paröle / Pourquoi choisir Paröle"
+            description={lang === 'en' ? "Experience the best." : "Experimenta lo mejor."}
-      description="Experience the best in pub dining. / Vivez le meilleur de la cuisine de pub."
+          />
-    />
+        </div>
-  </div>
 
-  <div id="metrics" data-section="metrics">
+        <div id="contact" data-section="contact">
-      <MetricCardSeven
+          <ContactSplit
-      animationType="depth-3d"
+            useInvertedBackground={true}
-      textboxLayout="default"
+            background={{ variant: "radial-gradient" }}
-      useInvertedBackground={true}
+            title={t[lang as 'en' | 'es'].contact.title}
-      metrics={[
+            description={t[lang as 'en' | 'es'].contact.desc}
-        { id: "1", value: "15k+", title: "Happy Guests / Clients Satisfaits", items: ["Diners served", "Great reviews"] },
+            tag={t[lang as 'en' | 'es'].contact.tag}
-      ]}
+            inputPlaceholder={t[lang as 'en' | 'es'].contact.placeholder}
-      title="Our Impact / Notre Impact"
+            buttonText={t[lang as 'en' | 'es'].contact.btn}
-      description="The numbers behind our great moments. / Les chiffres derrière nos grands moments."
+            termsText={t[lang as 'en' | 'es'].contact.terms}
-    />
+            imageSrc="http://img.b2bpic.net/free-photo/full-shot-teens-walking-together_23-2149241599.jpg"
-  </div>
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="team" data-section="team">
+        <div id="footer" data-section="footer">
-      <TeamCardSix
+          <FooterCard
-      animationType="slide-up"
+            logoText="Paröle Pub & Food"
-      textboxLayout="default"
+            copyrightText={t[lang as 'en' | 'es'].footer.copyright}
-      gridVariant="three-columns-all-equal-width"
+          />
-      useInvertedBackground={false}
+        </div>
-      members={[
-        { id: "1", name: "Alex Rivers", role: "Head Chef / Chef de cuisine", imageSrc: "http://img.b2bpic.net/free-photo/food-celebrating-world-tapas-day_23-2149361448.jpg" },
-      ]}
-      title="Meet the Team / Rencontrez l'équipe"
-      description="Our professionals are dedicated to your experience. / Nos professionnels se consacrent à votre expérience."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="split-description"
-      useInvertedBackground={true}
-      testimonials={[
-        { id: "1", title: "Great Experience / Excellente expérience", quote: "The food and drinks are top notch. / La nourriture et les boissons sont de premier ordre.", name: "Sarah Johnson", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-senior-with-delicious-food_23-2150854212.jpg" },
-      ]}
-      title="What Our Guests Say / Ce que disent nos clients"
-      description="Stories from our valued diners. / Histoires de nos précieux convives."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="split-description"
-      useInvertedBackground={false}
-      faqs={[
-        { id: "1", title: "Do I need a reservation? / Ai-je besoin d'une réservation ?", content: "We recommend reservations. / Nous recommandons de réserver." },
-        { id: "2", title: "Can I host a private event? / Puis-je organiser un événement privé ?", content: "Absolutely! / Absolument !" },
-      ]}
-      title="Frequently Asked Questions / Questions Fréquentes"
-      description="Everything you need to know. / Tout ce que vous devez savoir."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={true}
-      background={{ variant: "radial-gradient" }}
-      title="Book Your Experience / Réservez votre expérience"
-      description="Secure your table today. / Réservez votre table dès aujourd'hui."
-      tag="Contact Us / Contactez-nous"
-      imageSrc="http://img.b2bpic.net/free-photo/full-shot-teens-walking-together_23-2149241599.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Paröle Pub & Food"
-      copyrightText="© 2025 Paröle Pub & Food. All rights reserved / Tous droits réservés."
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );