Update src/app/shop/page.tsx

src/app/about/page.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import TeamCardOne from "@/components/sections/team/TeamCardOne";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Zap, Heart, Globe, Award, Headphones } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Products", id: "/" },
+            { name: "Features", id: "/" },
+            { name: "Why AirPods", id: "/" },
+            { name: "Support", id: "/" },
+            { name: "Reviews", id: "/reviews" },
+            { name: "About", id: "/about" },
+          ]}
+          button={{ text: "Shop Now", href: "/" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="About PodsX - Redefining Wireless Audio"
+          description="We're passionate about creating the future of audio. At PodsX, we combine cutting-edge technology with exceptional design to deliver premium wireless earbuds that seamlessly integrate into your life."
+          background={{ variant: "plain" }}
+          tag="Our Story"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Join Our Community", href: "#" },
+            { text: "Explore Products", href: "/" },
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/modern-tech-company-office-with-innovati-1772884352920-b1c2d3e4.png"
+          imageAlt="PodsX innovation and design studio"
+          mediaAnimation="blur-reveal"
+          imagePosition="right"
+        />
+      </div>
+
+      <div id="mission" data-section="mission">
+        <TextSplitAbout
+          title="Our Mission"
+          description={[
+            "At PodsX, our mission is to democratize premium audio technology. We believe everyone deserves access to exceptional sound quality, innovative features, and seamless connectivity.",            "We're committed to pushing the boundaries of what's possible in wireless audio. Through relentless innovation, meticulous engineering, and a deep understanding of user needs, we create products that elevate everyday moments.",            "Our vision extends beyond products. We're building a community of audio enthusiasts who appreciate quality, innovation, and the power of great sound to enhance life."]}
+          buttons={[
+            { text: "Learn More", href: "#" },
+            { text: "Join Community", href: "#" },
+          ]}
+          buttonAnimation="slide-up"
+          showBorder={true}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="values" data-section="values">
+        <AboutMetric
+          title="Our Core Values Guiding Innovation"
+          metrics={[
+            { icon: Zap, label: "Innovation First", value: "Cutting-Edge" },
+            { icon: Heart, label: "User-Centric Design", value: "Premium" },
+            { icon: Globe, label: "Global Reach", value: "Worldwide" },
+            { icon: Award, label: "Quality Excellence", value: "Best-in-Class" },
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardOne
+          title="Meet the Team Behind the Innovation - Passionate Creators Dedicated to Audio Excellence"
+          description="Get to know the talented individuals driving our mission forward"
+          tag="Our Team"
+          tagAnimation="slide-up"
+          members={[
+            {
+              id: "1",              name: "Alexander Johnson",              role: "CEO",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-of-tech-executive-1772884352456-c1d2e3f4.png",              imageAlt: "Alexander Johnson, CEO"},
+            {
+              id: "2",              name: "Maria Rodriguez",              role: "Chief Product Officer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-woman-tech-leader-1772884352567-d2e3f4g5.png",              imageAlt: "Maria Rodriguez, Chief Product Officer"},
+            {
+              id: "3",              name: "David Liu",              role: "Chief Technology Officer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-asian-tech-engineer-1772884352678-e3f4g5h6.png",              imageAlt: "David Liu, Chief Technology Officer"},
+            {
+              id: "4",              name: "Sophie Martin",              role: "Head of Design",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-european-designer-1772884352789-f4g5h6i7.png",              imageAlt: "Sophie Martin, Head of Design"},
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="why-podsx" data-section="why-podsx">
+        <FeatureCardTwentySeven
+          title="Why Choose PodsX"
+          description="Discover what sets us apart in the competitive audio market."
+          tag="Our Advantage"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "1",              title: "Innovation at Heart",              description: "We invest heavily in R&D to bring you the latest audio technology and features.",              imageSrc: "/placeholders/placeholder1.webp?_wi=1",              imageAlt: "Innovation focus"},
+            {
+              id: "2",              title: "Global Impact",              description: "Trusted by millions of users worldwide, delivering premium audio experiences.",              imageSrc: "/placeholders/placeholder1.webp?_wi=2",              imageAlt: "Global reach"},
+            {
+              id: "3",              title: "Sustainable Practices",              description: "We're committed to eco-friendly manufacturing and packaging.",              imageSrc: "/placeholders/placeholder1.webp?_wi=3",              imageAlt: "Sustainable practices"},
+            {
+              id: "4",              title: "Customer First",              description: "Exceptional support and warranty programs backed by our commitment to satisfaction.",              imageSrc: "/placeholders/placeholder1.webp?_wi=4",              imageAlt: "Customer focus"},
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Let's Connect"
+          tagIcon={Headphones}
+          tagAnimation="slide-up"
+          title="Experience the PodsX Difference"
+          description="Join our community of audio enthusiasts and discover why PodsX is the choice for premium wireless audio. Shop now or get in touch with our team."
+          buttons={[
+            { text: "Shop Now", href: "/" },
+            { text: "Contact Us", href: "#" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "AirPods Pro", href: "/" },
+                { label: "AirPods Max", href: "/" },
+                { label: "AirPods (2nd Gen)", href: "/" },
+                { label: "Compare Models", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "FAQ", href: "/" },
+                { label: "Setup Guide", href: "#" },
+                { label: "Troubleshooting", href: "#" },
+                { label: "Contact Us", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/about" },
+                { label: "Reviews", href: "/reviews" },
+                { label: "Careers", href: "#" },
+                { label: "News", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 PodsX. All rights reserved."
+          bottomRightText="Powered by Premium Audio Innovation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/comparison/page.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Zap, Sparkles, ShoppingBag, CheckCircle, AlertCircle } from "lucide-react";
+
+export default function ComparisonPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Products", id: "/" },
+            { name: "Features", id: "/features" },
+            { name: "Why AirPods", id: "/" },
+            { name: "Support", id: "/" },
+            { name: "Compare", id: "/comparison" },
+          ]}
+          button={{ text: "Shop Now", href: "/#products" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="AirPods Pro vs AirPods 4 Comparison"
+          description="Find your perfect match. Compare detailed specifications, features, and performance between AirPods Pro and AirPods 4. Make an informed decision based on your needs."
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "2 Models", label: "Full Comparison" },
+            { value: "20+ Specs", label: "Detailed Analysis" },
+            { value: "All Features", label: "Side by Side" },
+          ]}
+          enableKpiAnimation={true}
+          tag="Choose Wisely"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Shop AirPods Pro", href: "/#products" },
+            { text: "Shop AirPods 4", href: "/#products" },
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png?_wi=1"
+          imageAlt="AirPods Pro and AirPods 4 side by side"
+          mediaAnimation="blur-reveal"
+          imagePosition="right"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardMedia
+          title="Detailed Feature Comparison Matrix"
+          description="Everything you need to know to choose between these two premium models."
+          tag="Specifications"
+          tagIcon={CheckCircle}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "audio-quality",              title: "Audio Quality & Performance",              description: "AirPods Pro delivers superior audio with premium drivers, adaptive audio, and personalized spatial audio with dynamic head tracking. AirPods 4 provides excellent audio quality with AAC codec support and dynamic range optimization, perfect for everyday listening.",              tag: "Audio",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png?_wi=1",              imageAlt: "Audio quality comparison visualization",              buttons: [{ text: "Learn More", href: "#" }],
+            },
+            {
+              id: "noise-control",              title: "Noise Control Technologies",              description: "AirPods Pro feature industry-leading active noise cancellation (up to 40dB reduction) plus transparency mode with conversation awareness. AirPods 4 offer passive noise isolation through secure fit design, making them perfect for moderate noise environments.",              tag: "Comparison",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png?_wi=1",              imageAlt: "Noise control feature comparison",              buttons: [{ text: "Explore", href: "#" }],
+            },
+            {
+              id: "battery-endurance",              title: "Battery Life & Charging",              description: "AirPods Pro: 6 hours per charge (30 hours total with case). AirPods 4: 5 hours per charge (24 hours total with case). Both support fast charging - 5 minutes equals up to an hour of playback. Wireless charging available on both premium models.",              tag: "Battery",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/battery-charge-indicator-visualization-sh-1772884352345-a1b2c3d4.png?_wi=1",              imageAlt: "Battery life comparison chart",              buttons: [{ text: "Details", href: "#" }],
+            },
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardThree
+          title="Shop the Comparison"
+          description="Compare side-by-side and choose the AirPods that fit your needs perfectly."
+          tag="Premium Models"
+          tagIcon={ShoppingBag}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "airpods-pro",              name: "AirPods Pro",              price: "$249",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png?_wi=2",              imageAlt: "AirPods Pro - Premium noise cancellation model",              initialQuantity: 1,
+            },
+            {
+              id: "airpods-4",              name: "AirPods 4",              price: "$129",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png?_wi=1",              imageAlt: "AirPods 4 - Standard model with excellent value",              initialQuantity: 1,
+            },
+            {
+              id: "airpods-max",              name: "AirPods Max",              price: "$549",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-max-over-ear-headphones-displaye-1772884352294-e666eff4.png?_wi=1",              imageAlt: "AirPods Max - Premium over-ear headphones",              initialQuantity: 1,
+            },
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Still Deciding?"
+          tagIcon={AlertCircle}
+          tagAnimation="slide-up"
+          title="Get Expert Guidance"
+          description="Our specialists can help you choose the perfect AirPods model for your lifestyle. Compare features, read reviews, and make your purchase with confidence."
+          buttons={[
+            { text: "Shop Now", href: "/#products" },
+            { text: "View Features", href: "/features" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "AirPods Pro", href: "/#products" },
+                { label: "AirPods Max", href: "/#products" },
+                { label: "AirPods 4", href: "/#products" },
+                { label: "Compare Models", href: "/comparison" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "FAQ", href: "/#faq" },
+                { label: "Setup Guide", href: "#" },
+                { label: "Troubleshooting", href: "#" },
+                { label: "Contact Us", href: "/#contact-cta" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "News", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 AirPods. All rights reserved."
+          bottomRightText="Powered by Premium Audio Technology"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ContactFaq from "@/components/sections/contact/ContactFaq";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Phone, Mail } from "lucide-react";
+import { useState } from "react";
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    subject: "",    message: ""});
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // Here you would typically send the form data to a backend
+    console.log("Form submitted:", formData);
+    setSubmitted(true);
+    setTimeout(() => {
+      setFormData({ name: "", email: "", subject: "", message: "" });
+      setSubmitted(false);
+    }, 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noise"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Products", id: "products" },
+            { name: "Features", id: "features" },
+            { name: "Why AirPods", id: "metrics" },
+            { name: "Support", id: "faq" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{ text: "Shop Now", href: "/" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact" className="py-20">
+        <div className="w-content-width mx-auto">
+          <div className="space-y-8">
+            {/* Contact Information Section */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+              <div className="rounded-lg border border-accent/20 p-8">
+                <div className="flex items-center gap-4 mb-4">
+                  <div className="w-12 h-12 rounded-lg bg-primary-cta/10 flex items-center justify-center">
+                    <Phone className="w-6 h-6 text-primary-cta" />
+                  </div>
+                  <h3 className="text-lg font-semibold">Call Us</h3>
+                </div>
+                <p className="text-foreground/80">+1 (800) 275-2273</p>
+                <p className="text-sm text-foreground/60 mt-2">Available Monday to Friday, 9AM to 6PM EST</p>
+              </div>
+
+              <div className="rounded-lg border border-accent/20 p-8">
+                <div className="flex items-center gap-4 mb-4">
+                  <div className="w-12 h-12 rounded-lg bg-primary-cta/10 flex items-center justify-center">
+                    <Mail className="w-6 h-6 text-primary-cta" />
+                  </div>
+                  <h3 className="text-lg font-semibold">Email Us</h3>
+                </div>
+                <p className="text-foreground/80">support@airpods.com</p>
+                <p className="text-sm text-foreground/60 mt-2">We'll get back to you within 24 hours</p>
+              </div>
+
+              <div className="rounded-lg border border-accent/20 p-8">
+                <div className="flex items-center gap-4 mb-4">
+                  <div className="w-12 h-12 rounded-lg bg-primary-cta/10 flex items-center justify-center">
+                    <Phone className="w-6 h-6 text-primary-cta" />
+                  </div>
+                  <h3 className="text-lg font-semibold">Live Chat</h3>
+                </div>
+                <p className="text-foreground/80">Chat with our support team</p>
+                <p className="text-sm text-foreground/60 mt-2">Available 24/7 for immediate assistance</p>
+              </div>
+            </div>
+
+            {/* Contact Form Section */}
+            <div className="rounded-lg border border-accent/20 p-8 md:p-12">
+              <h2 className="text-3xl font-bold mb-2">Send us a Message</h2>
+              <p className="text-foreground/70 mb-8">Have a question or feedback? Fill out the form below and we'll get back to you as soon as possible.</p>
+
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium mb-2">Name</label>
+                    <input
+                      type="text"
+                      id="name"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      required
+                      placeholder="Your name"
+                      className="w-full px-4 py-2 rounded-lg bg-secondary-cta/50 border border-accent/20 focus:outline-none focus:border-primary-cta"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="email" className="block text-sm font-medium mb-2">Email</label>
+                    <input
+                      type="email"
+                      id="email"
+                      name="email"
+                      value={formData.email}
+                      onChange={handleInputChange}
+                      required
+                      placeholder="your@email.com"
+                      className="w-full px-4 py-2 rounded-lg bg-secondary-cta/50 border border-accent/20 focus:outline-none focus:border-primary-cta"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="subject" className="block text-sm font-medium mb-2">Subject</label>
+                  <input
+                    type="text"
+                    id="subject"
+                    name="subject"
+                    value={formData.subject}
+                    onChange={handleInputChange}
+                    required
+                    placeholder="How can we help?"
+                    className="w-full px-4 py-2 rounded-lg bg-secondary-cta/50 border border-accent/20 focus:outline-none focus:border-primary-cta"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="message" className="block text-sm font-medium mb-2">Message</label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    value={formData.message}
+                    onChange={handleInputChange}
+                    required
+                    placeholder="Tell us more..."
+                    rows={6}
+                    className="w-full px-4 py-2 rounded-lg bg-secondary-cta/50 border border-accent/20 focus:outline-none focus:border-primary-cta resize-none"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full md:w-auto px-6 py-2 rounded-lg bg-primary-cta text-white font-medium hover:bg-primary-cta/90 transition"
+                >
+                  {submitted ? "Message Sent!" : "Send Message"}
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="faq" data-section="faq">
+        <ContactFaq
+          faqs={[
+            {
+              id: "1",              title: "What's the best way to contact support?",              content: "You can reach our support team via phone at +1 (800) 275-2273, email at support@airpods.com, or through our 24/7 live chat. Choose whichever method is most convenient for you."},
+            {
+              id: "2",              title: "How long does it take to get a response?",              content: "Phone and live chat support is available 24/7. For email inquiries, we typically respond within 24 hours during business days. We prioritize urgent matters and aim to resolve issues as quickly as possible."},
+            {
+              id: "3",              title: "Do you offer technical support for troubleshooting?",              content: "Yes, our support team is trained to help with any technical issues you may encounter with your AirPods. We can help with connectivity, audio quality, battery life, and general troubleshooting."},
+            {
+              id: "4",              title: "What's your return and warranty policy?",              content: "We offer a 30-day return policy on all products. Additionally, all AirPods come with a one-year limited warranty covering manufacturing defects. Extended coverage options are also available."},
+            {
+              id: "5",              title: "Can I schedule a call with a specialist?",              content: "Absolutely! You can schedule a call with one of our audio specialists through our website or by calling our main support line. We can provide personalized recommendations based on your needs."},
+            {
+              id: "6",              title: "Do you ship internationally?",              content: "Yes, we ship to most countries worldwide. Shipping times and costs vary by location. Visit our shipping policy page for more details, or contact support for specific questions about your region."},
+          ]}
+          ctaTitle="Still have questions?"
+          ctaDescription="Let's get started with a quick consultation to find the perfect solution for your audio needs."
+          ctaButton={{ text: "Schedule a Call", href: "#" }}
+          ctaIcon={Phone}
+          useInvertedBackground={false}
+          animationType="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "AirPods Pro", href: "/" },
+                { label: "AirPods Max", href: "/" },
+                { label: "AirPods (2nd Gen)", href: "/" },
+                { label: "Compare Models", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "FAQ", href: "/" },
+                { label: "Setup Guide", href: "#" },
+                { label: "Troubleshooting", href: "#" },
+                { label: "Contact Us", href: "/contact" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "News", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 AirPods. All rights reserved."
+          bottomRightText="Powered by Premium Audio Technology"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/features/page.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Zap, Sparkles, Battery, Headphones, Volume2, Radio, Wifi } from "lucide-react";
+
+export default function FeaturesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Products", id: "/" },
+            { name: "Features", id: "/features" },
+            { name: "Why AirPods", id: "/" },
+            { name: "Support", id: "/" },
+            { name: "Compare", id: "/comparison" },
+          ]}
+          button={{ text: "Shop Now", href: "/#products" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="Discover AirPods Key Features"
+          description="Explore the innovative technologies that make AirPods the world's most advanced wireless audio experience. From noise cancellation to seamless connectivity."
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "Active", label: "Noise Cancellation" },
+            { value: "Spatial", label: "3D Audio" },
+            { value: "Instant", label: "Device Switching" },
+          ]}
+          enableKpiAnimation={true}
+          tag="Innovation at Work"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Explore All Products", href: "/#products" },
+            { text: "Compare Models", href: "/comparison" },
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png?_wi=1"
+          imageAlt="AirPods Pro premium features showcase"
+          mediaAnimation="blur-reveal"
+          imagePosition="right"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardMedia
+          title="Signature AirPods Technologies"
+          description="Experience the cutting-edge features that define premium wireless audio."
+          tag="Core Technologies"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "noise-cancellation",              title: "Active Noise Cancellation (ANC)",              description: "Industry-leading active noise cancellation uses outward and inward microphones to detect and cancel unwanted sound. Adapts to your environment in real time, blocking background noise while letting important sounds through.",              tag: "Pro Feature",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png?_wi=2",              imageAlt: "Active noise cancellation visualization",              buttons: [{ text: "Learn More", href: "#" }],
+            },
+            {
+              id: "battery-life",              title: "Extended Battery Life",              description: "Get up to 6 hours of listening time on a single charge with AirPods Pro, extending to 30 hours with the wireless charging case. Smart power management ensures you stay connected all day. Fast charging gives you 5 minutes of listening in just 5 minutes of charging.",              tag: "All Day Power",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/battery-charge-indicator-visualization-sh-1772884352345-a1b2c3d4.png?_wi=2",              imageAlt: "Battery life indicator",              buttons: [{ text: "See Details", href: "#" }],
+            },
+            {
+              id: "immersive-sound",              title: "Immersive Sound Experience",              description: "Premium audio drivers deliver crisp, clear highs and deep, controlled bass. Personalized spatial audio with dynamic head tracking creates a theater-like surround sound experience. Adaptive Audio intelligently blends your music with helpful ambient sounds.",              tag: "Premium Audio",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png?_wi=2",              imageAlt: "Immersive spatial audio visualization",              buttons: [{ text: "Experience It", href: "#" }],
+            },
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <AboutMetric
+          title="Performance Metrics That Matter"
+          metrics={[
+            { icon: Battery, label: "Maximum Battery", value: "30 Hours" },
+            { icon: Radio, label: "Bluetooth Range", value: "10+ Meters" },
+            { icon: Volume2, label: "Noise Reduction", value: "Up to 40dB" },
+            { icon: Wifi, label: "Seamless Pairing", value: "All Apple Devices" },
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Experience the Difference"
+          tagIcon={Headphones}
+          tagAnimation="slide-up"
+          title="Ready to Upgrade Your Audio?"
+          description="Discover which AirPods model is perfect for your lifestyle. Compare features, read expert reviews, and find your ideal match."
+          buttons={[
+            { text: "Shop Now", href: "/#products" },
+            { text: "Compare Models", href: "/comparison" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "AirPods Pro", href: "/#products" },
+                { label: "AirPods Max", href: "/#products" },
+                { label: "AirPods (2nd Gen)", href: "/#products" },
+                { label: "Compare Models", href: "/comparison" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "FAQ", href: "/#faq" },
+                { label: "Setup Guide", href: "#" },
+                { label: "Troubleshooting", href: "#" },
+                { label: "Contact Us", href: "/#contact-cta" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "News", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 AirPods. All rights reserved."
+          bottomRightText="Powered by Premium Audio Technology"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -16,15 +16,15 @@ import { Zap, Sparkles, ShoppingBag, Battery, Globe, Volume2, Award, Headphones,
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="icon-arrow"
+      defaultButtonVariant="hover-bubble"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="compact"
-      sizing="mediumLargeSizeMediumTitles"
-      background="noise"
-      cardStyle="inset"
-      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="solid"
+      contentWidth="medium"
+      sizing="mediumSizeLargeTitles"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
@@ -45,7 +45,7 @@ export default function LandingPage() {
         <HeroSplitKpi
           title="Experience Sound Like Never Before"
           description="Premium wireless audio with active noise cancellation, spatial audio, and seamless Apple ecosystem integration. Discover the perfect fit for every moment."
-          background={{ variant: "noise" }}
+          background={{ variant: "plain" }}
           kpis={[
             { value: "6-30 Hours", label: "Battery Life" },
             { value: "Adaptive", label: "Noise Control" },
@@ -213,7 +213,7 @@ export default function LandingPage() {
             { text: "Learn More", href: "#features" },
           ]}
           buttonAnimation="slide-up"
-          background={{ variant: "noise" }}
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
         />
       </div>

src/app/pricing/page.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { CreditCard, Check } from "lucide-react";
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noise"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Products", id: "products" },
+            { name: "Features", id: "features" },
+            { name: "Why AirPods", id: "metrics" },
+            { name: "Support", id: "faq" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{ text: "Shop Now", href: "/" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardFive
+          title="Simple, Transparent Pricing"
+          description="Choose the perfect plan for your audio needs. All plans include premium support and lifetime updates."
+          tag="Pricing"
+          tagIcon={CreditCard}
+          tagAnimation="slide-up"
+          plans={[
+            {
+              id: "airpods-standard",              tag: "AirPods Standard",              price: "$129",              period: "/one-time",              description: "Perfect for everyday listening with classic AirPods comfort and convenience.",              button: { text: "Shop Now", href: "/" },
+              featuresTitle: "What's Included:",              features: [
+                "5 hours of battery life",                "24 hours with charging case",                "Automatic ear detection",                "Double tap to control",                "Seamless device switching"],
+            },
+            {
+              id: "airpods-pro",              tag: "AirPods Pro",              tagIcon: Check,
+              price: "$249",              period: "/one-time",              description: "Advanced audio features with active noise cancellation for immersive listening.",              button: { text: "Shop Now", href: "/" },
+              featuresTitle: "What's Included:",              features: [
+                "Active Noise Cancellation",                "Transparency mode",                "Spatial Audio with dynamic head tracking",                "6 hours of battery life",                "30 hours with charging case",                "Water and sweat resistant (IPX4)",                "Adaptive Audio",                "Personalized Volume"],
+            },
+            {
+              id: "airpods-max",              tag: "AirPods Max",              price: "$549",              period: "/one-time",              description: "Premium over-ear headphones with breakthrough audio and all-day comfort.",              button: { text: "Shop Now", href: "/" },
+              featuresTitle: "What's Included:",              features: [
+                "Over-ear design with premium materials",                "Active Noise Cancellation",                "Spatial Audio with dynamic head tracking",                "20 hours of battery life",                "All-day comfort with custom fit",                "Computational audio",                "Automatic switching across devices",                "Premium audio quality",                "Built-in digital crown"],
+            },
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "AirPods Pro", href: "/" },
+                { label: "AirPods Max", href: "/" },
+                { label: "AirPods (2nd Gen)", href: "/" },
+                { label: "Compare Models", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "FAQ", href: "/" },
+                { label: "Setup Guide", href: "#" },
+                { label: "Troubleshooting", href: "#" },
+                { label: "Contact Us", href: "/contact" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "News", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 AirPods. All rights reserved."
+          bottomRightText="Powered by Premium Audio Technology"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/reviews/page.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
+import BlogCardThree from "@/components/sections/blog/BlogCardThree";
+import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Star, Award, Users, TrendingUp, Headphones } from "lucide-react";
+
+export default function ReviewsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Products", id: "/" },
+            { name: "Features", id: "/" },
+            { name: "Why AirPods", id: "/" },
+            { name: "Support", id: "/" },
+            { name: "Reviews", id: "/reviews" },
+            { name: "About", id: "/about" },
+          ]}
+          button={{ text: "Shop Now", href: "/" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Customer Reviews & Testimonials"
+          description="Discover what thousands of satisfied customers are saying about their AirPods experience. Read authentic reviews from real users across the globe."
+          background={{ variant: "plain" }}
+          tag="Customer Stories"
+          tagIcon={Star}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Share Your Review", href: "#" },
+            { text: "Explore Products", href: "/" },
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/happy-customer-giving-five-star-review-sa-1772884352890-a1b2c3d4.png"
+          imageAlt="Satisfied customer giving a five-star review"
+          mediaAnimation="blur-reveal"
+          imagePosition="right"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardFifteen
+          testimonial="Over 10,000+ customers trust AirPods for their premium audio experience"
+          rating={5}
+          author="See what they say"
+          avatars={[
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-of-a-satisfied-use-1772884351817-6dec7f08.png", alt: "Customer 1" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/happy-lifestyle-photo-of-person-wearing--1772884353901-6ee88695.png", alt: "Customer 2" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-businessperson-using-airpod-1772884353609-0ef52970.png", alt: "Customer 3" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/creative-professional-or-content-creator-1772884352345-f1e1d55c.png", alt: "Customer 4" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/active-lifestyle-user-athlete-or-fitness-1772884351718-1b549457.png", alt: "Customer 5" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/diverse-user-in-relaxed-comfortable-sett-1772884352272-d4dc5302.png", alt: "Customer 6" },
+          ]}
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="reviews" data-section="reviews">
+        <BlogCardThree
+          title="Detailed Customer Reviews"
+          description="Read in-depth reviews from AirPods users sharing their experiences, ratings, and recommendations."
+          tag="Reviews"
+          tagIcon={Star}
+          tagAnimation="slide-up"
+          blogs={[
+            {
+              id: "1",              category: "AirPods Pro",              title: "Best Wireless Earbuds for Audio Quality and Comfort",              excerpt: "After using AirPods Pro for 6 months, I'm thoroughly impressed with the sound quality and seamless integration with my devices.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png?_wi=3",              imageAlt: "AirPods Pro review",              authorName: "Sarah Chen",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-of-a-satisfied-use-1772884351817-6dec7f08.png",              date: "15 Jan 2025",              onBlogClick: () => console.log("Review clicked"),
+            },
+            {
+              id: "2",              category: "AirPods Max",              title: "Premium Over-Ear Experience That Justifies the Investment",              excerpt: "AirPods Max delivers exceptional sound, comfort, and integration that makes them worth every penny for audio enthusiasts.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-max-over-ear-headphones-displaye-1772884352294-e666eff4.png?_wi=2",              imageAlt: "AirPods Max review",              authorName: "James Wilson",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/happy-lifestyle-photo-of-person-wearing--1772884353901-6ee88695.png",              date: "12 Jan 2025",              onBlogClick: () => console.log("Review clicked"),
+            },
+            {
+              id: "3",              category: "AirPods 2nd Gen",              title: "Affordable Excellence in Wireless Audio",              excerpt: "Great value for money. These AirPods offer reliable performance and solid build quality at an accessible price point.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png?_wi=2",              imageAlt: "AirPods 2nd generation review",              authorName: "Emma Davis",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-businessperson-using-airpod-1772884353609-0ef52970.png",              date: "10 Jan 2025",              onBlogClick: () => console.log("Review clicked"),
+            },
+            {
+              id: "4",              category: "Active Noise Cancellation",              title: "Game-Changing Noise Cancellation Technology",              excerpt: "The adaptive noise cancellation in AirPods Pro is revolutionary. It seamlessly adapts to your environment and never disappoints.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png?_wi=3",              imageAlt: "Noise cancellation review",              authorName: "Michael Chen",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/creative-professional-or-content-creator-1772884352345-f1e1d55c.png",              date: "8 Jan 2025",              onBlogClick: () => console.log("Review clicked"),
+            },
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+        />
+      </div>
+
+      <div id="social-proof" data-section="social-proof">
+        <SocialProofOne
+          title="Trusted by Industry Leaders"
+          description="Recommended and used by tech reviewers, audio professionals, and major publications worldwide."
+          tag="Industry Recognition"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          names={[
+            "TechCrunch",            "The Verge",            "WIRED",            "MacRumors",            "AudioMag",            "TechRadar",            "Engadget"]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          speed={40}
+          showCard={true}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Ready to Experience Premium Audio?"
+          tagIcon={Headphones}
+          tagAnimation="slide-up"
+          title="Join Thousands of Satisfied Customers"
+          description="Experience the AirPods difference today. Find your perfect model and discover why customers worldwide choose AirPods for their audio needs."
+          buttons={[
+            { text: "Shop Now", href: "/" },
+            { text: "Compare Models", href: "/" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "AirPods Pro", href: "/" },
+                { label: "AirPods Max", href: "/" },
+                { label: "AirPods (2nd Gen)", href: "/" },
+                { label: "Compare Models", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "FAQ", href: "/" },
+                { label: "Setup Guide", href: "#" },
+                { label: "Troubleshooting", href: "#" },
+                { label: "Contact Us", href: "/" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/about" },
+                { label: "Reviews", href: "/reviews" },
+                { label: "Careers", href: "#" },
+                { label: "News", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 AirPods. All rights reserved."
+          bottomRightText="Powered by Premium Audio Technology"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { ShoppingBag, Headphones } from "lucide-react";
+
+export default function ShopPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Products", id: "products" },
+            { name: "Features", id: "#features" },
+            { name: "Why AirPods", id: "#metrics" },
+            { name: "Support", id: "#faq" },
+            { name: "Shop", id: "shop" },
+          ]}
+          button={{ text: "Home", href: "/" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardThree
+          title="PodsX Pro & PodsX 4 - Premium Wireless Audio"
+          description="Explore our flagship PodsX Pro with advanced noise cancellation and the versatile PodsX 4 designed for everyday excellence. Both models deliver premium sound quality and seamless connectivity."
+          tag="Shop Now"
+          tagIcon={ShoppingBag}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "podsx-pro",              name: "PodsX Pro",              price: "$299",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png?_wi=4",              imageAlt: "PodsX Pro with advanced active noise cancellation",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-pro-specs",              name: "PodsX Pro - Specifications",              price: "Details",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png?_wi=2",              imageAlt: "PodsX Pro premium specifications showcase",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-4",              name: "PodsX 4",              price: "$199",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png?_wi=3",              imageAlt: "PodsX 4 versatile everyday audio solution",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-4-specs",              name: "PodsX 4 - Specifications",              price: "Details",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-max-over-ear-headphones-displaye-1772884352294-e666eff4.png?_wi=3",              imageAlt: "PodsX 4 comprehensive specifications overview",              initialQuantity: 1,
+            },
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactCTA
+          tag="Ready to Order?"
+          tagIcon={Headphones}
+          tagAnimation="slide-up"
+          title="Get Your PodsX Today"
+          description="Choose between PodsX Pro for ultimate performance or PodsX 4 for everyday excellence. Both models feature premium sound, extended battery life, and intuitive controls."
+          buttons={[
+            { text: "Buy PodsX Pro", href: "#podsx-pro" },
+            { text: "Buy PodsX 4", href: "#podsx-4" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "PodsX Pro", href: "#podsx-pro" },
+                { label: "PodsX 4", href: "#podsx-4" },
+                { label: "Compare Models", href: "#" },
+                { label: "Accessories", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Setup Guide", href: "#" },
+                { label: "Troubleshooting", href: "#" },
+                { label: "Warranty", href: "#" },
+                { label: "Contact Us", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "News", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Return Policy", href: "#" },
+                { label: "Shipping Info", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 PodsX. All rights reserved."
+          bottomRightText="Premium Audio Technology"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #efebe5;
-  --card: #f7f2ea;
-  --foreground: #000000;
-  --primary-cta: #000000;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #106EFB;
   --primary-cta-text: #efebe5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #000000;
-  --accent: #ffffff;
-  --background-accent: #e1b875;
+  --accent: #e2e2e2;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);