import React, { useState, useEffect } from 'react';
import {
Truck, Globe, BarChart3, Clock, Shield, Phone,
ChevronRight, Mail, MapPin, Menu, X, Package
} from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
const LogisticsWebsite = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [activeTab, setActiveTab] = useState('air');
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
const [isVisible, setIsVisible] = useState({});
const [animationTriggered, setAnimationTriggered] = useState({});
// Animation classes for different effects
const animations = {
fadeIn: 'opacity-0 transition-opacity duration-1000 ease-in-out',
slideInRight: 'translate-x-full transition-transform duration-1000 ease-out',
slideInLeft: 'translate-x-[-100%] transition-transform duration-1000 ease-out',
scaleUp: 'scale-95 opacity-0 transition-all duration-700 ease-out',
bounceIn: 'opacity-0 translate-y-4 transition-all duration-700 ease-out'
};
// Handle scroll animations
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setAnimationTriggered(prev => ({
...prev,
[entry.target.id]: true
}));
});
},
{ threshold: 0.1 }
);
const elements = document.querySelectorAll('.animate-on-scroll');
elements.forEach(el => observer.observe(el));
return () => elements.forEach(el => observer.unobserve(el));
}, []);
// Scroll animation handler
useEffect(() => {
const handleScroll = () => {
const elements = document.querySelectorAll('.animate-on-scroll');
elements.forEach((el) => {
const rect = el.getBoundingClientRect();
const isVisible = rect.top <= window.innerHeight - 100;
setIsVisible(prev => ({...prev, [el.id]: isVisible}));
});
};
window.addEventListener('scroll', handleScroll);
handleScroll(); // Initial check
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const services = [
icon: <Truck className="w-8 h-8 text-purple-600" />,
title: "Global Transportation",
description: "End-to-end transportation solutions across air, sea, and land with real-time tracking and
optimization.",
link: "#transportation"
},
icon: <Globe className="w-8 h-8 text-purple-600" />,
title: "Supply Chain Solutions",
description: "Comprehensive supply chain management including inventory optimization and
demand forecasting.",
link: "#supply-chain"
},
icon: <BarChart3 className="w-8 h-8 text-purple-600" />,
title: "Analytics & Reporting",
description: "Advanced analytics and customized reporting for data-driven decision making.",
link: "#analytics"
];
const transportModes = {
air: {
title: "Air Freight",
description: "Express worldwide air freight services with guaranteed delivery times.",
image: "/api/placeholder/800/400"
},
sea: {
title: "Sea Freight",
description: "Cost-effective ocean freight solutions for large shipments.",
image: "/api/placeholder/800/400"
},
land: {
title: "Land Transport",
description: "Comprehensive road and rail transportation network.",
image: "/api/placeholder/800/400"
};
const handleSubmit = (e) => {
e.preventDefault();
setShowSuccessAlert(true);
setTimeout(() => setShowSuccessAlert(false), 3000);
};
return (
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100">
{/* Navigation */}
<nav className="bg-white shadow-lg fixed w-full z-50">
<div className="container mx-auto px-6 py-4">
<div className="flex justify-between items-center">
<div className="flex items-center space-x-2">
<Package className="w-8 h-8 text-purple-600" />
<span className="text-xl font-bold text-gray-800">LogisticsPro</span>
</div>
{/* Desktop Navigation */}
<div className="hidden md:flex space-x-8">
{['Services', 'About', 'Contact', 'Track'].map((item) => (
<a
key={item}
href={`#${item.toLowerCase()}`}
className="text-gray-600 hover:text-purple-600 transition-colors duration-300"
>
{item}
</a>
))}
<button className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700
transition-colors duration-300">
Get Quote
</button>
</div>
{/* Mobile Menu Button */}
<button
className="md:hidden text-gray-600"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
{isMenuOpen ? <X /> : <Menu />}
</button>
</div>
{/* Mobile Menu */}
{isMenuOpen && (
<div className="md:hidden mt-4 space-y-4">
{['Services', 'About', 'Contact', 'Track'].map((item) => (
<a
key={item}
href={`#${item.toLowerCase()}`}
className="block text-gray-600 hover:text-purple-600 transition-colors duration-300"
onClick={() => setIsMenuOpen(false)}
>
{item}
</a>
))}
</div>
)}
</div>
</nav>
{/* Hero Section */}
<header className="pt-24 bg-gradient-to-r from-purple-700 via-purple-600 to-purple-500 text-white
overflow-hidden">
<div className="container mx-auto px-6 py-20">
<div className="grid md:grid-cols-2 gap-12 items-center">
<div
className={`animate-on-scroll ${animations.slideInLeft} ${
animationTriggered['hero-text'] ? 'translate-x-0 opacity-100' : ''
}`}
id="hero-text"
>
<h1 className="text-5xl font-bold mb-6 animate-pulse">Transform Your Supply Chain</h1>
<p className="text-xl mb-8 text-purple-100">Innovative logistics solutions powered by cutting-
edge technology</p>
<div className="flex space-x-4">
<button className="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-
purple-50 transition-all duration-300 transform hover:scale-105">
Get Started
</button>
<button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold
hover:bg-white hover:text-purple-600 transition-all duration-300">
Learn More
</button>
</div>
</div>
<div className="hidden md:block">
<img src="/api/placeholder/600/400" alt="Logistics illustration" className="rounded-lg shadow-
xl" />
</div>
</div>
</div>
</header>
{/* Services Section */}
<section className="py-20 container mx-auto px-6 overflow-hidden">
<h2
className={`text-4xl font-bold text-center mb-16 animate-on-scroll ${animations.fadeIn} ${
animationTriggered['services-title'] ? 'opacity-100' : ''
}`}
id="services-title"
>
Our Services
</h2>
<div
className={`grid md:grid-cols-3 gap-8 animate-on-scroll ${animations.scaleUp} ${
animationTriggered['services-grid'] ? 'scale-100 opacity-100' : ''
}`}
id="services-grid"
>
{services.map((service, index) => (
<Card
key={index}
className={`
hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 cursor-pointer
animate-on-scroll ${animations.fadeIn} ${animationTriggered[`service-card-${index}`] ? 'opacity-
100' : ''}
`}
id={`service-card-${index}`}
style={{ transitionDelay: `${index * 200}ms` }}
>
<CardContent className="p-6">
<div className="mb-4">{service.icon}</div>
<h3 className="text-xl font-semibold mb-2">{service.title}</h3>
<p className="text-gray-600 mb-4">{service.description}</p>
<a
href={service.link}
className="inline-flex items-center text-purple-600 hover:text-purple-700"
>
Learn more <ChevronRight className="w-4 h-4 ml-1" />
</a>
</CardContent>
</Card>
))}
</div>
</section>
{/* Transport Modes Section */}
<section className="py-20 bg-white overflow-hidden">
<div className="container mx-auto px-6">
<h2
className={`text-4xl font-bold text-center mb-16 animate-on-scroll ${animations.bounceIn} ${
animationTriggered['transport-title'] ? 'opacity-100 translate-y-0' : ''
}`}
id="transport-title"
>
Transport Solutions
</h2>
<div className="flex justify-center mb-8">
<div className="inline-flex rounded-lg border border-gray-200 p-1">
{Object.keys(transportModes).map((mode) => (
<button
key={mode}
className={`px-6 py-2 rounded-md transition-colors duration-300 ${
activeTab === mode
? 'bg-purple-600 text-white'
: 'text-gray-600 hover:text-purple-600'
}`}
onClick={() => setActiveTab(mode)}
>
{mode.charAt(0).toUpperCase() + mode.slice(1)}
</button>
))}
</div>
</div>
<div className="grid md:grid-cols-2 gap-12 items-center">
<div className="order-2 md:order-1">
<h3 className="text-2xl font-bold mb-4">{transportModes[activeTab].title}</h3>
<p className="text-gray-600 mb-6">{transportModes[activeTab].description}</p>
<button className="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-
purple-700 transition-colors duration-300">
Learn More
</button>
</div>
<div className="order-1 md:order-2">
<img
src={transportModes[activeTab].image}
alt={transportModes[activeTab].title}
className="rounded-lg shadow-xl"
/>
</div>
</div>
</div>
</section>
{/* Contact Section */}
<section className="py-20 container mx-auto px-6 overflow-hidden">
<div className="max-w-4xl mx-auto">
<h2
className={`text-4xl font-bold text-center mb-16 animate-on-scroll ${animations.bounceIn} ${
animationTriggered['contact-title'] ? 'opacity-100 translate-y-0' : ''
}`}
id="contact-title"
>
Get in Touch
</h2>
<div className="grid md:grid-cols-2 gap-12">
<Card>
<CardContent className="p-6">
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Name</label>
<input
type="text"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-
purple-500 focus:border-transparent"
placeholder="Your name"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input
type="email"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-
purple-500 focus:border-transparent"
placeholder="[email protected]"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Message</label>
<textarea
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-
purple-500 focus:border-transparent h-32"
placeholder="How can we help?"
/>
</div>
<button
type="submit"
className="w-full bg-purple-600 text-white py-3 rounded-lg font-semibold hover:bg-purple-
700 transition-all duration-300 transform hover:scale-105 active:scale-95"
>
Send Message
</button>
</form>
</CardContent>
</Card>
<div className="space-y-8">
<div className="flex items-start space-x-4">
<MapPin className="w-6 h-6 text-purple-600" />
<div>
<h3 className="text-lg font-semibold mb-2">Our Location</h3>
<p className="text-gray-600">123 Logistics Way, Business District, 12345</p>
</div>
</div>
<div className="flex items-start space-x-4">
<Phone className="w-6 h-6 text-purple-600" />
<div>
<h3 className="text-lg font-semibold mb-2">Phone</h3>
<p className="text-gray-600">1-800-LOGISTICS</p>
</div>
</div>
<div className="flex items-start space-x-4">
<Mail className="w-6 h-6 text-purple-600" />
<div>
<h3 className="text-lg font-semibold mb-2">Email</h3>
<p className="text-gray-600">[email protected]</p>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Success Alert */}
{showSuccessAlert && (
<Alert className="fixed bottom-4 right-4 bg-green-100 border-green-500">
<AlertDescription className="text-green-800">
Message sent successfully! We'll get back to you soon.
</AlertDescription>
</Alert>
)}
{/* Footer */}
<footer className="bg-gray-900 text-white py-12">
<div className="container mx-auto px-6">
<div className="grid md:grid-cols-4 gap-8">
<div>
<div className="flex items-center space-x-2 mb-6">
<Package className="w-8 h-8 text-purple-400" />
<span className="text-xl font-bold">LogisticsPro</span>
</div>
<p className="text-gray-400">Your trusted partner in global logistics and supply chain
management</p>
</div>
<div>
<h3 className="text-lg font-semibold mb-4">Services</h3>
<ul className="space-y-2 text-gray-400">
<li className="hover:text-purple-400 cursor-pointer transition-colors">Air Freight</li>
<li className="hover:text-purple-400 cursor-pointer transition-colors">Sea Freight</li>
<li className="hover:text-purple-400 cursor-pointer transition-colors">Land Transport</li>
<li className="hover:text-purple-400 cursor-pointer transition-colors">Supply Chain</li>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold mb-4">Company</h3>
<ul className="space-y-2 text-gray-400">
<li className="hover:text-purple-400 cursor-pointer transition-colors">About Us</li>
<li className="hover:text-purple-400 cursor-pointer transition-colors">Careers</li>
<li className="hover:text-purple-400 cursor-pointer transition-colors">News</li>
<li className="hover:text-purple-400 cursor-pointer transition-colors">Contact</li>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold mb-4">Connect</h3>
<ul className="space-y-2 text-gray-400">
<li className="hover:text-purple-400 cursor-pointer transition-colors">LinkedIn</li>
<li className="hover:text-purple-400 cursor-pointer transition-colors">Twitter</li>
<li className="hover:text-purple-400 cursor-pointer transition-colors">Facebook</li>
<li className="hover:text-purple-400 cursor-pointer transition-colors">Instagram</li>
</ul>
</div>
</div>
<div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
<p>© 2025 LogisticsPro. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
};
export default LogisticsWebsite;
