Merge version_3_1781985794050 into main

Merge version_3_1781985794050 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
-  --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #d4af37;
+  --primary-cta-text: #000000;
+  --secondary-cta: #333333;
+  --secondary-cta-text: #ffffff;
+  --accent: #a3a3a3;
+  --background-accent: #222222;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;

src/pages/HomePage.tsx

@@ -1,148 +1,39 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import HeroBrand from '@/components/sections/hero/HeroBrand';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import FleetSection from './HomePage/sections/Fleet';
+import PricingSection from './HomePage/sections/Pricing';
+import MetricsSection from './HomePage/sections/Metrics';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import SocialProofSection from './HomePage/sections/SocialProof';
+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">
-          <HeroBrand
-            brand="DriveEase Rental"
-            description="Experience freedom with our premium fleet. Reliable, affordable, and ready for your next adventure."
-            primaryButton={{ text: "Book Now", href: "#contact" }}
-            secondaryButton={{ text: "View Fleet", href: "#fleet" }}
-            imageSrc="http://img.b2bpic.net/free-photo/senior-woman-traveling-alone-having-fun_23-2149034805.jpg"
-          />
-        </SectionErrorBoundary>
-      </div>
+<>
+      <HeroSection />
 
-      <div id="about" data-section="about">
-        <SectionErrorBoundary name="about">
-          <AboutFeaturesSplit
-            tag="Why Choose Us"
-            title="The Better Way to Rent"
-            description="We offer more than just cars. We provide peace of mind with 24/7 support, transparent pricing, and flexible rental plans."
-            items={[
-              { icon: "CheckCircle", title: "Transparent Pricing", description: "No hidden fees, ever." },
-              { icon: "Shield", title: "Comprehensive Insurance", description: "Drive safely with full coverage." },
-              { icon: "Zap", title: "Quick Booking", description: "From search to road in minutes." },
-            ]}
-            imageSrc="http://img.b2bpic.net/free-photo/front-view-man-accepting-keys-new-house_23-2148346265.jpg"
-          />
-        </SectionErrorBoundary>
-      </div>
+      <AboutSection />
 
-      <div id="fleet" data-section="fleet">
-        <SectionErrorBoundary name="fleet">
-          <FeaturesImageBento
-            tag="Our Vehicles"
-            title="Drive Your Choice"
-            description="Explore our curated selection of top-tier vehicles ranging from compact city cars to luxurious SUVs."
-            items={[
-              { title: "Compact", description: "Perfect for city trips", imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-suv-wet-road-power-safety-modern-design_169016-70068.jpg" },
-              { title: "Premium SUV", description: "Comfort for long journeys", imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-sitting-car_1303-22819.jpg" },
-              { title: "Electric Sedan", description: "Sustainable and stylish", imageSrc: "http://img.b2bpic.net/free-photo/close-up-electric-car-charging_23-2149362807.jpg" },
-              { title: "Minivan", description: "Family adventures", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-getting-out-car-while-road-trip_23-2148851244.jpg" },
-              { title: "Sporty Coupe", description: "Fast and agile", imageSrc: "http://img.b2bpic.net/free-photo/superhero-car-vintage-style_23-2151636175.jpg" },
-              { title: "Business Sedan", description: "Professional comfort", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-suitcase_23-2149901406.jpg" },
-              { title: "4x4 Jeep", description: "Built for off-road", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-playing-car_23-2148349740.jpg" },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <FleetSection />
 
-      <div id="pricing" data-section="pricing">
-        <SectionErrorBoundary name="pricing">
-          <PricingLayeredCards
-            tag="Flexible Rates"
-            title="Simple Daily Pricing"
-            description="Select the plan that fits your schedule."
-            plans={[
-              { tag: "Daily", price: "$49", description: "Per day", primaryButton: { text: "Book", href: "#" }, features: ["Unlimited mileage", "24/7 Support"] },
-              { tag: "Weekly", price: "$299", description: "Per week", primaryButton: { text: "Book", href: "#" }, features: ["15% discount", "Free roadside assistance", "Priority Pickup"] },
-              { tag: "Monthly", price: "$899", description: "Per month", primaryButton: { text: "Book", href: "#" }, features: ["25% discount", "Free upgrades", "Dedicated Support"] },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <PricingSection />
 
-      <div id="metrics" data-section="metrics">
-        <SectionErrorBoundary name="metrics">
-          <MetricsSimpleCards
-            tag="Our Reach"
-            title="Driving Satisfaction"
-            description="Proven results for thousands of happy travelers."
-            metrics={[
-              { value: "500+", description: "Available Vehicles" },
-              { value: "10k+", description: "Satisfied Customers" },
-              { value: "15", description: "Cities Serviced" },
-              { value: "4.9", description: "Avg User Rating" },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <MetricsSection />
 
-      <div id="testimonials" data-section="testimonials">
-        <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-            tag="Reviews"
-            title="Customer Stories"
-            description="What our users say about their DriveEase experience."
-            testimonials={[
-              { name: "Alice M.", role: "Traveler", quote: "The booking process was seamless and the car was pristine.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg" },
-              { name: "Bob D.", role: "Business User", quote: "Reliable and high-quality vehicles. My go-to rental.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-waving-with-copy-space_23-2148631403.jpg" },
-              { name: "Charlie S.", role: "Adventurer", quote: "Got a great SUV for our mountain trip. Smooth experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-together_23-2148826969.jpg" },
-              { name: "Dana L.", role: "Family", quote: "The minivan we rented was perfect for our family road trip.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-ethnic-man-with-curly-hair_23-2148203568.jpg" },
-              { name: "Evan K.", role: "Commuter", quote: "Best customer support I've encountered. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg" },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <TestimonialsSection />
 
-      <div id="social-proof" data-section="social-proof">
-        <SectionErrorBoundary name="social-proof">
-          <SocialProofMarquee
-            tag="Trusted By"
-            title="Partners"
-            description="Working with the best brands in the travel industry."
-            names={["Expedia", "Booking.com", "Travelocity", "Kayak", "Skyscanner", "Airbnb", "Hotels.com"]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <SocialProofSection />
 
-      <div id="faq" data-section="faq">
-        <SectionErrorBoundary name="faq">
-          <FaqSimple
-            tag="Support"
-            title="Frequently Asked Questions"
-            description="Common questions answered to make your rental journey easier."
-            items={[
-              { question: "What is required to rent a car?", answer: "You need a valid driver's license, credit card, and must be at least 21 years old." },
-              { question: "Are insurance options included?", answer: "Yes, we offer multiple insurance packages tailored to your needs." },
-              { question: "Can I cancel my reservation?", answer: "Cancellations made 24 hours in advance are fully refundable." },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <FaqSection />
 
-      <div id="contact" data-section="contact">
-        <SectionErrorBoundary name="contact">
-          <ContactCta
-            tag="Book Your Trip"
-            text="Ready to get behind the wheel? Book now and hit the open road today."
-            primaryButton={{ text: "Contact Support", href: "#" }}
-            secondaryButton={{ text: "Start Booking", href: "#" }}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <ContactSection />
     </>
   );
-}
+}

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,26 @@
+// 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 AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+            <SectionErrorBoundary name="about">
+              <AboutFeaturesSplit
+                tag="Why Choose Us"
+                title="The Better Way to Rent"
+                description="We offer more than just cars. We provide peace of mind with 24/7 support, transparent pricing, and flexible rental plans."
+                items={[
+                  { icon: "CheckCircle", title: "Transparent Pricing", description: "No hidden fees, ever." },
+                  { icon: "Shield", title: "Comprehensive Insurance", description: "Drive safely with full coverage." },
+                  { icon: "Zap", title: "Quick Booking", description: "From search to road in minutes." },
+                ]}
+                imageSrc="http://img.b2bpic.net/free-photo/front-view-man-accepting-keys-new-house_23-2148346265.jpg"
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,21 @@
+// 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="Book Your Trip"
+                text="Ready to get behind the wheel? Book now and hit the open road today."
+                primaryButton={{ text: "Contact Support", href: "#" }}
+                secondaryButton={{ text: "Start Booking", href: "#" }}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,25 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqSimple from '@/components/sections/faq/FaqSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+            <SectionErrorBoundary name="faq">
+              <FaqSimple
+                tag="Support"
+                title="Frequently Asked Questions"
+                description="Common questions answered to make your rental journey easier."
+                items={[
+                  { question: "What is required to rent a car?", answer: "You need a valid driver's license, credit card, and must be at least 21 years old." },
+                  { question: "Are insurance options included?", answer: "Yes, we offer multiple insurance packages tailored to your needs." },
+                  { question: "Can I cancel my reservation?", answer: "Cancellations made 24 hours in advance are fully refundable." },
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Fleet.tsx

@@ -0,0 +1,29 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "fleet" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FleetSection(): React.JSX.Element {
+  return (
+    <div id="fleet" data-section="fleet">
+            <SectionErrorBoundary name="fleet">
+              <FeaturesImageBento
+                tag="Our Vehicles"
+                title="Drive Your Choice"
+                description="Explore our curated selection of top-tier vehicles ranging from compact city cars to luxurious SUVs."
+                items={[
+                  { title: "Compact", description: "Perfect for city trips", imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-suv-wet-road-power-safety-modern-design_169016-70068.jpg" },
+                  { title: "Premium SUV", description: "Comfort for long journeys", imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-sitting-car_1303-22819.jpg" },
+                  { title: "Electric Sedan", description: "Sustainable and stylish", imageSrc: "http://img.b2bpic.net/free-photo/close-up-electric-car-charging_23-2149362807.jpg" },
+                  { title: "Minivan", description: "Family adventures", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-getting-out-car-while-road-trip_23-2148851244.jpg" },
+                  { title: "Sporty Coupe", description: "Fast and agile", imageSrc: "http://img.b2bpic.net/free-photo/superhero-car-vintage-style_23-2151636175.jpg" },
+                  { title: "Business Sedan", description: "Professional comfort", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-suitcase_23-2149901406.jpg" },
+                  { title: "4x4 Jeep", description: "Built for off-road", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-playing-car_23-2148349740.jpg" },
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import AutoFillText from "@/components/ui/AutoFillText";
+import Card from "@/components/ui/Card";
+import Input from "@/components/ui/Input";
+import Label from "@/components/ui/Label";
+import { MapPin, Calendar as CalendarIcon, Clock } from "lucide-react";
+
+const primaryButton = {
+  text: "Book Now",
+  href: "#contact"
+};
+const secondaryButton = {
+  text: "View Fleet",
+  href: "#fleet"
+};
+
+type HeroBrandProps = {
+  brand: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const HeroInline = () => {
+  return (
+    <section
+      aria-label="Hero section"
+      className="relative w-full min-h-svh overflow-hidden flex flex-col justify-center pt-24 pb-16"
+    >
+      <HeroBackgroundSlot />
+      <ImageOrVideo
+        imageSrc={"https://images.unsplash.com/photo-1563720223185-11003d516935?q=80&w=2070&auto=format&fit=crop"}
+        className="absolute inset-0 w-full h-full object-cover rounded-none"
+      />
+
+      <div
+        className="absolute inset-0 bg-black/60"
+        aria-hidden="true"
+      />
+
+      <div className="relative z-10 w-content-width mx-auto flex flex-col lg:flex-row items-center gap-12">
+        <div className="w-full lg:w-1/2 flex flex-col gap-6">
+          <TextAnimation
+            text="LuxDrive Rabat"
+            variant="slide-up"
+            gradientText={false}
+            tag="h1"
+            className="text-5xl md:text-7xl font-bold text-white leading-tight"
+          />
+          <TextAnimation
+            text="Experience the ultimate luxury and comfort with our premium fleet. Your journey begins here."
+            variant="slide-up"
+            gradientText={false}
+            tag="p"
+            className="text-lg md:text-xl text-gray-300 leading-relaxed"
+          />
+          <div className="flex flex-wrap gap-4 mt-4">
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
+            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
+          </div>
+        </div>
+
+        <div className="w-full lg:w-1/2 flex justify-center lg:justify-end">
+          <Card className="w-full max-w-md p-8 bg-card/80 backdrop-blur-lg border-primary-cta/30 border shadow-2xl">
+            <h3 className="text-2xl font-semibold text-foreground mb-6">Book Your Ride</h3>
+            <form className="flex flex-col gap-5" onSubmit={(e) => e.preventDefault()}>
+              <div className="flex flex-col gap-2">
+                <Label className="text-sm text-accent flex items-center gap-2">
+                  <MapPin className="w-4 h-4 text-primary-cta" /> Pick-up Location
+                </Label>
+                <Input placeholder="Rabat Airport, Hotel, etc." className="bg-background/80 border-accent/20 text-foreground focus:border-primary-cta" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label className="text-sm text-accent flex items-center gap-2">
+                  <MapPin className="w-4 h-4 text-primary-cta" /> Drop-off Location
+                </Label>
+                <Input placeholder="Destination" className="bg-background/80 border-accent/20 text-foreground focus:border-primary-cta" />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="flex flex-col gap-2">
+                  <Label className="text-sm text-accent flex items-center gap-2">
+                    <CalendarIcon className="w-4 h-4 text-primary-cta" /> Date
+                  </Label>
+                  <Input type="date" className="bg-background/80 border-accent/20 text-foreground focus:border-primary-cta" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label className="text-sm text-accent flex items-center gap-2">
+                    <Clock className="w-4 h-4 text-primary-cta" /> Time
+                  </Label>
+                  <Input type="time" className="bg-background/80 border-accent/20 text-foreground focus:border-primary-cta" />
+                </div>
+              </div>
+              <Button text="Reserve Now" variant="primary" className="w-full mt-2" />
+            </form>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,26 @@
+// 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 MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+            <SectionErrorBoundary name="metrics">
+              <MetricsSimpleCards
+                tag="Our Reach"
+                title="Driving Satisfaction"
+                description="Proven results for thousands of happy travelers."
+                metrics={[
+                  { value: "500+", description: "Available Vehicles" },
+                  { value: "10k+", description: "Satisfied Customers" },
+                  { value: "15", description: "Cities Serviced" },
+                  { value: "4.9", description: "Avg User Rating" },
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,25 @@
+// 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 PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+            <SectionErrorBoundary name="pricing">
+              <PricingLayeredCards
+                tag="Flexible Rates"
+                title="Simple Daily Pricing"
+                description="Select the plan that fits your schedule."
+                plans={[
+                  { tag: "Daily", price: "$49", description: "Per day", primaryButton: { text: "Book", href: "#" }, features: ["Unlimited mileage", "24/7 Support"] },
+                  { tag: "Weekly", price: "$299", description: "Per week", primaryButton: { text: "Book", href: "#" }, features: ["15% discount", "Free roadside assistance", "Priority Pickup"] },
+                  { tag: "Monthly", price: "$899", description: "Per month", primaryButton: { text: "Book", href: "#" }, features: ["25% discount", "Free upgrades", "Dedicated Support"] },
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/SocialProof.tsx

@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "social-proof" section.
+
+import React from 'react';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function SocialProofSection(): React.JSX.Element {
+  return (
+    <div id="social-proof" data-section="social-proof">
+            <SectionErrorBoundary name="social-proof">
+              <SocialProofMarquee
+                tag="Trusted By"
+                title="Partners"
+                description="Working with the best brands in the travel industry."
+                names={["Expedia", "Booking.com", "Travelocity", "Kayak", "Skyscanner", "Airbnb", "Hotels.com"]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,27 @@
+// 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="Reviews"
+                title="Customer Stories"
+                description="What our users say about their DriveEase experience."
+                testimonials={[
+                  { name: "Alice M.", role: "Traveler", quote: "The booking process was seamless and the car was pristine.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg" },
+                  { name: "Bob D.", role: "Business User", quote: "Reliable and high-quality vehicles. My go-to rental.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-waving-with-copy-space_23-2148631403.jpg" },
+                  { name: "Charlie S.", role: "Adventurer", quote: "Got a great SUV for our mountain trip. Smooth experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-together_23-2148826969.jpg" },
+                  { name: "Dana L.", role: "Family", quote: "The minivan we rented was perfect for our family road trip.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-ethnic-man-with-curly-hair_23-2148203568.jpg" },
+                  { name: "Evan K.", role: "Commuter", quote: "Best customer support I've encountered. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg" },
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}