Car rental website template

<prompt-block prompt="Build the site for Roam & Ridge, an independent car rental company — booking a specific vehicle for specific dates is the primary action here, so the fleet and a live date-and-location picker need to be reachable from the first screen, not buried behind a generic "Contact us" flow. For the hero, use a real photo of a single vehicle from the actual fleet parked on an open coastal road at golden hour (not a studio shot, not a stock highway image) with a soft bottom gradient (deep charcoal to transparent, ~30% opacity) for legibility. Overlay a booking widget directly on the hero: pickup location, pickup date, return date, and a 'Search available cars' button, with a headline above it reading 'Your next trip starts here' and a subheadline 'Daily and weekly rentals — no hidden fees, no hassle.'
Pair Söhne (or a similar confident geometric sans) for headlines and vehicle names with Inter for specs, pricing, and booking copy. Ground the site in warm graphite neutral (#232323... wait, use a real tinted neutral not pure) — ground the site in warm graphite-tinted neutral (#26262B), off-white for the fleet cards (#F6F4F0), and a single amber accent (#E0A93E) used only on the 'Book now' buttons, active filter chips, and availability indicators.
Below the hero, build a browsable fleet grid (economy, SUV, luxury, van categories) with real vehicle cards — make, model, year, daily rate, seat count, transmission type, and a small 'Available' or 'Booked through [date]' status tag. Clicking a vehicle opens a detail view with a photo set (exterior, interior, trunk space), included mileage, insurance options presented as clear add-on toggles with real prices, and a booking summary that updates live as dates and add-ons are selected. Include a simple pickup-locations section with real addresses and hours, and a straightforward FAQ covering deposit, age requirements, and cancellation policy.
The signature moment: selecting pickup and return dates on the hero's date picker causes the fleet grid below to live-filter and re-sort by real-time availability for those exact dates, with unavailable vehicles fading to 40% opacity and moving to the bottom rather than disappearing — so a visitor always sees the full fleet and understands why something's unavailable, instead of hitting empty results. This live-filter behavior should recur identically on the fleet page's own date picker.
Animate the hero booking widget with a single 250ms fade-up on load, the fleet grid re-sort with a 300ms ease-out reflow when dates change, and the opacity fade on unavailable cards at 200ms; collapse the reflow to an instant re-sort and the fade to an instant opacity change under prefers-reduced-motion. No placeholder vehicles, rates, or locations — every make, model, price, and address should read as real." ctaLabel="Get a site like this">