Merge version_2_1782112451379 into main

Merge version_2_1782112451379 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f0f8ffe6;
-  --primary-cta: #cee7ff;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #f0f8ffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --background: #f8fafc;
+  --card: #ffffff;
+  --foreground: #0f172a;
+  --primary-cta: #0284c7;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #e2e8f0;
+  --secondary-cta-text: #0f172a;
+  --accent: #64748b;
+  --background-accent: #e2e8f0;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;

src/pages/HomePage.tsx

@@ -1,272 +1,33 @@
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
-import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
-import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
-import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
-import { CreditCard, Grid, PlayCircle } from "lucide-react";
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import HowItWorksSection from './HomePage/sections/HowItWorks';
+import FeaturedContentSection from './HomePage/sections/FeaturedContent';
+import PricingSection from './HomePage/sections/Pricing';
+import FaqSection from './HomePage/sections/Faq';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboardTiltedCarousel
-      tag="Your Home Cinema, Instantly"
-      title="Stream Everything. Play Anywhere."
-      description="Simply subscribe, pick your favorite video, and watch it directly on your Smart TV, projector, or media player. No tech setup required."
-      primaryButton={{
-        text: "Start Watching",
-        href: "#pricing",
-      }}
-      secondaryButton={{
-        text: "How it works",
-        href: "#how-it-works",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/player-enjoying-high-quality-ray-tracing-graphics-console-videogame_482257-82197.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-friends-having-fun-cinema-open-air_23-2149477072.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/client-dark-vip-cinema-studio_23-2149500646.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/client-dark-vip-cinema-studio_23-2149500637.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-watching-movie-home_23-2149546691.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-with-popcorn-cinema_23-2147988973.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="how-it-works" data-section="how-it-works">
-    <SectionErrorBoundary name="how-it-works">
-          <FeaturesBorderGlow
-      tag="Simple as 1-2-3"
-      title="How it Works"
-      description="We've removed the complexity. Just follow these simple steps to start streaming."
-      features={[
-        {
-          icon: CreditCard,
-          title: "1. Subscribe",
-          description: "Choose a monthly plan that fits your needs.",
-        },
-        {
-          icon: Grid,
-          title: "2. Pick Content",
-          description: "Browse our curated selection of video content.",
-        },
-        {
-          icon: PlayCircle,
-          title: "3. Instant Play",
-          description: "Cast instantly to your favorite media device.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <HowItWorksSection />
 
-  <div id="featured-content" data-section="featured-content">
-    <SectionErrorBoundary name="featured-content">
-          <FeaturesRevealCardsBento
-      tag="Curated for You"
-      title="Latest Content"
-      description="Discover a diverse world of movies, documentaries, and series."
-      items={[
-        {
-          title: "Sci-Fi Thriller",
-          description: "Explore galaxies unknown.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/halloween-concept-with-spooky-woman_23-2147701158.jpg",
-        },
-        {
-          title: "Nature Wonders",
-          description: "Earth's beautiful landscape.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-tall-trees-reflection-lake-park_181624-30524.jpg",
-        },
-        {
-          title: "Daily Drama",
-          description: "Deep, emotional storytelling.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-3d-render-with-geometric-shapes-gold-spheres_187299-48077.jpg",
-        },
-        {
-          title: "Comedy Night",
-          description: "Laugh until it hurts.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-arrangement-3d-glasses_23-2149487691.jpg",
-        },
-        {
-          title: "Action Blockbuster",
-          description: "Adrenaline-fueled fun.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-medieval-soldier-posing-studio_23-2150542200.jpg",
-        },
-        {
-          title: "History Docs",
-          description: "Understand the past.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/halftone-monochrome-collage_23-2151005035.jpg",
-        },
-        {
-          title: "Classic Cinema",
-          description: "Timeless masterpieces.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/silhouette-woman-using-telephone_23-2148870670.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturedContentSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingLayeredCards
-      tag="Choose Your Plan"
-      title="Simple Subscription"
-      description="One price, no hidden fees, instant access."
-      plans={[
-        {
-          tag: "Basic",
-          price: "$9.99/mo",
-          description: "Perfect for solo viewers.",
-          primaryButton: {
-            text: "Subscribe",
-            href: "#",
-          },
-          features: [
-            "Unlimited access",
-            "1 device support",
-            "Standard HD",
-          ],
-        },
-        {
-          tag: "Standard",
-          price: "$14.99/mo",
-          description: "Best value for families.",
-          primaryButton: {
-            text: "Subscribe",
-            href: "#",
-          },
-          features: [
-            "Unlimited access",
-            "3 devices support",
-            "Full 4K UHD",
-          ],
-        },
-        {
-          tag: "Premium",
-          price: "$19.99/mo",
-          description: "Ultimate home theater experience.",
-          primaryButton: {
-            text: "Subscribe",
-            href: "#",
-          },
-          features: [
-            "Unlimited access",
-            "Unlimited devices",
-            "8K Ultra HD",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTabbedAccordion
-      tag="Support"
-      title="Common Questions"
-      description="Everything you need to know about TrueWindow."
-      categories={[
-        {
-          name: "Getting Started",
-          items: [
-            {
-              question: "What devices can I use?",
-              answer: "Smart TVs, Projectors, or any dedicated media player with our app.",
-            },
-            {
-              question: "Is it hard to install?",
-              answer: "No, our app works out of the box.",
-            },
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialColumnMarqueeCards
-      tag="Happy Viewers"
-      title="What Our Users Say"
-      description="Real experiences from real subscribers."
-      testimonials={[
-        {
-          name: "Sarah Jenkins",
-          role: "Homemaker",
-          quote: "Finally, something I can actually understand! Casting is just one click.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg",
-        },
-        {
-          name: "Mark Wilson",
-          role: "Teacher",
-          quote: "I use it on my projector for classroom films. Incredible quality.",
-          imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",
-        },
-        {
-          name: "John Doe",
-          role: "Tech Enthusiast",
-          quote: "Simple, efficient, and great library.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-black-suit-smiles-sitting-chair_23-2148401485.jpg",
-        },
-        {
-          name: "Elena Smith",
-          role: "Designer",
-          quote: "So clean and minimalist. Love the design.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
-        },
-        {
-          name: "Robert Lee",
-          role: "Engineer",
-          quote: "Exactly what I wanted for my smart TV.",
-          imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-black-jacket-liking-lip-posing-isolated-background-charming-lady-dark-suit-smiling-white-backdrop_197531-18516.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Ready to watch?"
-      text="Join thousands of others enjoying instant streaming."
-      primaryButton={{
-        text: "Get Started",
-        href: "#pricing",
-      }}
-      secondaryButton={{
-        text: "Contact Support",
-        href: "#",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }

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="Ready to watch?"
+          text="Join thousands of others enjoying instant streaming."
+          primaryButton={{
+            text: "Get Started",
+            href: "#pricing",
+          }}
+          secondaryButton={{
+            text: "Contact Support",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,35 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTabbedAccordion
+          tag="Support"
+          title="Common Questions"
+          description="Everything you need to know about TrueWindow."
+          categories={[
+            {
+              name: "Getting Started",
+              items: [
+                {
+                  question: "What devices can I use?",
+                  answer: "Smart TVs, Projectors, or any dedicated media player with our app.",
+                },
+                {
+                  question: "Is it hard to install?",
+                  answer: "No, our app works out of the box.",
+                },
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/FeaturedContent.tsx

@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "featured-content" section.
+
+import React from 'react';
+import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturedContentSection(): React.JSX.Element {
+  return (
+    <div id="featured-content" data-section="featured-content">
+        <SectionErrorBoundary name="featured-content">
+              <FeaturesRevealCardsBento
+          tag="Curated for You"
+          title="Latest Content"
+          description="Discover a diverse world of movies, documentaries, and series."
+          items={[
+            {
+              title: "Sci-Fi Thriller",
+              description: "Explore galaxies unknown.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/halloween-concept-with-spooky-woman_23-2147701158.jpg",
+            },
+            {
+              title: "Nature Wonders",
+              description: "Earth's beautiful landscape.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-tall-trees-reflection-lake-park_181624-30524.jpg",
+            },
+            {
+              title: "Daily Drama",
+              description: "Deep, emotional storytelling.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/minimalist-3d-render-with-geometric-shapes-gold-spheres_187299-48077.jpg",
+            },
+            {
+              title: "Comedy Night",
+              description: "Laugh until it hurts.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/abstract-arrangement-3d-glasses_23-2149487691.jpg",
+            },
+            {
+              title: "Action Blockbuster",
+              description: "Adrenaline-fueled fun.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/side-view-medieval-soldier-posing-studio_23-2150542200.jpg",
+            },
+            {
+              title: "History Docs",
+              description: "Understand the past.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/halftone-monochrome-collage_23-2151005035.jpg",
+            },
+            {
+              title: "Classic Cinema",
+              description: "Timeless masterpieces.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/silhouette-woman-using-telephone_23-2148870670.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,48 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroBillboardTiltedCarousel
+          tag="Your Home Cinema, Instantly"
+          title="Stream Everything. Play Anywhere."
+          description="Simply subscribe, pick your favorite video, and watch it directly on your Smart TV, projector, or media player. No tech setup required."
+          primaryButton={{
+            text: "Start Watching",
+            href: "#pricing",
+          }}
+          secondaryButton={{
+            text: "How it works",
+            href: "#how-it-works",
+          }}
+          items={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/player-enjoying-high-quality-ray-tracing-graphics-console-videogame_482257-82197.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/young-friends-having-fun-cinema-open-air_23-2149477072.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/client-dark-vip-cinema-studio_23-2149500646.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/client-dark-vip-cinema-studio_23-2149500637.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-watching-movie-home_23-2149546691.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/man-with-popcorn-cinema_23-2147988973.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/HowItWorks.tsx

@@ -0,0 +1,38 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "how-it-works" section.
+
+import React from 'react';
+import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
+import { CreditCard, Grid, PlayCircle } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HowItWorksSection(): React.JSX.Element {
+  return (
+    <div id="how-it-works" data-section="how-it-works">
+        <SectionErrorBoundary name="how-it-works">
+              <FeaturesBorderGlow
+          tag="Simple as 1-2-3"
+          title="How it Works"
+          description="We've removed the complexity. Just follow these simple steps to start streaming."
+          features={[
+            {
+              icon: CreditCard,
+              title: "1. Subscribe",
+              description: "Choose a monthly plan that fits your needs.",
+            },
+            {
+              icon: Grid,
+              title: "2. Pick Content",
+              description: "Browse our curated selection of video content.",
+            },
+            {
+              icon: PlayCircle,
+              title: "3. Instant Play",
+              description: "Cast instantly to your favorite media device.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingLayeredCards
+          tag="Choose Your Plan"
+          title="Simple Subscription"
+          description="One price, no hidden fees, instant access."
+          plans={[
+            {
+              tag: "Basic",
+              price: "$9.99/mo",
+              description: "Perfect for solo viewers.",
+              primaryButton: {
+                text: "Subscribe",
+                href: "#",
+              },
+              features: [
+                "Unlimited access",
+                "1 device support",
+                "Standard HD",
+              ],
+            },
+            {
+              tag: "Standard",
+              price: "$14.99/mo",
+              description: "Best value for families.",
+              primaryButton: {
+                text: "Subscribe",
+                href: "#",
+              },
+              features: [
+                "Unlimited access",
+                "3 devices support",
+                "Full 4K UHD",
+              ],
+            },
+            {
+              tag: "Premium",
+              price: "$19.99/mo",
+              description: "Ultimate home theater experience.",
+              primaryButton: {
+                text: "Subscribe",
+                href: "#",
+              },
+              features: [
+                "Unlimited access",
+                "Unlimited devices",
+                "8K Ultra HD",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,52 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialColumnMarqueeCards
+          tag="Happy Viewers"
+          title="What Our Users Say"
+          description="Real experiences from real subscribers."
+          testimonials={[
+            {
+              name: "Sarah Jenkins",
+              role: "Homemaker",
+              quote: "Finally, something I can actually understand! Casting is just one click.",
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg",
+            },
+            {
+              name: "Mark Wilson",
+              role: "Teacher",
+              quote: "I use it on my projector for classroom films. Incredible quality.",
+              imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",
+            },
+            {
+              name: "John Doe",
+              role: "Tech Enthusiast",
+              quote: "Simple, efficient, and great library.",
+              imageSrc: "http://img.b2bpic.net/free-photo/man-black-suit-smiles-sitting-chair_23-2148401485.jpg",
+            },
+            {
+              name: "Elena Smith",
+              role: "Designer",
+              quote: "So clean and minimalist. Love the design.",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
+            },
+            {
+              name: "Robert Lee",
+              role: "Engineer",
+              quote: "Exactly what I wanted for my smart TV.",
+              imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-black-jacket-liking-lip-posing-isolated-background-charming-lady-dark-suit-smiling-white-backdrop_197531-18516.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}