From 8b5fef203c9069d2f10613bd3e1b912a1760d668 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 22 Jun 2026 21:43:42 +0000
Subject: [PATCH] Bob AI: Updated typography scale to large for maximalistic
 aesthetic

---
 src/index.css                               |  30 +-
 src/pages/HomePage.tsx                      | 292 ++------------------
 src/pages/HomePage/sections/About.tsx       |  25 ++
 src/pages/HomePage/sections/Bento.tsx       |  57 ++++
 src/pages/HomePage/sections/Contact.tsx     |  27 ++
 src/pages/HomePage/sections/Faq.tsx         |  38 +++
 src/pages/HomePage/sections/Features.tsx    |  46 +++
 src/pages/HomePage/sections/Hero.tsx        |  45 +++
 src/pages/HomePage/sections/Pricing.tsx     |  65 +++++
 src/pages/HomePage/sections/Testimonial.tsx |  42 +++
 10 files changed, 384 insertions(+), 283 deletions(-)
 create mode 100644 src/pages/HomePage/sections/About.tsx
 create mode 100644 src/pages/HomePage/sections/Bento.tsx
 create mode 100644 src/pages/HomePage/sections/Contact.tsx
 create mode 100644 src/pages/HomePage/sections/Faq.tsx
 create mode 100644 src/pages/HomePage/sections/Features.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Pricing.tsx
 create mode 100644 src/pages/HomePage/sections/Testimonial.tsx

diff --git a/src/index.css b/src/index.css
index a0f10c0..711cdc0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,21 +32,21 @@
   --width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
   --width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
 
-  /* @typography/text-sizing/medium */
-  --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
-  --text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
-  --text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
-  --text-base: clamp(0.69rem, 0.92vw, 0.92rem);
-  --text-lg: clamp(0.75rem, 1vw, 1rem);
-  --text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
-  --text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
-  --text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
-  --text-4xl: clamp(1.5rem, 2vw, 2rem);
-  --text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
-  --text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
-  --text-7xl: clamp(3rem, 4vw, 4rem);
-  --text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
-  --text-9xl: clamp(5.25rem, 7vw, 7rem);
+  /* @typography/text-sizing/large */
+  --text-2xs: clamp(0.5rem, 0.7vw, 0.7rem);
+  --text-xs: clamp(0.6rem, 0.8vw, 0.8rem);
+  --text-sm: clamp(0.7rem, 0.9vw, 0.9rem);
+  --text-base: clamp(0.8rem, 1.1vw, 1.1rem);
+  --text-lg: clamp(0.9rem, 1.3vw, 1.3rem);
+  --text-xl: clamp(1.1rem, 1.5vw, 1.5rem);
+  --text-2xl: clamp(1.3rem, 1.8vw, 1.8rem);
+  --text-3xl: clamp(1.6rem, 2.2vw, 2.2rem);
+  --text-4xl: clamp(2rem, 2.8vw, 2.8rem);
+  --text-5xl: clamp(2.6rem, 3.8vw, 3.8rem);
+  --text-6xl: clamp(3.2rem, 4.6vw, 4.6rem);
+  --text-7xl: clamp(4rem, 5.8vw, 5.8rem);
+  --text-8xl: clamp(5rem, 7.2vw, 7.2rem);
+  --text-9xl: clamp(7rem, 10vw, 10rem);
 }
 
 /* @typography/text-sizing/medium (mobile) */
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 2f5195c..a30f719 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,280 +1,36 @@
-import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
-import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
-import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
-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 BentoSection from './HomePage/sections/Bento';
+import PricingSection from './HomePage/sections/Pricing';
+import TestimonialSection from './HomePage/sections/Testimonial';
+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">
-          <HeroTiltedCards
-      tag="Next-Gen Infrastructure"
-      title="Sync your entire workflow in one unified platform."
-      description="DevSync empowers modern engineering teams to scale with speed, security, and seamless integration."
-      primaryButton={{
-        text: "Get Started",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "View Features",
-        href: "#features",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/global-communication-background-business-network-design_53876-160250.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/illustration-geometric-shapes-with-colorful-neon-laser-lights-perfect-backgrounds_181624-34429.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-network-communications-with-connecting-lines-dots-structure_1048-13636.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/cosmic-environment-with-colorful-neon-laser-lights_181624-34446.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-closeup-shot-epcot-taken-night-with-amazing-colored-textures-dark-background_181624-2158.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutMediaOverlay
-      tag="Our Mission"
-      title="We build tools that define the future of development."
-      description="With over a decade of industry expertise, we specialize in building robust tools that streamline every part of the development lifecycle, ensuring our partners stay ahead in a rapidly changing market."
-      primaryButton={{
-        text: "Read About Us",
-        href: "#",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/student-desk-with-computer-books-notepads-wooden-table_169016-55183.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesArrowCards
-      tag="Core Capabilities"
-      title="Powerful features for engineering scale."
-      description="Our suite provides complete visibility and control over your tech ecosystem, from code to production."
-      items={[
-        {
-          title: "Rapid Deployment",
-          tags: [
-            "SaaS",
-            "CI/CD",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/hand-hold-space-rocket-paper-carving-with-sky-background_53876-30288.jpg",
-        },
-        {
-          title: "Secure Infrastructure",
-          tags: [
-            "Security",
-            "Compliance",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/computer-security-with-3d-shields-with-padlocks_107791-16214.jpg",
-        },
-        {
-          title: "Cloud Orchestration",
-          tags: [
-            "Cloud",
-            "Scalability",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/flat-design-data-logo-template_23-2149199478.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
 
-  <div id="bento" data-section="bento">
-    <SectionErrorBoundary name="bento">
-          <FeaturesImageBento
-      tag="Product Gallery"
-      title="See DevSync in action."
-      description="A glimpse into the interface and capabilities that power our enterprise-grade architecture."
-      items={[
-        {
-          title: "Global CDN",
-          description: "High availability edge networks.",
-          imageSrc: "http://img.b2bpic.net/free-photo/dark-textured-surface-with-subtle-light_84443-73009.jpg",
-        },
-        {
-          title: "Metrics",
-          description: "Deep insights in real-time.",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-frame-background-connecting-dots-digital-network-design_53876-153345.jpg",
-        },
-        {
-          title: "Workflow",
-          description: "Automated pipelines.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-home-using-generative-artificial-intelligence-website-make-videos_482257-119719.jpg",
-        },
-        {
-          title: "Hardware",
-          description: "Server efficiency stats.",
-          imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105529.jpg",
-        },
-        {
-          title: "Automation",
-          description: "Self-healing code paths.",
-          imageSrc: "http://img.b2bpic.net/free-photo/vintage-collage-couple-hugging-bird_23-2149438110.jpg",
-        },
-        {
-          title: "Input",
-          description: "Enhanced development.",
-          imageSrc: "http://img.b2bpic.net/free-photo/person-conducting-online-psychologist-therapy_23-2149407952.jpg",
-        },
-        {
-          title: "Glass UI",
-          description: "Seamless visual control.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-black-white-background_23-2150913793.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <BentoSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingHighlightedCards
-      tag="Flexible Plans"
-      title="Transparent pricing for any scale."
-      description="Start with our free tier and scale seamlessly into our enterprise solutions."
-      plans={[
-        {
-          tag: "Basic",
-          price: "$29/mo",
-          description: "Perfect for individuals and side projects.",
-          features: [
-            "1 API key",
-            "Standard support",
-            "Basic analytics",
-          ],
-          primaryButton: {
-            text: "Get Started",
-            href: "#",
-          },
-        },
-        {
-          tag: "Professional",
-          price: "$99/mo",
-          description: "Best for growing engineering teams.",
-          features: [
-            "10 API keys",
-            "24/7 support",
-            "Advanced analytics",
-          ],
-          highlight: "Recommended",
-          primaryButton: {
-            text: "Choose Pro",
-            href: "#",
-          },
-        },
-        {
-          tag: "Enterprise",
-          price: "Custom",
-          description: "Tailored for large-scale operations.",
-          features: [
-            "Unlimited keys",
-            "Dedicated manager",
-            "SLA guarantees",
-          ],
-          primaryButton: {
-            text: "Contact Sales",
-            href: "#contact",
-          },
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />
 
-  <div id="testimonial" data-section="testimonial">
-    <SectionErrorBoundary name="testimonial">
-          <TestimonialTrustCard
-      quote="DevSync completely transformed how we ship code. We have reduced our deployment latency by over 60% since implementation."
-      rating={5}
-      author="Sarah Chen, Chief Architect at InnovateLabs"
-      avatars={[
-        {
-          name: "Sarah",
-          imageSrc: "http://img.b2bpic.net/free-photo/videographer-smiling-camera-working-computer-editing-video-footage-audio-app-sitting-mo_482257-2649.jpg",
-        },
-        {
-          name: "Mike",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",
-        },
-        {
-          name: "Emma",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg",
-        },
-        {
-          name: "David",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-man-sitting-front-laptop-workplace_23-2148187164.jpg",
-        },
-        {
-          name: "Chloe",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-employee-happy-be-back-work_23-2148727616.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTwoColumn
-      tag="Knowledge Base"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about getting started."
-      items={[
-        {
-          question: "What integrations do you support?",
-          answer: "We support all major CI/CD providers including GitHub, GitLab, and Bitbucket out of the box.",
-        },
-        {
-          question: "Is my data secure?",
-          answer: "Your data is encrypted at rest and in transit with industry-standard TLS 1.3 and AES-256.",
-        },
-        {
-          question: "Can I switch plans anytime?",
-          answer: "Yes, you can upgrade, downgrade, or cancel your plan at any time through our dashboard.",
-        },
-        {
-          question: "Do you offer enterprise SLAs?",
-          answer: "Yes, we provide 99.99% uptime guarantees for our enterprise customers.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Get in Touch"
-      text="Ready to accelerate your engineering productivity? Connect with our team today."
-      primaryButton={{
-        text: "Schedule a Demo",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "Talk to Sales",
-        href: "#",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..d427667
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,25 @@
+// 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 AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutMediaOverlay
+          tag="Our Mission"
+          title="We build tools that define the future of development."
+          description="With over a decade of industry expertise, we specialize in building robust tools that streamline every part of the development lifecycle, ensuring our partners stay ahead in a rapidly changing market."
+          primaryButton={{
+            text: "Read About Us",
+            href: "#",
+          }}
+          imageSrc="http://img.b2bpic.net/free-photo/student-desk-with-computer-books-notepads-wooden-table_169016-55183.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Bento.tsx b/src/pages/HomePage/sections/Bento.tsx
new file mode 100644
index 0000000..b7dbfcc
--- /dev/null
+++ b/src/pages/HomePage/sections/Bento.tsx
@@ -0,0 +1,57 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "bento" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function BentoSection(): React.JSX.Element {
+  return (
+    <div id="bento" data-section="bento">
+        <SectionErrorBoundary name="bento">
+              <FeaturesImageBento
+          tag="Product Gallery"
+          title="See DevSync in action."
+          description="A glimpse into the interface and capabilities that power our enterprise-grade architecture."
+          items={[
+            {
+              title: "Global CDN",
+              description: "High availability edge networks.",
+              imageSrc: "http://img.b2bpic.net/free-photo/dark-textured-surface-with-subtle-light_84443-73009.jpg",
+            },
+            {
+              title: "Metrics",
+              description: "Deep insights in real-time.",
+              imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-frame-background-connecting-dots-digital-network-design_53876-153345.jpg",
+            },
+            {
+              title: "Workflow",
+              description: "Automated pipelines.",
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-home-using-generative-artificial-intelligence-website-make-videos_482257-119719.jpg",
+            },
+            {
+              title: "Hardware",
+              description: "Server efficiency stats.",
+              imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105529.jpg",
+            },
+            {
+              title: "Automation",
+              description: "Self-healing code paths.",
+              imageSrc: "http://img.b2bpic.net/free-photo/vintage-collage-couple-hugging-bird_23-2149438110.jpg",
+            },
+            {
+              title: "Input",
+              description: "Enhanced development.",
+              imageSrc: "http://img.b2bpic.net/free-photo/person-conducting-online-psychologist-therapy_23-2149407952.jpg",
+            },
+            {
+              title: "Glass UI",
+              description: "Seamless visual control.",
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-black-white-background_23-2150913793.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..723cff2
--- /dev/null
+++ 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 in Touch"
+          text="Ready to accelerate your engineering productivity? Connect with our team today."
+          primaryButton={{
+            text: "Schedule a Demo",
+            href: "#",
+          }}
+          secondaryButton={{
+            text: "Talk to Sales",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..67c852d
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,38 @@
+// 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 FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTwoColumn
+          tag="Knowledge Base"
+          title="Frequently Asked Questions"
+          description="Everything you need to know about getting started."
+          items={[
+            {
+              question: "What integrations do you support?",
+              answer: "We support all major CI/CD providers including GitHub, GitLab, and Bitbucket out of the box.",
+            },
+            {
+              question: "Is my data secure?",
+              answer: "Your data is encrypted at rest and in transit with industry-standard TLS 1.3 and AES-256.",
+            },
+            {
+              question: "Can I switch plans anytime?",
+              answer: "Yes, you can upgrade, downgrade, or cancel your plan at any time through our dashboard.",
+            },
+            {
+              question: "Do you offer enterprise SLAs?",
+              answer: "Yes, we provide 99.99% uptime guarantees for our enterprise customers.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Features.tsx b/src/pages/HomePage/sections/Features.tsx
new file mode 100644
index 0000000..b21b85a
--- /dev/null
+++ b/src/pages/HomePage/sections/Features.tsx
@@ -0,0 +1,46 @@
+// 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 FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesArrowCards
+          tag="Core Capabilities"
+          title="Powerful features for engineering scale."
+          description="Our suite provides complete visibility and control over your tech ecosystem, from code to production."
+          items={[
+            {
+              title: "Rapid Deployment",
+              tags: [
+                "SaaS",
+                "CI/CD",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/hand-hold-space-rocket-paper-carving-with-sky-background_53876-30288.jpg",
+            },
+            {
+              title: "Secure Infrastructure",
+              tags: [
+                "Security",
+                "Compliance",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/computer-security-with-3d-shields-with-padlocks_107791-16214.jpg",
+            },
+            {
+              title: "Cloud Orchestration",
+              tags: [
+                "Cloud",
+                "Scalability",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-data-logo-template_23-2149199478.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..dc15d32
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,45 @@
+// 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 HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroTiltedCards
+          tag="Next-Gen Infrastructure"
+          title="Sync your entire workflow in one unified platform."
+          description="DevSync empowers modern engineering teams to scale with speed, security, and seamless integration."
+          primaryButton={{
+            text: "Get Started",
+            href: "#contact",
+          }}
+          secondaryButton={{
+            text: "View Features",
+            href: "#features",
+          }}
+          items={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/global-communication-background-business-network-design_53876-160250.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/illustration-geometric-shapes-with-colorful-neon-laser-lights-perfect-backgrounds_181624-34429.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-network-communications-with-connecting-lines-dots-structure_1048-13636.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/cosmic-environment-with-colorful-neon-laser-lights_181624-34446.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-closeup-shot-epcot-taken-night-with-amazing-colored-textures-dark-background_181624-2158.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Pricing.tsx b/src/pages/HomePage/sections/Pricing.tsx
new file mode 100644
index 0000000..44837c6
--- /dev/null
+++ b/src/pages/HomePage/sections/Pricing.tsx
@@ -0,0 +1,65 @@
+// 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 PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingHighlightedCards
+          tag="Flexible Plans"
+          title="Transparent pricing for any scale."
+          description="Start with our free tier and scale seamlessly into our enterprise solutions."
+          plans={[
+            {
+              tag: "Basic",
+              price: "$29/mo",
+              description: "Perfect for individuals and side projects.",
+              features: [
+                "1 API key",
+                "Standard support",
+                "Basic analytics",
+              ],
+              primaryButton: {
+                text: "Get Started",
+                href: "#",
+              },
+            },
+            {
+              tag: "Professional",
+              price: "$99/mo",
+              description: "Best for growing engineering teams.",
+              features: [
+                "10 API keys",
+                "24/7 support",
+                "Advanced analytics",
+              ],
+              highlight: "Recommended",
+              primaryButton: {
+                text: "Choose Pro",
+                href: "#",
+              },
+            },
+            {
+              tag: "Enterprise",
+              price: "Custom",
+              description: "Tailored for large-scale operations.",
+              features: [
+                "Unlimited keys",
+                "Dedicated manager",
+                "SLA guarantees",
+              ],
+              primaryButton: {
+                text: "Contact Sales",
+                href: "#contact",
+              },
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonial.tsx b/src/pages/HomePage/sections/Testimonial.tsx
new file mode 100644
index 0000000..a353bcb
--- /dev/null
+++ b/src/pages/HomePage/sections/Testimonial.tsx
@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonial" section.
+
+import React from 'react';
+import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialSection(): React.JSX.Element {
+  return (
+    <div id="testimonial" data-section="testimonial">
+        <SectionErrorBoundary name="testimonial">
+              <TestimonialTrustCard
+          quote="DevSync completely transformed how we ship code. We have reduced our deployment latency by over 60% since implementation."
+          rating={5}
+          author="Sarah Chen, Chief Architect at InnovateLabs"
+          avatars={[
+            {
+              name: "Sarah",
+              imageSrc: "http://img.b2bpic.net/free-photo/videographer-smiling-camera-working-computer-editing-video-footage-audio-app-sitting-mo_482257-2649.jpg",
+            },
+            {
+              name: "Mike",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",
+            },
+            {
+              name: "Emma",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg",
+            },
+            {
+              name: "David",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-man-sitting-front-laptop-workplace_23-2148187164.jpg",
+            },
+            {
+              name: "Chloe",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-employee-happy-be-back-work_23-2148727616.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
-- 
2.49.1