Merge version_2_1781386308172 into main

Merge version_2_1781386308172 into main

src/index.css

@@ -8,12 +8,12 @@
   --background: #000000;
   --card: #0c0c0c;
   --foreground: #ffffff;
-  --primary-cta: #106EFB;
+  --primary-cta: #8B0000;
   --primary-cta-text: #ffffff;
   --secondary-cta: #000000;
   --secondary-cta-text: #ffffff;
-  --accent: #535353;
-  --background-accent: #106EFB;
+  --accent: #B22222;
+  --background-accent: #8B0000;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;

src/pages/HomePage.tsx

@@ -1,302 +1,36 @@
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
-import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
-import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
-import TeamStackedCards from '@/components/sections/team/TeamStackedCards';
-import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import FeaturesSection from './HomePage/sections/Features';
+import PricingSection from './HomePage/sections/Pricing';
+import MetricsSection from './HomePage/sections/Metrics';
+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">
-          <HeroSplitVerticalMarquee
-      tag="Trusted by millions"
-      title="Verify your Roblox account with Discord"
-      description="Bloxlink is the most popular Roblox bot for Discord. Manage your identities, group roles, and secure your community effortlessly."
-      primaryButton={{
-        text: "Sign In with Discord",
-        href: "/login",
-      }}
-      secondaryButton={{
-        text: "Explore API",
-        href: "/api",
-      }}
-      leftItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/smart-car-navigator-interface-windshield-hologram_53876-103040.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169845.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039367.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/artistic-blurry-colorful-wallpaper-background_58702-8580.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/person-using-tablet_53876-41005.jpg",
-        },
-      ]}
-      rightItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/computer-home-office-uses-artificial-intelligence-generating-images-from-text_482257-125005.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/laptop-computer-with-company-profit-progress-screen_482257-77678.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-laptop-table-glowing-screen-dark_169016-53642.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/applications-be-connected_1134-94.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/blue-abstract-shape-glowing-grainy-textured_474888-8017.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesDetailedCards
-      tag="Platform Features"
-      title="Everything you need to manage your community"
-      description="Powerful tools to keep your discord and roblox ecosystem in sync."
-      items={[
-        {
-          title: "Account Linking",
-          description: "Seamless verification between Discord and Roblox accounts.",
-          tags: [
-            "Security",
-            "Fast",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/programming-code-with-laptop-background_1134-61.jpg",
-        },
-        {
-          title: "Group Roles",
-          description: "Automatically assign Discord roles based on Roblox group ranks.",
-          tags: [
-            "Automation",
-            "Custom",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/check-mark-sticker-set_78370-8811.jpg",
-        },
-        {
-          title: "Support API",
-          description: "Robust developer tools to build custom integrations.",
-          tags: [
-            "Developer",
-            "Open",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-smartphone-with-icons-collection_1134-48.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingSplitCards
-      tag="Get more from Bloxlink"
-      title="Upgrade to Premium"
-      description="Unlock advanced features for your community."
-      plans={[
-        {
-          tag: "Standard",
-          price: "Free",
-          period: "Always",
-          description: "Basic verification services for everyone.",
-          primaryButton: {
-            text: "Get Started",
-            href: "#",
-          },
-          featuresTitle: "Basic features include:",
-          features: [
-            "Verification",
-            "Basic Roles",
-            "Discord Linking",
-          ],
-        },
-        {
-          tag: "Premium",
-          price: "$4.99",
-          period: "/mo",
-          description: "Advanced automation for growing communities.",
-          primaryButton: {
-            text: "Upgrade",
-            href: "#",
-          },
-          featuresTitle: "Includes everything, plus:",
-          features: [
-            "Advanced Roles",
-            "Unlimited Servers",
-            "Support Priority",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsFeatureCards
-      tag="Global Impact"
-      title="By the numbers"
-      description="Proven performance for global communities."
-      metrics={[
-        {
-          value: "20M+",
-          title: "Users Verified",
-          features: [
-            "Security",
-            "Speed",
-          ],
-        },
-        {
-          value: "500K+",
-          title: "Servers Integrated",
-          features: [
-            "Stability",
-            "Global",
-          ],
-        },
-        {
-          value: "1B+",
-          title: "Roles Assigned",
-          features: [
-            "Reliability",
-            "Automated",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="team" data-section="team">
-    <SectionErrorBoundary name="team">
-          <TeamStackedCards
-      tag="Our Team"
-      title="Driven by innovation"
-      description="Meet the creators behind the magic."
-      members={[
-        {
-          name: "Alex Smith",
-          role: "Founder",
-          imageSrc: "http://img.b2bpic.net/free-photo/positive-guy-glasses-holding-tablet-looking_74855-3039.jpg",
-        },
-        {
-          name: "Jordan Doe",
-          role: "Lead Engineer",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-takes-selfie-with-her-phone-emotions-concept_169016-64227.jpg",
-        },
-        {
-          name: "Sam Rivers",
-          role: "Community Lead",
-          imageSrc: "http://img.b2bpic.net/free-photo/little-boy-sitting-with-smartphone-guy-wearing-casually-with-headphones-around-neck-posing-withopened-mouth-looks-excited-child-with-crossed-legs-holding-mobile-phone-hands_176532-9057.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TeamSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialQuoteCards
-      tag="Hear from our users"
-      title="Loved by communities everywhere"
-      description="See why top creators choose Bloxlink."
-      testimonials={[
-        {
-          name: "Sarah",
-          role: "Discord Admin",
-          quote: "Best bot for our community growth.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-glasses_23-2148422106.jpg",
-        },
-        {
-          name: "Mike",
-          role: "Developer",
-          quote: "The API is incredibly powerful.",
-          imageSrc: "http://img.b2bpic.net/free-photo/technician-inspecting-coding-desktop-pc_482257-111771.jpg",
-        },
-        {
-          name: "Jane",
-          role: "Influencer",
-          quote: "My community is safer than ever.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-indian-guy-wireless-headphones-holding-joystick-plays-video-games-console-standing-studio_613910-20435.jpg",
-        },
-        {
-          name: "Rob",
-          role: "Server Owner",
-          quote: "Super easy to set up and manage.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-business-man-using-laptop_171337-8312.jpg",
-        },
-        {
-          name: "Emily",
-          role: "Moderator",
-          quote: "Automated roles saved us hours.",
-          imageSrc: "http://img.b2bpic.net/free-photo/women-standing-desk-with-diagrams_23-2147651631.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="Common Questions"
-      title="Need help?"
-      description="Here are answers to common questions about Bloxlink."
-      items={[
-        {
-          question: "Is Bloxlink free?",
-          answer: "Yes, standard verification is free for all.",
-        },
-        {
-          question: "Can I link multiple accounts?",
-          answer: "Yes, manage multiple linked accounts easily.",
-        },
-        {
-          question: "How do I add to my server?",
-          answer: "Follow our dashboard instructions to authorize the bot.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Get Started"
-      text="Ready to secure your Roblox community?"
-      primaryButton={{
-        text: "Sign In with Discord",
-        href: "/login",
-      }}
-      secondaryButton={{
-        text: "View Documentation",
-        href: "/docs",
-      }}
-    />
-    </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="Get Started"
+          text="Ready to secure your Roblox community?"
+          primaryButton={{
+            text: "Sign In with Discord",
+            href: "/login",
+          }}
+          secondaryButton={{
+            text: "View Documentation",
+            href: "/docs",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

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="Common Questions"
+          title="Need help?"
+          description="Here are answers to common questions about Bloxlink."
+          items={[
+            {
+              question: "Is Bloxlink free?",
+              answer: "Yes, standard verification is free for all.",
+            },
+            {
+              question: "Can I link multiple accounts?",
+              answer: "Yes, manage multiple linked accounts easily.",
+            },
+            {
+              question: "How do I add to my server?",
+              answer: "Follow our dashboard instructions to authorize the bot.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Features.tsx

@@ -0,0 +1,49 @@
+// 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 FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesDetailedCards
+          tag="Platform Features"
+          title="Everything you need to manage your community"
+          description="Powerful tools to keep your discord and roblox ecosystem in sync."
+          items={[
+            {
+              title: "Account Linking",
+              description: "Seamless verification between Discord and Roblox accounts.",
+              tags: [
+                "Security",
+                "Fast",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/programming-code-with-laptop-background_1134-61.jpg",
+            },
+            {
+              title: "Group Roles",
+              description: "Automatically assign Discord roles based on Roblox group ranks.",
+              tags: [
+                "Automation",
+                "Custom",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-vector/check-mark-sticker-set_78370-8811.jpg",
+            },
+            {
+              title: "Support API",
+              description: "Robust developer tools to build custom integrations.",
+              tags: [
+                "Developer",
+                "Open",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-smartphone-with-icons-collection_1134-48.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,20 @@
+// Created by add_section_from_catalog (HeroSplitVerticalMarquee).
+
+import React from 'react';
+import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroSplitVerticalMarquee
+        tag="Survey Corps Elite"
+        primaryButton={{"href":"/invite","text":"Invite Mikasa"}}
+        leftItems={[{"imageSrc":"https://images.unsplash.com/photo-1541562232579-512a21360020?q=80&w=2000&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1541562232579-512a21360020?q=80&w=2000&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1541562232579-512a21360020?q=80&w=2000&auto=format&fit=crop"}]}
+        secondaryButton={{"href":"/commands","text":"View Commands"}}
+        rightItems={[{"imageSrc":"https://images.unsplash.com/photo-1541562232579-512a21360020?q=80&w=2000&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1541562232579-512a21360020?q=80&w=2000&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1541562232579-512a21360020?q=80&w=2000&auto=format&fit=crop"}]}
+        description="The ultimate moderation and utility bot inspired by Mikasa Ackerman. Keep your community safe, manage roles, and execute commands with precision."
+        title="Protect Your Server with Mikasa"
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,46 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsFeatureCards
+          tag="Global Impact"
+          title="By the numbers"
+          description="Proven performance for global communities."
+          metrics={[
+            {
+              value: "20M+",
+              title: "Users Verified",
+              features: [
+                "Security",
+                "Speed",
+              ],
+            },
+            {
+              value: "500K+",
+              title: "Servers Integrated",
+              features: [
+                "Stability",
+                "Global",
+              ],
+            },
+            {
+              value: "1B+",
+              title: "Roles Assigned",
+              features: [
+                "Reliability",
+                "Automated",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,54 @@
+// 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 PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingSplitCards
+          tag="Get more from Bloxlink"
+          title="Upgrade to Premium"
+          description="Unlock advanced features for your community."
+          plans={[
+            {
+              tag: "Standard",
+              price: "Free",
+              period: "Always",
+              description: "Basic verification services for everyone.",
+              primaryButton: {
+                text: "Get Started",
+                href: "#",
+              },
+              featuresTitle: "Basic features include:",
+              features: [
+                "Verification",
+                "Basic Roles",
+                "Discord Linking",
+              ],
+            },
+            {
+              tag: "Premium",
+              price: "$4.99",
+              period: "/mo",
+              description: "Advanced automation for growing communities.",
+              primaryButton: {
+                text: "Upgrade",
+                href: "#",
+              },
+              featuresTitle: "Includes everything, plus:",
+              features: [
+                "Advanced Roles",
+                "Unlimited Servers",
+                "Support Priority",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

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="Our Team"
+          title="Driven by innovation"
+          description="Meet the creators behind the magic."
+          members={[
+            {
+              name: "Alex Smith",
+              role: "Founder",
+              imageSrc: "http://img.b2bpic.net/free-photo/positive-guy-glasses-holding-tablet-looking_74855-3039.jpg",
+            },
+            {
+              name: "Jordan Doe",
+              role: "Lead Engineer",
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-takes-selfie-with-her-phone-emotions-concept_169016-64227.jpg",
+            },
+            {
+              name: "Sam Rivers",
+              role: "Community Lead",
+              imageSrc: "http://img.b2bpic.net/free-photo/little-boy-sitting-with-smartphone-guy-wearing-casually-with-headphones-around-neck-posing-withopened-mouth-looks-excited-child-with-crossed-legs-holding-mobile-phone-hands_176532-9057.jpg",
+            },
+          ]}
+        />
+        </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 TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialQuoteCards
+          tag="Hear from our users"
+          title="Loved by communities everywhere"
+          description="See why top creators choose Bloxlink."
+          testimonials={[
+            {
+              name: "Sarah",
+              role: "Discord Admin",
+              quote: "Best bot for our community growth.",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-glasses_23-2148422106.jpg",
+            },
+            {
+              name: "Mike",
+              role: "Developer",
+              quote: "The API is incredibly powerful.",
+              imageSrc: "http://img.b2bpic.net/free-photo/technician-inspecting-coding-desktop-pc_482257-111771.jpg",
+            },
+            {
+              name: "Jane",
+              role: "Influencer",
+              quote: "My community is safer than ever.",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-indian-guy-wireless-headphones-holding-joystick-plays-video-games-console-standing-studio_613910-20435.jpg",
+            },
+            {
+              name: "Rob",
+              role: "Server Owner",
+              quote: "Super easy to set up and manage.",
+              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-business-man-using-laptop_171337-8312.jpg",
+            },
+            {
+              name: "Emily",
+              role: "Moderator",
+              quote: "Automated roles saved us hours.",
+              imageSrc: "http://img.b2bpic.net/free-photo/women-standing-desk-with-diagrams_23-2147651631.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}