Bob AI: Update background color to #0a0a0a

2026-06-15 14:41:36 +00:00
9 changed files with 292 additions and 203 deletions
--- a/src/index.css
+++ b/src/index.css
@@ -5,7 +5,7 @@

 :root {
  /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #050505;
+  --background: #0a0a0a;
  --card: #0d0d0d;
  --foreground: #f0f0f0;
  --primary-cta: #00f2ff;
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,213 +1,33 @@
-import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
-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 ShowcaseSection from './HomePage/sections/Showcase';
+import FeaturesSection from './HomePage/sections/Features';
+import AboutSection from './HomePage/sections/About';
+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">
-          <HeroBillboardBrand
-      brand="Scorp"
-      description="Where Visionary Creators Meet Impactful Projects. The premier marketplace for high-performance digital creative services."
-      primaryButton={{
-        text: "Start Hiring",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "Browse Portfolio",
-        href: "#showcase",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/black-laptop-screen-dark-room-night_169016-59640.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />

-  <div id="showcase" data-section="showcase">
-    <SectionErrorBoundary name="showcase">
-          <FeaturesRevealCardsBento
-      tag="Portfolio"
-      title="Curated Project Showcase"
-      description="Discover exceptional talent and impactful work from our community."
-      items={[
-        {
-          title: "Web Design",
-          description: "High-end UI/UX experiences",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-vector/cyber-security-background_1057-7517.jpg",
-        },
-        {
-          title: "Brand Identity",
-          description: "Visionary brand strategy",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-vector/purple-speech-balloon-design-element-vector_53876-168945.jpg",
-        },
-        {
-          title: "Motion Graphics",
-          description: "Fluid, impactful animations",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-vector/customer-review-sticker_271628-537.jpg",
-        },
-        {
-          title: "Content Writing",
-          description: "Compelling brand stories",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-vector/cyber-monday-shop_24908-58241.jpg",
-        },
-        {
-          title: "App Development",
-          description: "Scalable digital solutions",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/neon-green-check-mark-sign-brick-wall_84443-94481.jpg",
-        },
-        {
-          title: "3D Modeling",
-          description: "Immersive 3D environments",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637779.jpg",
-        },
-        {
-          title: "SEO Strategy",
-          description: "Impactful digital growth",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-vector/internet-security-banners_1268-1302.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ShowcaseSection />

-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesRevealCards
-      tag="Advantages"
-      title="Why Choose Scorp"
-      description="Platform benefits designed for high-impact professional work."
-      items={[
-        {
-          title: "Secure Transactions",
-          description: "Automated escrow for peace of mind.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-concept-data-breach-unlocked-padlock_23-2152004098.jpg",
-        },
-        {
-          title: "Instant Communication",
-          description: "Seamless real-time messaging systems.",
-          imageSrc: "http://img.b2bpic.net/free-photo/technology-hologram-illustrated_23-2151877714.jpg",
-        },
-        {
-          title: "Verified Talent",
-          description: "Strict verification for top-tier experts.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637782.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />

-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTextSplit
-      title="Our Mission"
-      descriptions={[
-        "Scorp is a specialized freelance marketplace connecting visionary creators with ambitious projects. We empower creators to do their best work through a secure, high-tech platform.",
-        "Our goal is to build the future of work, focusing on impact, transparency, and top-tier professional collaboration.",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />

-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-      tag="Trust"
-      title="Proven Excellence"
-      description="What our clients and creators have to say about Scorp."
-      testimonials={[
-        {
-          name: "Sarah J.",
-          role: "Creative Lead",
-          quote: "The platform is incredibly slick and effective.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149489797.jpg",
-        },
-        {
-          name: "Mark L.",
-          role: "Digital Artist",
-          quote: "I found high-paying projects instantly.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-woman-warrior-portrait_23-2150712588.jpg",
-        },
-        {
-          name: "Elena R.",
-          role: "UX Consultant",
-          quote: "Verification ensures we work with only the best.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiley-business-man-writing-plans_23-2148446241.jpg",
-        },
-        {
-          name: "David K.",
-          role: "Product Manager",
-          quote: "The communication tools saved us hours.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-orange-background_23-2149020038.jpg",
-        },
-        {
-          name: "Julia M.",
-          role: "Founder",
-          quote: "Best marketplace for high-tech talent.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office_23-2149749862.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />

-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="Support"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about Scorp."
-      items={[
-        {
-          question: "Is there a fee for projects?",
-          answer: "We charge a competitive service fee based on transaction volume.",
-        },
-        {
-          question: "How do you verify talent?",
-          answer: "Our strict audit process ensures portfolio and skill-level authenticity.",
-        },
-        {
-          question: "Can I message directly?",
-          answer: "Yes, our dashboard includes built-in real-time messaging.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />

-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Get Started"
-      text="Are you ready to join the future of creative collaboration?"
-      primaryButton={{
-        text: "Post a Project",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "Apply as Creator",
-        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 AboutTextSplit from '@/components/sections/about/AboutTextSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTextSplit
+          title="Our Mission"
+          descriptions={[
+            "Scorp is a specialized freelance marketplace connecting visionary creators with ambitious projects. We empower creators to do their best work through a secure, high-tech platform.",
+            "Our goal is to build the future of work, focusing on impact, transparency, and top-tier professional collaboration.",
+          ]}
+        />
+        </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="Get Started"
+          text="Are you ready to join the future of creative collaboration?"
+          primaryButton={{
+            text: "Post a Project",
+            href: "#",
+          }}
+          secondaryButton={{
+            text: "Apply as Creator",
+            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="Support"
+          title="Frequently Asked Questions"
+          description="Everything you need to know about Scorp."
+          items={[
+            {
+              question: "Is there a fee for projects?",
+              answer: "We charge a competitive service fee based on transaction volume.",
+            },
+            {
+              question: "How do you verify talent?",
+              answer: "Our strict audit process ensures portfolio and skill-level authenticity.",
+            },
+            {
+              question: "Can I message directly?",
+              answer: "Yes, our dashboard includes built-in real-time messaging.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Features.tsx
+++ b/src/pages/HomePage/sections/Features.tsx
@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesRevealCards
+          tag="Advantages"
+          title="Why Choose Scorp"
+          description="Platform benefits designed for high-impact professional work."
+          items={[
+            {
+              title: "Secure Transactions",
+              description: "Automated escrow for peace of mind.",
+              imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-concept-data-breach-unlocked-padlock_23-2152004098.jpg",
+            },
+            {
+              title: "Instant Communication",
+              description: "Seamless real-time messaging systems.",
+              imageSrc: "http://img.b2bpic.net/free-photo/technology-hologram-illustrated_23-2151877714.jpg",
+            },
+            {
+              title: "Verified Talent",
+              description: "Strict verification for top-tier experts.",
+              imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637782.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 HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroBillboardBrand
+          brand="Scorp"
+          description="Where Visionary Creators Meet Impactful Projects. The premier marketplace for high-performance digital creative services."
+          primaryButton={{
+            text: "Start Hiring",
+            href: "#contact",
+          }}
+          secondaryButton={{
+            text: "Browse Portfolio",
+            href: "#showcase",
+          }}
+          imageSrc="http://img.b2bpic.net/free-photo/black-laptop-screen-dark-room-night_169016-59640.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Showcase.tsx
+++ b/src/pages/HomePage/sections/Showcase.tsx
@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "showcase" section.
+
+import React from 'react';
+import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ShowcaseSection(): React.JSX.Element {
+  return (
+    <div id="showcase" data-section="showcase">
+        <SectionErrorBoundary name="showcase">
+              <FeaturesRevealCardsBento
+          tag="Portfolio"
+          title="Curated Project Showcase"
+          description="Discover exceptional talent and impactful work from our community."
+          items={[
+            {
+              title: "Web Design",
+              description: "High-end UI/UX experiences",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-vector/cyber-security-background_1057-7517.jpg",
+            },
+            {
+              title: "Brand Identity",
+              description: "Visionary brand strategy",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-vector/purple-speech-balloon-design-element-vector_53876-168945.jpg",
+            },
+            {
+              title: "Motion Graphics",
+              description: "Fluid, impactful animations",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-vector/customer-review-sticker_271628-537.jpg",
+            },
+            {
+              title: "Content Writing",
+              description: "Compelling brand stories",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-vector/cyber-monday-shop_24908-58241.jpg",
+            },
+            {
+              title: "App Development",
+              description: "Scalable digital solutions",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/neon-green-check-mark-sign-brick-wall_84443-94481.jpg",
+            },
+            {
+              title: "3D Modeling",
+              description: "Immersive 3D environments",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637779.jpg",
+            },
+            {
+              title: "SEO Strategy",
+              description: "Impactful digital growth",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-vector/internet-security-banners_1268-1302.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="Trust"
+          title="Proven Excellence"
+          description="What our clients and creators have to say about Scorp."
+          testimonials={[
+            {
+              name: "Sarah J.",
+              role: "Creative Lead",
+              quote: "The platform is incredibly slick and effective.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149489797.jpg",
+            },
+            {
+              name: "Mark L.",
+              role: "Digital Artist",
+              quote: "I found high-paying projects instantly.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-woman-warrior-portrait_23-2150712588.jpg",
+            },
+            {
+              name: "Elena R.",
+              role: "UX Consultant",
+              quote: "Verification ensures we work with only the best.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/smiley-business-man-writing-plans_23-2148446241.jpg",
+            },
+            {
+              name: "David K.",
+              role: "Product Manager",
+              quote: "The communication tools saved us hours.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-orange-background_23-2149020038.jpg",
+            },
+            {
+              name: "Julia M.",
+              role: "Founder",
+              quote: "Best marketplace for high-tech talent.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office_23-2149749862.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}