MAKE TRANSPORT EASY!
import React, { useState } from "react"; import { motion } from "framer-motion"; import { MapPin, Calendar, Trailer, Search } from "lucide-react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; /** * TraxiBookingWidget – hero reservation block for traxi-trailer.com * TailwindCSS + Framer Motion + Lucide icons */ export default function TraxiBookingWidget() { // --- local state (simple demo) ----------------------------- const [rentType, setRentType] = useState("normal"); const [location, setLocation] = useState(""); const [startDate, setStartDate] = useState(""); const [endDate, setEndDate] = useState(""); const [model, setModel] = useState(""); const handleSubmit = (e) => { e.preventDefault(); // TODO: connect with booking backend ↗ console.log({ rentType, location, startDate, endDate, model }); }; // --- component ------------------------------------------------ return (
{/* Background video */} {/* Dark overlay for readability */}
{/* Headline */}

MAKE TRANSPORT EASY!

Miete deinen Anhänger ganz einfach per App
Dein Anhängerverleih in der Nähe!

{/* Reservation Card */} {/* Rent type */}
{/* Grid inputs */}
{/* Location */}
setLocation(e.target.value)} className="w-full rounded-xl bg-white/80 py-2 pl-10 pr-4 text-sm placeholder-gray-500 outline-none focus:ring-2 focus:ring-orange-500" />
{/* Start date */}
setStartDate(e.target.value)} className="w-full rounded-xl bg-white/80 py-2 pl-10 pr-4 text-sm outline-none focus:ring-2 focus:ring-orange-500" />
{/* End date */}
setEndDate(e.target.value)} className="w-full rounded-xl bg-white/80 py-2 pl-10 pr-4 text-sm outline-none focus:ring-2 focus:ring-orange-500" />
{/* Trailer model */} {/* CTA Button */}
); }