Merge version_8 into main

Merge version_8 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import SplitAbout from '@/components/sections/about/SplitAbout';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import { Star, Trophy, Tv, ChefHat, Gamepad2 } from "lucide-react";
 
 export default function LandingPage() {
@@ -29,193 +29,108 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "About", id: "about" },
-        {
+        { name: "Features", id: "bar-food" },
-          name: "Bar & Food",          id: "bar-food"},
+        { name: "Pricing", id: "bookings" }
-        {
-          name: "Gaming",          id: "gaming"},
-        {
-          name: "Bookings",          id: "bookings"},
       ]}
       brandName="N13 Sports Bar"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroOverlay
+      <HeroCarouselLogo
-      title="North London's Home for Snooker, Gaming & Live Sports"
+      logoText="N13 Sports Bar"
       description="Experience premium snooker tables, competitive PS5 gaming, and authentic Albanian eats at our vibrant N13 5TT bar. Join us for live action on every screen."
-      buttons={[
+      buttons={[{ text: "Check Availability", href: "#bookings" }]}
-        {
+      slides={[
-          text: "Book Your Session",          href: "#bookings"},
+          { imageSrc: "http://img.b2bpic.net/free-photo/empty-inspiring-library-interior-with-heritage-design-peaceful-lighting_482257-125436.jpg" },
+          { imageSrc: "http://img.b2bpic.net/free-photo/man-standing-with-arms-crossed-bar_107420-65502.jpg" }
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/empty-inspiring-library-interior-with-heritage-design-peaceful-lighting_482257-125436.jpg"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/man-standing-with-arms-crossed-bar_107420-65502.jpg",          alt: "Man standing with arms crossed in bar"},
-        {
-          src: "http://img.b2bpic.net/free-photo/people-enjoying-their-time-dj-party_23-2149658377.jpg",          alt: "People enjoying their time at a dj party"},
-        {
-          src: "http://img.b2bpic.net/free-photo/wooden-bar-table-with-bar-chairs-cafe_181624-60461.jpg",          alt: "Wooden bar table with bar chairs in a cafe"},
-        {
-          src: "http://img.b2bpic.net/free-photo/side-view-drunk-friends-bar_171337-19364.jpg",          alt: "Side view of Drunk friends on bar"},
-        {
-          src: "http://img.b2bpic.net/free-photo/pub-interior-with-motorcycle-installation_1262-3608.jpg",          alt: "Pub Interior With Motorcycle Installation"},
-      ]}
-      avatarText="Join 500+ locals every week"
     />
   </div>
 
   <div id="about" data-section="about">
-      <AboutMetric
+      <SplitAbout
+      textboxLayout="default"
       useInvertedBackground={false}
       title="The Ultimate Local Hangout"
-      metrics={[
+      description="We pride ourselves on being the heart of N13, offering a unique blend of competitive gaming and relaxing social spaces."
-        {
+      bulletPoints={[
-          icon: Trophy,
+        { title: "Professional Snooker", description: "Top-tier tables for all levels." },
-          label: "Pool & Snooker Tables",          value: "8"},
+        { title: "Next-Gen Gaming", description: "Competitive PS5 stations." },
-        {
+        { title: "Live Sports", description: "Coverage of every major match." }
-          icon: Star,
-          label: "PS5 Gaming Stations",          value: "5"},
-        {
-          icon: Tv,
-          label: "Live Sports Screens",          value: "12"},
       ]}
-      metricsAnimation="slide-up"
+      imageSrc="http://img.b2bpic.net/free-photo/wooden-bar-table-with-bar-chairs-cafe_181624-60461.jpg"
     />
   </div>
 
   <div id="bar-food" data-section="bar-food">
-      <FeatureCardTen
+      <FeatureCardTwentyFive
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={true}
-      features={[
-        {
-          title: "Traditional Bites",          description: "Hand-crafted appetizers with authentic ingredients.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/wooden-board-delicious-toast-with-meat-vegetables_114579-86383.jpg"},
-          items: [
-            {
-              icon: ChefHat,
-              text: "Authentic Recipes"},
-          ],
-          reverse: false,
-        },
-      ]}
       title="Authentic Flavors"
-      description="Indulge in our unique Albanian-style menu designed to fuel your sessions. From savory appetizers to hearty shared plates, your perfect bar meal awaits."
+      description="Indulge in our unique Albanian-style menu designed to fuel your sessions."
+      features={[
+        { title: "Traditional Bites", description: "Hand-crafted appetizers with authentic ingredients.", icon: ChefHat, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/wooden-board-delicious-toast-with-meat-vegetables_114579-86383.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/wooden-board-delicious-toast-with-meat-vegetables_114579-86383.jpg?_wi=2" }] }
+      ]}
     />
   </div>
 
   <div id="gaming" data-section="gaming">
-      <FeatureCardTen
+      <FeatureCardTwentyFive
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
-      features={[
-        {
-          title: "Play Like a Pro",          description: "High-fidelity gaming experience in a private setup.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172444.jpg"},
-          items: [
-            {
-              icon: Gamepad2,
-              text: "Next-Gen Consoles"},
-          ],
-          reverse: true,
-        },
-      ]}
       title="Pro-Level Gaming Room"
-      description="Our back room hosts 5 state-of-the-art PS5 stations. Perfect for groups up to 5—challenge your friends to the latest titles in absolute comfort."
+      description="Our back room hosts 5 state-of-the-art PS5 stations."
+      features={[
+        { title: "Play Like a Pro", description: "High-fidelity gaming experience in a private setup.", icon: Gamepad2, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172444.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172444.jpg?_wi=2" }] }
+      ]}
     />
   </div>
 
   <div id="bookings" data-section="bookings">
-      <PricingCardThree
+      <PricingCardFive
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      plans={[
-        {
-          id: "p1",          price: "£10/hr",          name: "Pool Table",          features: [
-            "Full set included",            "Spacious area"],
-          buttons: [
-            {
-              text: "Book Now",              href: "#contact"},
-          ],
-        },
-        {
-          id: "p2",          price: "£12/hr",          name: "Snooker Table",          features: [
-            "Tournament quality",            "Perfect lighting"],
-          buttons: [
-            {
-              text: "Book Now",              href: "#contact"},
-          ],
-        },
-        {
-          id: "p3",          price: "£15/hr",          name: "PS5 Gaming",          features: [
-            "Group up to 5",            "All games included"],
-          buttons: [
-            {
-              text: "Book Now",              href: "#contact"},
-          ],
-        },
-      ]}
       title="Secure Your Table"
-      description="Book your slots in advance and avoid the queue. Perfect for casual matches or serious tournament nights."
+      description="Book your slots in advance and avoid the queue."
+      plans={[
+        { id: "p1", tag: "Casual", price: "£10", period: "/hr", description: "Pool table access", button: { text: "Book Now" }, featuresTitle: "Features", features: ["Full set included", "Spacious area"] },
+        { id: "p2", tag: "Pro", price: "£12", period: "/hr", description: "Snooker match play", button: { text: "Book Now" }, featuresTitle: "Features", features: ["Tournament quality", "Perfect lighting"] },
+        { id: "p3", tag: "Gaming", price: "£15", period: "/hr", description: "PS5 full station", button: { text: "Book Now" }, featuresTitle: "Features", features: ["Group up to 5", "All games included"] }
+      ]}
     />
   </div>
 
   <div id="sports" data-section="sports">
-      <MetricCardSeven
+      <MetricCardThree
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
+      title="Live Coverage"
+      description="We keep the action going 24/7 with massive screen coverage."
       metrics={[
-        {
+        { id: "m1", icon: Tv, title: "Active Screens", value: "12" },
-          id: "m1",          title: "Live Coverage",          value: "24/7",          items: [
+        { id: "m2", icon: Trophy, title: "Weekly Matches", value: "50+" }
-            "Premier League",            "UCL",            "Cricket",            "Tennis"],
-        },
       ]}
-      title="Never Miss a Moment"
-      description="With 12 large-screen TVs covering every major match, we are the community destination for Premier League, Champions League, and more."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+      <TestimonialCardFive
-      animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",          name: "John D.",          role: "Regular",          company: "N13 Local",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/headshot-pleased-cheerful-african-american-woman-touches-cheeks-closes-eyes-enjoys-pleasant-moment-wears-yellow-raincoat-isolated-blue-background_273609-33937.jpg"},
-        {
-          id: "2",          name: "Sarah K.",          role: "Gamer",          company: "Gaming Fan",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/shorthaired-girl-with-pink-sunglasses-smiling-striped-backgroundteen-with-brunette-hair-grey-tshirt-beige-jacket-posing-cafe_197531-29487.jpg"},
-        {
-          id: "3",          name: "Mike B.",          role: "Sports Fan",          company: "Football Lover",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-joyful-african-student-woman-with-dark-wavy-hair-green-cardigan-sitting-cafe-drinking-cup-coffee-smiling-camera-woman-waiting-her-boyfriend-after-university_176420-12329.jpg"},
-        {
-          id: "4",          name: "Emily P.",          role: "Regular",          company: "N13 Local",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-playing-videogame_23-2149349990.jpg"},
-        {
-          id: "5",          name: "Chris T.",          role: "Snooker Player",          company: "Tournament Pro",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-football-player-holding-ball-looking-camera_23-2148203670.jpg"},
-      ]}
-      kpiItems={[
-        {
-          value: "4.9",          label: "5-Star Google Rating"},
-        {
-          value: "500+",          label: "Weekly Regulars"},
-        {
-          value: "10k+",          label: "Games Hosted"},
-      ]}
       title="Community Favorites"
-      description="Hear what our regulars have to say about the vibe, the food, and the games."
+      description="Hear what our regulars have to say about the vibe."
+      testimonials={[
+        { id: "1", name: "John D.", date: "Oct 2024", title: "Local Favorite", quote: "Best spot for snooker in N13", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/headshot-pleased-cheerful-african-american-woman-touches-cheeks-closes-eyes-enjoys-pleasant-moment-wears-yellow-raincoat-isolated-blue-background_273609-33937.jpg" }
+      ]}
     />
   </div>
 
@@ -223,33 +138,22 @@ export default function LandingPage() {
       <ContactSplitForm
       useInvertedBackground={false}
       title="Get in Touch"
-      description="Ready to play? Send us a message for table bookings, special event inquiries, or food catering options."
+      description="Send us a message for table bookings or special inquiries."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Name", required: true },
-          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
+        { name: "email", type: "email", placeholder: "Email", required: true }
-        },
-        {
-          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
-        },
-        {
-          name: "subject",          type: "text",          placeholder: "Booking/Event Date"},
       ]}
-      textarea={{
-        name: "message",        placeholder: "Details (number of people, table/gaming choice...)"}}
       imageSrc="http://img.b2bpic.net/free-photo/view-luxurious-hotel-interior-space_23-2150683401.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterCard
       logoText="N13 Sports Bar"
-      leftLink={{
+      copyrightText="© 2025 N13 Bar & Grill"
-        text: "Privacy Policy",        href: "#"}}
-      rightLink={{
-        text: "© 2024 N13 Bar & Grill",        href: "#"}}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #000802;
-  --card: #f9f9f9;
+  --card: #0b1a0b;
-  --foreground: #000f06e6;
+  --foreground: #e6ffe6;
-  --primary-cta: #0a7039;
+  --primary-cta: #80da9b;
-  --primary-cta-text: #ffffff;
+  --primary-cta-text: #000802;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #07170b;
-  --secondary-cta-text: #000f06e6;
+  --secondary-cta-text: #e6ffe6;
-  --accent: #e2e2e2;
+  --accent: #38714a;
-  --background-accent: #c4c4c4;
+  --background-accent: #2c6541;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);