From 2883b91839f16641ca2b89db7400a800d9d43d8e Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 17 Jun 2026 14:10:20 +0000
Subject: [PATCH] Bob AI: Update theme to modern grey and black palette

---
 src/index.css                                 |  18 +-
 src/pages/HomePage.tsx                        | 254 ++----------------
 src/pages/HomePage/sections/Contact.tsx       |  23 ++
 src/pages/HomePage/sections/Faq.tsx           |  38 +++
 src/pages/HomePage/sections/FeaturesBento.tsx |  52 ++++
 src/pages/HomePage/sections/Hero.tsx          |  37 +++
 src/pages/HomePage/sections/Metrics.tsx       |  28 ++
 src/pages/HomePage/sections/Services.tsx      |  31 +++
 src/pages/HomePage/sections/ServicesGrid.tsx  |  36 +++
 src/pages/HomePage/sections/Team.tsx          |  38 +++
 src/pages/HomePage/sections/Testimonials.tsx  |  32 +++
 11 files changed, 350 insertions(+), 237 deletions(-)
 create mode 100644 src/pages/HomePage/sections/Contact.tsx
 create mode 100644 src/pages/HomePage/sections/Faq.tsx
 create mode 100644 src/pages/HomePage/sections/FeaturesBento.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Metrics.tsx
 create mode 100644 src/pages/HomePage/sections/Services.tsx
 create mode 100644 src/pages/HomePage/sections/ServicesGrid.tsx
 create mode 100644 src/pages/HomePage/sections/Team.tsx
 create mode 100644 src/pages/HomePage/sections/Testimonials.tsx

diff --git a/src/index.css b/src/index.css
index 2163056..af4a0cd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f6f0e9;
-  --card: #efe7dd;
-  --foreground: #2b180a;
-  --primary-cta: #2b180a;
-  --primary-cta-text: #f6f0e9;
-  --secondary-cta: #efe7dd;
-  --secondary-cta-text: #2b180a;
-  --accent: #94877c;
-  --background-accent: #afa094;
+  --background: #0a0a0a;
+  --card: #171717;
+  --foreground: #f5f5f5;
+  --primary-cta: #f5f5f5;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #262626;
+  --secondary-cta-text: #f5f5f5;
+  --accent: #525252;
+  --background-accent: #262626;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 2ab459e..7303544 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,241 +1,39 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
-import FeaturesBento from '@/components/sections/features/FeaturesBento';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
-import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
-import TeamListCards from '@/components/sections/team/TeamListCards';
-import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
-import { Calendar, CheckCircle, Sparkles } from "lucide-react";
-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 ServicesSection from './HomePage/sections/Services';
+import FeaturesBentoSection from './HomePage/sections/FeaturesBento';
+import TeamSection from './HomePage/sections/Team';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import ServicesGridSection from './HomePage/sections/ServicesGrid';
+import MetricsSection from './HomePage/sections/Metrics';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroOverlayMarquee
-      tag="Your Local Beauty Experts"
-      title="Complete Beauty Services, One Trusted Salon"
-      description="Waxing, extensions, styling, nails, and skincare—all from certified professionals. Book your appointment in seconds."
-      primaryButton={{
-        text: "Book Your Appointment",        href: "#contact"}}
-      secondaryButton={{
-        text: "View Services",        href: "#services"}}
-      items={[
-        {
-          text: "Certified Experts",          icon: CheckCircle,
-        },
-        {
-          text: "Full Service Menu",          icon: Sparkles,
-        },
-        {
-          text: "Easy Online Booking",          icon: Calendar,
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg?_wi=1"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="services" data-section="services">
-    <SectionErrorBoundary name="services">
-          <AboutFeaturesSplit
-      tag="Our Expertise"
-      title="Comprehensive Beauty Care"
-      description="We provide a curated range of high-quality services designed to keep you feeling confident and refreshed."
-      items={[
-        {
-          icon: "Scissors",          title: "Hair Styling & Extensions",          description: "Expert cuts, colors, and premium extensions."},
-        {
-          icon: "Sparkles",          title: "Skincare & Facials",          description: "Personalized treatments for radiant skin."},
-        {
-          icon: "Diamond",          title: "Nail Care & Art",          description: "Premium manicures and artistic nail designs."},
-        {
-          icon: "Sun",          title: "Professional Waxing",          description: "Gentle, precise hair removal services."},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/portrait-smiling-owner-hairdresser-salon_329181-1953.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ServicesSection />
 
-  <div id="features-bento" data-section="features-bento">
-    <SectionErrorBoundary name="features-bento">
-          <FeaturesBento
-      tag="Why Choose Us"
-      title="Experience the Unique Difference"
-      description="We prioritize quality, time efficiency, and comfort in everything we do."
-      features={[
-        {
-          title: "Transparent Pricing",          description: "Know your investment before you book.",          bentoComponent: "info-card-marquee",          infoCards: [
-            {
-              icon: "DollarSign",              label: "Clear",              value: "Pricing"},
-            {
-              icon: "Clock",              label: "Fast",              value: "Service"},
-            {
-              icon: "Award",              label: "Expert",              value: "Staff"},
-          ],
-        },
-        {
-          title: "Premium Standards",          description: "Our certified professionals use top-tier tools.",          bentoComponent: "media-stack",          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg?_wi=2"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/mixed-race-woman-with-hand-dark-skinned-man-around-neck_8353-12401.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-setting-hair-client-styling_23-2147769849.jpg"},
-          ],
-        },
-        {
-          title: "Customer Satisfaction",          description: "Join our community of happy regulars.",          bentoComponent: "checklist-timeline",          heading: "Our Process",          subheading: "Ensuring the perfect experience every time.",          checklistItems: [
-            {
-              label: "Consultation",              detail: "Understand your goals"},
-            {
-              label: "Treatment",              detail: "Professional execution"},
-            {
-              label: "Follow-up",              detail: "Quality satisfaction check"},
-          ],
-          completedLabel: "Book Now"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesBentoSection />
 
-  <div id="team" data-section="team">
-    <SectionErrorBoundary name="team">
-          <TeamListCards
-      tag="Meet Our Experts"
-      title="Talented Professional Team"
-      description="Get to know the passionate specialists behind our beauty services."
-      groups={[
-        {
-          title: "Salon Leadership & Styling",          members: [
-            {
-              name: "Jane Smith",              role: "Head Stylist",              detail: "10+ years of creative styling experience.",              imageSrc: "http://img.b2bpic.net/free-photo/amazing-laughing-redhead-young-lady-standing-cafe_171337-15271.jpg"},
-            {
-              name: "Robert Chen",              role: "Senior Colorist",              detail: "Expertise in balayage and highlights.",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-relaxed-content-woman-leaning-wall_1262-1749.jpg"},
-          ],
-        },
-        {
-          title: "Aesthetics & Care",          members: [
-            {
-              name: "Emily Davis",              role: "Lead Esthetician",              detail: "Specialized in advanced skincare facials.",              imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg"},
-            {
-              name: "Sarah Miller",              role: "Nail Artist",              detail: "Precision nail care and art specialist.",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-bride-indoors_23-2149721992.jpg"},
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TeamSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialColumnMarqueeCards
-      tag="Client Reviews"
-      title="What Our Clients Say"
-      description="Join our satisfied guests who trust us with their beauty routine."
-      testimonials={[
-        {
-          name: "Alice Johnson",          role: "Professional",          quote: "The best salon experience I've had in years. Professional and fast!",          imageSrc: "http://img.b2bpic.net/free-photo/she-looks-relaxed-her-home_329181-1170.jpg"},
-        {
-          name: "Brian Smith",          role: "Regular Client",          quote: "I come here for all my treatments. Highly recommended.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-with-curly-hair_23-2151317377.jpg"},
-        {
-          name: "Chloe Brown",          role: "Frequent Visitor",          quote: "Absolutely love the color transformation. 5 stars!",          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg"},
-        {
-          name: "David Wilson",          role: "Happy Client",          quote: "The team is so friendly and detail-oriented.",          imageSrc: "http://img.b2bpic.net/free-photo/man-presenting-necklace-charming-woman_23-2147736699.jpg"},
-        {
-          name: "Eva Martinez",          role: "New Client",          quote: "Professional, welcoming, and high-quality services.",          imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="services-grid" data-section="services-grid">
-    <SectionErrorBoundary name="services-grid">
-          <FeaturesImageBento
-      tag="Service Menu"
-      title="Our Full Service Menu"
-      description="Explore our complete range of specialized beauty treatments."
-      items={[
-        {
-          title: "Waxing",          description: "Full body waxing services.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-leg-hair-removed_107420-74068.jpg"},
-        {
-          title: "Extensions",          description: "Premium hair extensions.",          imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108824.jpg"},
-        {
-          title: "Styling",          description: "Modern hair cuts and styles.",          imageSrc: "http://img.b2bpic.net/free-photo/outdoor-fashion-portrait-beautiful-woman-with-perfect-skin-dreaming-alone-looking-floor-enjoy-her-thoughts-have-natural-make-up-posing-sea-port_291049-1721.jpg"},
-        {
-          title: "Manicures",          description: "Beautiful nail designs.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-adorned-with-rings-black-nail-polish_23-2152015297.jpg"},
-        {
-          title: "Facials",          description: "Deep cleansing skincare.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-cosmetology-studio-procedures_1157-34930.jpg"},
-        {
-          title: "Pedicures",          description: "Nail care & foot health.",          imageSrc: "http://img.b2bpic.net/free-photo/hair-tool-assortment-sakura-blossoms_23-2148352917.jpg"},
-        {
-          title: "Full Package",          description: "The ultimate day of beauty.",          imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ServicesGridSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsIconCards
-      tag="By the Numbers"
-      title="Trusted Service Excellence"
-      description="Proven results for your beauty needs."
-      metrics={[
-        {
-          icon: "Star",          title: "Rating",          value: "4.8+"},
-        {
-          icon: "Users",          title: "Happy Clients",          value: "1,500+"},
-        {
-          icon: "Award",          title: "Years Experience",          value: "10+"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTabbedAccordion
-      tag="Common Questions"
-      title="Frequently Asked Questions"
-      description="Find everything you need to know about our services."
-      categories={[
-        {
-          name: "Booking",          items: [
-            {
-              question: "Can I book online?",              answer: "Yes, our online system is open 24/7."},
-            {
-              question: "Can I cancel my booking?",              answer: "Cancellations made 24 hours prior are fully refundable."},
-          ],
-        },
-        {
-          name: "Services",          items: [
-            {
-              question: "Are your stylists certified?",              answer: "All team members are fully licensed and certified."},
-            {
-              question: "Do you offer consultations?",              answer: "Yes, we offer complimentary consultations before any major service."},
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Ready to Start?"
-      text="Book your appointment in seconds and experience professional beauty care."
-      primaryButton={{
-        text: "Book Appointment",        href: "#"}}
-      secondaryButton={{
-        text: "Call Us",        href: "tel:5551234567"}}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..8e92b66
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Ready to Start?"
+          text="Book your appointment in seconds and experience professional beauty care."
+          primaryButton={{
+            text: "Book Appointment",        href: "#"}}
+          secondaryButton={{
+            text: "Call Us",        href: "tel:5551234567"}}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..214f9d9
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,38 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTabbedAccordion
+          tag="Common Questions"
+          title="Frequently Asked Questions"
+          description="Find everything you need to know about our services."
+          categories={[
+            {
+              name: "Booking",          items: [
+                {
+                  question: "Can I book online?",              answer: "Yes, our online system is open 24/7."},
+                {
+                  question: "Can I cancel my booking?",              answer: "Cancellations made 24 hours prior are fully refundable."},
+              ],
+            },
+            {
+              name: "Services",          items: [
+                {
+                  question: "Are your stylists certified?",              answer: "All team members are fully licensed and certified."},
+                {
+                  question: "Do you offer consultations?",              answer: "Yes, we offer complimentary consultations before any major service."},
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/FeaturesBento.tsx b/src/pages/HomePage/sections/FeaturesBento.tsx
new file mode 100644
index 0000000..b18eef0
--- /dev/null
+++ b/src/pages/HomePage/sections/FeaturesBento.tsx
@@ -0,0 +1,52 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features-bento" section.
+
+import React from 'react';
+import FeaturesBento from '@/components/sections/features/FeaturesBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesBentoSection(): React.JSX.Element {
+  return (
+    <div id="features-bento" data-section="features-bento">
+        <SectionErrorBoundary name="features-bento">
+              <FeaturesBento
+          tag="Why Choose Us"
+          title="Experience the Unique Difference"
+          description="We prioritize quality, time efficiency, and comfort in everything we do."
+          features={[
+            {
+              title: "Transparent Pricing",          description: "Know your investment before you book.",          bentoComponent: "info-card-marquee",          infoCards: [
+                {
+                  icon: "DollarSign",              label: "Clear",              value: "Pricing"},
+                {
+                  icon: "Clock",              label: "Fast",              value: "Service"},
+                {
+                  icon: "Award",              label: "Expert",              value: "Staff"},
+              ],
+            },
+            {
+              title: "Premium Standards",          description: "Our certified professionals use top-tier tools.",          bentoComponent: "media-stack",          mediaItems: [
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg?_wi=2"},
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/mixed-race-woman-with-hand-dark-skinned-man-around-neck_8353-12401.jpg"},
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/woman-setting-hair-client-styling_23-2147769849.jpg"},
+              ],
+            },
+            {
+              title: "Customer Satisfaction",          description: "Join our community of happy regulars.",          bentoComponent: "checklist-timeline",          heading: "Our Process",          subheading: "Ensuring the perfect experience every time.",          checklistItems: [
+                {
+                  label: "Consultation",              detail: "Understand your goals"},
+                {
+                  label: "Treatment",              detail: "Professional execution"},
+                {
+                  label: "Follow-up",              detail: "Quality satisfaction check"},
+              ],
+              completedLabel: "Book Now"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..b7f3243
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,37 @@
+// 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 HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
+import { Calendar, CheckCircle, Sparkles } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroOverlayMarquee
+          tag="Your Local Beauty Experts"
+          title="Complete Beauty Services, One Trusted Salon"
+          description="Waxing, extensions, styling, nails, and skincare—all from certified professionals. Book your appointment in seconds."
+          primaryButton={{
+            text: "Book Your Appointment",        href: "#contact"}}
+          secondaryButton={{
+            text: "View Services",        href: "#services"}}
+          items={[
+            {
+              text: "Certified Experts",          icon: CheckCircle,
+            },
+            {
+              text: "Full Service Menu",          icon: Sparkles,
+            },
+            {
+              text: "Easy Online Booking",          icon: Calendar,
+            },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg?_wi=1"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Metrics.tsx b/src/pages/HomePage/sections/Metrics.tsx
new file mode 100644
index 0000000..0cc5d51
--- /dev/null
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,28 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsIconCards
+          tag="By the Numbers"
+          title="Trusted Service Excellence"
+          description="Proven results for your beauty needs."
+          metrics={[
+            {
+              icon: "Star",          title: "Rating",          value: "4.8+"},
+            {
+              icon: "Users",          title: "Happy Clients",          value: "1,500+"},
+            {
+              icon: "Award",          title: "Years Experience",          value: "10+"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Services.tsx b/src/pages/HomePage/sections/Services.tsx
new file mode 100644
index 0000000..4b54d98
--- /dev/null
+++ b/src/pages/HomePage/sections/Services.tsx
@@ -0,0 +1,31 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "services" section.
+
+import React from 'react';
+import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services" data-section="services">
+        <SectionErrorBoundary name="services">
+              <AboutFeaturesSplit
+          tag="Our Expertise"
+          title="Comprehensive Beauty Care"
+          description="We provide a curated range of high-quality services designed to keep you feeling confident and refreshed."
+          items={[
+            {
+              icon: "Scissors",          title: "Hair Styling & Extensions",          description: "Expert cuts, colors, and premium extensions."},
+            {
+              icon: "Sparkles",          title: "Skincare & Facials",          description: "Personalized treatments for radiant skin."},
+            {
+              icon: "Diamond",          title: "Nail Care & Art",          description: "Premium manicures and artistic nail designs."},
+            {
+              icon: "Sun",          title: "Professional Waxing",          description: "Gentle, precise hair removal services."},
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/portrait-smiling-owner-hairdresser-salon_329181-1953.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/ServicesGrid.tsx b/src/pages/HomePage/sections/ServicesGrid.tsx
new file mode 100644
index 0000000..7c77e67
--- /dev/null
+++ b/src/pages/HomePage/sections/ServicesGrid.tsx
@@ -0,0 +1,36 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "services-grid" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ServicesGridSection(): React.JSX.Element {
+  return (
+    <div id="services-grid" data-section="services-grid">
+        <SectionErrorBoundary name="services-grid">
+              <FeaturesImageBento
+          tag="Service Menu"
+          title="Our Full Service Menu"
+          description="Explore our complete range of specialized beauty treatments."
+          items={[
+            {
+              title: "Waxing",          description: "Full body waxing services.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-leg-hair-removed_107420-74068.jpg"},
+            {
+              title: "Extensions",          description: "Premium hair extensions.",          imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108824.jpg"},
+            {
+              title: "Styling",          description: "Modern hair cuts and styles.",          imageSrc: "http://img.b2bpic.net/free-photo/outdoor-fashion-portrait-beautiful-woman-with-perfect-skin-dreaming-alone-looking-floor-enjoy-her-thoughts-have-natural-make-up-posing-sea-port_291049-1721.jpg"},
+            {
+              title: "Manicures",          description: "Beautiful nail designs.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-adorned-with-rings-black-nail-polish_23-2152015297.jpg"},
+            {
+              title: "Facials",          description: "Deep cleansing skincare.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-cosmetology-studio-procedures_1157-34930.jpg"},
+            {
+              title: "Pedicures",          description: "Nail care & foot health.",          imageSrc: "http://img.b2bpic.net/free-photo/hair-tool-assortment-sakura-blossoms_23-2148352917.jpg"},
+            {
+              title: "Full Package",          description: "The ultimate day of beauty.",          imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Team.tsx b/src/pages/HomePage/sections/Team.tsx
new file mode 100644
index 0000000..4236b0b
--- /dev/null
+++ b/src/pages/HomePage/sections/Team.tsx
@@ -0,0 +1,38 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "team" section.
+
+import React from 'react';
+import TeamListCards from '@/components/sections/team/TeamListCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TeamSection(): React.JSX.Element {
+  return (
+    <div id="team" data-section="team">
+        <SectionErrorBoundary name="team">
+              <TeamListCards
+          tag="Meet Our Experts"
+          title="Talented Professional Team"
+          description="Get to know the passionate specialists behind our beauty services."
+          groups={[
+            {
+              title: "Salon Leadership & Styling",          members: [
+                {
+                  name: "Jane Smith",              role: "Head Stylist",              detail: "10+ years of creative styling experience.",              imageSrc: "http://img.b2bpic.net/free-photo/amazing-laughing-redhead-young-lady-standing-cafe_171337-15271.jpg"},
+                {
+                  name: "Robert Chen",              role: "Senior Colorist",              detail: "Expertise in balayage and highlights.",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-relaxed-content-woman-leaning-wall_1262-1749.jpg"},
+              ],
+            },
+            {
+              title: "Aesthetics & Care",          members: [
+                {
+                  name: "Emily Davis",              role: "Lead Esthetician",              detail: "Specialized in advanced skincare facials.",              imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg"},
+                {
+                  name: "Sarah Miller",              role: "Nail Artist",              detail: "Precision nail care and art specialist.",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-bride-indoors_23-2149721992.jpg"},
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
new file mode 100644
index 0000000..1739999
--- /dev/null
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,32 @@
+// 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="Client Reviews"
+          title="What Our Clients Say"
+          description="Join our satisfied guests who trust us with their beauty routine."
+          testimonials={[
+            {
+              name: "Alice Johnson",          role: "Professional",          quote: "The best salon experience I've had in years. Professional and fast!",          imageSrc: "http://img.b2bpic.net/free-photo/she-looks-relaxed-her-home_329181-1170.jpg"},
+            {
+              name: "Brian Smith",          role: "Regular Client",          quote: "I come here for all my treatments. Highly recommended.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-with-curly-hair_23-2151317377.jpg"},
+            {
+              name: "Chloe Brown",          role: "Frequent Visitor",          quote: "Absolutely love the color transformation. 5 stars!",          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg"},
+            {
+              name: "David Wilson",          role: "Happy Client",          quote: "The team is so friendly and detail-oriented.",          imageSrc: "http://img.b2bpic.net/free-photo/man-presenting-necklace-charming-woman_23-2147736699.jpg"},
+            {
+              name: "Eva Martinez",          role: "New Client",          quote: "Professional, welcoming, and high-quality services.",          imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}