Add src/app/shop/page.tsx

Merge version_3 into main

src/app/about/page.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="floatingGradient"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home",                id: "/"
+              },
+              {
+                name: "About",                id: "/about"
+              },
+              {
+                name: "Collection",                id: "#collection"
+              },
+              {
+                name: "Features",                id: "#features"
+              },
+              {
+                name: "Testimonials",                id: "#testimonials"
+              },
+              {
+                name: "FAQ",                id: "#faq"
+              },
+              {
+                name: "Contact",                id: "#contact"
+              }
+            ]}
+            brandName="Ayari"
+            button={{
+              text: "Shop Now",              href: "#collection"
+            }}
+          />
+        </div>
+
+        <div id="about-content" data-section="about-content">
+          <InlineImageSplitTextAbout
+            useInvertedBackground={false}
+            heading={[
+              {
+                type: "text",                content: "Our Mission: Crafting Timeless Fashion for a Conscious Future"
+              }
+            ]}
+            buttons={[
+              {
+                text: "Our Values",                href: "#"
+              },
+              {
+                text: "Meet the Team",                href: "#"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Shop",                items: [
+                  {
+                    label: "New Arrivals",                    href: "#collection"
+                  },
+                  {
+                    label: "Dresses",                    href: "#"
+                  },
+                  {
+                    label: "Outerwear",                    href: "#"
+                  },
+                  {
+                    label: "Accessories",                    href: "#"
+                  }
+                ]
+              },
+              {
+                title: "Ayino",                items: [
+                  {
+                    label: "Our Story",                    href: "/about"
+                  },
+                  {
+                    label: "Sustainability",                    href: "#"
+                  },
+                  {
+                    label: "Careers",                    href: "#"
+                  }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  {
+                    label: "FAQ",                    href: "#faq"
+                  },
+                  {
+                    label: "Contact Us",                    href: "#contact"
+                  },
+                  {
+                    label: "Shipping & Returns",                    href: "#"
+                  }
+                ]
+              }
+            ]}
+            logoText="Ayino"
+            copyrightText="© 2024 Ayino. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/blog/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function BlogPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="floatingGradient"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Collection", id: "/collection" },
+              { name: "Features", id: "#features" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Blog", id: "/blog" },
+              { name: "Contact", id: "/contact" },
+              { name: "Legal", id: "/legal" }
+            ]}
+            brandName="Ayari"
+            button={{
+              text: "Shop Now",              href: "/collection"
+            }}
+          />
+        </div>
+
+        <div id="blog-section" data-section="blog-section">
+          <BlogCardThree
+            blogs={[
+              {
+                id: "blog1",                category: "Fashion Trends",                title: "The Rise of Sustainable Fashion in 2024",                excerpt: "Discover how Ayino is leading the charge in eco-friendly fashion with our latest sustainable practices.",                imageSrc: "http://img.b2bpic.net/free-photo/woman-nature-with-clothesline_23-2148170341.jpg",                imageAlt: "Sustainable clothes drying",                authorName: "Ayino Team",                authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-elegant-stylish-woman-with-blonde-curly-hair-natural-make-up-wearing-black-fedora-posing-street_291049-2812.jpg",                date: "July 1, 2024"
+              },
+              {
+                id: "blog2",                category: "Style Guide",                title: "5 Must-Have Pieces for Your Summer Wardrobe",                excerpt: "Elevate your summer style with our curated selection of essential garments that blend comfort and elegance.",                imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-confident-woman-sitting-grey-surface_176420-16959.jpg",                imageAlt: "Woman in elegant summer dress",                authorName: "Ayino Style",                authorAvatar: "http://img.b2bpic.net/free-photo/summer-portrait-young-elegant-woman-posing-sunny-day_291650-470.jpg",                date: "June 25, 2024"
+              },
+              {
+                id: "blog3",                category: "Behind the Scenes",                title: "A Glimpse into Ayino's Design Process",                excerpt: "From concept to creation, explore the artistry and dedication behind every Ayino collection.",                imageSrc: "http://img.b2bpic.net/free-photo/professional-beautiful-asian-female-fashion-designer-working-measuring-dress-mannequin-clothing_7861-788.jpg",                imageAlt: "Fashion designer at work",                authorName: "Ayino Design",                authorAvatar: "http://img.b2bpic.net/free-photo/blonde-senior-woman-looking-away_23-2148286459.jpg",                date: "June 18, 2024"
+              }
+            ]}
+            title="Latest from Our Blog"
+            description="Stay updated with fashion trends, style tips, and Ayino's journey."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Shop",                items: [
+                  { label: "New Arrivals", href: "/collection" },
+                  { label: "Dresses", href: "/collection" },
+                  { label: "Outerwear", href: "/collection" },
+                  { label: "Accessories", href: "/collection" }
+                ]
+              },
+              {
+                title: "Ayino",                items: [
+                  { label: "Our Story", href: "/about" },
+                  { label: "Sustainability", href: "#" },
+                  { label: "Careers", href: "#" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Contact Us", href: "/contact" },
+                  { label: "Shipping & Returns", href: "#" },
+                  { label: "Legal", href: "/legal" }
+                ]
+              }
+            ]}
+            logoText="Ayino"
+            copyrightText="© 2024 Ayino. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="floatingGradient"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Shop", id: "/shop" },
+              { name: "Features", id: "#features" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "/faq" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Blog", id: "/blog" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Ayari"
+            button={{
+              text: "Shop Now",              href: "/shop"
+            }}
+          />
+        </div>
+
+        <div id="contact-form" data-section="contact-form">
+          <ContactCenter
+            useInvertedBackground={true}
+            background={{ variant: "plain" }}
+            tag="Get in Touch"
+            title="Connect with Ayino"
+            description="Have questions, feedback, or need assistance? Reach out to our dedicated support team. We're here to help."
+            inputPlaceholder="Enter your email"
+            buttonText="Submit Inquiry"
+            termsText="By submitting, you agree to our Privacy Policy and Terms of Service."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Shop",                items: [
+                  { label: "New Arrivals", href: "/shop" },
+                  { label: "Dresses", href: "/shop" },
+                  { label: "Outerwear", href: "/shop" },
+                  { label: "Accessories", href: "/shop" }
+                ]
+              },
+              {
+                title: "Ayino",                items: [
+                  { label: "Our Story", href: "/about" },
+                  { label: "Sustainability", href: "#" },
+                  { label: "Careers", href: "#" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "/faq" },
+                  { label: "Contact Us", href: "/contact" },
+                  { label: "Shipping & Returns", href: "#" }
+                ]
+              }
+            ]}
+            logoText="Ayino"
+            copyrightText="© 2024 Ayino. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/faq/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function FaqPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="floatingGradient"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Shop", id: "/shop" },
+              { name: "Features", id: "#features" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "/faq" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Blog", id: "/blog" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Ayari"
+            button={{
+              text: "Shop Now",              href: "/shop"
+            }}
+          />
+        </div>
+
+        <div id="faq-content" data-section="faq-content">
+          <FaqSplitMedia
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "faq1", title: "What is Ayino's return policy?", content: "We offer free returns within 30 days of purchase, provided items are unworn and with tags attached." },
+              { id: "faq2", title: "How do I find my size?", content: "Please refer to our detailed sizing chart available on each product page for accurate measurements." },
+              { id: "faq3", title: "Do you ship internationally?", content: "Yes, we offer international shipping to most countries. Shipping costs and times vary by destination." },
+              { id: "faq4", title: "How do I care for my Ayino garments?", content: "Each garment comes with specific care instructions. Generally, we recommend gentle washing and air drying to preserve quality." },
+              { id: "faq5", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, and other popular payment methods. Details are available at checkout." },
+              { id: "faq6", title: "How can I track my order?", content: "Once your order is shipped, you will receive a tracking number via email to monitor its delivery status." }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/smiling-pretty-caucasian-female-call-center-operator-headphones-sitting-desk-with-office-tools-isolated-green-wall_141793-121445.jpg"
+            imageAlt="Customer service representative assisting a client"
+            mediaAnimation="opacity"
+            mediaPosition="right"
+            title="Frequently Asked Questions"
+            description="Find quick answers to common questions about our products and services."
+            faqsAnimation="slide-up"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Shop",                items: [
+                  { label: "New Arrivals", href: "/shop" },
+                  { label: "Dresses", href: "/shop" },
+                  { label: "Outerwear", href: "/shop" },
+                  { label: "Accessories", href: "/shop" }
+                ]
+              },
+              {
+                title: "Ayino",                items: [
+                  { label: "Our Story", href: "/about" },
+                  { label: "Sustainability", href: "#" },
+                  { label: "Careers", href: "#" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "/faq" },
+                  { label: "Contact Us", href: "/contact" },
+                  { label: "Shipping & Returns", href: "#" }
+                ]
+              }
+            ]}
+            logoText="Ayino"
+            copyrightText="© 2024 Ayino. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,80 +32,49 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "Home",
-          id: "#home",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "About",
-          id: "#about",
-        },
+          name: "About",          id: "/about"},
         {
-          name: "Collection",
-          id: "#collection",
-        },
+          name: "Collection",          id: "#collection"},
         {
-          name: "Features",
-          id: "#features",
-        },
+          name: "Features",          id: "#features"},
         {
-          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="Ayari"
       button={{
-        text: "Shop Now",
-        href: "#collection",
-      }}
+        text: "Shop Now",        href: "#collection"}}
     />
   </div>
 
   <div id="home" data-section="home">
       <HeroBillboardCarousel
       background={{
-        variant: "radial-gradient",
-      }}
+        variant: "radial-gradient"}}
       title="Elevate Your Style with Ayino"
       description="Discover our latest collection of premium clothing, blending comfort with timeless elegance. Dress for every moment with confidence and grace."
       buttons={[
         {
-          text: "Shop New Arrivals",
-          href: "#collection",
-        },
+          text: "Shop New Arrivals",          href: "#collection"},
       ]}
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-walking-around-city-street-photo_1321-2574.jpg?_wi=1",
-          imageAlt: "Fashion model wearing a stylish dress",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-walking-around-city-street-photo_1321-2574.jpg?_wi=1",          imageAlt: "Fashion model wearing a stylish dress"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-interracial-young-couple-wearing-sunglasses-looking-camera_23-2148151749.jpg?_wi=1",
-          imageAlt: "Man in elegant blazer walking city street",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/modern-interracial-young-couple-wearing-sunglasses-looking-camera_23-2148151749.jpg?_wi=1",          imageAlt: "Man in elegant blazer walking city street"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/cute-woman-fashion-model_1328-1136.jpg?_wi=1",
-          imageAlt: "Abstract fashion design flat lay",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/cute-woman-fashion-model_1328-1136.jpg?_wi=1",          imageAlt: "Abstract fashion design flat lay"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/brunette-curly-haired-long-legs-girl-black-leather-jacket-with-swimmsuit-cap-posed-studio-chair-against-dark-brick-wall_627829-7825.jpg?_wi=1",
-          imageAlt: "Woman posing in a sophisticated outfit",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/brunette-curly-haired-long-legs-girl-black-leather-jacket-with-swimmsuit-cap-posed-studio-chair-against-dark-brick-wall_627829-7825.jpg?_wi=1",          imageAlt: "Woman posing in a sophisticated outfit"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/fashion-image-stylish-brunette-woman-posing-home-boho-style_273443-1401.jpg?_wi=1",
-          imageAlt: "Stylish couple in urban setting",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/fashion-image-stylish-brunette-woman-posing-home-boho-style_273443-1401.jpg?_wi=1",          imageAlt: "Stylish couple in urban setting"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-nature-with-clothesline_23-2148170341.jpg",
-          imageAlt: "Close up of high-quality fabric texture",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/woman-nature-with-clothesline_23-2148170341.jpg",          imageAlt: "Close up of high-quality fabric texture"},
       ]}
     />
   </div>
@@ -115,15 +84,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       heading={[
         {
-          type: "text",
-          content: "Our Story: The Essence of Ayino",
-        },
+          type: "text",          content: "Our Story: The Essence of Ayino"},
       ]}
       buttons={[
         {
-          text: "Learn More",
-          href: "#",
-        },
+          text: "Learn More",          href: "/about"},
       ]}
     />
   </div>
@@ -134,23 +99,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Sustainable Fabrics",
-          description: "We ethically source eco-friendly materials that feel luxurious and last longer.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg",
-          imageAlt: "Close-up of sustainable fabric",
-        },
+          title: "Sustainable Fabrics",          description: "We ethically source eco-friendly materials that feel luxurious and last longer.",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg",          imageAlt: "Close-up of sustainable fabric"},
         {
-          title: "Unique Designs",
-          description: "Our collections feature exclusive designs that set you apart with sophisticated flair.",
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-flat-abstract-shapes-pattern_23-2149083534.jpg",
-          imageAlt: "Fashion designer sketching a unique dress",
-        },
+          title: "Unique Designs",          description: "Our collections feature exclusive designs that set you apart with sophisticated flair.",          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-flat-abstract-shapes-pattern_23-2149083534.jpg",          imageAlt: "Fashion designer sketching a unique dress"},
         {
-          title: "Perfect Fit",
-          description: "Each piece is designed for comfort and a flattering silhouette, enhancing your natural beauty.",
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-beautiful-asian-female-fashion-designer-working-measuring-dress-mannequin-clothing_7861-788.jpg",
-          imageAlt: "Tailor measuring garment for perfect fit",
-        },
+          title: "Perfect Fit",          description: "Each piece is designed for comfort and a flattering silhouette, enhancing your natural beauty.",          imageSrc: "http://img.b2bpic.net/free-photo/professional-beautiful-asian-female-fashion-designer-working-measuring-dress-mannequin-clothing_7861-788.jpg",          imageAlt: "Tailor measuring garment for perfect fit"},
       ]}
       title="Why Choose Ayino?"
       description="Experience unparalleled quality and style with our meticulously crafted garments."
@@ -165,47 +118,17 @@ export default function LandingPage() {
       useInvertedBackground={true}
       products={[
         {
-          id: "p1",
-          name: "Elegance Flow Dress",
-          price: "$120.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-confident-woman-sitting-grey-surface_176420-16959.jpg",
-          imageAlt: "Elegant flowing dress",
-        },
+          id: "p1",          name: "Elegance Flow Dress",          price: "$120.00",          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-confident-woman-sitting-grey-surface_176420-16959.jpg",          imageAlt: "Elegant flowing dress"},
         {
-          id: "p2",
-          name: "Classic Linen Shirt",
-          price: "$85.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-best-man_23-2149044033.jpg",
-          imageAlt: "Classic linen shirt",
-        },
+          id: "p2",          name: "Classic Linen Shirt",          price: "$85.00",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-best-man_23-2149044033.jpg",          imageAlt: "Classic linen shirt"},
         {
-          id: "p3",
-          name: "Tailored Denim Jeans",
-          price: "$95.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-jeans-jacket-posing-near-concrete-wall_613910-2889.jpg",
-          imageAlt: "Tailored denim jeans",
-        },
+          id: "p3",          name: "Tailored Denim Jeans",          price: "$95.00",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-jeans-jacket-posing-near-concrete-wall_613910-2889.jpg",          imageAlt: "Tailored denim jeans"},
         {
-          id: "p4",
-          name: "Cozy Knit Sweater",
-          price: "$110.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-smiling-skinny-woman-with-curly-hair-walking-park-dressed-warm-brown-coat-autumn-trendy-fashion-street-style_285396-6812.jpg",
-          imageAlt: "Cozy knit sweater",
-        },
+          id: "p4",          name: "Cozy Knit Sweater",          price: "$110.00",          imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-smiling-skinny-woman-with-curly-hair-walking-park-dressed-warm-brown-coat-autumn-trendy-fashion-street-style_285396-6812.jpg",          imageAlt: "Cozy knit sweater"},
         {
-          id: "p5",
-          name: "Structured Blazer",
-          price: "$160.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/girl-suit_1303-4449.jpg",
-          imageAlt: "Structured blazer",
-        },
+          id: "p5",          name: "Structured Blazer",          price: "$160.00",          imageSrc: "http://img.b2bpic.net/free-photo/girl-suit_1303-4449.jpg",          imageAlt: "Structured blazer"},
         {
-          id: "p6",
-          name: "Silk Accent Scarf",
-          price: "$45.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hat-scarf-talking-phone_23-2147625171.jpg",
-          imageAlt: "Silk accent scarf",
-        },
+          id: "p6",          name: "Silk Accent Scarf",          price: "$45.00",          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hat-scarf-talking-phone_23-2147625171.jpg",          imageAlt: "Silk accent scarf"},
       ]}
       title="Our Latest Collection"
       description="Explore new arrivals and signature pieces designed to complement your lifestyle."
@@ -217,14 +140,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Vogue",
-        "Harper's Bazaar",
-        "ELLE",
-        "Fashionista",
-        "Marie Claire",
-        "Glamour",
-        "InStyle",
-      ]}
+        "Vogue",        "Harper's Bazaar",        "ELLE",        "Fashionista",        "Marie Claire",        "Glamour",        "InStyle"]}
       title="Featured In"
       description="Ayino has been recognized by leading fashion publications and style influencers."
     />
@@ -236,65 +152,15 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "t1",
-          name: "Sophia L.",
-          date: "May 10, 2024",
-          title: "Absolutely Stunning!",
-          quote: "The 'Elegance Flow Dress' is beyond beautiful. The fabric quality is exceptional, and I received so many compliments.",
-          tag: "Dresses",
-          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-elegant-stylish-woman-with-blonde-curly-hair-natural-make-up-wearing-black-fedora-posing-street_291049-2812.jpg",
-          avatarAlt: "Sophia L. avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-walking-around-city-street-photo_1321-2574.jpg?_wi=2",
-          imageAlt: "professional woman portrait smiling",
-        },
+          id: "t1",          name: "Sophia L.",          date: "May 10, 2024",          title: "Absolutely Stunning!",          quote: "The 'Elegance Flow Dress' is beyond beautiful. The fabric quality is exceptional, and I received so many compliments.",          tag: "Dresses",          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-elegant-stylish-woman-with-blonde-curly-hair-natural-make-up-wearing-black-fedora-posing-street_291049-2812.jpg",          avatarAlt: "Sophia L. avatar",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-walking-around-city-street-photo_1321-2574.jpg?_wi=2",          imageAlt: "professional woman portrait smiling"},
         {
-          id: "t2",
-          name: "Ethan M.",
-          date: "April 28, 2024",
-          title: "Comfort and Style Combined",
-          quote: "The 'Classic Linen Shirt' is my new go-to. It's incredibly comfortable and looks effortlessly stylish. Highly recommend!",
-          tag: "Menswear",
-          avatarSrc: "http://img.b2bpic.net/free-photo/unpleased-looking-side-young-blonde-guy-wearing-green-t-shirt-crossing-hands_141793-89324.jpg",
-          avatarAlt: "Ethan M. avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-interracial-young-couple-wearing-sunglasses-looking-camera_23-2148151749.jpg?_wi=2",
-          imageAlt: "professional woman portrait smiling",
-        },
+          id: "t2",          name: "Ethan M.",          date: "April 28, 2024",          title: "Comfort and Style Combined",          quote: "The 'Classic Linen Shirt' is my new go-to. It's incredibly comfortable and looks effortlessly stylish. Highly recommend!",          tag: "Menswear",          avatarSrc: "http://img.b2bpic.net/free-photo/unpleased-looking-side-young-blonde-guy-wearing-green-t-shirt-crossing-hands_141793-89324.jpg",          avatarAlt: "Ethan M. avatar",          imageSrc: "http://img.b2bpic.net/free-photo/modern-interracial-young-couple-wearing-sunglasses-looking-camera_23-2148151749.jpg?_wi=2",          imageAlt: "professional woman portrait smiling"},
         {
-          id: "t3",
-          name: "Olivia R.",
-          date: "April 15, 2024",
-          title: "Perfect Fit Jeans",
-          quote: "Finally, jeans that fit perfectly! The 'Tailored Denim Jeans' are so flattering and comfortable for all-day wear.",
-          tag: "Bottoms",
-          avatarSrc: "http://img.b2bpic.net/free-photo/summer-portrait-young-elegant-woman-posing-sunny-day_291650-470.jpg",
-          avatarAlt: "Olivia R. avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/cute-woman-fashion-model_1328-1136.jpg?_wi=2",
-          imageAlt: "professional woman portrait smiling",
-        },
+          id: "t3",          name: "Olivia R.",          date: "April 15, 2024",          title: "Perfect Fit Jeans",          quote: "Finally, jeans that fit perfectly! The 'Tailored Denim Jeans' are so flattering and comfortable for all-day wear.",          tag: "Bottoms",          avatarSrc: "http://img.b2bpic.net/free-photo/summer-portrait-young-elegant-woman-posing-sunny-day_291650-470.jpg",          avatarAlt: "Olivia R. avatar",          imageSrc: "http://img.b2bpic.net/free-photo/cute-woman-fashion-model_1328-1136.jpg?_wi=2",          imageAlt: "professional woman portrait smiling"},
         {
-          id: "t4",
-          name: "Liam K.",
-          date: "March 22, 2024",
-          title: "Luxurious Sweater",
-          quote: "This 'Cozy Knit Sweater' is a dream. The quality is fantastic, and it keeps me warm without being bulky. Worth every penny!",
-          tag: "Knitwear",
-          avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-schoolboy-portrait_23-2147666930.jpg",
-          avatarAlt: "Liam K. avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/brunette-curly-haired-long-legs-girl-black-leather-jacket-with-swimmsuit-cap-posed-studio-chair-against-dark-brick-wall_627829-7825.jpg?_wi=2",
-          imageAlt: "professional woman portrait smiling",
-        },
+          id: "t4",          name: "Liam K.",          date: "March 22, 2024",          title: "Luxurious Sweater",          quote: "This 'Cozy Knit Sweater' is a dream. The quality is fantastic, and it keeps me warm without being bulky. Worth every penny!",          tag: "Knitwear",          avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-schoolboy-portrait_23-2147666930.jpg",          avatarAlt: "Liam K. avatar",          imageSrc: "http://img.b2bpic.net/free-photo/brunette-curly-haired-long-legs-girl-black-leather-jacket-with-swimmsuit-cap-posed-studio-chair-against-dark-brick-wall_627829-7825.jpg?_wi=2",          imageAlt: "professional woman portrait smiling"},
         {
-          id: "t5",
-          name: "Ava P.",
-          date: "March 05, 2024",
-          title: "My New Wardrobe Staple",
-          quote: "The 'Structured Blazer' is incredibly versatile. I can dress it up or down, and it always looks sharp. A must-have!",
-          tag: "Outerwear",
-          avatarSrc: "http://img.b2bpic.net/free-photo/blonde-senior-woman-looking-away_23-2148286459.jpg",
-          avatarAlt: "Ava P. avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/fashion-image-stylish-brunette-woman-posing-home-boho-style_273443-1401.jpg?_wi=2",
-          imageAlt: "professional woman portrait smiling",
-        },
+          id: "t5",          name: "Ava P.",          date: "March 05, 2024",          title: "My New Wardrobe Staple",          quote: "The 'Structured Blazer' is incredibly versatile. I can dress it up or down, and it always looks sharp. A must-have!",          tag: "Outerwear",          avatarSrc: "http://img.b2bpic.net/free-photo/blonde-senior-woman-looking-away_23-2148286459.jpg",          avatarAlt: "Ava P. avatar",          imageSrc: "http://img.b2bpic.net/free-photo/fashion-image-stylish-brunette-woman-posing-home-boho-style_273443-1401.jpg?_wi=2",          imageAlt: "professional woman portrait smiling"},
       ]}
       title="What Our Customers Say"
       description="Hear how Ayino has transformed their style and confidence."
@@ -307,25 +173,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "faq1",
-          title: "What is Ayino's return policy?",
-          content: "We offer free returns within 30 days of purchase, provided items are unworn and with tags attached.",
-        },
+          id: "faq1",          title: "What is Ayino's return policy?",          content: "We offer free returns within 30 days of purchase, provided items are unworn and with tags attached."},
         {
-          id: "faq2",
-          title: "How do I find my size?",
-          content: "Please refer to our detailed sizing chart available on each product page for accurate measurements.",
-        },
+          id: "faq2",          title: "How do I find my size?",          content: "Please refer to our detailed sizing chart available on each product page for accurate measurements."},
         {
-          id: "faq3",
-          title: "Do you ship internationally?",
-          content: "Yes, we offer international shipping to most countries. Shipping costs and times vary by destination.",
-        },
+          id: "faq3",          title: "Do you ship internationally?",          content: "Yes, we offer international shipping to most countries. Shipping costs and times vary by destination."},
         {
-          id: "faq4",
-          title: "How do I care for my Ayino garments?",
-          content: "Each garment comes with specific care instructions. Generally, we recommend gentle washing and air drying to preserve quality.",
-        },
+          id: "faq4",          title: "How do I care for my Ayino garments?",          content: "Each garment comes with specific care instructions. Generally, we recommend gentle washing and air drying to preserve quality."},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/smiling-pretty-caucasian-female-call-center-operator-headphones-sitting-desk-with-office-tools-isolated-green-wall_141793-121445.jpg"
       imageAlt="Customer service representative assisting a client in a boutique"
@@ -341,8 +195,7 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={true}
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       tag="Get in Touch"
       title="Connect with Ayino"
       description="Have questions, feedback, or need assistance? Reach out to our dedicated support team."
@@ -356,58 +209,35 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Shop",
-          items: [
+          title: "Shop",          items: [
             {
-              label: "New Arrivals",
-              href: "#collection",
-            },
+              label: "New Arrivals",              href: "#collection"},
             {
-              label: "Dresses",
-              href: "#",
-            },
+              label: "Dresses",              href: "#"},
             {
-              label: "Outerwear",
-              href: "#",
-            },
+              label: "Outerwear",              href: "#"},
             {
-              label: "Accessories",
-              href: "#",
-            },
+              label: "Accessories",              href: "#"},
           ],
         },
         {
-          title: "Ayino",
-          items: [
+          title: "Ayino",          items: [
             {
-              label: "Our Story",
-              href: "#about",
-            },
+              label: "Our Story",              href: "/about"},
             {
-              label: "Sustainability",
-              href: "#",
-            },
+              label: "Sustainability",              href: "#"},
             {
-              label: "Careers",
-              href: "#",
-            },
+              label: "Careers",              href: "#"},
           ],
         },
         {
-          title: "Support",
-          items: [
+          title: "Support",          items: [
             {
-              label: "FAQ",
-              href: "#faq",
-            },
+              label: "FAQ",              href: "#faq"},
             {
-              label: "Contact Us",
-              href: "#contact",
-            },
+              label: "Contact Us",              href: "#contact"},
             {
-              label: "Shipping & Returns",
-              href: "#",
-            },
+              label: "Shipping & Returns",              href: "#"},
           ],
         },
       ]}
@@ -418,4 +248,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { CheckCircle } from "lucide-react";
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="floatingGradient"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Collection", id: "/collection" },
+              { name: "Features", id: "#features" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Blog", id: "/blog" },
+              { name: "Contact", id: "/contact" },
+              { name: "Legal", id: "/legal" }
+            ]}
+            brandName="Ayari"
+            button={{
+              text: "Shop Now",              href: "/collection"
+            }}
+          />
+        </div>
+
+        <div id="pricing-section" data-section="pricing-section">
+          <PricingCardFive
+            plans={[
+              {
+                id: "basic",                tag: "Basic",                tagIcon: CheckCircle,
+                price: "$19",                period: "per month",                description: "Ideal for individuals and small businesses.",                button: { text: "Start Free Trial", href: "#" },
+                featuresTitle: "Features include:",                features: [
+                  "Access to standard collection",                  "Email support",                  "5% discount on new arrivals"
+                ]
+              },
+              {
+                id: "pro",                tag: "Pro",                tagIcon: CheckCircle,
+                price: "$49",                period: "per month",                description: "Perfect for growing businesses.",                button: { text: "Get Started", href: "#" },
+                featuresTitle: "Everything in Basic, plus:",                features: [
+                  "Access to premium collection",                  "Priority email & chat support",                  "10% discount on new arrivals",                  "Early access to sales"
+                ]
+              },
+              {
+                id: "enterprise",                tag: "Enterprise",                tagIcon: CheckCircle,
+                price: "Custom",                period: "",                description: "Tailored solutions for large enterprises.",                button: { text: "Contact Us", href: "/contact" },
+                featuresTitle: "Everything in Pro, plus:",                features: [
+                  "Custom collection access",                  "Dedicated account manager",                  "Personalized styling sessions",                  "Exclusive event invitations"
+                ]
+              }
+            ]}
+            title="Choose Your Perfect Plan"
+            description="Flexible pricing options to match your style and needs."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Shop",                items: [
+                  { label: "New Arrivals", href: "/collection" },
+                  { label: "Dresses", href: "/collection" },
+                  { label: "Outerwear", href: "/collection" },
+                  { label: "Accessories", href: "/collection" }
+                ]
+              },
+              {
+                title: "Ayino",                items: [
+                  { label: "Our Story", href: "/about" },
+                  { label: "Sustainability", href: "#" },
+                  { label: "Careers", href: "#" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Contact Us", href: "/contact" },
+                  { label: "Shipping & Returns", href: "#" },
+                  { label: "Legal", href: "/legal" }
+                ]
+              }
+            ]}
+            logoText="Ayino"
+            copyrightText="© 2024 Ayino. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function ShopPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="floatingGradient"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Shop", id: "/shop" },
+              { name: "Features", id: "#features" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "/faq" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Blog", id: "/blog" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Ayari"
+            button={{
+              text: "Shop Now",              href: "/shop"
+            }}
+          />
+        </div>
+
+        <div id="shop-collection" data-section="shop-collection">
+          <ProductCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={true}
+            products={[
+              { id: "p1", name: "Elegance Flow Dress", price: "$120.00", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-confident-woman-sitting-grey-surface_176420-16959.jpg", imageAlt: "Elegant flowing dress" },
+              { id: "p2", name: "Classic Linen Shirt", price: "$85.00", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-best-man_23-2149044033.jpg", imageAlt: "Classic linen shirt" },
+              { id: "p3", name: "Tailored Denim Jeans", price: "$95.00", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-jeans-jacket-posing-near-concrete-wall_613910-2889.jpg", imageAlt: "Tailored denim jeans" },
+              { id: "p4", name: "Cozy Knit Sweater", price: "$110.00", imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-smiling-skinny-woman-with-curly-hair-walking-park-dressed-warm-brown-coat-autumn-trendy-fashion-street-style_285396-6812.jpg", imageAlt: "Cozy knit sweater" },
+              { id: "p5", name: "Structured Blazer", price: "$160.00", imageSrc: "http://img.b2bpic.net/free-photo/girl-suit_1303-4449.jpg", imageAlt: "Structured blazer" },
+              { id: "p6", name: "Silk Accent Scarf", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hat-scarf-talking-phone_23-2147625171.jpg", imageAlt: "Silk accent scarf" },
+              { id: "p7", name: "Minimalist Jumpsuit", price: "$130.00", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-black-woman-posing_1328-1127.jpg", imageAlt: "Minimalist Jumpsuit" },
+              { id: "p8", name: "Leather Tote Bag", price: "$180.00", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-holding-bag_23-2147779782.jpg", imageAlt: "Leather Tote Bag" }
+            ]}
+            title="Our Full Collection"
+            description="Explore our complete range of premium clothing and accessories."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Shop",                items: [
+                  { label: "New Arrivals", href: "/shop" },
+                  { label: "Dresses", href: "/shop" },
+                  { label: "Outerwear", href: "/shop" },
+                  { label: "Accessories", href: "/shop" }
+                ]
+              },
+              {
+                title: "Ayino",                items: [
+                  { label: "Our Story", href: "/about" },
+                  { label: "Sustainability", href: "#" },
+                  { label: "Careers", href: "#" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "/faq" },
+                  { label: "Contact Us", href: "/contact" },
+                  { label: "Shipping & Returns", href: "#" }
+                ]
+              }
+            ]}
+            logoText="Ayino"
+            copyrightText="© 2024 Ayino. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}