Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -1,19 +1,21 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import ReactLenis, { useLenis } from "lenis/react";
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import { Award, Leaf, LineChart } from "lucide-react";
 
 export default function LandingPage() {
+  const lenis = useLenis();
+
   return (
     <ThemeProvider
         defaultButtonVariant="hover-bubble"
@@ -29,20 +31,20 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleApple
+      <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",          id: "#home"},
+          name: "Home",          id: "home"},
         {
-          name: "About Us",          id: "#about"},
+          name: "About Us",          id: "about"},
         {
-          name: "Menu",          id: "#menu"},
+          name: "Menu",          id: "menu"},
         {
-          name: "Testimonials",          id: "#testimonials"},
+          name: "Testimonials",          id: "testimonials"},
         {
-          name: "FAQ",          id: "#faq"},
+          name: "FAQ",          id: "faq"},
         {
-          name: "Contact",          id: "#contact"},
+          name: "Contact",          id: "contact"},
       ]}
       brandName="Johnson's Restaurant"
     />
@@ -98,7 +100,8 @@ export default function LandingPage() {
       avatarText="Trusted by over 50,000 delighted guests worldwide"
       buttons={[
         {
-          text: "View Our Menu",          href: "#menu"},
+          text: "View Our Menu",          onClick: () => lenis?.scrollTo('#menu')
+        },
         {
           text: "Make a Reservation",          href: "#contact"},
       ]}
@@ -201,40 +204,25 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",          name: "Sarah J.",          role: "Regular Patron",          company: "Local Foodie",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/group-friends-dining-out_23-2149187189.jpg",          imageAlt: "Smiling woman"},
-        {
-          id: "t2",          name: "Michael Chen",          role: "Restaurant Critic",          company: "Gastronomy Guide",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businessman-dressed-suit_171337-133.jpg",          imageAlt: "Smiling man in a suit"},
-        {
-          id: "t3",          name: "Emily R.",          role: "Event Planner",          company: "Celebration Co.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-outdoor-portrait-spectacular-lovely-girl-with-bright-make-up-collected-hair-tshirt-is-sincerely-smiling-camera-city-background_291650-2381.jpg",          imageAlt: "Young woman laughing"},
-        {
-          id: "t4",          name: "David K.",          role: "Head Chef",          company: "Culinary Institute",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/crazy-chef-happy-expression_1194-1349.jpg",          imageAlt: "Chef in uniform"},
-        {
-          id: "t5",          name: "Jessica & Tom",          role: "Engaged Couple",          company: "Future Spouses",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517418.jpg",          imageAlt: "Smiling couple dining"},
-        {
-          id: "t6",          name: "Olivia M.",          role: "Food Blogger",          company: "Taste Adventures",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-eating-dish-poutine_23-2149486002.jpg",          imageAlt: "Female food blogger"},
+      <TestimonialCardFifteen
+      testimonial="Johnson's Restaurant consistently exceeds expectations with its exquisite menu and impeccable service. A true culinary gem!"
+      rating={5}
+      author="A Happy Customer"
+      avatars={[
+        { src: "http://img.b2bpic.net/free-photo/portrait-woman-playing-poker-casino_23-2151831098.jpg", alt: "Happy customer Sarah" },
+        { src: "http://img.b2bpic.net/free-photo/medium-shot-man-luxury-restaurant_23-2150598415.jpg", alt: "Satisfied diner Michael" },
+        { src: "http://img.b2bpic.net/free-photo/young-woman-taking-notes-outdoors-while-using-smartphone_23-2149342441.jpg", alt: "Food enthusiast David" }
       ]}
-      title="What Our Valued Guests Say"
-      description="Hear directly from our customers about their delightful dining experiences and why they keep coming back to Johnson's Restaurant."
+      ratingAnimation="slide-up"
+      avatarsAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={true}
+      <FaqSplitText
+      sideTitle="Your Questions, Answered."
+      sideDescription="Find quick answers to common inquiries about reservations, dining, and our services. If you need more assistance, don't hesitate to reach out."
       faqs={[
         {
           id: "q1",          title: "Do I need a reservation?",          content: "Reservations are highly recommended, especially on weekends and for larger parties, to ensure we can accommodate you. You can book online or call us directly."},
@@ -247,35 +235,59 @@ export default function LandingPage() {
         {
           id: "q5",          title: "Is Johnson's Restaurant child-friendly?",          content: "Yes, families are welcome! We offer high chairs and a children's menu. Please let us know if you require any special accommodations for your little ones."},
       ]}
-      title="Frequently Asked Questions"
-      description="Find quick answers to common inquiries about reservations, dining, and our services."
       faqsAnimation="slide-up"
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      tag="Reserve Your Table"
+      <ContactSplitForm
       title="Book Your Unforgettable Dining Experience"
       description="Contact us to make a reservation or inquire about private events. Our team is ready to assist you in planning your perfect visit."
-      inputPlaceholder="Enter your email for inquiries"
-      buttonText="Submit Inquiry"
-      termsText="By submitting, you agree to our Privacy Policy and Terms of Service."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Your Name", required: true },
+        { name: "email", type: "email", placeholder: "Your Email", required: true },
+        { name: "phone", type: "tel", placeholder: "Your Phone Number" }
+      ]}
+      textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
+      imageSrc="http://img.b2bpic.net/free-photo/side-view-restaurant-table-setting_23-2149495034.jpg"
+      imageAlt="Vintage restaurant table setting"
+      mediaAnimation="opacity"
+      mediaPosition="right"
+      buttonText="Send Message"
+      useInvertedBackground={false}
+      onSubmit={() => alert('Message sent!')} // Placeholder function
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6ie870"
-      logoAlt="Johnson's Restaurant Logo"
-      logoText="Johnson's Restaurant"
-      leftLink={{
-        text: "Privacy Policy",        href: "#"}}
-      rightLink={{
-        text: "Terms of Service",        href: "#"}}
+      <FooterSimple
+      columns={[
+        {
+          title: "About Us",          items: [
+            { label: "Our Story", href: "#about" },
+            { label: "Our Legacy", href: "#" },
+            { label: "Community", href: "#" }
+          ]
+        },
+        {
+          title: "Menu",          items: [
+            { label: "Appetizers", href: "#menu" },
+            { label: "Main Courses", href: "#menu" },
+            { label: "Desserts", href: "#menu" },
+            { label: "Beverages", href: "#menu" }
+          ]
+        },
+        {
+          title: "Contact",          items: [
+            { label: "Reservations", href: "#contact" },
+            { label: "Private Events", href: "#contact" },
+            { label: "Directions", href: "#" }
+          ]
+        }
+      ]}
+      bottomLeftText="© 2024 Johnson's Restaurant. All rights reserved."
+      bottomRightText="Privacy Policy · Terms of Service"
     />
   </div>
       </ReactLenis>

src/app/styles/base.css

@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-montserrat), sans-serif;
+  font-family: var(--font-libre-baskerville), serif;
 }