Scribd
Upload
22 views2 pages

Code

The document is a React component for a logistics company website called HB Speed Logistics. It includes sections for services, about the company, and contact information, featuring a clean design with navigation links and a responsive layout. The component utilizes motion effects for visual appeal and provides a form for users to send messages.

Uploaded by

rishabhsharma172006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
22 views2 pages

Code

The document is a React component for a logistics company website called HB Speed Logistics. It includes sections for services, about the company, and contact information, featuring a clean design with navigation links and a responsive layout. The component utilizes motion effects for visual appeal and provides a form for users to send messages.

Uploaded by

rishabhsharma172006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

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>contact@hbspeedlogistics.com</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>
);
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy