264 lines
11 KiB
TypeScript
264 lines
11 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useAuth0 } from '@auth0/auth0-react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { HeroCarousel } from './HomePage/HeroCarousel';
|
|
import { FeaturesGrid } from './HomePage/FeaturesGrid';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export const HomePage = () => {
|
|
const { loginWithRedirect, isAuthenticated } = useAuth0();
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 100);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const handleAuthAction = () => {
|
|
if (isAuthenticated) {
|
|
navigate('/garage');
|
|
return;
|
|
}
|
|
|
|
loginWithRedirect({ appState: { returnTo: '/garage' } });
|
|
};
|
|
|
|
const handleSignup = () => {
|
|
navigate('/signup');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-nero text-avus">
|
|
{/* Navigation Bar */}
|
|
<nav className={`fixed top-0 left-0 right-0 z-50 transition-colors duration-300 ${isScrolled ? 'bg-nero/95 backdrop-blur-sm' : 'bg-transparent'}`}>
|
|
<div className="w-full px-4 md:px-8 lg:px-12">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<div className="flex-shrink-0">
|
|
<a href="#home" className="flex items-center">
|
|
<img
|
|
src="/images/logos/motovaultpro-title-slogan.png"
|
|
alt="MotoVaultPro - Precision Vehicle Management"
|
|
className="h-8 md:h-10 w-auto"
|
|
/>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
<a href="#home" className="text-white/75 hover:text-white transition-colors">
|
|
Home
|
|
</a>
|
|
<a
|
|
href="#features"
|
|
className="text-white/75 hover:text-white transition-colors"
|
|
>
|
|
Features
|
|
</a>
|
|
<a href="#about" className="text-white/75 hover:text-white transition-colors">
|
|
About
|
|
</a>
|
|
<button
|
|
onClick={handleSignup}
|
|
className="border border-primary-500/90 text-primary-500 hover:bg-primary-500/10 hover:border-primary-500 font-semibold py-2 px-6 rounded-lg transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
|
|
>
|
|
Sign Up
|
|
</button>
|
|
<button
|
|
onClick={handleAuthAction}
|
|
className="bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<div className="md:hidden">
|
|
<button
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
className="text-white/80 hover:text-white focus:outline-none"
|
|
>
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
{mobileMenuOpen ? (
|
|
<path d="M6 18L18 6M6 6l12 12" />
|
|
) : (
|
|
<path d="M4 6h16M4 12h16M4 18h16" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{mobileMenuOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: 'auto' }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
className="md:hidden py-4 space-y-3 bg-nero/95 backdrop-blur-sm border-t border-white/10"
|
|
>
|
|
<a
|
|
href="#home"
|
|
className="block text-white/75 hover:text-white transition-colors py-2"
|
|
>
|
|
Home
|
|
</a>
|
|
<a
|
|
href="#features"
|
|
className="block text-white/75 hover:text-white transition-colors py-2"
|
|
>
|
|
Features
|
|
</a>
|
|
<a
|
|
href="#about"
|
|
className="block text-white/75 hover:text-white transition-colors py-2"
|
|
>
|
|
About
|
|
</a>
|
|
<button
|
|
onClick={handleSignup}
|
|
className="w-full border border-primary-500/90 text-primary-500 hover:bg-primary-500/10 font-semibold py-2 px-6 rounded-lg transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
|
|
>
|
|
Sign Up
|
|
</button>
|
|
<button
|
|
onClick={handleAuthAction}
|
|
className="w-full bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
|
|
>
|
|
Login
|
|
</button>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Carousel */}
|
|
<section id="home">
|
|
<HeroCarousel onGetStarted={handleAuthAction} />
|
|
</section>
|
|
|
|
{/* Welcome Section */}
|
|
<section className="py-16 px-4 md:px-8 bg-[#1D1A18] border-t border-white/5">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
{/* Full Logo */}
|
|
<div className="mb-8">
|
|
<img
|
|
src="/images/logos/motovaultpro-logo-title.png"
|
|
alt="MotoVaultPro - Precision Vehicle Management"
|
|
className="w-[280px] sm:w-[380px] md:w-[520px] lg:w-[620px] max-w-[90vw] h-auto mx-auto"
|
|
loading="eager"
|
|
/>
|
|
</div>
|
|
<p className="text-lg text-titanio leading-relaxed mb-8">
|
|
We are pleased to provide comprehensive vehicle management solutions including Vehicle
|
|
Tracking, Fuel Log Management, Maintenance Records, Document Storage, Service Station
|
|
Locations, and detailed Analytics for all your vehicles. A combination of these features
|
|
can create a perfect management system for your fleet. Based on your specific needs, our
|
|
platform will help you determine the best approach to managing your vehicles.
|
|
</p>
|
|
<p className="text-lg text-titanio leading-relaxed mb-8">
|
|
Do not hesitate to reach out for assistance in creating a custom workflow that best fits
|
|
your needs.
|
|
</p>
|
|
<button
|
|
onClick={handleAuthAction}
|
|
className="bg-primary-500 hover:bg-primary-600 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
|
|
>
|
|
Get Started
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* About Section */}
|
|
<section id="about" className="py-16 px-4 md:px-8 bg-nero border-t border-white/5">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="grid md:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-primary-500 uppercase tracking-wide mb-4">
|
|
About Us
|
|
</h3>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-avus mb-6">
|
|
Overall, our goal is to meet each individual's needs with quality, passion, and
|
|
professionalism.
|
|
</h2>
|
|
<p className="text-lg text-titanio leading-relaxed mb-6">
|
|
Most importantly, we treat each and every vehicle as if it were our own and strive to
|
|
achieve perfection in vehicle management. If you are unsure of what you need for your
|
|
vehicles, we are happy to help talk you through the best options for comprehensive
|
|
tracking.
|
|
</p>
|
|
<p className="text-lg text-titanio leading-relaxed">
|
|
We are proud to use the finest technology and best practices to provide quality and
|
|
satisfaction for our users.
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<div className="w-64 h-64 bg-primary-500 rounded-lg border border-white/10 flex items-center justify-center shadow-lg shadow-black/30">
|
|
<div className="text-center text-white p-8">
|
|
<svg
|
|
className="w-32 h-32 mx-auto mb-4"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<p className="text-xl font-bold">Trusted Platform</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Grid */}
|
|
<section id="features">
|
|
<FeaturesGrid />
|
|
</section>
|
|
|
|
{/* Bottom CTA */}
|
|
<section className="py-16 px-4 md:px-8 bg-gradient-to-r from-primary-700 via-primary-500 to-primary-700 text-white border-t border-white/10">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-6">
|
|
We are a cloud-based platform accessible anywhere, anytime.
|
|
</h2>
|
|
<button
|
|
onClick={handleAuthAction}
|
|
className="bg-white/95 text-primary-500 hover:bg-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-white/50"
|
|
>
|
|
Get Started
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-black text-white py-8 px-4 md:px-8 border-t border-white/10">
|
|
<div className="max-w-7xl mx-auto text-center">
|
|
<p className="text-white/50">
|
|
© {new Date().getFullYear()} MotoVaultPro. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|