Merge version_3_1781985794050 into main

Merge version_3_1781985794050 into main

src/pages/HomePage/sections/Hero.tsx

@@ -1,22 +1,113 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "hero" section.
+/* 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";
 
-import React from 'react';
-import HeroBrand from '@/components/sections/hero/HeroBrand';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+const primaryButton = {
+  text: "Book Now",
+  href: "#contact"
+};
+const secondaryButton = {
+  text: "View Fleet",
+  href: "#fleet"
+};
 
-export default function HeroSection(): React.JSX.Element {
+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 (
-    <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>
+    <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>
   );
 }