Merge version_4 into main

Merge version_4 into main

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/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>
+  );
+}