Bob AI: Update footer with social links and tagline

src/components/Layout.tsx

@@ -59,53 +59,36 @@ export default function Layout() {
         {
           items: [
             {
-              label: "About",
-              href: "#about",
+              label: "Instagram",
+              href: "https://instagram.com/YungHondoMusic",
             },
             {
-              label: "Music",
-              href: "#",
+              label: "TikTok",
+              href: "https://tiktok.com/@YungHondoMusic",
             },
             {
-              label: "Community",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Terms",
-              href: "#",
+              label: "YouTube",
+              href: "https://youtube.com/YungHondoMusic",
             },
             {
-              label: "Privacy",
-              href: "#",
+              label: "Spotify",
+              href: "https://spotify.com/YungHondoMusic",
+            },
+            {
+              label: "Apple Music",
+              href: "https://music.apple.com/YungHondoMusic",
             },
             {
               label: "Contact",
               href: "#contact",
             },
           ],
-        },
-        {
-          items: [
-            {
-              label: "Instagram",
-              href: "https://instagram.com",
-            },
-            {
-              label: "Twitter",
-              href: "https://twitter.com",
-            },
-            {
-              label: "TikTok",
-              href: "https://tiktok.com",
-            },
-          ],
-        },
+        }
       ]}
     />
+    <div className="w-content-width mx-auto px-6 pb-12 text-center text-muted-foreground">
+      Representing those who left home to build a future.
+    </div>
       </SectionErrorBoundary>
     </StyleProvider>
   );

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
-  --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #e63946;
+  --primary-cta-text: #ffffff;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --secondary-cta-text: #000000;
+  --accent: #e63946;
+  --background-accent: #5c0e14;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;

src/pages/HomePage.tsx

@@ -1,160 +1,35 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeaturesBento from '@/components/sections/features/FeaturesBento';
-import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
-import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
-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 TestimonialsSection from './HomePage/sections/Testimonials';
+import ContactSection from './HomePage/sections/Contact';
+
+
+import ListenSection from './HomePage/sections/Listen';
+import EventsSection from './HomePage/sections/Events';
+import StoriesSection from './HomePage/sections/Stories';
+import MerchSection from './HomePage/sections/Merch';export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroCenteredLogos
-      avatarsSrc={[
-        "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-1540.jpg",        "http://img.b2bpic.net/free-photo/medium-shot-model-posing-studio_23-2149042844.jpg",        "http://img.b2bpic.net/free-photo/portrait-handsome-man-orange-background_23-2149020032.jpg",        "http://img.b2bpic.net/free-photo/strong-powerful-african-american-man-black-suit-taking-selfie-holding-camera-with-hands_627829-1124.jpg"]}
-      avatarText="Join our community of visionaries"
-      title="Built Different."
-      description="YungHondo is the pulse of the African diaspora. Music, culture, and entrepreneurship rooted in our journey and built for the future."
-      primaryButton={{
-        text: "Join the Movement",        href: "#contact"}}
-      secondaryButton={{
-        text: "Learn Our Story",        href: "#about"}}
-      names={[
-        "Lagos",        "London",        "Atlanta",        "Nairobi",        "Accra",        "Toronto"]}
-      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-holding-bottle_23-2149213419.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutFeaturesSplit
-      tag="Our Philosophy"
-      title="More Than Just Music"
-      description="YungHondo represents the collective resilience of the diaspora. We bridge borders, defy industry standards, and empower the next generation of creative entrepreneurs."
-      items={[
-        {
-          icon: "Globe",          title: "Diaspora Focus",          description: "Global reach connecting our roots to modern soundscapes."},
-        {
-          icon: "TrendingUp",          title: "Entrepreneurial Spirit",          description: "Building sustainable ecosystems for artists and creators."},
-        {
-          icon: "Users",          title: "Community First",          description: "Creating spaces for growth, collaboration, and shared success."},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/glowing-digital-sphere-futuristic-environment_23-2152020906.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
+      <ListenSection />
+      <EventsSection />
+      <StoriesSection />
+      <MerchSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsFeatureCards
-      tag="Our Impact"
-      title="Data Behind the Movement"
-      description="Measuring success through community engagement and cultural footprint."
-      metrics={[
-        {
-          value: "120+",          title: "Lives Empowered",          features: [
-            "Mentorship programs",            "Creative workshops",            "Artist grants"],
-        },
-        {
-          value: "500K+",          title: "Streams Globally",          features: [
-            "Pan-African reach",            "Organic growth",            "Authentic storytelling"],
-        },
-        {
-          value: "15",          title: "Cities Connected",          features: [
-            "Global diaspora hubs",            "Community events",            "Strategic partnerships"],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesBento
-      tag="Core Pillars"
-      title="Built for Impact"
-      description="Our work is centered on key areas that push the culture forward."
-      features={[
-        {
-          title: "Cultural Preservation",          description: "Keeping the history alive through modern musical expression.",          bentoComponent: "orbiting-icons",          centerIcon: "Music",          orbitIcons: ["Globe", "Heart", "Zap", "Shield"]
-        },
-        {
-          title: "Mentorship",          description: "Real-time guidance for the next generation of black innovators.",          bentoComponent: "chat-marquee",          aiIcon: "User",          userIcon: "MessageSquare",          exchanges: [
-            { userMessage: "How do I start?", aiResponse: "Start by defining your story." },
-            { userMessage: "Need resources.", aiResponse: "Our network is here for you." }
-          ],
-          placeholder: "Ask our community..."
-        },
-        {
-          title: "Growth Milestones",          description: "Tracking the progress of our community members.",          bentoComponent: "checklist-timeline",          heading: "Project Progress",          subheading: "Milestones achieved together.",          checklistItems: [
-            { label: "Founding", detail: "Completed" },
-            { label: "Scaling", detail: "In Progress" },
-            { label: "Global Expansion", detail: "Upcoming" }
-          ],
-          completedLabel: "Milestone Met"
-        }
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialQuoteCards
-      tag="Voices of the Community"
-      title="Authentic Experiences"
-      description="What our collaborators and community members are saying about YungHondo."
-      testimonials={[
-        {
-          name: "Kwame Osei",          role: "Artist",          quote: "YungHondo changed my perspective on independence. Truly built different.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-shaved-head-male-dressed-native-viking-s-costume_613910-12250.jpg"},
-        {
-          name: "Amara Diallo",          role: "Entrepreneur",          quote: "The resources and community mentorship are unmatched.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16027.jpg"},
-        {
-          name: "Jordan Smith",          role: "Creative Director",          quote: "Finally, a brand that stays true to the culture without compromise.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-male-with-curly-hair-dressed-jacket-eyeglasses_613910-567.jpg"},
-        {
-          name: "Elena Martinez",          role: "Producer",          quote: "YungHondo isn't just a label, it's a movement.",          imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-with-suit-posing-black-white-medium-shot_23-2149411400.jpg"},
-        {
-          name: "Samuel Adeyemi",          role: "Mentor",          quote: "Deeply committed to upliftment. We're building the future.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-hipster-male-dressed-casual-clothes-with-glasses-full-beard-standing-with-crossed-arms-studio-isolated-dark-background_613910-20093.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSplitMedia
-      tag="Common Questions"
-      title="Frequently Asked"
-      description="Clarifying our purpose and how you can join the culture."
-      items={[
-        {
-          question: "What is YungHondo?",          answer: "A music and culture house committed to amplifying the diaspora."},
-        {
-          question: "How can I collaborate?",          answer: "Contact us through the form below with your project details."},
-        {
-          question: "Where are you based?",          answer: "We operate globally with a strong base in London and Atlanta."},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-collection-colourful-pencils_23-2148539120.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Connect"
-      text="Ready to work? Let's build something different."
-      primaryButton={{
-        text: "Contact Us",        href: "mailto:hello@yunghondo.com"}}
-      secondaryButton={{
-        text: "Listen to our Sound",        href: "#"}}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
-}
+}

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,22 @@
+// 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 SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutFeaturesSplit
+        tag="About YungHondo"
+        title="Feel Free To Always Come Back"
+        description="YungHondo is a Zimbabwean-born artist, entrepreneur, and storyteller documenting the journey of building a life away from home. Through music, live performance, and culture, YungHondo represents a generation of dreamers carrying their roots into the future. Every song is a chapter. Every performance is a statement. Every victory is for the diaspora. Album 'Diaspora N' out now on all platforms."
+        items={[{"description":"Documenting the journey of building a life away from home.","icon":"Music","title":"Music"},{"icon":"Mic","title":"Live Performance","description":"Representing a generation of dreamers carrying their roots into the future."},{"icon":"Globe","title":"Culture","description":"Every victory is for the diaspora. Feel Free To Always Come Back."}]}
+        imageSrc="http://img.b2bpic.net/free-photo/glowing-digital-sphere-futuristic-environment_23-2152020906.jpg"
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

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="Connect"
+          text="Ready to work? Let's build something different."
+          primaryButton={{
+            text: "Contact Us",        href: "mailto:hello@yunghondo.com"}}
+          secondaryButton={{
+            text: "Listen to our Sound",        href: "#"}}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Events.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+export default function EventsSection() {
+  return (
+    <div data-webild-section="events" id="events">
+      <section className="py-24 bg-card text-foreground">
+        <div className="w-content-width mx-auto px-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <div>
+              <h2 className="text-5xl md:text-7xl font-bold mb-6 text-foreground">Shows & Booking</h2>
+              <p className="text-xl text-muted-foreground mb-8">
+                Bring the energy of the diaspora to your city. Available for live performances, speaking engagements, and cultural events.
+              </p>
+              <div className="space-y-6">
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 rounded-full bg-background flex items-center justify-center">
+                    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                  </div>
+                  <div>
+                    <p className="font-bold">Booking Inquiries</p>
+                    <p className="text-muted-foreground">booking@yunghondo.com</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 rounded-full bg-background flex items-center justify-center">
+                    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
+                  </div>
+                  <div>
+                    <p className="font-bold">Based In</p>
+                    <p className="text-muted-foreground">Global (Available Worldwide)</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="bg-background p-8 rounded-2xl border border-border/50">
+              <form className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">Name</label>
+                    <input type="text" className="w-full bg-card border border-border rounded-lg px-4 py-3 focus:outline-none focus:border-primary-cta" placeholder="Your Name" />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">Email</label>
+                    <input type="email" className="w-full bg-card border border-border rounded-lg px-4 py-3 focus:outline-none focus:border-primary-cta" placeholder="your@email.com" />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Event Type</label>
+                  <select className="w-full bg-card border border-border rounded-lg px-4 py-3 focus:outline-none focus:border-primary-cta appearance-none">
+                    <option>Live Performance</option>
+                    <option>Speaking Engagement</option>
+                    <option>Festival</option>
+                    <option>Other</option>
+                  </select>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Message</label>
+                  <textarea rows={4} className="w-full bg-card border border-border rounded-lg px-4 py-3 focus:outline-none focus:border-primary-cta" placeholder="Tell us about your event..."></textarea>
+                </div>
+                <button type="button" className="primary-button w-full py-4 rounded-lg font-bold text-lg">
+                  Send Inquiry
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import AvatarGroup from "@/components/ui/AvatarGroup";
+
+const avatarsSrc = [
+  "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-1540.jpg",
+  "http://img.b2bpic.net/free-photo/medium-shot-model-posing-studio_23-2149042844.jpg",
+  "http://img.b2bpic.net/free-photo/portrait-handsome-man-orange-background_23-2149020032.jpg",
+  "http://img.b2bpic.net/free-photo/strong-powerful-african-american-man-black-suit-taking-selfie-holding-camera-with-hands_627829-1124.jpg"
+];
+const primaryButton = {
+  href: "#listen",
+  text: "Listen Now"
+};
+const secondaryButton = {
+  href: "#watch",
+  text: "Watch Now"
+};
+const names = [
+  "Lagos",
+  "London",
+  "Atlanta",
+  "Nairobi",
+  "Accra",
+  "Toronto"
+];
+
+type HeroCenteredLogosProps = {
+  avatarsSrc: string[];
+  avatarText: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+  names: string[];
+  hideMedia?: boolean;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const HeroInline = () => {
+  return (
+    <section aria-label="Hero section" className="relative h-svh flex flex-col mb-20">
+      <HeroBackgroundSlot />
+      {!undefined && (
+        <div className="absolute inset-0 z-0">
+          <ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/medium-shot-man-holding-bottle_23-2149213419.jpg"} className="size-full object-cover" />
+          <div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/90 to-background" />
+        </div>
+      )}
+
+      <div className="relative z-10 flex-1 flex items-center justify-center">
+        <div className="flex flex-col items-center gap-3 pt-8 w-content-width mx-auto text-center">
+          <AvatarGroup avatarsSrc={avatarsSrc} label={""} size="lg" className="hidden" />
+
+          <TextAnimation
+            text={"YungHondo"}
+            variant="slide-up"
+            gradientText={false}
+            tag="h1"
+            className="md:max-w-8/10 text-7xl 2xl:text-9xl leading-[1.15] font-bold text-center text-balance text-foreground"
+          />
+
+          <TextAnimation
+            text={"Built Different"}
+            variant="slide-up"
+            gradientText={false}
+            tag="h2"
+            className="text-3xl md:text-4xl font-bold text-primary-cta mt-2 mb-4"
+          />
+          <TextAnimation
+            text={"Representing those who left home to build a future."}
+            variant="slide-up"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-xl md:text-2xl leading-snug text-balance text-muted-foreground"
+          />
+
+          <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
+            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
+          </div>
+        </div>
+      </div>
+
+      <div className="relative z-10 w-content-width mx-auto pb-8 overflow-hidden mask-fade-x">
+        <div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "30s" }}>
+          {[...names, ...names, ...names, ...names].map((name, index) => (
+            <div key={index} className="shrink-0 mx-3 px-4 py-2 card rounded">
+              <span className="text-xl font-semibold whitespace-nowrap text-foreground/75">{name}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Listen.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+export default function ListenSection() {
+  return (
+    <div data-webild-section="listen" id="listen">
+      <section className="py-24 bg-background text-foreground border-t border-border/20">
+        <div className="w-content-width mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-5xl md:text-7xl font-bold mb-4 text-foreground">Listen</h2>
+            <p className="text-xl text-muted-foreground">Album 'Diaspora N' out now on all platforms.</p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <a href="https://spotify.com" target="_blank" rel="noreferrer" className="card p-8 rounded-xl border border-border/50 hover:border-primary-cta transition-colors flex flex-col items-center justify-center gap-4 group">
+              <div className="w-16 h-16 rounded-full bg-card flex items-center justify-center group-hover:scale-110 transition-transform">
+                <svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta"><circle cx="12" cy="12" r="10"></circle><path d="M8 11.973c2.5-1.473 5.5-.973 7.5.527"></path><path d="M9 15c1.5-1 4-1 5 .5"></path><path d="M7 9c2-1 6-2 10 .5"></path></svg>
+              </div>
+              <span className="text-xl font-bold">Spotify</span>
+              <span className="text-sm text-muted-foreground">YungHondoMusic</span>
+            </a>
+            
+            <a href="https://music.apple.com" target="_blank" rel="noreferrer" className="card p-8 rounded-xl border border-border/50 hover:border-primary-cta transition-colors flex flex-col items-center justify-center gap-4 group">
+              <div className="w-16 h-16 rounded-full bg-card flex items-center justify-center group-hover:scale-110 transition-transform">
+                <svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"></path><path d="M10 2c1 .5 2 2 2 5"></path></svg>
+              </div>
+              <span className="text-xl font-bold">Apple Music</span>
+              <span className="text-sm text-muted-foreground">YungHondoMusic</span>
+            </a>
+            
+            <a href="https://youtube.com" target="_blank" rel="noreferrer" className="card p-8 rounded-xl border border-border/50 hover:border-primary-cta transition-colors flex flex-col items-center justify-center gap-4 group">
+              <div className="w-16 h-16 rounded-full bg-card flex items-center justify-center group-hover:scale-110 transition-transform">
+                <svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33 2.78 2.78 0 0 0 1.94 2C5.12 19.5 12 19.5 12 19.5s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.33 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
+              </div>
+              <span className="text-xl font-bold">YouTube</span>
+              <span className="text-sm text-muted-foreground">YungHondoMusic</span>
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/Merch.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export default function MerchSection() {
+  return (
+    <div data-webild-section="merch" id="merch">
+      <section className="py-32 bg-card text-foreground text-center border-t border-border/20">
+        <div className="w-content-width mx-auto px-6">
+          <h2 className="text-6xl md:text-8xl font-bold mb-6 text-foreground opacity-20 uppercase tracking-widest">Merch</h2>
+          <p className="text-3xl md:text-5xl font-bold text-primary-cta">Coming Soon</p>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/Stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+export default function StoriesSection() {
+  return (
+    <div data-webild-section="stories" id="stories">
+      <section className="py-24 bg-background text-foreground border-t border-border/20">
+        <div className="w-content-width mx-auto px-6">
+          <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
+            <div>
+              <h2 className="text-5xl md:text-7xl font-bold mb-4 text-foreground">From the Diaspora</h2>
+              <p className="text-xl text-muted-foreground max-w-2xl">Culture, community, and stories from the journey.</p>
+            </div>
+            <a href="#all-stories" className="text-primary-cta font-bold hover:underline flex items-center gap-2">
+              View All Stories
+              <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+            </a>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {[
+              { title: "Finding Home in the Sound", category: "Music", date: "Oct 12, 2023", img: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-bottle_23-2149213419.jpg" },
+              { title: "The New African Renaissance", category: "Culture", date: "Sep 28, 2023", img: "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-1540.jpg" },
+              { title: "Building Independent Platforms", category: "Business", date: "Sep 15, 2023", img: "http://img.b2bpic.net/free-photo/strong-powerful-african-american-man-black-suit-taking-selfie-holding-camera-with-hands_627829-1124.jpg" }
+            ].map((post, i) => (
+              <a key={i} href={`#post-${i}`} className="group block">
+                <div className="relative h-64 mb-6 overflow-hidden rounded-xl">
+                  <img src={post.img} alt={post.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
+                  <div className="absolute top-4 left-4 bg-primary-cta text-primary-cta-text text-xs font-bold px-3 py-1 rounded-full">
+                    {post.category}
+                  </div>
+                </div>
+                <div className="text-sm text-muted-foreground mb-2">{post.date}</div>
+                <h3 className="text-2xl font-bold group-hover:text-primary-cta transition-colors">{post.title}</h3>
+              </a>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+const testimonials = [];
+
+type Testimonial = {
+  name: string;
+  role: string;
+  quote: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const TestimonialsInline = () => (
+  <section aria-label="Testimonials section" className="py-32 bg-background text-foreground relative overflow-hidden border-t border-border/20">
+    <div className="absolute inset-0 bg-gradient-to-br from-background-accent/20 via-background to-background z-0"></div>
+    <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary-cta/20 via-transparent to-transparent z-0"></div>
+    
+    <div className="flex flex-col gap-8 md:gap-10 relative z-10">
+      <div className="flex flex-col items-center gap-2 w-content-width mx-auto text-center">
+        <blockquote className="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight tracking-tight text-foreground">
+          <span className="text-primary-cta">"</span>
+          Every song is a chapter. Every performance is a statement. Every victory is for the diaspora.
+          <span className="text-primary-cta">"</span>
+        </blockquote>
+        <div className="mt-12 text-xl md:text-2xl font-bold text-muted-foreground uppercase tracking-widest">
+          — YungHondo
+        </div>
+      </div>
+
+      
+    </div>
+  </section>
+);
+
+export default function TestimonialsSection() {
+  return (
+    <div data-webild-section="testimonials" id="testimonials">
+      <TestimonialsInline />
+    </div>
+  );
+}