Brokerage booking

import React from "react";

// Single-file React component landing page for a freight brokerage

// Uses Tailwind CSS classes (assumes Tailwind is available in the project)

// Default export a component named FreightLanding

export default function FreightLanding() {

return (

<div className="min-h-screen bg-gray-50 text-gray-900">

{/* Header */}

<header className="bg-white shadow-sm">

<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">

<div className="flex items-center space-x-3">

<div className="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center text-white font-bold">SF</div>

<div>

<h1 className="text-lg font-semibold">SwiftFreight Brokerage</h1>

<p className="text-xs text-gray-500">Transparent. Reliable. On time.</p>

</div>

</div>

<nav className="hidden md:flex items-center space-x-6 text-sm">

<a href="#services" className="hover:text-indigo-600">Services</a>

<a href="#how" className="hover:text-indigo-600">How it works</a>

<a href="#pricing" className="hover:text-indigo-600">Pricing</a>

<a href="#contact" className="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm">Get a quote</a>

</nav>

</div>

</header>

{/* Hero */}

<main className="py-16">

<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">

<section>

<h2 className="text-3xl md:text-4xl font-extrabold leading-tight">Move freight faster — without the chaos.</h2>

<p className="mt-4 text-gray-600">We match shippers with vetted carriers, optimize routes, and manage paperwork so you can focus on growth. Real-time tracking, competitive rates, and white‑glove service.</p>

<div className="mt-6 flex flex-col sm:flex-row gap-3">

<a href="#contact" className="inline-block px-6 py-3 bg-indigo-600 text-white rounded-md font-medium shadow">Request a quote</a>

<a href="#services" className="inline-block px-6 py-3 border border-gray-200 rounded-md text-gray-700">See our services</a>

</div>

<div className="mt-6 text-sm text-gray-500">Trusted by growing manufacturers, retailers, and ecommerce teams.</div>

<div className="mt-6 flex items-center space-x-6">

<div className="text-center">

<div className="text-2xl font-bold">98%</div>

<div className="text-xs text-gray-500">On-time pickup</div>

</div>

<div className="text-center">

<div className="text-2xl font-bold">24/7</div>

<div className="text-xs text-gray-500">Dispatch support</div>

</div>

<div className="text-center">

<div className="text-2xl font-bold">50+</div>

<div className="text-xs text-gray-500">Trusted carriers</div>

</div>

</div>

</section>

<section className="bg-white rounded-xl p-6 shadow-md">

<form id="lead-form" className="space-y-4">

<h3 className="text-lg font-semibold">Get an instant quote</h3>

<div>

<label className="block text-sm text-gray-600">Your name</label>

<input name="name" className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="Jane transport" />

</div>

<div>

<label className="block text-sm text-gray-600">Company / Shipper</label>

<input name="company" className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="Acme Co." />

</div>

<div className="grid grid-cols-2 gap-3">

<div>

<label className="block text-sm text-gray-600">Origin</label>

<input name="origin" className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="City, ST" />

</div>

<div>

<label className="block text-sm text-gray-600">Destination</label>

<input name="destination" className="w-full mt-1 px-3 py-2 border rounded-md" placeholder="City, ST" />

</div>

</div>

<div>

<label className="block text-sm text-gray-600">Commodity / load details</label>

<input name="details" c