Bob AI: Update footer with social links and tagline

Bob AI: Update quote section with dramatic styling
Bob AI: Add Listen, Events, Stories, and Merch sections
2026-06-18 06:27:33 +00:00 · 2026-06-18 06:27:03 +00:00 · 2026-06-18 06:25:27 +00:00 · 2026-06-18 06:23:55 +00:00 · 2026-06-18 06:23:34 +00:00 · 2026-06-18 06:22:49 +00:00
16 changed files with 356 additions and 342 deletions
--- a/index.html
+++ b/index.html
@@ -13,8 +13,6 @@
      <meta name="description" content="YungHondo is the pulse of the African diaspora. Music, culture, and entrepreneurship rooted in our journey." />
      <meta property="og:description" content="YungHondo is the pulse of the African diaspora. Music, culture, and entrepreneurship rooted in our journey." />
      <meta name="twitter:description" content="YungHondo is the pulse of the African diaspora. Music, culture, and entrepreneurship rooted in our journey." />
-      <meta property="og:image" content="https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1782071171201-ieej2njx.jpg" />
-      <meta name="twitter:image" content="https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1782071171201-ieej2njx.jpg" />
  </head>
  <body>
    <div id="root"></div>
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,13 +2,11 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';

-import ProductsPage from "@/pages/ProductsPage";
 export default function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<HomePage />} />
-        <Route path="/products" element={<ProductsPage />} />
      </Route>
    </Routes>
  );
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,4 +1,4 @@
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterBrand from '@/components/sections/footer/FooterBrand';
 import NavbarInline from '@/components/ui/NavbarInline';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
@@ -34,9 +34,7 @@ export default function Layout() {
  {
    "name": "Faq",
    "href": "#faq"
-  },
-  { name: "Products", href: "/products" },
-
+  }
 ];

  return (
@@ -55,34 +53,42 @@ export default function Layout() {
        <Outlet />
      </main>
      <SectionErrorBoundary name="footer">
-        <FooterSimple
-          brand="YungHondo"
-          columns={[
+        <FooterBrand
+      brand="YungHondo"
+      columns={[
+        {
+          items: [
            {
-              title: "Socials",
-              items: [
-                { label: "Instagram @YungHondoMusic", href: "https://instagram.com/YungHondoMusic" },
-                { label: "TikTok @YungHondoMusic", href: "https://tiktok.com/@YungHondoMusic" },
-                { label: "YouTube YungHondoMusic", href: "https://youtube.com/@YungHondoMusic" },
-              ]
+              label: "Instagram",
+              href: "https://instagram.com/YungHondoMusic",
            },
            {
-              title: "Music",
-              items: [
-                { label: "Spotify YungHondoMusic", href: "https://spotify.com" },
-                { label: "Apple Music YungHondoMusic", href: "https://music.apple.com" },
-              ]
+              label: "TikTok",
+              href: "https://tiktok.com/@YungHondoMusic",
            },
            {
-              title: "Contact",
-              items: [
-                { label: "Email Us", href: "mailto:contact@yunghondo.com" },
-              ]
-            }
-          ]}
-          copyright="Representing those who left home to build a future."
-          links={[]}
-        />
+              label: "YouTube",
+              href: "https://youtube.com/YungHondoMusic",
+            },
+            {
+              label: "Spotify",
+              href: "https://spotify.com/YungHondoMusic",
+            },
+            {
+              label: "Apple Music",
+              href: "https://music.apple.com/YungHondoMusic",
+            },
+            {
+              label: "Contact",
+              href: "#contact",
+            },
+          ],
+        }
+      ]}
+    />
+    <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>
  );
--- a/src/index.css
+++ b/src/index.css
@@ -1,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');
@import "tailwindcss";
@import "./styles/masks.css";
@import "./styles/animations.css";

 :root {
  /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #060000;
-  --card: #1d0d0d;
-  --foreground: #ffe6e6;
-  --primary-cta: #ff3d4a;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #e63946;
  --primary-cta-text: #ffffff;
-  --secondary-cta: #1f0a0a;
-  --secondary-cta-text: #ffe6e6;
-  --accent: #7b2d2d;
-  --background-accent: #b8111f;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #000000;
+  --accent: #e63946;
+  --background-accent: #5c0e14;

  /* @layout/border-radius/rounded */
  --radius: 1rem;
@@ -88,7 +88,7 @@
  --color-background-accent: var(--background-accent);

  /* Fonts */
-  --font-sans: 'Open Sans', sans-serif;
+  --font-sans: 'Archivo', sans-serif;
  --font-tight: "Inter Tight", sans-serif;
  --font-mono: monospace;

@@ -137,7 +137,7 @@ body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Archivo', sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -150,7 +150,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Inter', sans-serif;
+  font-family: 'Archivo', sans-serif;
 }

 /* Default card/button styles. Template theme.css imports come after this file
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -6,19 +6,27 @@
 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 QuoteSection from './HomePage/sections/Quote';export default function HomePage(): React.JSX.Element {
+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 (
 <>
  <HeroSection />

  <AboutSection />
-      <QuoteSection />
+      <ListenSection />
+      <EventsSection />
+      <StoriesSection />
+      <MerchSection />



+  <TestimonialsSection />


  <ContactSection />
--- a/src/pages/HomePage/sections/About.tsx
+++ b/src/pages/HomePage/sections/About.tsx
@@ -1,114 +1,22 @@
-/* eslint-disable */
-// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
-import type { LucideIcon } from "lucide-react";
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import { resolveIcon } from "@/utils/resolve-icon";
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.

-const 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."
-  }
-];
+import React from 'react';
+import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";

-type AboutFeaturesSplitProps = {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-  items: { icon: string | LucideIcon; title: string; description: string }[];
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-const AboutInline = () => {
+export default function AboutSection(): React.JSX.Element {
  return (
-    <section aria-label="About section" className="relative py-20 overflow-hidden">
-      <div className="absolute inset-0 z-0 pointer-events-none">
-        <ImageOrVideo 
-          imageSrc="https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1781848928553-vtsks4rx.jpg" 
-          className="w-full h-full object-cover opacity-30" 
-        />
-        <div className="absolute inset-0 bg-gradient-to-b from-background via-transparent to-background" />
+    <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>
-      <div className="relative z-10 flex flex-col gap-8 md:gap-10 mx-auto w-content-width">
-        <div className="flex flex-col items-center gap-2">
-          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-            <p>{"Our Philosophy"}</p>
-          </div>
-
-          <TextAnimation
-            text={"More Than Just Music"}
-            variant="fade"
-            gradientText={true}
-            tag="h2"
-            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
-          />
-
-          <TextAnimation
-            text={"YungHondo represents the collective resilience of the diaspora. We bridge borders, defy industry standards, and empower the next generation of creative entrepreneurs."}
-            variant="fade"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
-          />
-
-          {(undefined || undefined) && (
-            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
-              {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
-              {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
-            </div>
-          )}
-        </div>
-
-        <div className="flex flex-col md:flex-row md:items-stretch gap-5">
-          <div className="flex flex-col justify-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 w-full md:w-4/10 2xl:w-35/100 card rounded">
-            {items.map((item, index) => {
-              const ItemIcon = resolveIcon(item.icon);
-              return (
-              <div key={item.title}>
-                <div className="flex flex-col gap-2">
-                  <div className="flex items-center justify-center shrink-0 mb-1 size-10 primary-button rounded">
-                    <ItemIcon className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
-                  </div>
-                  <h3 className="text-2xl font-semibold">{item.title}</h3>
-                  <p className="text-base leading-snug">{item.description}</p>
-                </div>
-                {index < items.length - 1 && (
-                  <div className="mt-4 xl:mt-5 2xl:mt-6 border-b border-accent/40" />
-                )}
-              </div>
-              );
-            })}
-          </div>
-
-          <div className="p-px w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden">
-            <div className="relative size-full">
-              <ImageOrVideo imageSrc={"https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1781848199023-1n57m2t3.jpg"} className="absolute inset-0 object-cover rounded" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default function AboutSection() {
-  return (
-    <div data-webild-section="about" id="about">
-      <AboutInline />
-    </div>
  );
 }
--- a/src/pages/HomePage/sections/Contact.tsx
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -1,61 +1,23 @@
-/* eslint-disable */
-// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import TextAnimation from "@/components/ui/TextAnimation";
-import Button from "@/components/ui/Button";
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.

-const primaryButton = {
-  text: "Contact Us",
-  href: ""
-};
-const secondaryButton = {
-  text: "Listen to our Sound",
-  href: "/"
-};
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";

-const ContactInline = () => {
+export default function ContactSection(): React.JSX.Element {
  return (
-    <section aria-label="Contact section" className="py-20 relative overflow-hidden">
-      <div 
-        className="absolute inset-0 z-0 opacity-25 mix-blend-luminosity pointer-events-none"
-        style={{
-          backgroundImage: `url('https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1782069261624-8rif7upk.jpg')`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
-      />
-      <div className="w-content-width mx-auto relative z-10">
-        <ScrollReveal variant="fade-blur">
-          <div className="flex flex-col items-center gap-8 md:gap-10 py-20 px-8 rounded card">
-            <div className="flex flex-col items-center gap-2">
-              <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-                <p>{"Connect"}</p>
-              </div>
-
-              <TextAnimation
-                text={"Ready to work? Let's build something different."}
-                variant="fade"
-                gradientText={true}
-                tag="h2"
-                className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance"
-              />
-
-              <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>
-        </ScrollReveal>
+    <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>
-    </section>
-  );
-};
-
-export default function ContactSection() {
-  return (
-    <div data-webild-section="contact" id="contact">
-      <ContactInline />
-    </div>
  );
 }
--- a/src/pages/HomePage/sections/Events.tsx
+++ b/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>
+  );
+}
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -5,9 +5,6 @@ import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import AvatarGroup from "@/components/ui/AvatarGroup";
-import { useState, useEffect } from "react";
-import { motion } from "motion/react";
-import { Mic } from "lucide-react";

 const avatarsSrc = [
  "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-1540.jpg",
@@ -16,12 +13,12 @@ const avatarsSrc = [
  "http://img.b2bpic.net/free-photo/strong-powerful-african-american-man-black-suit-taking-selfie-holding-camera-with-hands_627829-1124.jpg"
 ];
 const primaryButton = {
-  text: "Join the Movement",
-  href: "#contact"
+  href: "#listen",
+  text: "Listen Now"
 };
 const secondaryButton = {
-  text: "Learn Our Story",
-  href: "#about"
+  href: "#watch",
+  text: "Watch Now"
 };
 const names = [
  "Lagos",
@@ -44,104 +41,60 @@ type HeroCenteredLogosProps = {
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });

 const HeroInline = () => {
-  const [stage, setStage] = useState<'dropping' | 'hit' | 'revealed'>('dropping');
-
-  useEffect(() => {
-    const hitTimer = setTimeout(() => setStage('hit'), 800);
-    const revealTimer = setTimeout(() => setStage('revealed'), 1100);
-    return () => {
-      clearTimeout(hitTimer);
-      clearTimeout(revealTimer);
-    };
-  }, []);
-
  return (
-    <motion.section
-      aria-label="Hero section"
-      className="relative h-svh w-full flex flex-col items-center justify-center overflow-hidden bg-[#060000] mb-20"
-      animate={
-        stage === 'hit'
-          ? { x: [-15, 15, -10, 10, -5, 5, 0], y: [-15, 15, -10, 10, -5, 5, 0] }
-          : { x: 0, y: 0 }
-      }
-      transition={{ duration: 0.5 }}
-    >
+    <section aria-label="Hero section" className="relative h-svh flex flex-col mb-20">
      <HeroBackgroundSlot />
-      {/* Background Image */}
-      <div 
-        className="absolute inset-0 z-0 opacity-40 bg-cover bg-center bg-no-repeat pointer-events-none"
-        style={{ backgroundImage: 'url("https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1781848554128-smggxzvg.jpg")' }}
-      />
-      {/* Background Effects */}
-      <div className="absolute inset-0 z-0 pointer-events-none">
-        <div className="absolute top-[-10%] left-1/2 -translate-x-1/2 w-[1000px] h-[1000px] bg-[radial-gradient(circle_at_center,_rgba(255,61,74,0.15),_transparent_60%)]" />
-        <div className="absolute bottom-[-10%] left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-[radial-gradient(circle_at_center,_rgba(123,45,45,0.2),_transparent_60%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_transparent_30%,_#060000_100%)]" />
-      </div>
-
-      {/* Mic Drop Container */}
-      <div className="absolute top-[35%] left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
-        <motion.div
-          initial={{ y: '-100vh', rotate: -45 }}
-          animate={
-            stage === 'dropping'
-              ? { y: '-100vh', rotate: -45 }
-              : { y: 0, rotate: 0 }
-          }
-          transition={{ type: 'spring', bounce: 0.6, duration: 0.8 }}
-        >
-          <Mic className="w-20 h-20 md:w-24 md:h-24 text-white drop-shadow-[0_0_30px_rgba(255,255,255,0.5)]" />
-        </motion.div>
-
-        {/* Sound Waves */}
-        {stage !== 'dropping' && (
-          <>
-            <motion.div
-              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[6px] border-[#ff3d4a]"
-              initial={{ width: 80, height: 80, opacity: 0.8 }}
-              animate={{ width: 2500, height: 2500, opacity: 0 }}
-              transition={{ duration: 1.2, ease: 'easeOut' }}
-            />
-            <motion.div
-              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[4px] border-[#7b2d2d]"
-              initial={{ width: 80, height: 80, opacity: 0.6 }}
-              animate={{ width: 2000, height: 2000, opacity: 0 }}
-              transition={{ duration: 1.2, delay: 0.15, ease: 'easeOut' }}
-            />
-            <motion.div
-              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[2px] border-white"
-              initial={{ width: 80, height: 80, opacity: 0.4 }}
-              animate={{ width: 1500, height: 1500, opacity: 0 }}
-              transition={{ duration: 1.2, delay: 0.3, ease: 'easeOut' }}
-            />
-          </>
-        )}
-      </div>
-
-      {/* Content Reveal */}
-      <motion.div
-        className="relative z-30 flex flex-col items-center mt-40 text-center w-content-width mx-auto"
-        initial={{ opacity: 0, scale: 0.8, y: 40 }}
-        animate={
-          stage === 'revealed'
-            ? { opacity: 1, scale: 1, y: 0 }
-            : { opacity: 0, scale: 0.8, y: 40 }
-        }
-        transition={{ duration: 0.7, ease: 'easeOut' }}
-      >
-        <h1 className="text-6xl sm:text-8xl md:text-[10rem] leading-none font-black text-white uppercase tracking-tighter drop-shadow-[0_0_50px_rgba(255,61,74,0.5)]">
-          YungHondo
-        </h1>
-        <p className="mt-6 text-lg sm:text-2xl md:text-3xl text-white/90 font-bold uppercase tracking-[0.3em] drop-shadow-lg">
-          Built Different.
-        </p>
-
-        <div className="flex flex-wrap justify-center gap-4 mt-12">
-          <Button text="Listen Now" href="#listen" variant="primary" />
-          <Button text="Watch Videos" href="#watch" variant="secondary" />
+      {!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>
-      </motion.div>
-    </motion.section>
+      )}
+
+      <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>
  );
 };

--- a/src/pages/HomePage/sections/Listen.tsx
+++ b/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>
+  );
+}
--- a/src/pages/HomePage/sections/Merch.tsx
+++ b/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>
+  );
+}
--- a/src/pages/HomePage/sections/Quote.tsx
+++ b/src/pages/HomePage/sections/Quote.tsx
@@ -1,21 +0,0 @@
-import TextAnimation from "@/components/ui/TextAnimation";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-
-export default function QuoteSection() {
-  return (
-    <div data-webild-section="quote" id="quote">
-      <section className="relative w-full py-32 bg-background overflow-hidden">
-        <div className="absolute top-0 left-1/4 w-96 h-96 bg-accent/20 rounded-full blur-[100px] pointer-events-none" />
-        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-900/20 rounded-full blur-[100px] pointer-events-none" />
-        
-        <div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
-          <ScrollReveal variant="slide-up">
-            <h2 className="text-4xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight">
-              Every song is a chapter. Every performance is a statement. Every victory is for the diaspora.
-            </h2>
-          </ScrollReveal>
-        </div>
-      </section>
-    </div>
-  );
-}
--- a/src/pages/HomePage/sections/Stories.tsx
+++ b/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>
+  );
+}
--- a/src/pages/HomePage/sections/Testimonials.tsx
+++ b/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>
+  );
+}
--- a/src/pages/ProductsPage.tsx
+++ b/src/pages/ProductsPage.tsx
@@ -1,10 +0,0 @@
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-
-export default function ProductsPage() {
-  return (
-    <>
-      <div data-webild-section="AboutText"><section aria-label="About section" className=""><div className="w-content-width mx-auto flex flex-col gap-2 items-center"><TextAnimation text="Coming Soon" variant="fade" gradientText={false} tag="h2" className="text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><div className="flex flex-wrap gap-3 justify-center mt-2 md:mt-3"><Button text="Get Alerts" href="#alerts" variant="primary" /><Button text="Learn More" variant="secondary" animationDelay={0.1} /></div></div></section></div>
-    </>
-  );
-}
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -6,5 +6,4 @@ export interface Route {

 export const routes: Route[] = [
  { path: '/', label: 'Home', pageFile: 'HomePage' },
-  { path: '/products', label: 'Products', pageFile: 'ProductsPage' },
 ];
Author	SHA1	Message	Date
kudinDmitriyUp	eec2428b33	Bob AI: Update footer with social links and tagline	2026-06-18 06:27:33 +00:00
kudinDmitriyUp	b833f4fc12	Bob AI: Update quote section with dramatic styling	2026-06-18 06:27:03 +00:00
kudinDmitriyUp	f1763341fb	Bob AI: Add Listen, Events, Stories, and Merch sections	2026-06-18 06:25:27 +00:00
kudinDmitriyUp	d8cb8eedc8	Bob AI: Remove metrics, features, and faq sections	2026-06-18 06:23:55 +00:00
kudinDmitriyUp	75f7f59323	Bob AI: Update about section content	2026-06-18 06:23:34 +00:00
kudinDmitriyUp	e7770f3a2a	Bob AI: Update hero section with correct text, styling, and layout	2026-06-18 06:22:49 +00:00
kudinDmitriyUp	9506993cd8	Bob AI: Update global theme colors to deep black and red	2026-06-18 06:21:08 +00:00