Update src/app/shop/page.tsx

Merge version_3 into main

src/app/cart/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import ProductCartItem from '@/components/ecommerce/cart/ProductCartItem';
+
+export default function CartPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Shop", id: "/shop" },
+    { name: "Cart", id: "/cart" },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="largeSizeMediumTitles"
+        background="floatingGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={navItems}
+            brandName="Joli Café Bar"
+          />
+        </div>
+        <div className="pt-32 pb-20 px-8 max-w-4xl mx-auto">
+          <h1 className="text-4xl font-bold mb-8">Your Cart</h1>
+          <div className="space-y-4">
+            <ProductCartItem 
+              item={{ id: "p1", name: "Signature Roast", price: "$24", quantity: 1, imageSrc: "http://img.b2bpic.net/coffee-beans_23-2148782354.jpg" }}
+            />
+          </div>
+          <div className="mt-8 pt-8 border-t">
+            <button className="bg-primary text-white px-8 py-3 rounded-full">Proceed to Checkout</button>
+          </div>
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Joli Café Bar"
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Shop", href: "/shop" }] }]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="largeSizeMediumTitles"
+        background="floatingGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
+    >
+      <NavbarStyleApple
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Shop", id: "/shop" },
+          { name: "Cart", id: "/cart" },
+        ]}
+        brandName="Joli Café Bar"
+      />
+      <div className="pt-32 pb-16">
+        <ContactSplitForm
+          title="Checkout"
+          description="Enter your shipping and payment details to complete your order."
+          inputs={[
+            { name: "shippingAddress", type: "text", placeholder: "Shipping Address", required: true },
+            { name: "paymentInfo", type: "text", placeholder: "Card Details", required: true }
+          ]}
+          buttonText="Complete Purchase"
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import TextAbout from '@/components/sections/about/TextAbout';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 
 export default function LandingPage() {
   return (
@@ -28,284 +28,131 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Menu",
-          id: "menu",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Menu", id: "menu" },
+        { name: "Contact", id: "contact" },
+        { name: "Shop", id: "/shop" },
+        { name: "Cart", id: "/cart" },
       ]}
-      brandName="NaMi Sushi-Asia"
+      brandName="Joli Café Bar"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroCentered
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Authentic Flavors, Modern Elegance"
-      description="Experience the finest fusion of tradition and innovation at NaMi Sushi-Asia. Join us for a culinary journey."
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/american-diner-aesthetics_23-2151854444.jpg",
-          alt: "Diner",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-young-woman-with-long-blonde-hair-holding-delicious-chocolate-muffin-hand_23-2147974685.jpg",
-          alt: "Diner",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-cup_23-2149005414.jpg",
-          alt: "Diner",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/couple-having-dinner-restaurant_23-2148018774.jpg",
-          alt: "Diner",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/group-friends-eating-restaurant_23-2148395390.jpg",
-          alt: "Diner",
-        },
-      ]}
-      avatarText="Loved by over 500+ satisfied guests"
-      buttons={[
-        {
-          text: "Reserve a Table",
-          href: "#contact",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Fresh Sashimi",
-        },
-        {
-          type: "text",
-          text: "Authentic Ramen",
-        },
-        {
-          type: "text",
-          text: "Premium Nigiri",
-        },
-        {
-          type: "text",
-          text: "Artisan Rolls",
-        },
-        {
-          type: "text",
-          text: "Gourmet Flavors",
-        },
-      ]}
+      <HeroSplit
+      background={{ variant: "gradient-bars" }}
+      title="Joli Café Bar Restaurant"
+      description="Where authentic flavors meet modern elegance. Join us for a culinary journey."
+      imageSrc="http://img.b2bpic.net/free-photo/gourmet-meal-restaurant_23-2150532506.jpg"
+      imageAlt="Joli Café Bar Atmosphere"
+      mediaAnimation="slide-up"
+      buttons={[{ text: "View Our Menu", href: "#menu" }]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <MediaAbout
-      useInvertedBackground={false}
+      <TextAbout
       title="A Legacy of Freshness"
-      description="At NaMi, we blend centuries-old Asian culinary techniques with the freshest ingredients to bring you an unparalleled dining experience."
-      imageSrc="http://img.b2bpic.net/free-photo/view-people-learning-how-make-traditional-sushi-dish_23-2151186462.jpg"
-      imageAlt="Chef preparing sushi"
+      useInvertedBackground={false}
+      ariaLabel="About our restaurant"
+      buttons={[{ text: "Discover More", href: "#contact" }]}
     />
   </div>
 
   <div id="menu" data-section="menu">
-      <ProductCardFour
+      <ProductCardThree
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="two-columns-alternating-heights"
+      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
+      title="Our Signature Creations"
+      description="Hand-crafted delicacies prepared daily for our guests."
       products={[
         {
-          id: "1",
-          name: "Signature Nigiri",
-          price: "$28",
-          variant: "Fresh Salmon",
-          imageSrc: "http://img.b2bpic.net/free-photo/sushi-with-rice-ginger-wasabi_140725-1022.jpg",
-        },
+          id: "1",          name: "Gourmet Brunch",          price: "$18",          imageSrc: "http://img.b2bpic.net/free-photo/delicious-breakfast-table_23-2150652654.jpg"},
         {
-          id: "2",
-          name: "Zen Maki Roll",
-          price: "$18",
-          variant: "Spicy Tuna",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-sushi-roll-with-crab-tuna-plate-with-ginger-wasabi-wood_141793-11173.jpg",
-        },
+          id: "2",          name: "Artisan Coffee",          price: "$6",          imageSrc: "http://img.b2bpic.net/coffee-cup-table_23-2148782354.jpg"},
         {
-          id: "3",
-          name: "Tempura Bliss",
-          price: "$22",
-          variant: "Shrimp",
-          imageSrc: "http://img.b2bpic.net/free-photo/baked-sushi-with-wasabi-ginger-soy-sauce-bamboo-leaf_141793-2900.jpg",
-        },
-        {
-          id: "4",
-          name: "Tuna Sashimi",
-          price: "$30",
-          variant: "Bluefin Tuna",
-          imageSrc: "http://img.b2bpic.net/free-photo/orange-background-fish-japanese-sashimi_1203-3999.jpg",
-        },
-        {
-          id: "5",
-          name: "Miso Ramen",
-          price: "$20",
-          variant: "Rich Broth",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-bowl-with-noodle-soup-black-background_23-2148320848.jpg",
-        },
-        {
-          id: "6",
-          name: "Crispy Gyoza",
-          price: "$12",
-          variant: "Pork",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-asian-dumplings-dish-with-chopsticks-herbs_23-2148694351.jpg",
-        },
+          id: "3",          name: "Evening Tapas",          price: "$14",          imageSrc: "http://img.b2bpic.net/tapas-plate_23-2148909876.jpg"}
       ]}
-      title="Our Signature Creations"
-      description="Hand-crafted delicacies prepared daily."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
       <MetricCardFourteen
-      useInvertedBackground={false}
-      title="By The Numbers"
-      tag="Our Growth"
+      title="Our Global Impact"
+      tag="Success Metrics"
       metrics={[
-        {
-          id: "m1",
-          value: "15+",
-          description: "Years of Excellence",
-        },
-        {
-          id: "m2",
-          value: "5000+",
-          description: "Happy Guests Served",
-        },
-        {
-          id: "m3",
-          value: "3",
-          description: "Global Cuisine Awards",
-        },
+        { id: "m1", value: "15+", description: "Years of Culinary Excellence" },
+        { id: "m2", value: "10,000+", description: "Happy Regular Customers" },
+        { id: "m3", value: "500k", description: "Meals Served Annually" }
       ]}
+      metricsAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
+      <TestimonialCardThirteen
+      title="Voices of Joli Café"
+      description="Hear from our vibrant community of food lovers."
+      showRating={true}
+      textboxLayout="split"
+      animationType="slide-up"
       useInvertedBackground={false}
-      testimonial="The freshness of the fish is unparalleled. Truly the best sushi I have had in the city."
-      rating={5}
-      author="Sarah Miller"
-      avatars={[
+      testimonials={[
         {
-          src: "http://img.b2bpic.net/free-photo/couple-enjoying-food-restaurant_23-2149269179.jpg",
-          alt: "Sarah",
+          id: "t1",          name: "Sarah Jenkins",          handle: "@sarahj_foodie",          testimonial: "An absolutely divine experience from start to finish. The service was as impeccable as the coffee.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling-cafe_23-2148972344.jpg"
         },
         {
-          src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-with-tablet_23-2149927583.jpg",
-          alt: "Guest",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-woman-taking-food-photo_23-2149250048.jpg",
-          alt: "Guest",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-food_23-2148899052.jpg",
-          alt: "Guest",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-young-female-student-eating-fast-food-fast-food-cheat-meal_169016-67586.jpg",
-          alt: "Guest",
-        },
+          id: "t2",          name: "Marcus Thorne",          handle: "@mthorne_travels",          testimonial: "My go-to spot whenever I'm in the city. Truly world-class flavors.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/man-drinking-coffee_23-2148972350.jpg"
+        }
       ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqDouble
+      title="Common Questions"
+      description="Everything you need to know about our services."
       textboxLayout="split"
+      faqsAnimation="slide-up"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",
-          title: "Do you offer private dining?",
-          content: "Yes, we have private rooms available for special occasions.",
-        },
-        {
-          id: "f2",
-          title: "Are vegetarian options available?",
-          content: "We offer a wide range of vegetarian and vegan sushi rolls.",
-        },
-        {
-          id: "f3",
-          title: "How can I make a reservation?",
-          content: "You can reserve via our website or by calling us directly.",
-        },
+        { id: "f1", title: "Do you take reservations?", content: "Yes, we highly recommend booking in advance through our contact form." },
+        { id: "f2", title: "Do you offer catering services?", content: "Indeed, we provide bespoke catering for private events and corporate functions." },
       ]}
-      title="Frequently Asked Questions"
-      description="Have questions? We've got answers."
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
+      <ContactSplitForm
+      title="Need Assistance?"
+      description="Our support team is ready to help with reservations, catering inquiries, or general feedback. We aim to respond within 24 hours."
       useInvertedBackground={false}
-      background={{
-        variant: "radial-gradient",
-      }}
-      tag="Reservation"
-      title="Visit Us Today"
-      description="Book your table and join us for an exquisite dining experience."
-      imageSrc="http://img.b2bpic.net/free-photo/full-shot-friends-kitchen_23-2148965329.jpg"
-      mediaAnimation="slide-up"
+      inputs={[
+        { name: "name", type: "text", placeholder: "Your Full Name", required: true },
+        { name: "email", type: "email", placeholder: "Email Address", required: true }
+      ]}
+      textarea={{ name: "message", placeholder: "How can we help you today?", rows: 4, required: true }}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBase
+      <FooterLogoEmphasis
+      logoText="Joli Café Bar"
       columns={[
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "123 Sakura Way",
-              href: "#",
-            },
-            {
-              label: "contact@nami.com",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Hours",
-          items: [
-            {
-              label: "Mon-Sun 11am-10pm",
-              href: "#",
-            },
-          ],
-        },
+        { items: [{ label: "Home", href: "#hero" }, { label: "Menu", href: "#menu" }] },
+        { items: [{ label: "Contact Support", href: "#contact" }] }
       ]}
-      logoText="NaMi Sushi-Asia"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/shop/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ShopPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Shop", id: "/shop" },
+    { name: "Cart", id: "/cart" },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="largeSizeMediumTitles"
+        background="floatingGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={navItems}
+            brandName="Joli Café Bar"
+          />
+        </div>
+        <div id="products" data-section="products" className="pt-24">
+          <ProductCardTwo
+            title="Our Shop"
+            description="Browse our premium selection of coffee beans and culinary supplies."
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", brand: "Joli", name: "Signature Roast", price: "$24", rating: 5, reviewCount: "(120)", imageSrc: "http://img.b2bpic.net/coffee-beans_23-2148782354.jpg" },
+              { id: "p2", brand: "Joli", name: "Ceramic Mug", price: "$15", rating: 4, reviewCount: "(85)", imageSrc: "http://img.b2bpic.net/coffee-cup-table_23-2148782354.jpg?_wi=1" },
+              { id: "p3", brand: "Joli", name: "Brew Kit", price: "$45", rating: 5, reviewCount: "(45)", imageSrc: "http://img.b2bpic.net/coffee-cup-table_23-2148782354.jpg?_wi=2" }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Joli Café Bar"
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Shop", href: "/shop" }] }]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}