import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { motion } from "framer-motion";
import { Truck, Phone, Mail } from "lucide-react";
export default function HBSpeedLogistics() {
return (
<div className="min-h-screen bg-gray-100 text-gray-800">
<header className="bg-white shadow p-6 flex justify-between items-center">
<h1 className="text-3xl font-bold text-blue-700">HB Speed Logistics</h1>
<nav className="space-x-6">
<a href="#services" className="text-lg font-medium
hover:underline">Services</a>
<a href="#about" className="text-lg font-medium
hover:underline">About</a>
<a href="#contact" className="text-lg font-medium
hover:underline">Contact</a>
</nav>
</header>
<section className="bg-blue-700 text-white py-20 text-center">
<motion.h2
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1 }}
className="text-4xl font-bold"
>
Fast. Reliable. Nationwide.
</motion.h2>
<p className="text-lg mt-4">Your trusted logistics partner.</p>
</section>
<section id="services" className="p-10 grid grid-cols-1 md:grid-cols-3 gap-
6">
{["Express Delivery", "Warehousing", "International
Shipping"].map((service, idx) => (
<Card key={idx} className="rounded-2xl shadow-md">
<CardContent className="p-6">
<Truck className="w-10 h-10 text-blue-700 mb-4" />
<h3 className="text-xl font-semibold mb-2">{service}</h3>
<p>
Efficient and secure {service.toLowerCase()} solutions tailored to
your needs.
</p>
</CardContent>
</Card>
))}
</section>
<section id="about" className="p-10 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-blue-700 mb-4">About Us</h2>
<p className="text-lg">
At HB Speed Logistics, we are committed to delivering excellence in
supply
chain solutions. With a team of experienced professionals, we ensure
that
your goods are transported safely and on time, every time.
</p>
</div>
</section>
<section id="contact" className="p-10 bg-gray-50">
<div className="max-w-2xl mx-auto">
<h2 className="text-3xl font-bold text-blue-700 mb-4">Contact Us</h2>
<div className="space-y-4">
<div className="flex items-center space-x-3">
<Phone className="text-blue-700" />
<span>+91 98765 43210</span>
</div>
<div className="flex items-center space-x-3">
<Mail className="text-blue-700" />
<span>
[email protected]</span>
</div>
<form className="mt-6 space-y-4">
<Input placeholder="Your Name" />
<Input placeholder="Your Email" type="email" />
<Input placeholder="Your Message" />
<Button className="w-full bg-blue-700 hover:bg-blue-800 text-
white">Send Message</Button>
</form>
</div>
</div>
</section>
<footer className="bg-white text-center p-6 mt-10">
<p className="text-gray-500">© 2025 HB Speed Logistics. All rights
reserved.</p>
</footer>
</div>
);
}
