2026-06-15 14:21:16 +00:00
10 changed files with 293 additions and 204 deletions
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -39,7 +39,7 @@ export default function Layout() {
 ];

  return (
-    <StyleProvider buttonVariant="bubble" siteBackground="gridDots" heroBackground="lightRaysCenter">
+    <StyleProvider buttonVariant="bubble" siteBackground="aurora" heroBackground="lightRaysCenter">
      <SiteBackgroundSlot />
      <SectionErrorBoundary name="navbar">
        <NavbarFloating
--- a/src/index.css
+++ b/src/index.css
@@ -5,7 +5,7 @@

 :root {
  /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #0a0a0a;
+  --background: #000000;
  --card: #161616;
  --foreground: #f5f5f5;
  --primary-cta: #9333ea;
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,213 +1,33 @@
-import AboutText from '@/components/sections/about/AboutText';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroBrand from '@/components/sections/hero/HeroBrand';
-import TeamStackedCards from '@/components/sections/team/TeamStackedCards';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-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 TeamSection from './HomePage/sections/Team';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
  return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBrand
-      brand="Beauty Lives in the Shadows"
-      description="Discover cinematic wallpapers, aesthetic edits, and visual stories crafted for the discerning creator. Immerse yourself in curated darkness where artistry meets emotion."
-      primaryButton={{
-        text: "Explore the Collection",
-        href: "#features",
-      }}
-      secondaryButton={{
-        text: "Learn More",
-        href: "#about",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/artistic-blurry-colorful-wallpaper-background_58702-8597.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />

-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutText
-      title="A Sanctuary for the Discerning Creator"
-      primaryButton={{
-        text: "View Gallery",
-        href: "#features",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />

-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesRevealCardsBento
-      tag="Curated Assets"
-      title="Immersive Dark Aesthetics"
-      description="A collection crafted for those who see the art in darkness."
-      items={[
-        {
-          title: "4K Wallpapers",
-          description: "Ultra-HD cinematic wallpapers.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/science-fiction-scene_456031-64.jpg",
-        },
-        {
-          title: "Aesthetic Edits",
-          description: "Professional video edits.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-clear-bubble_23-2151102602.jpg",
-        },
-        {
-          title: "Digital Art",
-          description: "Curated digital art pieces.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/bubbles-foam-dark-water_23-2147797813.jpg",
-        },
-        {
-          title: "Cinematic Moods",
-          description: "Captivating visual stories.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/ebru-style-natural-black-white-background_23-2148097609.jpg",
-        },
-        {
-          title: "Luxury Texture",
-          description: "Premium design textures.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-oily-bubbles-droplets-colourful-watery-backdrop_23-2148290160.jpg",
-        },
-        {
-          title: "Noir Photography",
-          description: "Bespoke noir captures.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/metal-circle-front-black-wall_181624-6880.jpg",
-        },
-        {
-          title: "Cyber Aesthetics",
-          description: "Modern cybergoth style.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/geometric-facade-modern-building_23-2151966494.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />

-  <div id="team" data-section="team">
-    <SectionErrorBoundary name="team">
-          <TeamStackedCards
-      tag="The Architects"
-      title="Visionaries Behind the Lens"
-      description="Meet the minds crafting our immersive visual experiences."
-      members={[
-        {
-          name: "Elias Thorne",
-          role: "Creative Director",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-unknown-woman-posing_23-2149417554.jpg",
-        },
-        {
-          name: "Lyra Vane",
-          role: "Lead Visual Artist",
-          imageSrc: "http://img.b2bpic.net/free-photo/set-designer-work-indoors_23-2149837005.jpg",
-        },
-        {
-          name: "Kaelen Voss",
-          role: "Cinematographer",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-soldier-holding-rifle-developing-marksmanship-skills_482257-125725.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TeamSection />

-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-      tag="Voices of the Shadows"
-      title="Trusted by Creators"
-      description="See why top creators choose GothNoir for their visual needs."
-      testimonials={[
-        {
-          name: "Sarah J.",
-          role: "Design Lead",
-          quote: "The most cohesive dark aesthetic I've found.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-jacket-with-hood_1153-5132.jpg",
-        },
-        {
-          name: "Marcus V.",
-          role: "Cinematographer",
-          quote: "Inspiration in every single frame.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-woman-coat-sitting-sofa-cafe_171337-16896.jpg",
-        },
-        {
-          name: "Elena R.",
-          role: "Digital Artist",
-          quote: "Exceptional quality and mood.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/spotlight-portrait-golden-hour_23-2151915121.jpg",
-        },
-        {
-          name: "Damon C.",
-          role: "Film Editor",
-          quote: "True cinematic mastery in digital assets.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-african-girl-dark-wall_176420-5815.jpg",
-        },
-        {
-          name: "Jade W.",
-          role: "UX Consultant",
-          quote: "Perfect for my high-end dark projects.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-earphones-side-view_23-2149429041.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />

-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="Insights"
-      title="Frequently Asked Questions"
-      items={[
-        {
-          question: "What resolution are the wallpapers?",
-          answer: "All assets are provided in 4K resolution.",
-        },
-        {
-          question: "Can I use assets commercially?",
-          answer: "Commercial licenses are available upon request.",
-        },
-        {
-          question: "How often is the collection updated?",
-          answer: "We drop new curated collections every month.",
-        },
-      ]}
-      description="Everything you need to know about GothNoir assets."
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />

-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Connect"
-      text="Ready to immerse your project in the shadows?"
-      primaryButton={{
-        text: "Get in Touch",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "Join Newsletter",
-        href: "#",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
    </>
  );
 }
--- a/src/pages/HomePage/sections/About.tsx
+++ b/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 AboutText from '@/components/sections/about/AboutText';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutText
+          title="A Sanctuary for the Discerning Creator"
+          primaryButton={{
+            text: "View Gallery",
+            href: "#features",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Contact.tsx
+++ 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="Connect"
+          text="Ready to immerse your project in the shadows?"
+          primaryButton={{
+            text: "Get in Touch",
+            href: "#",
+          }}
+          secondaryButton={{
+            text: "Join Newsletter",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Faq.tsx
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,34 @@
+// 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 FaqSimple from '@/components/sections/faq/FaqSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqSimple
+          tag="Insights"
+          title="Frequently Asked Questions"
+          items={[
+            {
+              question: "What resolution are the wallpapers?",
+              answer: "All assets are provided in 4K resolution.",
+            },
+            {
+              question: "Can I use assets commercially?",
+              answer: "Commercial licenses are available upon request.",
+            },
+            {
+              question: "How often is the collection updated?",
+              answer: "We drop new curated collections every month.",
+            },
+          ]}
+          description="Everything you need to know about GothNoir assets."
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Features.tsx
+++ b/src/pages/HomePage/sections/Features.tsx
@@ -0,0 +1,64 @@
+// 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 FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesRevealCardsBento
+          tag="Curated Assets"
+          title="Immersive Dark Aesthetics"
+          description="A collection crafted for those who see the art in darkness."
+          items={[
+            {
+              title: "4K Wallpapers",
+              description: "Ultra-HD cinematic wallpapers.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/science-fiction-scene_456031-64.jpg",
+            },
+            {
+              title: "Aesthetic Edits",
+              description: "Professional video edits.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-clear-bubble_23-2151102602.jpg",
+            },
+            {
+              title: "Digital Art",
+              description: "Curated digital art pieces.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/bubbles-foam-dark-water_23-2147797813.jpg",
+            },
+            {
+              title: "Cinematic Moods",
+              description: "Captivating visual stories.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/ebru-style-natural-black-white-background_23-2148097609.jpg",
+            },
+            {
+              title: "Luxury Texture",
+              description: "Premium design textures.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-oily-bubbles-droplets-colourful-watery-backdrop_23-2148290160.jpg",
+            },
+            {
+              title: "Noir Photography",
+              description: "Bespoke noir captures.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/metal-circle-front-black-wall_181624-6880.jpg",
+            },
+            {
+              title: "Cyber Aesthetics",
+              description: "Modern cybergoth style.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/geometric-facade-modern-building_23-2151966494.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,28 @@
+// 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 HeroBrand from '@/components/sections/hero/HeroBrand';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroBrand
+          brand="Beauty Lives in the Shadows"
+          description="Discover cinematic wallpapers, aesthetic edits, and visual stories crafted for the discerning creator. Immerse yourself in curated darkness where artistry meets emotion."
+          primaryButton={{
+            text: "Explore the Collection",
+            href: "#features",
+          }}
+          secondaryButton={{
+            text: "Learn More",
+            href: "#about",
+          }}
+          imageSrc="http://img.b2bpic.net/free-photo/artistic-blurry-colorful-wallpaper-background_58702-8597.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Team.tsx
+++ b/src/pages/HomePage/sections/Team.tsx
@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "team" section.
+
+import React from 'react';
+import TeamStackedCards from '@/components/sections/team/TeamStackedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TeamSection(): React.JSX.Element {
+  return (
+    <div id="team" data-section="team">
+        <SectionErrorBoundary name="team">
+              <TeamStackedCards
+          tag="The Architects"
+          title="Visionaries Behind the Lens"
+          description="Meet the minds crafting our immersive visual experiences."
+          members={[
+            {
+              name: "Elias Thorne",
+              role: "Creative Director",
+              imageSrc: "http://img.b2bpic.net/free-photo/front-view-unknown-woman-posing_23-2149417554.jpg",
+            },
+            {
+              name: "Lyra Vane",
+              role: "Lead Visual Artist",
+              imageSrc: "http://img.b2bpic.net/free-photo/set-designer-work-indoors_23-2149837005.jpg",
+            },
+            {
+              name: "Kaelen Voss",
+              role: "Cinematographer",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-soldier-holding-rifle-developing-marksmanship-skills_482257-125725.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Testimonials.tsx
+++ 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="Voices of the Shadows"
+          title="Trusted by Creators"
+          description="See why top creators choose GothNoir for their visual needs."
+          testimonials={[
+            {
+              name: "Sarah J.",
+              role: "Design Lead",
+              quote: "The most cohesive dark aesthetic I've found.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-jacket-with-hood_1153-5132.jpg",
+            },
+            {
+              name: "Marcus V.",
+              role: "Cinematographer",
+              quote: "Inspiration in every single frame.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-woman-coat-sitting-sofa-cafe_171337-16896.jpg",
+            },
+            {
+              name: "Elena R.",
+              role: "Digital Artist",
+              quote: "Exceptional quality and mood.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/spotlight-portrait-golden-hour_23-2151915121.jpg",
+            },
+            {
+              name: "Damon C.",
+              role: "Film Editor",
+              quote: "True cinematic mastery in digital assets.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-african-girl-dark-wall_176420-5815.jpg",
+            },
+            {
+              name: "Jade W.",
+              role: "UX Consultant",
+              quote: "Perfect for my high-end dark projects.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-with-earphones-side-view_23-2149429041.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}