From 7b4d4ad077369f29d77cfa36a8023248bb4efa65 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 22 Apr 2026 07:07:49 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 442 ++++++++++++++---------------------------------
 1 file changed, 130 insertions(+), 312 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 409331f..f202ed8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,326 +28,144 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Categories",
-          id: "categories",
-        },
-        {
-          name: "Deals",
-          id: "deals",
-        },
-        {
-          name: "Account",
-          id: "account",
-        },
-      ]}
-      brandName="PAKISTANMART"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Categories", id: "categories" },
+              { name: "Deals", id: "deals" },
+              { name: "Account", id: "account" },
+            ]}
+            brandName="PAKISTANMART"
+            button={{ text: "Contact Us", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroCentered
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Har Ghar Ki Pehchan"
-      description="Experience the pride of Pakistan with premium local and international brands delivered to your doorstep."
-      avatars={[
-        {
-          src: "asset://avatar-1",
-          alt: "Customer",
-        },
-        {
-          src: "asset://avatar-2",
-          alt: "Customer",
-        },
-        {
-          src: "asset://avatar-3",
-          alt: "Customer",
-        },
-        {
-          src: "asset://avatar-4",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/indian-city-scene_23-2151823041.jpg",
-          alt: "Customer",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Start Shopping",
-          href: "#products",
-        },
-      ]}
-      buttonAnimation="slide-up"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Nationwide Delivery",
-        },
-        {
-          type: "text",
-          text: "100% Authentic Products",
-        },
-        {
-          type: "text",
-          text: "Cash on Delivery",
-        },
-        {
-          type: "text",
-          text: "Easy Returns",
-        },
-        {
-          type: "text",
-          text: "Customer Support 24/7",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroCentered
+            background={{ variant: "gradient-bars" }}
+            title="Har Ghar Ki Pehchan"
+            description="Experience the pride of Pakistan with premium local and international brands delivered to your doorstep."
+            avatars={[
+              { src: "asset://avatar-1", alt: "Customer" },
+              { src: "asset://avatar-2", alt: "Customer" },
+              { src: "asset://avatar-3", alt: "Customer" },
+              { src: "asset://avatar-4", alt: "Customer" },
+              { src: "http://img.b2bpic.net/free-photo/indian-city-scene_23-2151823041.jpg", alt: "Customer" },
+            ]}
+            buttons={[{ text: "Start Shopping", href: "#products" }]}
+            buttonAnimation="slide-up"
+            marqueeItems={[
+              { type: "text", text: "Nationwide Delivery" },
+              { type: "text", text: "100% Authentic Products" },
+              { type: "text", text: "Cash on Delivery" },
+              { type: "text", text: "Easy Returns" },
+              { type: "text", text: "Customer Support 24/7" },
+            ]}
+          />
+        </div>
 
-  <div id="categories" data-section="categories">
-      <FeatureHoverPattern
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          icon: Smartphone,
-          title: "Electronics",
-          description: "Laptops, phones, and home appliances.",
-        },
-        {
-          icon: ShoppingBag,
-          title: "Fashion",
-          description: "Traditional lawn and modern wear.",
-        },
-        {
-          icon: Home,
-          title: "Home & Living",
-          description: "Furniture and home decor.",
-        },
-        {
-          icon: Utensils,
-          title: "Groceries",
-          description: "Fresh produce and daily essentials.",
-        },
-        {
-          icon: Gift,
-          title: "Handicrafts",
-          description: "Authentic Pakistani arts and crafts.",
-        },
-      ]}
-      title="Shop by Category"
-      description="Everything you need, right at your fingertips."
-    />
-  </div>
+        <div id="categories" data-section="categories">
+          <FeatureHoverPattern
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { icon: Smartphone, title: "Electronics", description: "Laptops, phones, and home appliances." },
+              { icon: ShoppingBag, title: "Fashion", description: "Traditional lawn and modern wear." },
+              { icon: Home, title: "Home & Living", description: "Furniture and home decor." },
+              { icon: Utensils, title: "Groceries", description: "Fresh produce and daily essentials." },
+              { icon: Gift, title: "Handicrafts", description: "Authentic Pakistani arts and crafts." },
+            ]}
+            title="Shop by Category"
+            description="Everything you need, right at your fingertips."
+          />
+        </div>
 
-  <div id="deals" data-section="deals">
-      <ProductCardFour
-      animationType="scale-rotate"
-      textboxLayout="default"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Samsung S24 Ultra",
-          price: "₨ 320,000",
-          variant: "Electronics",
-          imageSrc: "asset://p1",
-        },
-        {
-          id: "p2",
-          name: "Haier Inverter AC",
-          price: "₨ 145,000",
-          variant: "Electronics",
-          imageSrc: "asset://p2",
-        },
-        {
-          id: "p3",
-          name: "Traditional Shalwar Kameez",
-          price: "₨ 4,500",
-          variant: "Fashion",
-          imageSrc: "asset://p3",
-        },
-        {
-          id: "p4",
-          name: "Sindhi Ajrak Bedspread",
-          price: "₨ 3,200",
-          variant: "Handicrafts",
-          imageSrc: "asset://p4",
-        },
-      ]}
-      title="Flash Deals"
-      description="Hurry, these deals are vanishing fast!"
-    />
-  </div>
+        <div id="deals" data-section="deals">
+          <ProductCardFour
+            animationType="scale-rotate"
+            textboxLayout="default"
+            gridVariant="four-items-2x2-equal-grid"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", name: "Samsung S24 Ultra", price: "₨ 320,000", variant: "Electronics", imageSrc: "asset://p1" },
+              { id: "p2", name: "Haier Inverter AC", price: "₨ 145,000", variant: "Electronics", imageSrc: "asset://p2" },
+              { id: "p3", name: "Traditional Shalwar Kameez", price: "₨ 4,500", variant: "Fashion", imageSrc: "asset://p3" },
+              { id: "p4", name: "Sindhi Ajrak Bedspread", price: "₨ 3,200", variant: "Handicrafts", imageSrc: "asset://p4" },
+            ]}
+            title="Flash Deals"
+            description="Hurry, these deals are vanishing fast!"
+          />
+        </div>
 
-  <div id="trust" data-section="trust">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Karachi",
-        "Lahore",
-        "Islamabad",
-        "Multan",
-        "Peshawar",
-        "Quetta",
-        "Faisalabad",
-      ]}
-      title="Trusted by Millions"
-      description="Join the growing community of satisfied customers."
-    />
-  </div>
+        <div id="trust" data-section="trust">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["Karachi", "Lahore", "Islamabad", "Multan", "Peshawar", "Quetta", "Faisalabad"]}
+            title="Trusted by Millions"
+            description="Join the growing community of satisfied customers."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Ayesha Khan",
-          role: "User",
-          company: "Karachi",
-          rating: 5,
-          imageSrc: "asset://t1",
-        },
-        {
-          id: "t2",
-          name: "Ahmed Raza",
-          role: "User",
-          company: "Lahore",
-          rating: 5,
-          imageSrc: "asset://t2",
-        },
-        {
-          id: "t3",
-          name: "Fatima Noor",
-          role: "User",
-          company: "Islamabad",
-          rating: 5,
-          imageSrc: "asset://t3",
-        },
-        {
-          id: "t4",
-          name: "Ali Hassan",
-          role: "User",
-          company: "Multan",
-          rating: 5,
-          imageSrc: "asset://t4",
-        },
-        {
-          id: "t5",
-          name: "Zainab Ali",
-          role: "User",
-          company: "Peshawar",
-          rating: 5,
-          imageSrc: "asset://t5",
-        },
-      ]}
-      kpiItems={[
-        {
-          value: "1M+",
-          label: "Orders Delivered",
-        },
-        {
-          value: "500k",
-          label: "Happy Customers",
-        },
-        {
-          value: "4.8★",
-          label: "Average Rating",
-        },
-      ]}
-      title="What Our Customers Say"
-      description="Real stories from happy Pakistani families."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardSixteen
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Ayesha Khan", role: "User", company: "Karachi", rating: 5, imageSrc: "asset://t1" },
+              { id: "t2", name: "Ahmed Raza", role: "User", company: "Lahore", rating: 5, imageSrc: "asset://t2" },
+              { id: "t3", name: "Fatima Noor", role: "User", company: "Islamabad", rating: 5, imageSrc: "asset://t3" },
+              { id: "t4", name: "Ali Hassan", role: "User", company: "Multan", rating: 5, imageSrc: "asset://t4" },
+              { id: "t5", name: "Zainab Ali", role: "User", company: "Peshawar", rating: 5, imageSrc: "asset://t5" },
+            ]}
+            kpiItems={[
+              { value: "1M+", label: "Orders Delivered" },
+              { value: "500k", label: "Happy Customers" },
+              { value: "4.8★", label: "Average Rating" },
+            ]}
+            title="What Our Customers Say"
+            description="Real stories from happy Pakistani families."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "Is Cash on Delivery available?",
-          content: "Yes, we offer Cash on Delivery nationwide.",
-        },
-        {
-          id: "q2",
-          title: "What is the return policy?",
-          content: "We offer a 7-day easy return policy for most items.",
-        },
-        {
-          id: "q3",
-          title: "How do I track my order?",
-          content: "You can track your order status in the My Account dashboard.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Have questions about our marketplace?"
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqBase
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "q1", title: "Is Cash on Delivery available?", content: "Yes, we offer Cash on Delivery nationwide." },
+              { id: "q2", title: "What is the return policy?", content: "We offer a 7-day easy return policy for most items." },
+              { id: "q3", title: "How do I track my order?", content: "You can track your order status in the My Account dashboard." },
+            ]}
+            title="Frequently Asked Questions"
+            description="Have questions about our marketplace?"
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      tag="Stay Updated"
-      title="Join the PakistanMart Newsletter"
-      description="Get exclusive deals and updates delivered to your inbox."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            useInvertedBackground={false}
+            background={{ variant: "gradient-bars" }}
+            tag="Stay Updated"
+            title="Join the PakistanMart Newsletter"
+            description="Get exclusive deals and updates delivered to your inbox."
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="asset://footer-bg"
-      logoText="PAKISTANMART"
-      columns={[
-        {
-          title: "Shop",
-          items: [
-            {
-              label: "Electronics",
-              href: "#",
-            },
-            {
-              label: "Fashion",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Help Center",
-              href: "#",
-            },
-            {
-              label: "Track Order",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="asset://footer-bg"
+            logoText="PAKISTANMART"
+            columns={[
+              { title: "Shop", items: [{ label: "Electronics", href: "#" }, { label: "Fashion", href: "#" }] },
+              { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Track Order", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1