From c99b6613f04f7c2089fd537cc7c3bc95ee67e0bc Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 14 Jun 2026 05:49:49 +0000
Subject: [PATCH] Bob AI (stub): Update the website to include a real-time
 Audio Visualizer u

---
 src/pages/HomePage.tsx                       | 330 ++-----------------
 src/pages/HomePage/sections/About.tsx        |  39 +++
 src/pages/HomePage/sections/Catalog.tsx      |  64 ++++
 src/pages/HomePage/sections/Contact.tsx      |  27 ++
 src/pages/HomePage/sections/Faq.tsx          |  44 +++
 src/pages/HomePage/sections/Features.tsx     |  37 +++
 src/pages/HomePage/sections/Hero.tsx         |  48 +++
 src/pages/HomePage/sections/Pricing.tsx      |  64 ++++
 src/pages/HomePage/sections/Testimonials.tsx |  57 ++++
 9 files changed, 407 insertions(+), 303 deletions(-)
 create mode 100644 src/pages/HomePage/sections/About.tsx
 create mode 100644 src/pages/HomePage/sections/Catalog.tsx
 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/Features.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Pricing.tsx
 create mode 100644 src/pages/HomePage/sections/Testimonials.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 3f99842..6f4e783 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,315 +1,39 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
-import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
-import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-import { Layers, Music, Zap } 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 AboutSection from './HomePage/sections/About';
+import FeaturesSection from './HomePage/sections/Features';
+import CatalogSection from './HomePage/sections/Catalog';
+import PricingSection from './HomePage/sections/Pricing';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+
+{/* webild-stub @2026-06-14T05:49:48.731Z: Update the website to include a real-time Audio Visualizer using Web Audio API to sync column movement with the actual audio frequencies. Integrate Three.js to create an audio-reactive 3D sphere in the hero section that distorts and pulses  */}
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboardTiltedCarousel
-      tag="Next-Gen Music Lab"
-      title="Crafting the Future of Beats"
-      description="High-fidelity production-grade beats for modern creators. Immerse yourself in our 3D-integrated sound experience."
-      primaryButton={{
-        text: "Explore Beats",
-        href: "#catalog",
-      }}
-      secondaryButton={{
-        text: "Listen Now",
-        href: "#catalog",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-dj-using-virtual-reality-glasses-headline-party-play-music_23-2151418304.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-music-production-set-midi-mixer-control-tablet-laptop-black-dj-headphones-with-leather-earpad_346278-205.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/audio-engineer-inserting-usb-stick-pc-record-himself-playing-piano_482257-104726.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-portrait-person-listening-music-headphones_23-2151065139.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-neon-lights-wonder-wheel_23-2148328075.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/headphones-black-wall_417767-431.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutFeaturesSplit
-      tag="Our Philosophy"
-      title="Precision Meets Rhythm"
-      description="We blend cutting-edge audio processing with immersive 3D technology to create sounds that define the modern era."
-      items={[
-        {
-          icon: Zap,
-          title: "High Frequency",
-          description: "Ultra-low latency audio processing for superior quality.",
-        },
-        {
-          icon: Layers,
-          title: "Complex Textures",
-          description: "Multi-layered sound design for deep, immersive beats.",
-        },
-        {
-          icon: Music,
-          title: "Rhythmic Precision",
-          description: "Perfect synchronization with your artistic vision.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167456.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesRevealCards
-      tag="Production Excellence"
-      title="Engineered for Producers"
-      description="Professional tools for the modern beatmaker, tailored for high-impact production."
-      items={[
-        {
-          title: "Analog Warmth",
-          description: "Authentic warmth of classic gear matched with digital fidelity.",
-          imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074265.jpg",
-        },
-        {
-          title: "Dynamic Range",
-          description: "Experience unparalleled depth and clarity in every beat.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cartoon-style-piano_23-2151056763.jpg",
-        },
-        {
-          title: "Seamless Integration",
-          description: "Ready to drop into any workstation or project workflow.",
-          imageSrc: "http://img.b2bpic.net/free-vector/opened-clapper-neon-sign_1262-15682.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
 
-  <div id="catalog" data-section="catalog">
-    <SectionErrorBoundary name="catalog">
-          <FeaturesRevealCardsBento
-      tag="Beat Catalog"
-      title="Select Your Sound"
-      description="Explore our premium selection of handcrafted beats and rhythm modules."
-      items={[
-        {
-          title: "Cyber Drift",
-          description: "High-octane synth wave",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-light-lamp-design_23-2151124490.jpg",
-        },
-        {
-          title: "Neon Soul",
-          description: "Smooth melodic textures",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/cool-cross-shaped-futuristic-sci-fi-techno-lights_181624-11745.jpg",
-        },
-        {
-          title: "Void Walker",
-          description: "Deep atmospheric trap",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-sound-mixer_1359-7.jpg",
-        },
-        {
-          title: "Pulse Flow",
-          description: "Rhythmic house beats",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/options-choice-changes-arrows-graphic_53876-124373.jpg",
-        },
-        {
-          title: "Glitch Core",
-          description: "Experimental beat design",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/audio-microphone-retro-style_93675-128274.jpg",
-        },
-        {
-          title: "Dark Syntax",
-          description: "Hard-hitting underground",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-speakers-membrane-black-background-with-colored-lighting_169016-52966.jpg",
-        },
-        {
-          title: "Zenith",
-          description: "Ambient cinematic waves",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-glowing-background_23-2151907748.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <CatalogSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingCenteredCards
-      tag="Membership Tiers"
-      title="Flexible Production Plans"
-      description="Choose a plan that scales with your production demands."
-      plans={[
-        {
-          tag: "Starter",
-          price: "$19/mo",
-          description: "Casual producer package",
-          features: [
-            "10 beats/mo",
-            "Basic mastering",
-            "MP3 format",
-          ],
-          primaryButton: {
-            text: "Get Started",
-            href: "#",
-          },
-        },
-        {
-          tag: "Pro",
-          price: "$49/mo",
-          description: "Full production suite",
-          features: [
-            "Unlimited beats",
-            "Studio mastering",
-            "WAV + Stem access",
-          ],
-          primaryButton: {
-            text: "Join Pro",
-            href: "#",
-          },
-        },
-        {
-          tag: "Elite",
-          price: "$99/mo",
-          description: "Professional licensing",
-          features: [
-            "Full commercial rights",
-            "24/7 Priority support",
-            "Custom sound design",
-          ],
-          primaryButton: {
-            text: "Go Elite",
-            href: "#",
-          },
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-      tag="Producer Reviews"
-      title="Trusted by Creators"
-      description="Hear what the community has to say about our production quality."
-      testimonials={[
-        {
-          name: "Alex Riv",
-          role: "Beatmaker",
-          quote: "The texture on these beats is unmatched in the industry.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-person-holding-rose-valentines_1048-17891.jpg",
-        },
-        {
-          name: "Sarah Jade",
-          role: "Artist",
-          quote: "My track soared after using these samples, professional grade.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-sound-producer-connecting-coiled-cable-mixing-console_482257-116016.jpg",
-        },
-        {
-          name: "Marc K",
-          role: "Producer",
-          quote: "Seamless integration and top-tier sound design, worth it.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-flamingo-neon-sign-bedroom_23-2149355061.jpg",
-        },
-        {
-          name: "Elena V",
-          role: "Songwriter",
-          quote: "The best selection of modern sounds I've found yet.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/person-wearing-futuristic-high-tech-virtual-reality-glasses_23-2151141697.jpg",
-        },
-        {
-          name: "David W",
-          role: "Creator",
-          quote: "Revolutionary sound, changed my production workflow completely.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133169.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTabbedAccordion
-      tag="Help Center"
-      title="Questions Answered"
-      description="Everything you need to know about our service and licensing."
-      categories={[
-        {
-          name: "General",
-          items: [
-            {
-              question: "What formats are included?",
-              answer: "All plans include high-quality WAV and MP3 formats.",
-            },
-            {
-              question: "Can I use these commercially?",
-              answer: "Pro and Elite plans include full commercial usage rights.",
-            },
-          ],
-        },
-        {
-          name: "Licensing",
-          items: [
-            {
-              question: "Do I need to credit you?",
-              answer: "Yes, please provide credit for commercial releases.",
-            },
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Get in touch"
-      text="Ready to start your next masterpiece?"
-      primaryButton={{
-        text: "Email Support",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "DM Us",
-        href: "#",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..db4c5b1
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,39 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+import { Layers, Music, Zap } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutFeaturesSplit
+          tag="Our Philosophy"
+          title="Precision Meets Rhythm"
+          description="We blend cutting-edge audio processing with immersive 3D technology to create sounds that define the modern era."
+          items={[
+            {
+              icon: Zap,
+              title: "High Frequency",
+              description: "Ultra-low latency audio processing for superior quality.",
+            },
+            {
+              icon: Layers,
+              title: "Complex Textures",
+              description: "Multi-layered sound design for deep, immersive beats.",
+            },
+            {
+              icon: Music,
+              title: "Rhythmic Precision",
+              description: "Perfect synchronization with your artistic vision.",
+            },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167456.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Catalog.tsx b/src/pages/HomePage/sections/Catalog.tsx
new file mode 100644
index 0000000..4664b46
--- /dev/null
+++ b/src/pages/HomePage/sections/Catalog.tsx
@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "catalog" section.
+
+import React from 'react';
+import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function CatalogSection(): React.JSX.Element {
+  return (
+    <div id="catalog" data-section="catalog">
+        <SectionErrorBoundary name="catalog">
+              <FeaturesRevealCardsBento
+          tag="Beat Catalog"
+          title="Select Your Sound"
+          description="Explore our premium selection of handcrafted beats and rhythm modules."
+          items={[
+            {
+              title: "Cyber Drift",
+              description: "High-octane synth wave",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/digital-art-light-lamp-design_23-2151124490.jpg",
+            },
+            {
+              title: "Neon Soul",
+              description: "Smooth melodic textures",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/cool-cross-shaped-futuristic-sci-fi-techno-lights_181624-11745.jpg",
+            },
+            {
+              title: "Void Walker",
+              description: "Deep atmospheric trap",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-sound-mixer_1359-7.jpg",
+            },
+            {
+              title: "Pulse Flow",
+              description: "Rhythmic house beats",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/options-choice-changes-arrows-graphic_53876-124373.jpg",
+            },
+            {
+              title: "Glitch Core",
+              description: "Experimental beat design",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/audio-microphone-retro-style_93675-128274.jpg",
+            },
+            {
+              title: "Dark Syntax",
+              description: "Hard-hitting underground",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/closeup-speakers-membrane-black-background-with-colored-lighting_169016-52966.jpg",
+            },
+            {
+              title: "Zenith",
+              description: "Ambient cinematic waves",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-glowing-background_23-2151907748.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..a38d208
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.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" 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="Get in touch"
+          text="Ready to start your next masterpiece?"
+          primaryButton={{
+            text: "Email Support",
+            href: "#",
+          }}
+          secondaryButton={{
+            text: "DM Us",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..3a308e5
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,44 @@
+// 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="Help Center"
+          title="Questions Answered"
+          description="Everything you need to know about our service and licensing."
+          categories={[
+            {
+              name: "General",
+              items: [
+                {
+                  question: "What formats are included?",
+                  answer: "All plans include high-quality WAV and MP3 formats.",
+                },
+                {
+                  question: "Can I use these commercially?",
+                  answer: "Pro and Elite plans include full commercial usage rights.",
+                },
+              ],
+            },
+            {
+              name: "Licensing",
+              items: [
+                {
+                  question: "Do I need to credit you?",
+                  answer: "Yes, please provide credit for commercial releases.",
+                },
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Features.tsx b/src/pages/HomePage/sections/Features.tsx
new file mode 100644
index 0000000..580d83a
--- /dev/null
+++ b/src/pages/HomePage/sections/Features.tsx
@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesRevealCards
+          tag="Production Excellence"
+          title="Engineered for Producers"
+          description="Professional tools for the modern beatmaker, tailored for high-impact production."
+          items={[
+            {
+              title: "Analog Warmth",
+              description: "Authentic warmth of classic gear matched with digital fidelity.",
+              imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074265.jpg",
+            },
+            {
+              title: "Dynamic Range",
+              description: "Experience unparalleled depth and clarity in every beat.",
+              imageSrc: "http://img.b2bpic.net/free-photo/cartoon-style-piano_23-2151056763.jpg",
+            },
+            {
+              title: "Seamless Integration",
+              description: "Ready to drop into any workstation or project workflow.",
+              imageSrc: "http://img.b2bpic.net/free-vector/opened-clapper-neon-sign_1262-15682.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..971c91f
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,48 @@
+// 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 HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroBillboardTiltedCarousel
+          tag="Next-Gen Music Lab"
+          title="Crafting the Future of Beats"
+          description="High-fidelity production-grade beats for modern creators. Immerse yourself in our 3D-integrated sound experience."
+          primaryButton={{
+            text: "Explore Beats",
+            href: "#catalog",
+          }}
+          secondaryButton={{
+            text: "Listen Now",
+            href: "#catalog",
+          }}
+          items={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/futuristic-dj-using-virtual-reality-glasses-headline-party-play-music_23-2151418304.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/top-view-music-production-set-midi-mixer-control-tablet-laptop-black-dj-headphones-with-leather-earpad_346278-205.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/audio-engineer-inserting-usb-stick-pc-record-himself-playing-piano_482257-104726.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/digital-art-portrait-person-listening-music-headphones_23-2151065139.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/abstract-neon-lights-wonder-wheel_23-2148328075.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/headphones-black-wall_417767-431.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Pricing.tsx b/src/pages/HomePage/sections/Pricing.tsx
new file mode 100644
index 0000000..83e7017
--- /dev/null
+++ b/src/pages/HomePage/sections/Pricing.tsx
@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingCenteredCards
+          tag="Membership Tiers"
+          title="Flexible Production Plans"
+          description="Choose a plan that scales with your production demands."
+          plans={[
+            {
+              tag: "Starter",
+              price: "$19/mo",
+              description: "Casual producer package",
+              features: [
+                "10 beats/mo",
+                "Basic mastering",
+                "MP3 format",
+              ],
+              primaryButton: {
+                text: "Get Started",
+                href: "#",
+              },
+            },
+            {
+              tag: "Pro",
+              price: "$49/mo",
+              description: "Full production suite",
+              features: [
+                "Unlimited beats",
+                "Studio mastering",
+                "WAV + Stem access",
+              ],
+              primaryButton: {
+                text: "Join Pro",
+                href: "#",
+              },
+            },
+            {
+              tag: "Elite",
+              price: "$99/mo",
+              description: "Professional licensing",
+              features: [
+                "Full commercial rights",
+                "24/7 Priority support",
+                "Custom sound design",
+              ],
+              primaryButton: {
+                text: "Go Elite",
+                href: "#",
+              },
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
new file mode 100644
index 0000000..00dd0c0
--- /dev/null
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,57 @@
+// 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 TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialRatingCards
+          tag="Producer Reviews"
+          title="Trusted by Creators"
+          description="Hear what the community has to say about our production quality."
+          testimonials={[
+            {
+              name: "Alex Riv",
+              role: "Beatmaker",
+              quote: "The texture on these beats is unmatched in the industry.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/young-person-holding-rose-valentines_1048-17891.jpg",
+            },
+            {
+              name: "Sarah Jade",
+              role: "Artist",
+              quote: "My track soared after using these samples, professional grade.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/african-american-sound-producer-connecting-coiled-cable-mixing-console_482257-116016.jpg",
+            },
+            {
+              name: "Marc K",
+              role: "Producer",
+              quote: "Seamless integration and top-tier sound design, worth it.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-flamingo-neon-sign-bedroom_23-2149355061.jpg",
+            },
+            {
+              name: "Elena V",
+              role: "Songwriter",
+              quote: "The best selection of modern sounds I've found yet.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/person-wearing-futuristic-high-tech-virtual-reality-glasses_23-2151141697.jpg",
+            },
+            {
+              name: "David W",
+              role: "Creator",
+              quote: "Revolutionary sound, changed my production workflow completely.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133169.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}