Update src/app/skincare/page.tsx

Merge version_1 into main

src/app/cart/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function CartPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }]} brandName="E-Shop" />
+      <div className="container mx-auto py-20 px-6">
+        <h1 className="text-4xl font-bold mb-8">Your Shopping Cart</h1>
+        <p className="text-lg">Your cart is currently empty. Start shopping to add items.</p>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }]} brandName="E-Shop" />
+      <div className="container mx-auto py-20 px-6">
+        <h1 className="text-4xl font-bold mb-8">Checkout</h1>
+        <p className="text-lg">Shipping and billing information forms will appear here.</p>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/confirmation/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function ConfirmationPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }]} brandName="E-Shop" />
+      <div className="container mx-auto py-20 px-6">
+        <h1 className="text-4xl font-bold mb-8">Thank You!</h1>
+        <p className="text-lg">Your order has been placed successfully.</p>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/haircare/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function HaircarePage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered
+        navItems={[{ name: "Home", id: "/" }, { name: "Skincare", id: "/skincare" }, { name: "Makeup", id: "/makeup" }, { name: "Haircare", id: "/haircare" }, { name: "Contact", id: "/" }]} 
+        brandName="E-Shop"
+      />
+      <div className="container mx-auto py-20 px-6">
+        <h1 className="text-4xl font-bold">Haircare</h1>
+        <p className="mt-4">Explore our curated selection of haircare products.</p>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/makeup/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function MakeupPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered
+        navItems={[{ name: "Home", id: "/" }, { name: "Skincare", id: "/skincare" }, { name: "Makeup", id: "/makeup" }, { name: "Haircare", id: "/haircare" }, { name: "Contact", id: "/" }]} 
+        brandName="E-Shop"
+      />
+      <div className="container mx-auto py-20 px-6">
+        <h1 className="text-4xl font-bold">Makeup</h1>
+        <p className="mt-4">Explore our curated selection of makeup products.</p>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/orders/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function OrdersPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="grid"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Products", id: "/#products" }, { name: "Profile", id: "/profile" }, { name: "Orders", id: "/orders" }, { name: "Wishlist", id: "/wishlist" }, { name: "Settings", id: "/settings" }]} brandName="E-Shop" />
+        <main className="pt-32 pb-20 px-6 max-w-4xl mx-auto min-h-screen">
+          <h1 className="text-4xl font-bold mb-8">Order History</h1>
+          <div className="p-8 rounded-lg bg-white/5 backdrop-blur-md">
+            <p>You have no recent orders.</p>
+          </div>
+        </main>
+        <FooterBaseCard logoText="E-Shop" columns={[]} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -30,21 +30,13 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "hero"},
         {
-          name: "Products",
-          id: "products",
-        },
+          name: "Products",          id: "products"},
         {
-          name: "Features",
-          id: "features",
-        },
+          name: "Features",          id: "features"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Contact",          id: "contact"},
       ]}
       brandName="E-Shop"
     />
@@ -53,19 +45,14 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
       background={{
-        variant: "sparkles-gradient",
-      }}
-      logoText="E-Shop Excellence"
-      description="Discover curated products designed for your modern lifestyle. Quality meets convenience."
+        variant: "sparkles-gradient"}}
+      logoText="Secure Payments Enabled"
+      description="We have integrated Stripe and PayPal gateways. Enjoy encrypted checkout, automated order management, and a seamless mobile-optimized shopping experience."
       buttons={[
         {
-          text: "Shop Now",
-          href: "#products",
-        },
+          text: "Shop Now",          href: "#products"},
         {
-          text: "Learn More",
-          href: "#features",
-        },
+          text: "Learn More",          href: "#features"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/minimalist-three-pendant-black-lampshades-white-wall_9975-133069.jpg?_wi=1"
       imageAlt="Store collection hero"
@@ -80,47 +67,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
-          title: "Fast Shipping",
-          subtitle: "Delivered within 48 hours",
-          category: "Service",
-          value: "100%",
-          buttons: [
-            {
-              text: "Details",
-              href: "#",
-            },
-          ],
-        },
+          id: "f1",          title: "Mobile Optimized",          subtitle: "Responsive checkout flow",          category: "UI/UX",          value: "100%"},
         {
-          id: "f2",
-          title: "Secure Payments",
-          subtitle: "Encrypted and safe",
-          category: "Security",
-          value: "SSL",
-          buttons: [
-            {
-              text: "Details",
-              href: "#",
-            },
-          ],
-        },
+          id: "f2",          title: "Payment Gateway",          subtitle: "Stripe & PayPal ready",          category: "Checkout",          value: "Secure"},
         {
-          id: "f3",
-          title: "24/7 Support",
-          subtitle: "Always here to help",
-          category: "Service",
-          value: "24/7",
-          buttons: [
-            {
-              text: "Details",
-              href: "#",
-            },
-          ],
-        },
+          id: "f3",          title: "Order Tracking",          subtitle: "Real-time updates",          category: "Logistics",          value: "Automated"},
       ]}
-      title="Why Choose Us"
-      description="Exceptional service and quality delivered directly to your doorstep."
+      title="Engineered for E-commerce"
+      description="Our platform now supports comprehensive payment gateways and robust order management systems for a mobile-first experience."
     />
   </div>
 
@@ -131,45 +85,15 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={true}
       products={[
-        {
-          id: "p1",
-          name: "Premium Accessory",
-          price: "$49",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-recycled-plastic-bottle-with-plant_23-2149449786.jpg?_wi=1",
-        },
-        {
-          id: "p2",
-          name: "Modern Gadget",
-          price: "$129",
-          imageSrc: "http://img.b2bpic.net/free-photo/elderly-customer-taking-shopping-bag-from-store-employee-standing-counter-desk-paying-purchase-fashion-boutique-senior-shopper-buying-stylish-clothes-making-electronic-transaction-mall_482257-71857.jpg",
-        },
-        {
-          id: "p3",
-          name: "Design Item",
-          price: "$89",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-design-elements-assortment_23-2148996772.jpg",
-        },
-        {
-          id: "p4",
-          name: "Essential Tech",
-          price: "$59",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313042.jpg",
-        },
-        {
-          id: "p5",
-          name: "Luxury Item",
-          price: "$199",
-          imageSrc: "http://img.b2bpic.net/free-photo/concept-location-photo-shoot-photo-studio_185193-164038.jpg",
-        },
-        {
-          id: "p6",
-          name: "Gift Set",
-          price: "$79",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-recycled-plastic-bottle-with-plant_23-2149449786.jpg?_wi=2",
-        },
+        { id: "p1", name: "Premium Accessory", price: "$49", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-recycled-plastic-bottle-with-plant_23-2149449786.jpg?_wi=1" },
+        { id: "p2", name: "Modern Gadget", price: "$129", imageSrc: "http://img.b2bpic.net/free-photo/elderly-customer-taking-shopping-bag-from-store-employee-standing-counter-desk-paying-purchase-fashion-boutique-senior-shopper-buying-stylish-clothes-making-electronic-transaction-mall_482257-71857.jpg" },
+        { id: "p3", name: "Design Item", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-design-elements-assortment_23-2148996772.jpg" },
+        { id: "p4", name: "Essential Tech", price: "$59", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313042.jpg" },
+        { id: "p5", name: "Luxury Item", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/concept-location-photo-shoot-photo-studio_185193-164038.jpg" },
+        { id: "p6", name: "Gift Set", price: "$79", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-recycled-plastic-bottle-with-plant_23-2149449786.jpg?_wi=2" },
       ]}
       title="Popular Products"
-      description="Browse our latest arrivals and most popular items."
+      description="Experience our streamlined mobile checkout with secure payment options."
     />
   </div>
 
@@ -178,64 +102,11 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Alice Wang",
-          date: "Jan 2025",
-          title: "Great products!",
-          quote: "The quality is simply outstanding.",
-          tag: "Verified",
-          avatarSrc: "http://img.b2bpic.net/free-photo/relax-its-okay-portrait-carefree-unbothered-young-man-have-everything-control-assure-gu_1258-109138.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-three-pendant-black-lampshades-white-wall_9975-133069.jpg?_wi=2",
-          imageAlt: "minimalist store hero display",
-        },
-        {
-          id: "t2",
-          name: "Mark R.",
-          date: "Dec 2024",
-          title: "Fast delivery",
-          quote: "I received my order in less than two days.",
-          tag: "Verified",
-          avatarSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/red-delivery-car-deliver-express-shipping-fast-delivery-background-3d-rendering-illustration_56104-1910.jpg",
-          imageAlt: "delivery icon fast shipping",
-        },
-        {
-          id: "t3",
-          name: "Sarah J.",
-          date: "Dec 2024",
-          title: "Highly recommend",
-          quote: "Amazing customer service team.",
-          tag: "Verified",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-happy-cute-africanamerican-girl-smiling-pleased-showing-thumbsup-approval-lik_1258-149049.jpg",
-          imageSrc: "http://img.b2bpic.net/free-vector/secure-card-payment_78370-8471.jpg",
-          imageAlt: "secure payment icon shield",
-        },
-        {
-          id: "t4",
-          name: "David K.",
-          date: "Nov 2024",
-          title: "Love the variety",
-          quote: "Found everything I needed for my home.",
-          tag: "Verified",
-          avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-carrying-shopping-bags_23-2148660763.jpg",
-          imageSrc: "http://img.b2bpic.net/free-vector/support-service-operators-avatars-circle-frames_107791-15352.jpg",
-          imageAlt: "support icon headset professional",
-        },
-        {
-          id: "t5",
-          name: "Elena C.",
-          date: "Nov 2024",
-          title: "Excellent experience",
-          quote: "Will definitely shop here again.",
-          tag: "Verified",
-          avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-young-businesswoman-smiling-camera_74855-3966.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-recycled-plastic-bottle-with-plant_23-2149449786.jpg?_wi=3",
-          imageAlt: "product minimalist modern design",
-        },
+        { id: "t1", name: "Alice Wang", date: "Jan 2025", title: "Smooth Payment", quote: "The new checkout is incredibly fast on my phone.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/relax-its-okay-portrait-carefree-unbothered-young-man-have-everything-control-assure-gu_1258-109138.jpg" },
+        { id: "t2", name: "Mark R.", date: "Dec 2024", title: "Reliable", quote: "Tracking my orders has never been this easy.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg" },
       ]}
       title="Customer Stories"
-      description="Hear what our amazing community has to say about our store."
+      description="Our community loves the new, faster, and more secure mobile shopping experience."
     />
   </div>
 
@@ -244,24 +115,12 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "q1",
-          title: "What is the return policy?",
-          content: "You can return items within 30 days of purchase.",
-        },
-        {
-          id: "q2",
-          title: "Do you ship internationally?",
-          content: "Yes, we ship to over 50 countries worldwide.",
-        },
-        {
-          id: "q3",
-          title: "How can I track my order?",
-          content: "You will receive a tracking link via email once shipped.",
-        },
+        { id: "q1", title: "Which payments do you accept?", content: "We support all major credit cards via Stripe and PayPal." },
+        { id: "q2", title: "Is mobile checkout secure?", content: "Yes, we use industry-standard encryption for all mobile transactions." },
+        { id: "q3", title: "How do I manage orders?", content: "Log in to your account to view your order history and live tracking status." },
       ]}
       title="Frequently Asked"
-      description="Common questions about our products and services."
+      description="Everything you need to know about our upgraded payments."
       faqsAnimation="slide-up"
     />
   </div>
@@ -269,11 +128,9 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       title="Get in touch"
-      description="Have questions? We're here to help you get the best experience."
+      description="Need help with an order? Contact our support team for quick resolution."
       imageSrc="http://img.b2bpic.net/free-photo/woman-working-call-center-office_23-2149256153.jpg"
       mediaAnimation="slide-up"
       tag="Contact Us"
@@ -284,32 +141,8 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="E-Shop"
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Help Center",
-              href: "#",
-            },
-            {
-              label: "FAQ",
-              href: "#faq",
-            },
-          ],
-        },
+        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
+        { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "FAQ", href: "#faq" }] },
       ]}
       copyrightText="© 2025 E-Shop"
     />
@@ -317,4 +150,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/profile/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function ProfilePage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="grid"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Products", id: "/#products" }, { name: "Profile", id: "/profile" }, { name: "Orders", id: "/orders" }, { name: "Wishlist", id: "/wishlist" }, { name: "Settings", id: "/settings" }]} brandName="E-Shop" />
+        <main className="pt-32 pb-20 px-6 max-w-4xl mx-auto min-h-screen">
+          <h1 className="text-4xl font-bold mb-8">User Profile</h1>
+          <div className="p-8 rounded-lg bg-white/5 backdrop-blur-md">
+            <p>Welcome back! This is your account profile page.</p>
+          </div>
+        </main>
+        <FooterBaseCard logoText="E-Shop" columns={[]} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/settings/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function SettingsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="grid"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Products", id: "/#products" }, { name: "Profile", id: "/profile" }, { name: "Orders", id: "/orders" }, { name: "Wishlist", id: "/wishlist" }, { name: "Settings", id: "/settings" }]} brandName="E-Shop" />
+        <main className="pt-32 pb-20 px-6 max-w-4xl mx-auto min-h-screen">
+          <h1 className="text-4xl font-bold mb-8">Account Settings</h1>
+          <div className="p-8 rounded-lg bg-white/5 backdrop-blur-md">
+            <p>Manage your account preferences here.</p>
+          </div>
+        </main>
+        <FooterBaseCard logoText="E-Shop" columns={[]} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { useState } from 'react';
+
+export default function ShopPage() {
+  const [category, setCategory] = useState("All");
+  const [search, setSearch] = useState("");
+
+  const products = [
+    { id: "p1", name: "Premium Accessory", price: "$49", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-recycled-plastic-bottle-with-plant_23-2149449786.jpg?_wi=1" },
+    { id: "p2", name: "Modern Gadget", price: "$129", imageSrc: "http://img.b2bpic.net/free-photo/elderly-customer-taking-shopping-bag-from-store-employee-standing-counter-desk-paying-purchase-fashion-boutique-senior-shopper-buying-stylish-clothes-making-electronic-transaction-mall_482257-71857.jpg" },
+    { id: "p3", name: "Design Item", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-design-elements-assortment_23-2148996772.jpg" },
+    { id: "p4", name: "Essential Tech", price: "$59", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313042.jpg" },
+    { id: "p5", name: "Luxury Item", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/concept-location-photo-shoot-photo-studio_185193-164038.jpg" },
+    { id: "p6", name: "Gift Set", price: "$79", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-recycled-plastic-bottle-with-plant_23-2149449786.jpg?_wi=2" },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="grid"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Shop", id: "/shop" },
+                { name: "Features", id: "/#features" },
+                { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="E-Shop"
+          />
+        </div>
+
+        <div className="pt-32 pb-16 px-4 md:px-8">
+          <div className="max-w-7xl mx-auto flex flex-col md:flex-row gap-8">
+            <div className="w-full md:w-64 space-y-6">
+              <input 
+                type="text" 
+                placeholder="Search products..."
+                className="w-full p-3 rounded-lg border"
+                onChange={(e) => setSearch(e.target.value)}
+              />
+              <div className="space-y-2">
+                <button className="block w-full text-left p-2 hover:bg-gray-100 rounded" onClick={() => setCategory("All")}>All Categories</button>
+                <button className="block w-full text-left p-2 hover:bg-gray-100 rounded" onClick={() => setCategory("Tech")}>Tech</button>
+                <button className="block w-full text-left p-2 hover:bg-gray-100 rounded" onClick={() => setCategory("Home")}>Home</button>
+              </div>
+            </div>
+            
+            <div className="flex-1">
+              <ProductCardThree
+                animationType="slide-up"
+                textboxLayout="default"
+                gridVariant="uniform-all-items-equal"
+                useInvertedBackground={false}
+                title="Shop Products"
+                description="Explore our full range of curated items."
+                products={products.filter(p => p.name.toLowerCase().includes(search.toLowerCase()))}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseCard
+            logoText="E-Shop"
+            columns={[
+                { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
+                { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "FAQ", href: "/#faq" }] },
+            ]}
+            copyrightText="© 2025 E-Shop"
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/skincare/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function SkincarePage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleCentered
+        navItems={[{ name: "Home", id: "/" }, { name: "Skincare", id: "/skincare" }, { name: "Makeup", id: "/makeup" }, { name: "Haircare", id: "/haircare" }, { name: "Contact", id: "/" }]} 
+        brandName="E-Shop"
+      />
+      <div className="container mx-auto py-20 px-6">
+        <h1 className="text-4xl font-bold">Skincare</h1>
+        <p className="mt-4">Explore our curated selection of skincare products.</p>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/wishlist/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function WishlistPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="grid"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Products", id: "/#products" }, { name: "Profile", id: "/profile" }, { name: "Orders", id: "/orders" }, { name: "Wishlist", id: "/wishlist" }, { name: "Settings", id: "/settings" }]} brandName="E-Shop" />
+        <main className="pt-32 pb-20 px-6 max-w-4xl mx-auto min-h-screen">
+          <h1 className="text-4xl font-bold mb-8">Wishlist</h1>
+          <div className="p-8 rounded-lg bg-white/5 backdrop-blur-md">
+            <p>Your wishlist is currently empty.</p>
+          </div>
+        </main>
+        <FooterBaseCard logoText="E-Shop" columns={[]} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}