Merge version_8_1777354098866 into main

Merge version_8_1777354098866 into main

src/App.tsx

@@ -1,294 +1,12 @@
-import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
-import FooterBrandReveal from '@/components/sections/footer/FooterBrandReveal';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import NavbarCentered from '@/components/ui/NavbarCentered';
-import PricingPage from '@/components/sections/pricing/PricingPage';
-import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-import LegalSection from '@/components/sections/legal/LegalSection';
+import { Routes, Route } from "react-router-dom";
+import HomePage from "@/pages/HomePage";
+import ServicesPage from "@/pages/ServicesPage";
 
 export default function App() {
   return (
-    <>
-  <div id="nav" data-section="nav">
-      <NavbarCentered
-      logo="DriveEasy"
-      navItems={[
-        {
-          name: "Home",
-          href: "#hero",
-        },
-        {
-          name: "About",
-          href: "#about",
-        },
-        {
-          name: "Vehicles",
-          href: "#vehicles",
-        },
-        {
-          name: "Pricing",
-          href: "#pricing",
-        },
-      ]}
-      ctaButton={{
-        text: "Book Now",
-        href: "#contact",
-      }}
-    />
-  </div>
-
-  <div id="hero" data-section="hero">
-      <HeroBillboard
-      tag="Reliable Rental Service"
-      title="Drive Your Way with DriveEasy"
-      description="Premium car rentals for every journey. Discover a fleet of modern, well-maintained vehicles ready for your next adventure."
-      primaryButton={{
-        text: "Browse Fleet",
-        href: "#vehicles",
-      }}
-      secondaryButton={{
-        text: "Book Now",
-        href: "#contact",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/child-perspective-motorcar-generic-race_1232-3545.jpg"
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <AboutTestimonial
-      tag="Why Us"
-      quote="DriveEasy transformed our vacation. The booking process was seamless, and the car was in pristine condition. Excellent service!"
-      author="Mark Thompson"
-      role="Frequent Traveler"
-      imageSrc="http://img.b2bpic.net/free-photo/happy-auto-repairman-handshaking-with-female-customer-workshop_637285-9789.jpg"
-    />
-  </div>
-
-  <div id="stats" data-section="stats">
-      <FeaturesStatisticsCards
-      tag="Our Impact"
-      title="Trusted by Thousands"
-      description="Data-driven excellence in vehicle rental experiences."
-      items={[
-        {
-          title: "Vehicles",
-          description: "Active fleet size",
-          label: "Fleet",
-          value: "500+",
-        },
-        {
-          title: "Happy Clients",
-          description: "Satisfied renters",
-          label: "Clients",
-          value: "15k+",
-        },
-        {
-          title: "Locations",
-          description: "Global reach",
-          label: "Stations",
-          value: "45",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="vehicles" data-section="vehicles">
-      <ProductVariantCards
-      tag="Our Fleet"
-      title="Modern Vehicles"
-      description="Choose from our wide selection of high-quality vehicles."
-      products={[
-        {
-          name: "Economy Hatchback",
-          variant: "Compact",
-          price: "$45/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-car-little-african-girl-with-mther_1157-45011.jpg",
-        },
-        {
-          name: "Family SUV",
-          variant: "Spacious",
-          price: "$85/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-choosing-car-car-showroom_1303-22807.jpg",
-        },
-        {
-          name: "Executive Sedan",
-          variant: "Premium",
-          price: "$120/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-businessman-white-shirt-speaking-by-phone-entering-his-car-while-standing-outdoors-streets-city-near-modern-office-center_496169-517.jpg",
-        },
-        {
-          name: "Urban Crossover",
-          variant: "Versatile",
-          price: "$70/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-car-showroom-dealership_23-2149117122.jpg",
-        },
-        {
-          name: "Sports Coupe",
-          variant: "Performance",
-          price: "$150/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/girl-car_1157-6513.jpg",
-        },
-        {
-          name: "Comfort Minivan",
-          variant: "Group",
-          price: "$110/day",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-with-cute-chihuahua-dog_23-2150265005.jpg",
-        },
-      ]}
-    />
-  </div>
-
-    <PricingPage />
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialRatingCards
-      tag="Testimonials"
-      title="User Stories"
-      description="Hear from our happy customers."
-      testimonials={[
-        {
-          name: "Alice Johnson",
-          role: "Corporate Client",
-          quote: "Fantastic service and excellent vehicles.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/lady-car-salon-woman-buying-car-elegant-woman-blue-dress_1157-45031.jpg",
-        },
-        {
-          name: "Bob Smith",
-          role: "Traveler",
-          quote: "Easy booking and very helpful staff.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/people-technology-close-up-shot-happy-face-attractive-bearded-man-sitting-front-laptop-screen-smiling-joyfully-while-messaging-friends-online-via-social-networks_273609-6655.jpg",
-        },
-        {
-          name: "Charlie Davis",
-          role: "Local Renter",
-          quote: "Reliable and consistent quality.",
-          rating: 4,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-traveler-enjoys-serenity-high-altitude-wilderness_482257-124914.jpg",
-        },
-        {
-          name: "Diana Prince",
-          role: "Vacationer",
-          quote: "Loved the clean and new car I got.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-customer-car-dealership-with-seller_23-2149106200.jpg",
-        },
-        {
-          name: "Edward Norton",
-          role: "Tourist",
-          quote: "Best car rental experience so far.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-green-eyed-brunette-woman-hair-band-white-t-shirt-against-wall-windows-cacti_197531-17042.jpg",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqTwoColumn
-      tag="Support"
-      title="Common Questions"
-      description="Find answers to our most popular questions here."
-      items={[
-        {
-          question: "What is the age requirement?",
-          answer: "You must be 21 years or older with a valid driver's license.",
-        },
-        {
-          question: "Are insurance plans included?",
-          answer: "We offer various insurance options, including full coverage.",
-        },
-        {
-          question: "Can I cancel my booking?",
-          answer: "Yes, cancellations are free if made 48 hours before pickup.",
-        },
-        {
-          question: "Is mileage unlimited?",
-          answer: "Most of our standard plans include unlimited mileage.",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactCta
-      tag="Ready to go?"
-      text="Start your booking today. Click the button to reach out."
-      primaryButton={{
-        text: "Contact Us",
-        href: "#footer",
-      }}
-      secondaryButton={{
-        text: "Book Fleet",
-        href: "#vehicles",
-      }}
-    />
-  </div>
-
-  <div id="legal" data-section="legal">
-    <LegalSection />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBrandReveal
-      brand="DriveEasy"
-      columns={[
-        {
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#",
-            },
-            {
-              label: "Blog",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Safety",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Contact",
-              href: "#",
-            },
-            {
-              label: "Locations",
-              href: "#",
-            },
-            {
-              label: "Support",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
-    </>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/services" element={<ServicesPage />} />
+    </Routes>
   );
 }

src/components/sections/social-proof/SocialProofOne.tsx

@@ -0,0 +1,58 @@
+import TextAnimation from "@/components/ui/TextAnimation";
+import InfoCardMarquee from "@/components/ui/InfoCardMarquee";
+
+export default function SocialProofOne() {
+  const testimonials = [
+    { 
+      icon: "Star", 
+      label: "John Doe", 
+      value: "The best car rental experience I've ever had. Highly recommended!"
+    },
+    { 
+      icon: "Star", 
+      label: "Jane Smith", 
+      value: "Incredible selection of luxury vehicles. Will definitely use again."
+    },
+    { 
+      icon: "Star", 
+      label: "Michael Johnson", 
+      value: "Smooth process from start to finish. The Ferrari was a dream."
+    },
+    { 
+      icon: "Star", 
+      label: "Emily Davis", 
+      value: "Exceptional customer service and pristine cars."
+    },
+    { 
+      icon: "Star", 
+      label: "Chris Wilson", 
+      value: "A truly premium experience. The Porsche 911 was flawless."
+    }
+  ];
+
+  return (
+    <section aria-label="Social Proof section" className="py-20 overflow-hidden">
+      <div className="flex flex-col gap-8">
+        <div className="flex flex-col items-center w-content-width mx-auto gap-3 md:gap-2">
+          <span className="px-3 py-1 text-sm card rounded">Testimonials</span>
+          <TextAnimation
+            text="What Our Customers Say"
+            variant="slide-up"
+            tag="h2"
+            className="text-6xl font-medium text-center text-balance"
+          />
+          <TextAnimation
+            text="Don't just take our word for it. Hear from our satisfied clients who have experienced the thrill of driving our luxury fleet."
+            variant="slide-up"
+            tag="p"
+            className="md:max-w-6/10 text-lg leading-tight text-center"
+          />
+        </div>
+        
+        <div className="w-full mt-4">
+          <InfoCardMarquee items={testimonials} />
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage.tsx

@@ -1,22 +1,100 @@
-import NavbarCentered from "@/components/ui/NavbarCentered";
 import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
+import ContactCta from "@/components/sections/contact/ContactCta";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import SocialProofOne from '@/components/sections/social-proof/SocialProofOne';
 
-const HomePage = () => {
+export default function HomePage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
       <NavbarCentered
-        logo="Logo"
+        logo="Webild Cars"
         navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "Get Started", href: "#" }}
+        ctaButton={{ text: "Explore Models", href: "/ferrari" }}
       />
-      <main className="pt-20 flex flex-col items-center justify-center min-h-[80vh] px-4">
-        <h1 className="text-4xl font-bold text-foreground mb-4">Welcome</h1>
-        <p className="text-lg text-muted-foreground max-w-xl text-center">
-          Your website content will appear here.
-        </p>
+      <main className="flex-grow">
+        <HeroBillboard
+          tag="Premium Collection"
+          title="Experience Automotive Excellence"
+          description="Discover our curated selection of the world's most iconic luxury and performance vehicles. From the track-ready McLaren to the elegant Mercedes."
+          primaryButton={{ text: "View All Models", href: "/ferrari" }}
+          secondaryButton={{ text: "Contact Us", href: "/contact" }}
+          imageSrc="https://images.unsplash.com/photo-1542239616-c56783935935?q=80&w=2940&auto=format&fit=crop"
+        />
+        <FeaturesAlternatingSplit
+          tag="Our Fleet"
+          title="The Pinnacle of Engineering"
+          description="Explore our exclusive lineup of five legendary automotive marques, each offering a unique blend of performance, luxury, and heritage."
+          items={[
+            {
+              title: "Ferrari",
+              description: "Experience the passion of Italian engineering. Unmistakable design paired with naturally aspirated V12 and twin-turbo V8 engines that deliver pure exhilaration.",
+              primaryButton: { text: "Explore Ferrari", href: "/ferrari" },
+              imageSrc: "https://images.unsplash.com/photo-1592853625511-85c1178e2417?auto=format&fit=crop&q=80",
+            },
+            {
+              title: "Porsche",
+              description: "The perfect balance of everyday usability and track-focused performance. Discover the timeless silhouette of the 911 and the precision of German engineering.",
+              primaryButton: { text: "Explore Porsche", href: "/porsche" },
+              imageSrc: "https://images.unsplash.com/photo-1503376712341-0048236c9302?auto=format&fit=crop&q=80",
+            },
+            {
+              title: "McLaren",
+              description: "Born on the track, built for the road. McLaren brings Formula 1 technology to the street with ultra-lightweight carbon fiber chassis and aerodynamic perfection.",
+              primaryButton: { text: "Explore McLaren", href: "/mcclaren" },
+              imageSrc: "https://images.unsplash.com/photo-1621007947382-bb3c3994e3fd?auto=format&fit=crop&q=80",
+            },
+            {
+              title: "Mercedes-Benz",
+              description: "The best or nothing. Mercedes combines cutting-edge technology, unparalleled luxury, and the raw power of AMG to create the ultimate driving experience.",
+              primaryButton: { text: "Explore Mercedes", href: "/mercedes" },
+              imageSrc: "https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?auto=format&fit=crop&q=80",
+            },
+            {
+              title: "BMW",
+              description: "The ultimate driving machine. BMW M models offer a perfect harmony of aggressive styling, dynamic handling, and luxurious comfort for the discerning driver.",
+              primaryButton: { text: "Explore BMW", href: "/bmw" },
+              imageSrc: "https://images.unsplash.com/photo-1555093873-002d259e8238?auto=format&fit=crop&q=80",
+            }
+          ]}
+        />
+        <ContactCta
+          tag="Get Started"
+          text="Ready to Drive Your Dream Car?"
+          primaryButton={{ text: "Get in Touch", href: "/contact" }}
+          secondaryButton={{ text: "View Pricing", href: "/pricing" }}
+        />
       </main>
+      <FooterSimple
+        brand="Webild Cars"
+        columns={[
+          {
+            title: "Models",
+            items: [
+              { label: "Ferrari", href: "/ferrari" },
+              { label: "BMW", href: "/bmw" },
+              { label: "Porsche", href: "/porsche" },
+              { label: "Mercedes", href: "/mercedes" },
+              { label: "McLaren", href: "/mcclaren" },
+            ]
+          },
+          {
+            title: "Company",
+            items: [
+              { label: "About Us", href: "/about" },
+              { label: "Contact", href: "/contact" },
+              { label: "Services", href: "/services" },
+            ]
+          }
+        ]}
+        copyright="© 2024 Webild Cars. All rights reserved."
+        links={[
+          { label: "Privacy Policy", href: "/policy" },
+          { label: "Terms of Service", href: "/policy" },
+        ]}
+      />
     </div>
   );
-};
-
-export default HomePage;
+}

src/pages/ServicesPage.tsx

@@ -0,0 +1,25 @@
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
+
+export default function ServicesPage() {
+  return (
+    <>
+      <HeroSplit
+        tag="Our Premium Services"
+        title="Experience Unmatched Convenience with DriveEasy"
+        description="From flexible booking and a diverse fleet to 24/7 roadside assistance and premium add-ons, we ensure every aspect of your journey is seamless and stress-free. Discover how we make car rental truly easy."
+        primaryButton={{"text":"Book Your Next Ride","href":"/vehicles"}}
+        secondaryButton={{"text":"Explore Our Offerings","href":"#service-details"}}
+        imageSrc="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
+      />
+      <FeaturesAlternatingSplit
+        tag="Our Services"
+        title="Comprehensive Services for Your Journey"
+        description="At DriveEasy, we offer a range of premium services designed to make your car rental experience smooth, convenient, and worry-free."
+        primaryButton={{"text":"Book Your Car","href":"/vehicles"}}
+        secondaryButton={{"text":"View Pricing","href":"/pricing"}}
+        items={[{"title":"Seamless Online Booking","description":"Book your perfect car in just a few clicks, anytime, anywhere. Our user-friendly platform makes reservations a breeze.","imageSrc":"https://images.unsplash.com/photo-1556740738-b6a63e62c1d5?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"},{"title":"Flexible Rental Periods","description":"Whether it's for a day, a week, or a month, we offer flexible rental plans to fit your schedule and budget.","imageSrc":"https://images.unsplash.com/photo-1580239023190-84f39570189c?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"},{"title":"24/7 Roadside Assistance","description":"Travel with peace of mind knowing our dedicated support team is available around the clock for any unexpected situations.","imageSrc":"https://images.unsplash.com/photo-1582719503527-c77377786f5b?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"}]}
+      />
+    </>
+  );
+}

src/pages/cars/FerrariPage.tsx

@@ -0,0 +1,7 @@
+export default function FerrariPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background text-foreground">
+      <h1 className="text-4xl font-bold">Ferrari Page Content</h1>
+    </div>
+  );
+}

src/routes.ts

@@ -6,4 +6,6 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/services', label: 'Services', pageFile: 'ServicesPage' },
+  { path: '/home', label: 'Home', pageFile: 'HomePage' },
 ];