From 4d8c97a77fa72dee898612503817f38910083bbf Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Tue, 16 Jun 2026 10:09:49 +0000
Subject: [PATCH] Bob AI: Added bottom navigation bar with Home, Shop, Cart,
 and Admin

---
 src/components/Layout.tsx                    |  25 ++-
 src/pages/HomePage.tsx                       | 163 ++-----------------
 src/pages/HomePage/sections/ContactCta.tsx   |  27 +++
 src/pages/HomePage/sections/Hero.tsx         |  29 ++++
 src/pages/HomePage/sections/Products.tsx     |  57 +++++++
 src/pages/HomePage/sections/SocialProof.tsx  |  27 +++
 src/pages/HomePage/sections/Testimonials.tsx |  52 ++++++
 7 files changed, 234 insertions(+), 146 deletions(-)
 create mode 100644 src/pages/HomePage/sections/ContactCta.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Products.tsx
 create mode 100644 src/pages/HomePage/sections/SocialProof.tsx
 create mode 100644 src/pages/HomePage/sections/Testimonials.tsx

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 107bb40..598ee4a 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -2,8 +2,9 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 import NavbarDropdown from '@/components/ui/NavbarDropdown';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
-import { Outlet } from 'react-router-dom';
+import { Outlet, Link } from 'react-router-dom';
 import { StyleProvider } from "@/components/ui/StyleProvider";
+import { Home, ShoppingBag, ShoppingCart, User } from 'lucide-react';
 
 export default function Layout() {
   const navItems = [
@@ -92,6 +93,28 @@ export default function Layout() {
       ]}
     />
       </SectionErrorBoundary>
+      
+      {/* Bottom Navigation Bar */}
+      <div className="fixed bottom-0 left-0 right-0 z-50 bg-background border-t border-border pb-safe">
+        <div className="flex justify-around items-center h-16 px-2 max-w-md mx-auto">
+          <Link to="/" className="flex flex-col items-center justify-center w-full h-full text-muted-foreground hover:text-primary-cta transition-colors">
+            <Home className="w-5 h-5 mb-1" />
+            <span className="text-[10px] font-medium">Home</span>
+          </Link>
+          <Link to="/shop" className="flex flex-col items-center justify-center w-full h-full text-muted-foreground hover:text-primary-cta transition-colors">
+            <ShoppingBag className="w-5 h-5 mb-1" />
+            <span className="text-[10px] font-medium">Shop</span>
+          </Link>
+          <Link to="/cart" className="flex flex-col items-center justify-center w-full h-full text-muted-foreground hover:text-primary-cta transition-colors">
+            <ShoppingCart className="w-5 h-5 mb-1" />
+            <span className="text-[10px] font-medium">Cart</span>
+          </Link>
+          <Link to="/admin" className="flex flex-col items-center justify-center w-full h-full text-muted-foreground hover:text-primary-cta transition-colors">
+            <User className="w-5 h-5 mb-1" />
+            <span className="text-[10px] font-medium">Admin</span>
+          </Link>
+        </div>
+      </div>
     </StyleProvider>
   );
 }
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 5ec562d..ca3ea6c 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,154 +1,27 @@
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import ProductsSection from './HomePage/sections/Products';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import SocialProofSection from './HomePage/sections/SocialProof';
+import ContactCtaSection from './HomePage/sections/ContactCta';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroOverlay
-      tag="PREMIUM PERFUMERY"
-      title="Unforgettable Scents, Delivered to Your Door"
-      description="Discover signature scents for men, women, and unisex collections. Experience premium perfumes with direct WhatsApp support and exclusive testers."
-      primaryButton={{
-        text: "Explore Collection",
-        href: "/shop",
-      }}
-      secondaryButton={{
-        text: "WhatsApp Us",
-        href: "https://wa.me/923232107893",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/alcohol-beautiful-bottle_176474-6024.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="products" data-section="products">
-    <SectionErrorBoundary name="products">
-          <FeaturesImageBento
-      tag="LATEST RELEASES"
-      title="Our Signature Collection"
-      description="Explore our hand-picked selection of premium fragrances, crafted with excellence."
-      items={[
-        {
-          title: "Men's Collection",
-          description: "Bold, masculine, and sophisticated.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-product-container-with-art-nouveau-inspired-sun-relief-background_23-2151420703.jpg",
-        },
-        {
-          title: "Women's Collection",
-          description: "Graceful, floral, and elegant.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-eucalyptus-arrangement_23-2149440631.jpg",
-        },
-        {
-          title: "Unisex Fragrances",
-          description: "Versatile and timeless scents.",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-metal-bottle-with-spray_181624-23106.jpg",
-        },
-        {
-          title: "Tester Kits",
-          description: "Try before you buy.",
-          imageSrc: "http://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-49297.jpg",
-        },
-        {
-          title: "Artisan Blends",
-          description: "Rare and exclusive ingredients.",
-          imageSrc: "http://img.b2bpic.net/free-photo/skincare-supplies-marble-background_23-2147710684.jpg",
-        },
-        {
-          title: "Special Edition",
-          description: "Limited time release.",
-          imageSrc: "http://img.b2bpic.net/free-vector/wedding-invitation-sticker-label-black-vector_53876-64156.jpg",
-        },
-        {
-          title: "Custom Blends",
-          description: "Made specifically for you.",
-          imageSrc: "http://img.b2bpic.net/free-photo/original-glass-vase-with-angel-top-green-branch_1304-2744.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProductsSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialColumnMarqueeCards
-      tag="COMMUNITY"
-      title="Voices of Aperfume"
-      description="What our scent enthusiasts are saying."
-      testimonials={[
-        {
-          name: "Sarah Ahmed",
-          role: "Collector",
-          quote: "The quality and longevity are unmatched.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-brunette-woman-evening-dress-posing-holding-champaign-glass_176420-3753.jpg",
-        },
-        {
-          name: "Bilal Khan",
-          role: "Enthusiast",
-          quote: "Finally, a local brand that delivers true luxury.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-ballroom-performer-posing_23-2149454029.jpg",
-        },
-        {
-          name: "Fatima Z.",
-          role: "Gift Buyer",
-          quote: "Best gifting experience, premium packaging.",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326579.jpg",
-        },
-        {
-          name: "Zaid Malik",
-          role: "Customer",
-          quote: "Exquisite scents and fast delivery.",
-          imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-ready-green-room_23-2148210766.jpg",
-        },
-        {
-          name: "Ayesha K.",
-          role: "Customer",
-          quote: "My go-to for daily luxury fragrance.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-stylish-businesswoman-excitedly-opening-envelope-working-with-papers-city-street_574295-849.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="social-proof" data-section="social-proof">
-    <SectionErrorBoundary name="social-proof">
-          <SocialProofMarquee
-      tag="TRUSTED BY"
-      title="Fragrance Connoisseurs"
-      description="Join thousands of satisfied customers who have discovered their signature scent with us."
-      names={[
-        "Aperfume Collective",
-        "Elite Scent Club",
-        "Global Fragrance Guild",
-        "Luxury Lifestyle Network",
-        "Artisan Perfume Association",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <SocialProofSection />
 
-  <div id="contact-cta" data-section="contact-cta">
-    <SectionErrorBoundary name="contact-cta">
-          <ContactCta
-      tag="JOIN US"
-      text="Ready to experience the essence of luxury?"
-      primaryButton={{
-        text: "Shop Now",
-        href: "/shop",
-      }}
-      secondaryButton={{
-        text: "Follow on Instagram",
-        href: "https://instagram.com/aperfumespk",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactCtaSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/ContactCta.tsx b/src/pages/HomePage/sections/ContactCta.tsx
new file mode 100644
index 0000000..c82fdac
--- /dev/null
+++ b/src/pages/HomePage/sections/ContactCta.tsx
@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact-cta" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactCtaSection(): React.JSX.Element {
+  return (
+    <div id="contact-cta" data-section="contact-cta">
+        <SectionErrorBoundary name="contact-cta">
+              <ContactCta
+          tag="JOIN US"
+          text="Ready to experience the essence of luxury?"
+          primaryButton={{
+            text: "Shop Now",
+            href: "/shop",
+          }}
+          secondaryButton={{
+            text: "Follow on Instagram",
+            href: "https://instagram.com/aperfumespk",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..fb8ec44
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,29 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroOverlay
+          tag="PREMIUM PERFUMERY"
+          title="Unforgettable Scents, Delivered to Your Door"
+          description="Discover signature scents for men, women, and unisex collections. Experience premium perfumes with direct WhatsApp support and exclusive testers."
+          primaryButton={{
+            text: "Explore Collection",
+            href: "/shop",
+          }}
+          secondaryButton={{
+            text: "WhatsApp Us",
+            href: "https://wa.me/923232107893",
+          }}
+          imageSrc="http://img.b2bpic.net/free-photo/alcohol-beautiful-bottle_176474-6024.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Products.tsx b/src/pages/HomePage/sections/Products.tsx
new file mode 100644
index 0000000..996e285
--- /dev/null
+++ b/src/pages/HomePage/sections/Products.tsx
@@ -0,0 +1,57 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "products" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProductsSection(): React.JSX.Element {
+  return (
+    <div id="products" data-section="products">
+        <SectionErrorBoundary name="products">
+              <FeaturesImageBento
+          tag="LATEST RELEASES"
+          title="Our Signature Collection"
+          description="Explore our hand-picked selection of premium fragrances, crafted with excellence."
+          items={[
+            {
+              title: "Men's Collection",
+              description: "Bold, masculine, and sophisticated.",
+              imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-product-container-with-art-nouveau-inspired-sun-relief-background_23-2151420703.jpg",
+            },
+            {
+              title: "Women's Collection",
+              description: "Graceful, floral, and elegant.",
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-eucalyptus-arrangement_23-2149440631.jpg",
+            },
+            {
+              title: "Unisex Fragrances",
+              description: "Versatile and timeless scents.",
+              imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-metal-bottle-with-spray_181624-23106.jpg",
+            },
+            {
+              title: "Tester Kits",
+              description: "Try before you buy.",
+              imageSrc: "http://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-49297.jpg",
+            },
+            {
+              title: "Artisan Blends",
+              description: "Rare and exclusive ingredients.",
+              imageSrc: "http://img.b2bpic.net/free-photo/skincare-supplies-marble-background_23-2147710684.jpg",
+            },
+            {
+              title: "Special Edition",
+              description: "Limited time release.",
+              imageSrc: "http://img.b2bpic.net/free-vector/wedding-invitation-sticker-label-black-vector_53876-64156.jpg",
+            },
+            {
+              title: "Custom Blends",
+              description: "Made specifically for you.",
+              imageSrc: "http://img.b2bpic.net/free-photo/original-glass-vase-with-angel-top-green-branch_1304-2744.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/SocialProof.tsx b/src/pages/HomePage/sections/SocialProof.tsx
new file mode 100644
index 0000000..6abd7c6
--- /dev/null
+++ b/src/pages/HomePage/sections/SocialProof.tsx
@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "social-proof" section.
+
+import React from 'react';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function SocialProofSection(): React.JSX.Element {
+  return (
+    <div id="social-proof" data-section="social-proof">
+        <SectionErrorBoundary name="social-proof">
+              <SocialProofMarquee
+          tag="TRUSTED BY"
+          title="Fragrance Connoisseurs"
+          description="Join thousands of satisfied customers who have discovered their signature scent with us."
+          names={[
+            "Aperfume Collective",
+            "Elite Scent Club",
+            "Global Fragrance Guild",
+            "Luxury Lifestyle Network",
+            "Artisan Perfume Association",
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
new file mode 100644
index 0000000..496668a
--- /dev/null
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,52 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialColumnMarqueeCards
+          tag="COMMUNITY"
+          title="Voices of Aperfume"
+          description="What our scent enthusiasts are saying."
+          testimonials={[
+            {
+              name: "Sarah Ahmed",
+              role: "Collector",
+              quote: "The quality and longevity are unmatched.",
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-brunette-woman-evening-dress-posing-holding-champaign-glass_176420-3753.jpg",
+            },
+            {
+              name: "Bilal Khan",
+              role: "Enthusiast",
+              quote: "Finally, a local brand that delivers true luxury.",
+              imageSrc: "http://img.b2bpic.net/free-photo/female-ballroom-performer-posing_23-2149454029.jpg",
+            },
+            {
+              name: "Fatima Z.",
+              role: "Gift Buyer",
+              quote: "Best gifting experience, premium packaging.",
+              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326579.jpg",
+            },
+            {
+              name: "Zaid Malik",
+              role: "Customer",
+              quote: "Exquisite scents and fast delivery.",
+              imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-ready-green-room_23-2148210766.jpg",
+            },
+            {
+              name: "Ayesha K.",
+              role: "Customer",
+              quote: "My go-to for daily luxury fragrance.",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-stylish-businesswoman-excitedly-opening-envelope-working-with-papers-city-street_574295-849.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
-- 
2.49.1