src/app/page.tsx

@@ -12,6 +12,7 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 
 export default function LandingPage() {
   return (
@@ -35,6 +36,7 @@ export default function LandingPage() {
               { name: "About", id: "about" },
               { name: "Products", id: "products" },
               { name: "Features", id: "features" },
+              { name: "Management", id: "management" },
               { name: "Metrics", id: "metrics" },
               { name: "Testimonials", id: "testimonials" },
               { name: "FAQ", id: "faq" },
@@ -117,6 +119,21 @@ export default function LandingPage() {
           />
         </div>
 
+        <div id="management" data-section="management">
+          <MetricCardSeven
+            title="Order & Seller Management"
+            description="Integrated processing and full visibility into your sales pipeline."
+            tag="Sellers"
+            animationType="slide-up"
+            useInvertedBackground={true}
+            textboxLayout="default"
+            metrics={[
+              { id: "m1", value: "Auto", title: "Payment Processing", items: ["Secure integration with stripe", "Automated payouts", "Tax calculation"] },
+              { id: "m2", value: "Live", title: "Order Tracking", items: ["Status updates", "Inventory sync", "Shipping labels"] },
+            ]}
+          />
+        </div>
+
         <div id="metrics" data-section="metrics">
           <MetricCardFourteen
             useInvertedBackground={true}
@@ -195,4 +212,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/seller-dashboard/page.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import { BarChart3, User, ShoppingBag, Settings } from "lucide-react";
+
+export default function SellerDashboardPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Seller Dashboard", id: "/seller-dashboard" },
+            ]}
+            brandName="Mart"
+          />
+        </div>
+
+        <div id="profile" data-section="profile">
+          <MediaAbout
+            title="Seller Profile"
+            description="Manage your public seller profile, contact info, and business details here."
+            imageSrc="http://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-desk-table-business-company-office_482257-16773.jpg"
+            buttons={[{ text: "Edit Profile" }]}
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="products" data-section="products">
+          <ProductCardThree
+            title="Product Management"
+            description="View and manage your active inventory and stock listings."
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            textboxLayout="split"
+            products={[
+              { id: "p1", name: "Tech Cube", price: "$129", imageSrc: "http://img.b2bpic.net/free-photo/top-view-autumn-journey-elements-composition-with-laptop_23-2148634126.jpg" },
+              { id: "p2", name: "Flow Device", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/sustainability-concept-with-blank-geometric-forms-growing-plant_23-2148994247.jpg" }
+            ]}
+            buttons={[{ text: "Add Product" }]}
+          />
+        </div>
+
+        <div id="analytics" data-section="analytics">
+          <MetricCardThree
+            title="Sales Analytics"
+            description="Track your monthly sales performance and growth metrics."
+            animationType="slide-up"
+            textboxLayout="split"
+            metrics={[
+              { id: "m1", icon: BarChart3, title: "Total Revenue", value: "$12,450" },
+              { id: "m2", icon: ShoppingBag, title: "Orders", value: "482" },
+              { id: "m3", icon: User, title: "New Customers", value: "128" }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/stores/[id]/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useParams } from "next/navigation";
+import ReactLenis from "lenis/react";
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+
+export default function SellerStorefront() {
+  const { id } = useParams();
+
+  return (
+    <ThemeProvider>
+      <ReactLenis root>
+        <NavbarStyleCentered 
+          navItems={[
+            { name: "Home", id: "home" },
+            { name: "About", id: "about" },
+            { name: "Products", id: "products" },
+            { name: "Features", id: "features" },
+            { name: "Metrics", id: "metrics" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" },
+            { name: "Stores", id: "stores" },
+          ]}
+          brandName="Mart"
+        />
+        <div className="pt-32 pb-20 container mx-auto px-4">
+            <h1 className="text-4xl font-bold mb-8 capitalize">Store: {id}</h1>
+            <ProductCatalog 
+                layout="page"
+                products={[]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}