2026-06-21 16:11:25 +00:00
9 changed files with 401 additions and 194 deletions
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,205 +1,35 @@
-import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
-import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
-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 MetricsSection from './HomePage/sections/Metrics';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+
+import CustomizerSection from './HomePage/sections/Customizer';export default function HomePage(): React.JSX.Element {
  return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboard
-      tag="Oral Care Evolution"
-      title="AI-Powered Personalization for Your Daily Smile"
-      description="Design your perfect toothpaste formula and carry your oral-care essentials in style. Experience the fusion of technology and wellness with Colgate Smart Bag."
-      primaryButton={{
-        text: "Design My Toothpaste",
-        href: "#features",
-      }}
-      secondaryButton={{
-        text: "See Smart Bags",
-        href: "#about",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/tooth-paste_187299-45834.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />

-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTextSplit
-      title="A Smarter Way to Care"
-      descriptions={[
-        "Our AI algorithm analyzes your lifestyle and oral-care goals to curate a unique toothpaste formula tailored exactly to you. From whitening intensity to sensitive protection, every detail is engineered for your needs.",
-        "We believe that oral health is an essential part of lifestyle. That's why we've combined high-tech personalized care with stylish, durable travel solutions that keep your routine effortless, wherever you go.",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />

-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesImageBento
-      tag="Design Hub"
-      title="Personalization Features"
-      description="Unlock infinite possibilities with our intuitive customization tools."
-      items={[
-        {
-          title: "AI Formula Creator",
-          description: "Precision tailoring for your oral care.",
-          imageSrc: "http://img.b2bpic.net/free-photo/illustration-dental-care-application-digital-tablet_53876-125399.jpg",
-        },
-        {
-          title: "3D Packaging Preview",
-          description: "Visualize your design before it's made.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-traveler-with-suitcase_23-2151043213.jpg",
-        },
-        {
-          title: "Smart Bag Designer",
-          description: "Customize colors, materials, and styles.",
-          imageSrc: "http://img.b2bpic.net/free-photo/luggage-seen-from-rear-car-window_23-2150934320.jpg",
-        },
-        {
-          title: "Premium Ingredients",
-          description: "Naturally sourced for maximum efficacy.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-women-man-essentials-travel-concept_1921-66.jpg",
-        },
-        {
-          title: "Custom Labels",
-          description: "Express yourself with custom artwork.",
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-banners-sales_23-2150629839.jpg",
-        },
-        {
-          title: "Travel Ready",
-          description: "Sleek compact solutions.",
-          imageSrc: "http://img.b2bpic.net/free-photo/vanity-case-with-products-high-angle_23-2149879964.jpg",
-        },
-        {
-          title: "Subscription Plans",
-          description: "Refills delivered to your door.",
-          imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetic-tiles-with-women-s-bag_23-2150916693.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
+      <CustomizerSection />

-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsMediaCards
-      tag="Our Impact"
-      title="Data-Driven Wellness"
-      description="Proven results for a healthier, brighter future."
-      metrics={[
-        {
-          value: "98%",
-          title: "Satisfaction Rate",
-          description: "Users report visibly healthier smiles.",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-banking-transparent-screen_53876-105382.jpg",
-        },
-        {
-          value: "5M+",
-          title: "Custom Formulas",
-          description: "Unique recipes created by AI.",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bath-concept-cement-background_23-2148296010.jpg",
-        },
-        {
-          value: "24/7",
-          title: "Wellness Tracking",
-          description: "Connected smart care technology.",
-          imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetic-tiles-with-women-s-bag_23-2150916683.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />

-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialMarqueeCards
-      tag="Feedback"
-      title="What Our Community Says"
-      description="Join millions of satisfied smile creators."
-      testimonials={[
-        {
-          name: "Anna P.",
-          role: "Designer",
-          quote: "The AI formula maker is simply revolutionary. My sensitivity issues are gone!",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2547.jpg",
-        },
-        {
-          name: "Marcus R.",
-          role: "Traveler",
-          quote: "The Smart Bag is stylish and perfectly fits all my oral-care essentials.",
-          imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-weekend-concept-young-smiling-woman-relaxing-home-lying-bed-with-cup-tea_1258-281793.jpg",
-        },
-        {
-          name: "Sarah L.",
-          role: "Manager",
-          quote: "Finally, a toothpaste that I actually enjoy using every single morning.",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-young-man-wearing-jacket-checkered-shirt-looking-camera-studio_613910-21142.jpg",
-        },
-        {
-          name: "David W.",
-          role: "Entrepreneur",
-          quote: "Seamless experience from design to delivery. The 3D preview is top-notch.",
-          imageSrc: "http://img.b2bpic.net/free-photo/image-young-brunette-woman-sitting-dreamy-kitchen-smiling-thoughtful-holding-smartphone_1258-187162.jpg",
-        },
-        {
-          name: "Elena V.",
-          role: "Artist",
-          quote: "Love the custom label feature, my tube looks like a work of art.",
-          imageSrc: "http://img.b2bpic.net/free-photo/calisthenics-parallel-bars-isolated-empty-white-room-black-pull-bar_346278-1589.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />

-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="Help"
-      title="Common Questions"
-      description="Everything you need to know about Colgate Smart Bag."
-      items={[
-        {
-          question: "How does the AI create the formula?",
-          answer: "Our AI uses your survey responses and lifestyle data to identify which ingredients and concentrations work best for your unique needs.",
-        },
-        {
-          question: "Can I reuse my bag?",
-          answer: "Yes, our Smart Bags are constructed from premium, durable, and recyclable materials meant for long-term use.",
-        },
-        {
-          question: "How often do refills arrive?",
-          answer: "You can customize your subscription frequency from 1 to 3 months based on your usage.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />

-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Join the Future"
-      text="Start designing your perfect smile today."
-      primaryButton={{
-        text: "Design Now",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "View Catalog",
-        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="A Smarter Way to Care"
+          descriptions={[
+            "Our AI algorithm analyzes your lifestyle and oral-care goals to curate a unique toothpaste formula tailored exactly to you. From whitening intensity to sensitive protection, every detail is engineered for your needs.",
+            "We believe that oral health is an essential part of lifestyle. That's why we've combined high-tech personalized care with stylish, durable travel solutions that keep your routine effortless, wherever you go.",
+          ]}
+        />
+        </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="Join the Future"
+          text="Start designing your perfect smile today."
+          primaryButton={{
+            text: "Design Now",
+            href: "#",
+          }}
+          secondaryButton={{
+            text: "View Catalog",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Customizer.tsx
+++ b/src/pages/HomePage/sections/Customizer.tsx
@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import TextBox from "@/components/ui/TextBox";
+import Modal from "@/components/ui/Modal";
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import Label from "@/components/ui/Label";
+import Textarea from "@/components/ui/Textarea";
+import SelectorButton from "@/components/ui/SelectorButton";
+
+export default function CustomizerSection() {
+  const [flavor, setFlavor] = useState("mint");
+  const [material, setMaterial] = useState("leather");
+
+  return (
+    <div id="customizer" data-webild-section="customizer" className="py-24 bg-background">
+      <SectionErrorBoundary name="customizer">
+        <div className="w-content-width mx-auto">
+          <TextBox
+            tag="Live Customization Studio"
+            title="Design Your Perfect Routine"
+            description="Personalize your oral care and lifestyle accessories in real-time. Choose your formulas, colors, and materials to create a truly unique experience."
+            className="mb-12"
+          />
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Toothpaste Creator Card */}
+            <div className="card p-8 flex flex-col items-center text-center">
+              <div className="w-24 h-24 rounded-full bg-primary-cta/10 flex items-center justify-center mb-6">
+                <span className="text-4xl">🦷</span>
+              </div>
+              <h3 className="text-2xl font-bold text-foreground mb-4">AI Toothpaste Creator</h3>
+              <p className="text-accent mb-8">
+                Tailor your toothpaste formula based on your specific dental needs, flavor preferences, and sensitivity levels.
+              </p>
+              <Modal
+                title="AI Toothpaste Creator"
+                description="Customize your perfect formula."
+                trigger={<Button text="Start Creating" variant="primary" />}
+              >
+                <div className="space-y-6 py-4">
+                  <div className="space-y-2">
+                    <Label>Primary Goal</Label>
+                    <SelectorButton 
+                      options={[
+                        { label: "Whitening", value: "whitening" },
+                        { label: "Sensitivity", value: "sensitivity" },
+                        { label: "Gum Health", value: "gum" }
+                      ]}
+                      activeValue={flavor}
+                      onValueChange={setFlavor}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Flavor Profile</Label>
+                    <Input placeholder="e.g., Cool Mint, Cinnamon, Berry" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Special Requirements</Label>
+                    <Textarea placeholder="Any allergies or specific ingredients to avoid?" />
+                  </div>
+                  <Button text="Generate Formula" className="w-full" />
+                </div>
+              </Modal>
+            </div>
+
+            {/* Smart Bag Designer Card */}
+            <div className="card p-8 flex flex-col items-center text-center">
+              <div className="w-24 h-24 rounded-full bg-primary-cta/10 flex items-center justify-center mb-6">
+                <span className="text-4xl">🎒</span>
+              </div>
+              <h3 className="text-2xl font-bold text-foreground mb-4">Smart Bag Designer</h3>
+              <p className="text-accent mb-8">
+                Design your ideal travel companion. Choose materials, colors, and smart features to fit your lifestyle.
+              </p>
+              <Modal
+                title="Smart Bag Designer"
+                description="Build your perfect travel companion."
+                trigger={<Button text="Start Designing" variant="primary" />}
+              >
+                <div className="space-y-6 py-4">
+                  <div className="space-y-2">
+                    <Label>Exterior Material</Label>
+                    <SelectorButton 
+                      options={[
+                        { label: "Vegan Leather", value: "leather" },
+                        { label: "Recycled Nylon", value: "nylon" },
+                        { label: "Hard Shell", value: "hard" }
+                      ]}
+                      activeValue={material}
+                      onValueChange={setMaterial}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Primary Color</Label>
+                    <div className="flex gap-4">
+                      <div className="w-10 h-10 rounded-full bg-black cursor-pointer border-2 border-transparent hover:border-primary-cta"></div>
+                      <div className="w-10 h-10 rounded-full bg-[#e63946] cursor-pointer border-2 border-primary-cta"></div>
+                      <div className="w-10 h-10 rounded-full bg-white border cursor-pointer hover:border-primary-cta"></div>
+                      <div className="w-10 h-10 rounded-full bg-blue-900 cursor-pointer border-2 border-transparent hover:border-primary-cta"></div>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Monogram (Optional)</Label>
+                    <Input placeholder="Enter up to 3 initials" maxLength={3} />
+                  </div>
+                  <Button text="Preview Design" className="w-full" />
+                </div>
+              </Modal>
+            </div>
+          </div>
+        </div>
+      </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="Help"
+          title="Common Questions"
+          description="Everything you need to know about Colgate Smart Bag."
+          items={[
+            {
+              question: "How does the AI create the formula?",
+              answer: "Our AI uses your survey responses and lifestyle data to identify which ingredients and concentrations work best for your unique needs.",
+            },
+            {
+              question: "Can I reuse my bag?",
+              answer: "Yes, our Smart Bags are constructed from premium, durable, and recyclable materials meant for long-term use.",
+            },
+            {
+              question: "How often do refills arrive?",
+              answer: "You can customize your subscription frequency from 1 to 3 months based on your usage.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Features.tsx
+++ b/src/pages/HomePage/sections/Features.tsx
@@ -0,0 +1,57 @@
+// 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 FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesImageBento
+          tag="Design Hub"
+          title="Personalization Features"
+          description="Unlock infinite possibilities with our intuitive customization tools."
+          items={[
+            {
+              title: "AI Formula Creator",
+              description: "Precision tailoring for your oral care.",
+              imageSrc: "http://img.b2bpic.net/free-photo/illustration-dental-care-application-digital-tablet_53876-125399.jpg",
+            },
+            {
+              title: "3D Packaging Preview",
+              description: "Visualize your design before it's made.",
+              imageSrc: "http://img.b2bpic.net/free-photo/top-view-traveler-with-suitcase_23-2151043213.jpg",
+            },
+            {
+              title: "Smart Bag Designer",
+              description: "Customize colors, materials, and styles.",
+              imageSrc: "http://img.b2bpic.net/free-photo/luggage-seen-from-rear-car-window_23-2150934320.jpg",
+            },
+            {
+              title: "Premium Ingredients",
+              description: "Naturally sourced for maximum efficacy.",
+              imageSrc: "http://img.b2bpic.net/free-photo/top-view-women-man-essentials-travel-concept_1921-66.jpg",
+            },
+            {
+              title: "Custom Labels",
+              description: "Express yourself with custom artwork.",
+              imageSrc: "http://img.b2bpic.net/free-photo/vertical-banners-sales_23-2150629839.jpg",
+            },
+            {
+              title: "Travel Ready",
+              description: "Sleek compact solutions.",
+              imageSrc: "http://img.b2bpic.net/free-photo/vanity-case-with-products-high-angle_23-2149879964.jpg",
+            },
+            {
+              title: "Subscription Plans",
+              description: "Refills delivered to your door.",
+              imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetic-tiles-with-women-s-bag_23-2150916693.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,29 @@
+// 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 HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroBillboard
+          tag="Oral Care Evolution"
+          title="AI-Powered Personalization for Your Daily Smile"
+          description="Design your perfect toothpaste formula and carry your oral-care essentials in style. Experience the fusion of technology and wellness with Colgate Smart Bag."
+          primaryButton={{
+            text: "Design My Toothpaste",
+            href: "#features",
+          }}
+          secondaryButton={{
+            text: "See Smart Bags",
+            href: "#about",
+          }}
+          imageSrc="http://img.b2bpic.net/free-photo/tooth-paste_187299-45834.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Metrics.tsx
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,40 @@
+// 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 MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsMediaCards
+          tag="Our Impact"
+          title="Data-Driven Wellness"
+          description="Proven results for a healthier, brighter future."
+          metrics={[
+            {
+              value: "98%",
+              title: "Satisfaction Rate",
+              description: "Users report visibly healthier smiles.",
+              imageSrc: "http://img.b2bpic.net/free-photo/digital-banking-transparent-screen_53876-105382.jpg",
+            },
+            {
+              value: "5M+",
+              title: "Custom Formulas",
+              description: "Unique recipes created by AI.",
+              imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bath-concept-cement-background_23-2148296010.jpg",
+            },
+            {
+              value: "24/7",
+              title: "Wellness Tracking",
+              description: "Connected smart care technology.",
+              imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetic-tiles-with-women-s-bag_23-2150916683.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Testimonials.tsx
+++ b/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 TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialMarqueeCards
+          tag="Feedback"
+          title="What Our Community Says"
+          description="Join millions of satisfied smile creators."
+          testimonials={[
+            {
+              name: "Anna P.",
+              role: "Designer",
+              quote: "The AI formula maker is simply revolutionary. My sensitivity issues are gone!",
+              imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2547.jpg",
+            },
+            {
+              name: "Marcus R.",
+              role: "Traveler",
+              quote: "The Smart Bag is stylish and perfectly fits all my oral-care essentials.",
+              imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-weekend-concept-young-smiling-woman-relaxing-home-lying-bed-with-cup-tea_1258-281793.jpg",
+            },
+            {
+              name: "Sarah L.",
+              role: "Manager",
+              quote: "Finally, a toothpaste that I actually enjoy using every single morning.",
+              imageSrc: "http://img.b2bpic.net/free-photo/african-american-young-man-wearing-jacket-checkered-shirt-looking-camera-studio_613910-21142.jpg",
+            },
+            {
+              name: "David W.",
+              role: "Entrepreneur",
+              quote: "Seamless experience from design to delivery. The 3D preview is top-notch.",
+              imageSrc: "http://img.b2bpic.net/free-photo/image-young-brunette-woman-sitting-dreamy-kitchen-smiling-thoughtful-holding-smartphone_1258-187162.jpg",
+            },
+            {
+              name: "Elena V.",
+              role: "Artist",
+              quote: "Love the custom label feature, my tube looks like a work of art.",
+              imageSrc: "http://img.b2bpic.net/free-photo/calisthenics-parallel-bars-isolated-empty-white-room-black-pull-bar_346278-1589.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}