Update src/app/shop/page.tsx

Merge version_2 into main

src/app/bestsellers/page.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { TrendingUp } from "lucide-react";
+
+export default function BestsellersPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Shop", id: "/shop" },
+    { name: "Best Sellers", id: "/bestsellers" },
+    { name: "About", id: "/about" },
+    { name: "Contact", id: "/contact" },
+  ];
+
+  const bestsellerProducts = [
+    {
+      id: "5",      name: "Nebula Premium Pack",      price: "$199.99",      imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=1",      imageAlt: "Nebula Premium Pack",      onProductClick: () => console.log("View Nebula Premium Pack"),
+      onFavorite: () => console.log("Added to favorites: Nebula Premium Pack"),
+    },
+    {
+      id: "6",      name: "Stellar Pro Edition",      price: "$219.99",      imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=2",      imageAlt: "Stellar Pro Edition",      onProductClick: () => console.log("View Stellar Pro Edition"),
+      onFavorite: () => console.log("Added to favorites: Stellar Pro Edition"),
+    },
+    {
+      id: "7",      name: "Cosmos Elite Pack",      price: "$229.99",      imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg?_wi=3",      imageAlt: "Cosmos Elite Pack",      onProductClick: () => console.log("View Cosmos Elite Pack"),
+      onFavorite: () => console.log("Added to favorites: Cosmos Elite Pack"),
+    },
+    {
+      id: "1",      name: "Eclipse Motion Pro",      price: "$149.99",      imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=2",      imageAlt: "Eclipse Motion Pro",      onProductClick: () => console.log("View Eclipse Motion Pro"),
+      onFavorite: () => console.log("Added to favorites: Eclipse Motion Pro"),
+    },
+    {
+      id: "2",      name: "Zenith Comfort Elite",      price: "$179.99",      imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=2",      imageAlt: "Zenith Comfort Elite",      onProductClick: () => console.log("View Zenith Comfort Elite"),
+      onFavorite: () => console.log("Added to favorites: Zenith Comfort Elite"),
+    },
+    {
+      id: "3",      name: "Aurora Premium Series",      price: "$159.99",      imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=2",      imageAlt: "Aurora Premium Series",      onProductClick: () => console.log("View Aurora Premium Series"),
+      onFavorite: () => console.log("Added to favorites: Aurora Premium Series"),
+    },
+    {
+      id: "4",      name: "Luxora Elite Collection",      price: "$189.99",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=2",      imageAlt: "Luxora Elite Collection",      onProductClick: () => console.log("View Luxora Elite Collection"),
+      onFavorite: () => console.log("Added to favorites: Luxora Elite Collection"),
+    },
+    {
+      id: "8",      name: "Vortex Dynamic Series",      price: "$169.99",      imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=3",      imageAlt: "Vortex Dynamic Series",      onProductClick: () => console.log("View Vortex Dynamic Series"),
+      onFavorite: () => console.log("Added to favorites: Vortex Dynamic Series"),
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="outline"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={navItems}
+          button={{ text: "Shop Now", href: "/shop" }}
+          brandName="Alignra"
+        />
+      </div>
+
+      <div id="bestsellers-header" data-section="bestsellers-header" className="bg-gray-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 md:px-8">
+          <h1 className="text-5xl md:text-6xl font-light mb-6">Best Sellers</h1>
+          <p className="text-lg text-gray-600">Our most loved products - trusted by thousands of satisfied customers worldwide</p>
+        </div>
+      </div>
+
+      <div id="bestsellers" data-section="bestsellers" className="bg-white">
+        <div className="max-w-7xl mx-auto px-4 md:px-8 py-20">
+          <ProductCardOne
+            title="Top Rated Products"
+            description="Explore our bestselling collection featuring the most popular and highly-rated premium products"
+            tag="Top Rated"
+            tagIcon={TrendingUp}
+            tagAnimation="slide-up"
+            products={bestsellerProducts}
+            gridVariant="four-items-2x2-equal-grid"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            carouselMode="buttons"
+            ariaLabel="Best sellers products section"
+            containerClassName="py-20"
+          />
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Alignra"
+          columns={[
+            {
+              items: [
+                { label: "Home", href: "/" },
+                { label: "Shop", href: "/shop" },
+                { label: "Best Sellers", href: "/bestsellers" },
+                { label: "About", href: "/about" },
+              ],
+            },
+            {
+              items: [
+                { label: "Contact", href: "/contact" },
+                { label: "FAQ", href: "/#faq" },
+                { label: "Support", href: "/support" },
+                { label: "Careers", href: "/careers" },
+              ],
+            },
+            {
+              items: [
+                { label: "Privacy Policy", href: "/privacy" },
+                { label: "Terms of Service", href: "/terms" },
+                { label: "Shipping Policy", href: "/shipping" },
+                { label: "Returns", href: "/returns" },
+              ],
+            },
+            {
+              items: [
+                { label: "Twitter", href: "https://twitter.com" },
+                { label: "Instagram", href: "https://instagram.com" },
+                { label: "Facebook", href: "https://facebook.com" },
+                { label: "LinkedIn", href: "https://linkedin.com" },
+              ],
+            },
+            {
+              items: [
+                { label: "Newsletter", href: "/#contact" },
+                { label: "Blog", href: "/blog" },
+                { label: "Brand Kit", href: "/brand-kit" },
+                { label: "Press", href: "/press" },
+              ],
+            },
+          ]}
+          ariaLabel="Site footer"
+          containerClassName="bg-gray-900 text-white"
+          logoClassName="text-4xl font-light mb-8"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -11,8 +11,8 @@ import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
-import Link from "next/link";
 import { Sparkles, Star, Award, TrendingUp, Zap, Heart, CheckCircle, Truck, Shield, Headphones, Mail, Check, HelpCircle } from "lucide-react";
+import { useState, useEffect } from "react";
 
 export default function HomePage() {
   const navItems = [
@@ -23,10 +23,69 @@ export default function HomePage() {
     { name: "Contact", id: "/contact" },
   ];
 
+  const [timeRemaining, setTimeRemaining] = useState<string>("48:00:00");
+
+  useEffect(() => {
+    const calculateTimeRemaining = () => {
+      const now = new Date();
+      const endTime = new Date(now.getTime() + 48 * 60 * 60 * 1000);
+      const diff = endTime.getTime() - now.getTime();
+
+      if (diff > 0) {
+        const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
+        const minutes = Math.floor((diff / (1000 * 60)) % 60);
+        const seconds = Math.floor((diff / 1000) % 60);
+        setTimeRemaining(
+          `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`
+        );
+      } else {
+        setTimeRemaining("00:00:00");
+      }
+    };
+
+    calculateTimeRemaining();
+    const interval = setInterval(calculateTimeRemaining, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
   const handleNewsletterSubmit = (email: string) => {
     console.log("Newsletter signup:", email);
   };
 
+  const featuredProducts = [
+    {
+      id: "1",      name: "Eclipse Motion Pro",      price: "$149.99",      imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=2",      imageAlt: "Eclipse Motion Pro",      onProductClick: () => window.open("/shop/eclipse-motion-pro", "_blank"),
+      onFavorite: () => console.log("Added to favorites: Eclipse Motion Pro"),
+    },
+    {
+      id: "2",      name: "Zenith Comfort Elite",      price: "$179.99",      imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=2",      imageAlt: "Zenith Comfort Elite",      onProductClick: () => window.open("/shop/zenith-comfort-elite", "_blank"),
+      onFavorite: () => console.log("Added to favorites: Zenith Comfort Elite"),
+    },
+    {
+      id: "3",      name: "Aurora Premium Series",      price: "$159.99",      imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=2",      imageAlt: "Aurora Premium Series",      onProductClick: () => window.open("/shop/aurora-premium-series", "_blank"),
+      onFavorite: () => console.log("Added to favorites: Aurora Premium Series"),
+    },
+    {
+      id: "4",      name: "Luxora Elite Collection",      price: "$189.99",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=2",      imageAlt: "Luxora Elite Collection",      onProductClick: () => window.open("/shop/luxora-elite-collection", "_blank"),
+      onFavorite: () => console.log("Added to favorites: Luxora Elite Collection"),
+    },
+  ];
+
+  const bestSellersProducts = [
+    {
+      id: "5",      name: "Nebula Premium Pack",      price: "$199.99",      imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=1",      imageAlt: "Nebula Premium Pack",      onProductClick: () => window.open("/shop/nebula-premium-pack", "_blank"),
+      onFavorite: () => console.log("Added to favorites: Nebula Premium Pack"),
+    },
+    {
+      id: "6",      name: "Stellar Pro Edition",      price: "$219.99",      imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=2",      imageAlt: "Stellar Pro Edition",      onProductClick: () => window.open("/shop/stellar-pro-edition", "_blank"),
+      onFavorite: () => console.log("Added to favorites: Stellar Pro Edition"),
+    },
+    {
+      id: "7",      name: "Cosmos Elite Pack",      price: "$229.99",      imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg?_wi=1",      imageAlt: "Cosmos Elite Pack",      onProductClick: () => window.open("/shop/cosmos-elite-pack", "_blank"),
+      onFavorite: () => console.log("Added to favorites: Cosmos Elite Pack"),
+    },
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -58,20 +117,15 @@ export default function HomePage() {
           background={{ variant: "radial-gradient" }}
           mediaItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/composition-natural-argan-seeds_23-2149016622.jpg",              imageAlt: "Premium lifestyle product showcase"
+              imageSrc: "http://img.b2bpic.net/free-photo/composition-natural-argan-seeds_23-2149016622.jpg",              imageAlt: "Premium lifestyle product showcase"},
-            },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=1",              imageAlt: "Premium comfort collection"
+              imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=1",              imageAlt: "Premium comfort collection"},
-            },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=1",              imageAlt: "Luxury product range"
+              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=1",              imageAlt: "Luxury product range"},
-            },
             {
-              imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=1",              imageAlt: "High-end lifestyle products"
+              imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=1",              imageAlt: "High-end lifestyle products"},
-            },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=1",              imageAlt: "Premium accessory collection"
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=1",              imageAlt: "Premium accessory collection"},
-            },
           ]}
           buttons={[
             { text: "Shop Now", href: "/shop" },
@@ -92,20 +146,7 @@ export default function HomePage() {
             tag="New Arrivals"
             tagIcon={Star}
             tagAnimation="slide-up"
-            products={[
+            products={featuredProducts}
-              {
-                id: "1",                name: "Eclipse Motion Pro",                price: "$149.99",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=2",                imageAlt: "Eclipse Motion Pro"
-              },
-              {
-                id: "2",                name: "Zenith Comfort Elite",                price: "$179.99",                imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=2",                imageAlt: "Zenith Comfort Elite"
-              },
-              {
-                id: "3",                name: "Aurora Premium Series",                price: "$159.99",                imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=2",                imageAlt: "Aurora Premium Series"
-              },
-              {
-                id: "4",                name: "Luxora Elite Collection",                price: "$189.99",                imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=2",                imageAlt: "Luxora Elite Collection"
-              },
-            ]}
             gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
             textboxLayout="default"
@@ -129,8 +170,7 @@ export default function HomePage() {
               {
                 id: "1",                title: "Premium Quality",                description:
                   "Crafted with high-quality durable materials that stand the test of time. Every product undergoes rigorous quality control to ensure perfection.",                media: {
-                  imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=3",                  imageAlt: "Premium Quality"
+                  imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=3",                  imageAlt: "Premium Quality"},
-                },
                 items: [
                   { icon: CheckCircle, text: "Premium materials" },
                   { icon: CheckCircle, text: "Rigorous testing" },
@@ -141,8 +181,7 @@ export default function HomePage() {
               {
                 id: "2",                title: "Fast Shipping",                description:
                   "Reliable delivery with real-time tracking. Your order is carefully packaged and shipped within 24 hours to ensure quick arrival.",                media: {
-                  imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=3",                  imageAlt: "Fast Shipping"
+                  imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=3",                  imageAlt: "Fast Shipping"},
-                },
                 items: [
                   { icon: Truck, text: "24/7 tracking" },
                   { icon: Truck, text: "Express delivery" },
@@ -153,8 +192,7 @@ export default function HomePage() {
               {
                 id: "3",                title: "30 Day Guarantee",                description:
                   "Risk-free shopping with our comprehensive return and refund policy. If you're not satisfied, we'll make it right within 30 days.",                media: {
-                  imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=3",                  imageAlt: "30 Day Guarantee"
+                  imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=3",                  imageAlt: "30 Day Guarantee"},
-                },
                 items: [
                   { icon: Shield, text: "Money-back guarantee" },
                   { icon: Shield, text: "No questions asked" },
@@ -165,8 +203,7 @@ export default function HomePage() {
               {
                 id: "4",                title: "24/7 Support",                description:
                   "Dedicated customer assistance available around the clock. Our support team is always ready to help with any questions or concerns.",                media: {
-                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=3",                  imageAlt: "24/7 Support"
+                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=3",                  imageAlt: "24/7 Support"},
-                },
                 items: [
                   { icon: Headphones, text: "Live chat support" },
                   { icon: Headphones, text: "Email assistance" },
@@ -192,17 +229,7 @@ export default function HomePage() {
             tag="Top Rated"
             tagIcon={TrendingUp}
             tagAnimation="slide-up"
-            products={[
+            products={bestSellersProducts}
-              {
-                id: "5",                name: "Nebula Premium Pack",                price: "$199.99",                imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=1",                imageAlt: "Nebula Premium Pack"
-              },
-              {
-                id: "6",                name: "Stellar Pro Edition",                price: "$219.99",                imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=2",                imageAlt: "Stellar Pro Edition"
-              },
-              {
-                id: "7",                name: "Cosmos Elite Pack",                price: "$229.99",                imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg",                imageAlt: "Cosmos Elite Pack"
-              },
-            ]}
             gridVariant="three-columns-all-equal-width"
             animationType="slide-up"
             textboxLayout="default"
@@ -216,29 +243,33 @@ export default function HomePage() {
 
       <div id="limited-offer" data-section="limited-offer" className="bg-gradient-to-r from-blue-50 via-white to-blue-50">
         <div className="max-w-7xl mx-auto px-4 md:px-8 py-20">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4">Limited Time Offer</h2>
+            <p className="text-lg text-gray-600 mb-6">Don't miss out on this exclusive opportunity. Get premium products at unbeatable prices with our special promotional offer.</p>
+            <div className="inline-block bg-white px-8 py-4 rounded-full shadow-lg">
+              <p className="text-sm text-gray-600 mb-2">Time Remaining:</p>
+              <p className="text-3xl font-bold text-blue-600 font-mono">{timeRemaining}</p>
+            </div>
+          </div>
           <PricingCardTwo
-            title="Limited Time Offer"
+            title=""
-            description="Don't miss out on this exclusive opportunity. Get premium products at unbeatable prices with our special promotional offer."
+            description=""
-            tag="Flash Sale"
-            tagIcon={Zap}
-            tagAnimation="slide-up"
             plans={[
               {
                 id: "offer1",                badge: "Exclusive Deal",                badgeIcon: Sparkles,
-                price: "SAVE 20%",                subtitle: "48 hours remaining - Limited stock available",                buttons: [
+                price: "SAVE 20%",                subtitle: "Premium products at unbeatable prices - Limited stock available",                buttons: [
                   { text: "Claim Your Discount", href: "/shop" },
                   { text: "Learn More", href: "#faq" },
                 ],
                 features: [
-                  "Valid on all premium products",                  "No minimum purchase required",                  "Free shipping included",                  "Expires in 48 hours"
+                  "Valid on all premium products",                  "No minimum purchase required",                  "Free shipping included",                  "Expires in 48 hours"],
-                ],
               },
             ]}
             animationType="slide-up"
             textboxLayout="default"
-            useInvertedBackground={true}
+            useInvertedBackground={false}
             ariaLabel="Limited time offer section"
-            containerClassName="py-20 bg-gradient-to-r from-blue-50 to-blue-100"
+            containerClassName=""
           />
         </div>
       </div>
@@ -248,23 +279,17 @@ export default function HomePage() {
           <TestimonialCardTwelve
             testimonials={[
               {
-                id: "1",                name: "Sarah Johnson",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=1",                imageAlt: "Sarah Johnson"
+                id: "1",                name: "Sarah Johnson",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=1",                imageAlt: "Sarah Johnson"},
-              },
               {
-                id: "2",                name: "Michael Chen",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=2",                imageAlt: "Michael Chen"
+                id: "2",                name: "Michael Chen",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=2",                imageAlt: "Michael Chen"},
-              },
               {
-                id: "3",                name: "Emily Rodriguez",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=1",                imageAlt: "Emily Rodriguez"
+                id: "3",                name: "Emily Rodriguez",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=1",                imageAlt: "Emily Rodriguez"},
-              },
               {
-                id: "4",                name: "David Kim",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=2",                imageAlt: "David Kim"
+                id: "4",                name: "David Kim",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=2",                imageAlt: "David Kim"},
-              },
               {
-                id: "5",                name: "Jessica Williams",                imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",                imageAlt: "Jessica Williams"
+                id: "5",                name: "Jessica Williams",                imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",                imageAlt: "Jessica Williams"},
-              },
               {
-                id: "6",                name: "James Anderson",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=3",                imageAlt: "James Anderson"
+                id: "6",                name: "James Anderson",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=3",                imageAlt: "James Anderson"},
-              },
             ]}
             cardTitle="Over 50,000 satisfied customers trust Alignra to deliver exceptional quality and premium lifestyle products"
             cardTag="Customer Testimonials"
@@ -288,8 +313,7 @@ export default function HomePage() {
             tagAnimation="slide-up"
             names={["Forbes", "TechCrunch", "Business Insider", "Wired", "The Verge", "Entrepreneur", "Inc Magazine", "Fast Company"]}
             logos={[
-              "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg",              "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg",              "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg",              "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg",              "http://img.b2bpic.net/free-vector/eye-catching-premium-letter-w-logo-background-royal-identity_1017-53727.jpg",              "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg",              "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg",              "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg"
+              "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg",              "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg",              "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg",              "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg",              "http://img.b2bpic.net/free-vector/eye-catching-premium-letter-w-logo-background-royal-identity_1017-53727.jpg",              "http://img.b2bpic.net/free-vector/ornamental-logo-template-design_1115-460.jpg",              "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg",              "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842742.jpg"]}
-            ]}
             textboxLayout="default"
             useInvertedBackground={true}
             speed={40}
@@ -310,23 +334,17 @@ export default function HomePage() {
             tagAnimation="slide-up"
             faqs={[
               {
-                id: "1",                title: "What is your return policy?",                content: "We offer a hassle-free 30-day money-back guarantee on all products. If you're not completely satisfied, simply contact our support team for a full refund. No questions asked."
+                id: "1",                title: "What is your return policy?",                content: "We offer a hassle-free 30-day money-back guarantee on all products. If you're not completely satisfied, simply contact our support team for a full refund. No questions asked."},
-              },
               {
-                id: "2",                title: "How long does shipping take?",                content: "Standard shipping typically takes 5-7 business days. We offer express shipping options for faster delivery. All orders include real-time tracking so you can monitor your package."
+                id: "2",                title: "How long does shipping take?",                content: "Standard shipping typically takes 5-7 business days. We offer express shipping options for faster delivery. All orders include real-time tracking so you can monitor your package."},
-              },
               {
-                id: "3",                title: "Do you offer international shipping?",                content: "Yes, we ship to over 150 countries worldwide. Shipping costs and delivery times vary by location. International orders typically arrive within 10-14 business days."
+                id: "3",                title: "Do you offer international shipping?",                content: "Yes, we ship to over 150 countries worldwide. Shipping costs and delivery times vary by location. International orders typically arrive within 10-14 business days."},
-              },
               {
-                id: "4",                title: "Is my payment information secure?",                content: "Absolutely. We use industry-leading SSL encryption and PCI DSS compliance to protect your payment information. All transactions are secure and processed through trusted payment gateways."
+                id: "4",                title: "Is my payment information secure?",                content: "Absolutely. We use industry-leading SSL encryption and PCI DSS compliance to protect your payment information. All transactions are secure and processed through trusted payment gateways."},
-              },
               {
-                id: "5",                title: "Do you offer bulk discounts?",                content: "Yes! We offer special pricing for bulk orders. Contact our sales team for a custom quote on orders of 10 or more items."
+                id: "5",                title: "Do you offer bulk discounts?",                content: "Yes! We offer special pricing for bulk orders. Contact our sales team for a custom quote on orders of 10 or more items."},
-              },
               {
-                id: "6",                title: "What's your warranty coverage?",                content: "All Alignra products come with a comprehensive warranty. Premium products include lifetime warranty, while other items include 1-2 year coverage depending on the product category."
+                id: "6",                title: "What's your warranty coverage?",                content: "All Alignra products come with a comprehensive warranty. Premium products include lifetime warranty, while other items include 1-2 year coverage depending on the product category."},
-              },
             ]}
             imageSrc="http://img.b2bpic.net/free-photo/call-center-senior-agent-uses-ai-tech-enhance-customer-interactions_482257-117995.jpg"
             imageAlt="Customer support team"

src/app/shop/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import { Star } from "lucide-react";
+import { Search, Filter } from "lucide-react";
 
 export default function ShopPage() {
   const navItems = [
@@ -15,6 +16,50 @@ export default function ShopPage() {
     { name: "Contact", id: "/contact" },
   ];
 
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("all");
+
+  const allProducts = [
+    {
+      id: "1",      name: "Eclipse Motion Pro",      price: "$149.99",      imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=2",      imageAlt: "Eclipse Motion Pro",      category: "premium",      onProductClick: () => console.log("View Eclipse Motion Pro"),
+      onFavorite: () => console.log("Added to favorites: Eclipse Motion Pro"),
+    },
+    {
+      id: "2",      name: "Zenith Comfort Elite",      price: "$179.99",      imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg?_wi=2",      imageAlt: "Zenith Comfort Elite",      category: "comfort",      onProductClick: () => console.log("View Zenith Comfort Elite"),
+      onFavorite: () => console.log("Added to favorites: Zenith Comfort Elite"),
+    },
+    {
+      id: "3",      name: "Aurora Premium Series",      price: "$159.99",      imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg?_wi=2",      imageAlt: "Aurora Premium Series",      category: "premium",      onProductClick: () => console.log("View Aurora Premium Series"),
+      onFavorite: () => console.log("Added to favorites: Aurora Premium Series"),
+    },
+    {
+      id: "4",      name: "Luxora Elite Collection",      price: "$189.99",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg?_wi=2",      imageAlt: "Luxora Elite Collection",      category: "luxury",      onProductClick: () => console.log("View Luxora Elite Collection"),
+      onFavorite: () => console.log("Added to favorites: Luxora Elite Collection"),
+    },
+    {
+      id: "5",      name: "Nebula Premium Pack",      price: "$199.99",      imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=1",      imageAlt: "Nebula Premium Pack",      category: "premium",      onProductClick: () => console.log("View Nebula Premium Pack"),
+      onFavorite: () => console.log("Added to favorites: Nebula Premium Pack"),
+    },
+    {
+      id: "6",      name: "Stellar Pro Edition",      price: "$219.99",      imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg?_wi=2",      imageAlt: "Stellar Pro Edition",      category: "comfort",      onProductClick: () => console.log("View Stellar Pro Edition"),
+      onFavorite: () => console.log("Added to favorites: Stellar Pro Edition"),
+    },
+    {
+      id: "7",      name: "Cosmos Elite Pack",      price: "$229.99",      imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg?_wi=2",      imageAlt: "Cosmos Elite Pack",      category: "luxury",      onProductClick: () => console.log("View Cosmos Elite Pack"),
+      onFavorite: () => console.log("Added to favorites: Cosmos Elite Pack"),
+    },
+    {
+      id: "8",      name: "Vortex Dynamic Series",      price: "$169.99",      imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg?_wi=3",      imageAlt: "Vortex Dynamic Series",      category: "premium",      onProductClick: () => console.log("View Vortex Dynamic Series"),
+      onFavorite: () => console.log("Added to favorites: Vortex Dynamic Series"),
+    },
+  ];
+
+  const filteredProducts = allProducts.filter((product) => {
+    const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesCategory = selectedCategory === "all" || product.category === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -36,39 +81,54 @@ export default function ShopPage() {
         />
       </div>
 
+      <div id="shop-header" data-section="shop-header" className="bg-gray-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 md:px-8">
+          <h1 className="text-5xl md:text-6xl font-light mb-6">Shop Alignra</h1>
+          <p className="text-lg text-gray-600 mb-12">Discover our complete collection of premium lifestyle products</p>
+
+          <div className="flex flex-col md:flex-row gap-6 mb-12">
+            <div className="flex-1 relative">
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
+              <input
+                type="text"
+                placeholder="Search products..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-12 pr-4 py-3 rounded-full border-2 border-gray-300 focus:border-blue-500 focus:outline-none"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Filter size={20} className="text-gray-600" />
+              <select
+                value={selectedCategory}
+                onChange={(e) => setSelectedCategory(e.target.value)}
+                className="px-6 py-3 rounded-full border-2 border-gray-300 focus:border-blue-500 focus:outline-none bg-white"
+              >
+                <option value="all">All Categories</option>
+                <option value="premium">Premium</option>
+                <option value="comfort">Comfort</option>
+                <option value="luxury">Luxury</option>
+              </select>
+            </div>
+          </div>
+
+          <p className="text-gray-600">{filteredProducts.length} products found</p>
+        </div>
+      </div>
+
       <div id="shop-products" data-section="shop-products" className="bg-white">
         <div className="max-w-7xl mx-auto px-4 md:px-8 py-20">
           <ProductCardOne
-            title="Complete Collection"
+            title=""
-            description="Browse our full range of premium products carefully curated for quality and innovation"
+            description=""
-            tag="All Products"
+            products={filteredProducts}
-            tagIcon={Star}
-            tagAnimation="slide-up"
-            products={[
-              {
-                id: "1",                name: "Eclipse Motion Pro",                price: "$149.99",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg",                imageAlt: "Eclipse Motion Pro"},
-              {
-                id: "2",                name: "Zenith Comfort Elite",                price: "$179.99",                imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326578.jpg",                imageAlt: "Zenith Comfort Elite"},
-              {
-                id: "3",                name: "Aurora Premium Series",                price: "$159.99",                imageSrc: "http://img.b2bpic.net/free-vector/gradient-golden-luxury-facebook-cover_23-2149044212.jpg",                imageAlt: "Aurora Premium Series"},
-              {
-                id: "4",                name: "Luxora Elite Collection",                price: "$189.99",                imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-coffee-cup_23-2148765432.jpg",                imageAlt: "Luxora Elite Collection"},
-              {
-                id: "5",                name: "Nebula Premium Pack",                price: "$199.99",                imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg",                imageAlt: "Nebula Premium Pack"},
-              {
-                id: "6",                name: "Stellar Pro Edition",                price: "$219.99",                imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg",                imageAlt: "Stellar Pro Edition"},
-              {
-                id: "7",                name: "Cosmos Elite Pack",                price: "$229.99",                imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg",                imageAlt: "Cosmos Elite Pack"},
-              {
-                id: "8",                name: "Horizon Premium Collection",                price: "$209.99",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-cozy-house-with-decorative-details-interior_169016-6258.jpg",                imageAlt: "Horizon Premium Collection"},
-            ]}
             gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
             textboxLayout="default"
             useInvertedBackground={false}
             carouselMode="buttons"
-            ariaLabel="Shop collection"
+            ariaLabel="Shop products section"
-            containerClassName="py-20"
+            containerClassName=""
           />
         </div>
       </div>
@@ -81,14 +141,14 @@ export default function ShopPage() {
               items: [
                 { label: "Home", href: "/" },
                 { label: "Shop", href: "/shop" },
-                { label: "Best Sellers", href: "#bestsellers" },
+                { label: "Best Sellers", href: "/#bestsellers" },
                 { label: "About", href: "/about" },
               ],
             },
             {
               items: [
                 { label: "Contact", href: "/contact" },
-                { label: "FAQ", href: "#faq" },
+                { label: "FAQ", href: "/#faq" },
                 { label: "Support", href: "/support" },
                 { label: "Careers", href: "/careers" },
               ],
@@ -111,7 +171,7 @@ export default function ShopPage() {
             },
             {
               items: [
-                { label: "Newsletter", href: "#contact" },
+                { label: "Newsletter", href: "/#contact" },
                 { label: "Blog", href: "/blog" },
                 { label: "Brand Kit", href: "/brand-kit" },
                 { label: "Press", href: "/press" },
@@ -125,4 +185,4 @@ export default function ShopPage() {
       </div>
     </ThemeProvider>
   );
-}
+}