Bob AI: fix build errors (attempt 1)

src/components/Layout.tsx

@@ -38,7 +38,7 @@ export default function Layout() {
 ];
 
   return (
-    <StyleProvider buttonVariant="stagger" siteBackground="noise" heroBackground="lightRaysCenter">
+    <StyleProvider buttonVariant="shift" siteBackground={"floatingGradients" as any} heroBackground={"aurora" as any}>
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
         <NavbarDropdown
@@ -88,4 +88,4 @@ export default function Layout() {
       </SectionErrorBoundary>
     </StyleProvider>
   );
-}
+}

src/pages/HomePage.tsx

@@ -1,324 +1,39 @@
-import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
-import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
-import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
-import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-import { CheckCircle, Database, Server, Shield, ShieldCheck, Wrench, Zap } 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 AboutSection from './HomePage/sections/About';
+import ProductsSection from './HomePage/sections/Products';
+import WhySection from './HomePage/sections/Why';
+import FeaturedSection from './HomePage/sections/Featured';
+import ServicesSection from './HomePage/sections/Services';
+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">
-          <HeroOverlayMarquee
-      tag="Trusted Since 2011"
-      title="Your Trusted Source for Computer Parts & Accessories"
-      description="Laptops, SSDs, Computer Accessories, CCTV Systems, Networking Equipment, Gaming Gear, and IT Solutions at Competitive Prices."
-      primaryButton={{
-        text: "Get a Quote",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "Contact Us",
-        href: "#contact",
-      }}
-      items={[
-        {
-          text: "Genuine Products",
-          icon: CheckCircle,
-        },
-        {
-          text: "Expert Support",
-          icon: Shield,
-        },
-        {
-          text: "Fast Delivery",
-          icon: Zap,
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/african-american-schoolgirl-writing-class-notes-chroma-key-library_482257-118599.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTestimonial
-      tag="About Us"
-      quote="Pettah Computers has served customers for years by providing affordable computer hardware, accessories, storage devices, CCTV systems, networking equipment, laptop parts, and IT solutions. We focus on offering practical technology products at competitive prices while maintaining customer trust and product availability."
-      author="The Management Team"
-      role="Since 2011"
-      imageSrc="http://img.b2bpic.net/free-photo/boardroom-table-with-tablet-running-isolated-mockup-night-lights-performance-projections_482257-136166.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="products" data-section="products">
-    <SectionErrorBoundary name="products">
-          <FeaturesRevealCardsBento
-      tag="Our Catalog"
-      title="Hardware Solutions"
-      description="Comprehensive range of high-quality computer and security hardware."
-      items={[
-        {
-          title: "Laptops",
-          description: "Brand new and reliable laptops for work or gaming.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-vector/electronics-technology-minimal-set_23-2147493529.jpg",
-        },
-        {
-          title: "Components",
-          description: "Desktop upgrades including CPU, RAM, and GPU.",
-          href: "#",
-          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=xocbmw",
-        },
-        {
-          title: "SSD & Storage",
-          description: "High-speed storage drives for performance boost.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/hands-working-digital-device-network-graphic-overlay_53876-176749.jpg",
-        },
-        {
-          title: "Accessories",
-          description: "Keyboards, mice, and essential peripherals.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/two-hands-hold-laptop-computer-with-blank-screen_107791-16720.jpg",
-        },
-        {
-          title: "Monitors",
-          description: "Crystal clear displays for work or design.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/diamond-gem-jewelry-graphic-symbol-icon_53876-125401.jpg",
-        },
-        {
-          title: "CCTV Systems",
-          description: "Smart security and surveillance solutions.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-with-his-mobile-phone-working-network-connection_1134-50.jpg",
-        },
-        {
-          title: "Networking",
-          description: "Routers, switches, and networking gear.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/wifi-signal-icon-blue-color_187299-46876.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProductsSection />
 
-  <div id="why" data-section="why">
-    <SectionErrorBoundary name="why">
-          <FeaturesBentoGrid
-      tag="Why Us"
-      title="Why Choose Pettah Computers"
-      description="We deliver value through experience and quality."
-      features={[
-        {
-          title: "Competitive Pricing",
-          description: "Best daily rates in Colombo.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-showing-his-laptop-videogames_23-2148936668.jpg",
-        },
-        {
-          title: "Wide Selection",
-          description: "Everything from parts to CCTV.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-damaged-computer-parts_23-2147922299.jpg",
-        },
-        {
-          title: "Established 2011",
-          description: "A decade of trusted service.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-making-music-with-laptop_23-2149130773.jpg",
-        },
-        {
-          title: "Genuine Quality",
-          description: "Only authorized genuine products.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cctv-security-camera-ceiling_53876-123083.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <WhySection />
 
-  <div id="featured" data-section="featured">
-    <SectionErrorBoundary name="featured">
-          <PricingSimpleCards
-      tag="Top Sellers"
-      title="Featured Hardware"
-      description="Highly demanded components available for inquiry."
-      plans={[
-        {
-          tag: "Essential",
-          price: "Get Quote",
-          description: "Gaming Laptop",
-          features: [
-            "Latest Intel Gen",
-            "SSD Pre-installed",
-            "Backlit Keyboard",
-          ],
-        },
-        {
-          tag: "Storage",
-          price: "Get Quote",
-          description: "NVMe SSD",
-          features: [
-            "500GB-2TB Options",
-            "High Read Speed",
-            "3 Year Warranty",
-          ],
-        },
-        {
-          tag: "Gaming",
-          price: "Get Quote",
-          description: "Mechanical Keyboard",
-          features: [
-            "RGB Lighting",
-            "Tactile Switches",
-            "Durable Build",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturedSection />
 
-  <div id="services" data-section="services">
-    <SectionErrorBoundary name="services">
-          <MetricsIconCards
-      tag="IT Solutions"
-      title="Professional Services"
-      description="Expert technical support and installation."
-      metrics={[
-        {
-          icon: Wrench,
-          title: "Computer Repairs",
-          value: "Expert",
-        },
-        {
-          icon: Server,
-          title: "Laptop Upgrades",
-          value: "Fast",
-        },
-        {
-          icon: ShieldCheck,
-          title: "CCTV Installation",
-          value: "Reliable",
-        },
-        {
-          icon: Database,
-          title: "Data Recovery",
-          value: "Safe",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ServicesSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-      tag="Client Stories"
-      title="Customer Reviews"
-      description="Why customers keep coming back to us."
-      testimonials={[
-        {
-          name: "John Doe",
-          role: "IT Professional",
-          rating: 5,
-          quote: "Reasonable pricing and almost all items are available.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-smiling-holding-her-chin_23-2149374984.jpg",
-        },
-        {
-          name: "Jane Smith",
-          role: "Student",
-          rating: 5,
-          quote: "Saved over Rs.7000 compared to other stores.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-woman-with-white-t-shirt_273609-5812.jpg",
-        },
-        {
-          name: "Alex K.",
-          role: "Gamer",
-          rating: 5,
-          quote: "Good products with fair prices.",
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-dress-code-posing-as-professional_114579-15939.jpg",
-        },
-        {
-          name: "Sara Perera",
-          role: "Home Office",
-          rating: 5,
-          quote: "Helpful people and friendly environment.",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
-        },
-        {
-          name: "Michael S.",
-          role: "Business Owner",
-          rating: 5,
-          quote: "Best place to buy accessories at competitive prices.",
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-blue-clothes-smiling_23-2148055977.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTabbedAccordion
-      tag="Help"
-      title="Frequently Asked Questions"
-      description="Common questions regarding our products and support."
-      categories={[
-        {
-          name: "Warranty & Support",
-          items: [
-            {
-              question: "Do you offer warranties?",
-              answer: "Yes, all our genuine products come with manufacturer warranties.",
-            },
-            {
-              question: "Do you provide repairs?",
-              answer: "Yes, we have an expert technical team for hardware repairs.",
-            },
-          ],
-        },
-        {
-          name: "General Info",
-          items: [
-            {
-              question: "Can I request a quotation?",
-              answer: "Certainly! Click the Get Quote button to start your inquiry.",
-            },
-            {
-              question: "Do you have CCTV solutions?",
-              answer: "We provide complete installation and CCTV hardware kits.",
-            },
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Get in Touch"
-      text="Visit us in Pettah, Colombo or contact us via WhatsApp for instant support and quotations."
-      primaryButton={{
-        text: "Call Us Now",
-        href: "tel:+94770000000",
-      }}
-      secondaryButton={{
-        text: "WhatsApp Support",
-        href: "https://wa.me/94770000000",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }

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 AboutTestimonial from '@/components/sections/about/AboutTestimonial';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTestimonial
+          tag="About Us"
+          quote="Pettah Computers has served customers for years by providing affordable computer hardware, accessories, storage devices, CCTV systems, networking equipment, laptop parts, and IT solutions. We focus on offering practical technology products at competitive prices while maintaining customer trust and product availability."
+          author="The Management Team"
+          role="Since 2011"
+          imageSrc="http://img.b2bpic.net/free-photo/boardroom-table-with-tablet-running-isolated-mockup-night-lights-performance-projections_482257-136166.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

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="Visit us in Pettah, Colombo or contact us via WhatsApp for instant support and quotations."
+          primaryButton={{
+            text: "Call Us Now",
+            href: "tel:+94770000000",
+          }}
+          secondaryButton={{
+            text: "WhatsApp Support",
+            href: "https://wa.me/94770000000",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,48 @@
+// 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="Help"
+          title="Frequently Asked Questions"
+          description="Common questions regarding our products and support."
+          categories={[
+            {
+              name: "Warranty & Support",
+              items: [
+                {
+                  question: "Do you offer warranties?",
+                  answer: "Yes, all our genuine products come with manufacturer warranties.",
+                },
+                {
+                  question: "Do you provide repairs?",
+                  answer: "Yes, we have an expert technical team for hardware repairs.",
+                },
+              ],
+            },
+            {
+              name: "General Info",
+              items: [
+                {
+                  question: "Can I request a quotation?",
+                  answer: "Certainly! Click the Get Quote button to start your inquiry.",
+                },
+                {
+                  question: "Do you have CCTV solutions?",
+                  answer: "We provide complete installation and CCTV hardware kits.",
+                },
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Featured.tsx

@@ -0,0 +1,52 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "featured" section.
+
+import React from 'react';
+import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturedSection(): React.JSX.Element {
+  return (
+    <div id="featured" data-section="featured">
+        <SectionErrorBoundary name="featured">
+              <PricingSimpleCards
+          tag="Top Sellers"
+          title="Featured Hardware"
+          description="Highly demanded components available for inquiry."
+          plans={[
+            {
+              tag: "Essential",
+              price: "Get Quote",
+              description: "Gaming Laptop",
+              features: [
+                "Latest Intel Gen",
+                "SSD Pre-installed",
+                "Backlit Keyboard",
+              ],
+            },
+            {
+              tag: "Storage",
+              price: "Get Quote",
+              description: "NVMe SSD",
+              features: [
+                "500GB-2TB Options",
+                "High Read Speed",
+                "3 Year Warranty",
+              ],
+            },
+            {
+              tag: "Gaming",
+              price: "Get Quote",
+              description: "Mechanical Keyboard",
+              features: [
+                "RGB Lighting",
+                "Tactile Switches",
+                "Durable Build",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,44 @@
+// 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 HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
+import { CheckCircle, Database, Server, Shield, ShieldCheck, Wrench, Zap } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroOverlayMarquee
+          tag="Trusted Since 2011"
+          title="Your Trusted Source for Computer Parts & Accessories"
+          description="Laptops, SSDs, Computer Accessories, CCTV Systems, Networking Equipment, Gaming Gear, and IT Solutions at Competitive Prices."
+          primaryButton={{
+            text: "Get a Quote",
+            href: "#contact",
+          }}
+          secondaryButton={{
+            text: "Contact Us",
+            href: "#contact",
+          }}
+          items={[
+            {
+              text: "Genuine Products",
+              icon: CheckCircle,
+            },
+            {
+              text: "Expert Support",
+              icon: Shield,
+            },
+            {
+              text: "Fast Delivery",
+              icon: Zap,
+            },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/african-american-schoolgirl-writing-class-notes-chroma-key-library_482257-118599.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Products.tsx

@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "products" section.
+
+import React from 'react';
+import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProductsSection(): React.JSX.Element {
+  return (
+    <div id="products" data-section="products">
+        <SectionErrorBoundary name="products">
+              <FeaturesRevealCardsBento
+          tag="Our Catalog"
+          title="Hardware Solutions"
+          description="Comprehensive range of high-quality computer and security hardware."
+          items={[
+            {
+              title: "Laptops",
+              description: "Brand new and reliable laptops for work or gaming.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-vector/electronics-technology-minimal-set_23-2147493529.jpg",
+            },
+            {
+              title: "Components",
+              description: "Desktop upgrades including CPU, RAM, and GPU.",
+              href: "#",
+              imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=xocbmw",
+            },
+            {
+              title: "SSD & Storage",
+              description: "High-speed storage drives for performance boost.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/hands-working-digital-device-network-graphic-overlay_53876-176749.jpg",
+            },
+            {
+              title: "Accessories",
+              description: "Keyboards, mice, and essential peripherals.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/two-hands-hold-laptop-computer-with-blank-screen_107791-16720.jpg",
+            },
+            {
+              title: "Monitors",
+              description: "Crystal clear displays for work or design.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/diamond-gem-jewelry-graphic-symbol-icon_53876-125401.jpg",
+            },
+            {
+              title: "CCTV Systems",
+              description: "Smart security and surveillance solutions.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/man-with-his-mobile-phone-working-network-connection_1134-50.jpg",
+            },
+            {
+              title: "Networking",
+              description: "Routers, switches, and networking gear.",
+              href: "#",
+              imageSrc: "http://img.b2bpic.net/free-photo/wifi-signal-icon-blue-color_187299-46876.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Services.tsx

@@ -0,0 +1,43 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "services" section.
+
+import React from 'react';
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import { CheckCircle, Database, Server, Shield, ShieldCheck, Wrench, Zap } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services" data-section="services">
+        <SectionErrorBoundary name="services">
+              <MetricsIconCards
+          tag="IT Solutions"
+          title="Professional Services"
+          description="Expert technical support and installation."
+          metrics={[
+            {
+              icon: Wrench,
+              title: "Computer Repairs",
+              value: "Expert",
+            },
+            {
+              icon: Server,
+              title: "Laptop Upgrades",
+              value: "Fast",
+            },
+            {
+              icon: ShieldCheck,
+              title: "CCTV Installation",
+              value: "Reliable",
+            },
+            {
+              icon: Database,
+              title: "Data Recovery",
+              value: "Safe",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

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="Client Stories"
+          title="Customer Reviews"
+          description="Why customers keep coming back to us."
+          testimonials={[
+            {
+              name: "John Doe",
+              role: "IT Professional",
+              rating: 5,
+              quote: "Reasonable pricing and almost all items are available.",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-smiling-holding-her-chin_23-2149374984.jpg",
+            },
+            {
+              name: "Jane Smith",
+              role: "Student",
+              rating: 5,
+              quote: "Saved over Rs.7000 compared to other stores.",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-woman-with-white-t-shirt_273609-5812.jpg",
+            },
+            {
+              name: "Alex K.",
+              role: "Gamer",
+              rating: 5,
+              quote: "Good products with fair prices.",
+              imageSrc: "http://img.b2bpic.net/free-photo/businessman-dress-code-posing-as-professional_114579-15939.jpg",
+            },
+            {
+              name: "Sara Perera",
+              role: "Home Office",
+              rating: 5,
+              quote: "Helpful people and friendly environment.",
+              imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
+            },
+            {
+              name: "Michael S.",
+              role: "Business Owner",
+              rating: 5,
+              quote: "Best place to buy accessories at competitive prices.",
+              imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-blue-clothes-smiling_23-2148055977.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Why.tsx

@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "why" section.
+
+import React from 'react';
+import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function WhySection(): React.JSX.Element {
+  return (
+    <div id="why" data-section="why">
+        <SectionErrorBoundary name="why">
+              <FeaturesBentoGrid
+          tag="Why Us"
+          title="Why Choose Pettah Computers"
+          description="We deliver value through experience and quality."
+          features={[
+            {
+              title: "Competitive Pricing",
+              description: "Best daily rates in Colombo.",
+              imageSrc: "http://img.b2bpic.net/free-photo/man-showing-his-laptop-videogames_23-2148936668.jpg",
+            },
+            {
+              title: "Wide Selection",
+              description: "Everything from parts to CCTV.",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-damaged-computer-parts_23-2147922299.jpg",
+            },
+            {
+              title: "Established 2011",
+              description: "A decade of trusted service.",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-making-music-with-laptop_23-2149130773.jpg",
+            },
+            {
+              title: "Genuine Quality",
+              description: "Only authorized genuine products.",
+              imageSrc: "http://img.b2bpic.net/free-photo/cctv-security-camera-ceiling_53876-123083.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}