Homepage Redesign
This commit is contained in:
Eric Gullickson
35
frontend/src/pages/HomePage/FeatureCard.tsx
Normal file
35
frontend/src/pages/HomePage/FeatureCard.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
interface FeatureCardProps {
|
||||
title: string;
|
||||
description: string;
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
}
|
||||
|
||||
export const FeatureCard = ({ title, description, imageSrc, imageAlt }: FeatureCardProps) => {
|
||||
return (
|
||||
<motion.div
|
||||
className="group cursor-pointer"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.5 }}
|
||||
whileHover={{ y: -5 }}
|
||||
>
|
||||
<div className="overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<div className="relative h-56 overflow-hidden">
|
||||
<img
|
||||
src={imageSrc}
|
||||
alt={imageAlt}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-white p-6">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">{title}</h3>
|
||||
<p className="text-gray-600 leading-relaxed">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
79
frontend/src/pages/HomePage/FeaturesGrid.tsx
Normal file
79
frontend/src/pages/HomePage/FeaturesGrid.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { FeatureCard } from './FeatureCard';
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: 'Vehicle Management',
|
||||
description: 'Track all your vehicles in one centralized location with detailed information and history.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Vehicle Management',
|
||||
},
|
||||
{
|
||||
title: 'Fuel Log Tracking',
|
||||
description: 'Monitor fuel consumption, costs, and efficiency across all your vehicles.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1529369623266-f5264b696110?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Fuel Log Tracking',
|
||||
},
|
||||
{
|
||||
title: 'Maintenance Records',
|
||||
description: 'Keep detailed maintenance logs and never miss scheduled service appointments.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Maintenance Records',
|
||||
},
|
||||
{
|
||||
title: 'Document Storage',
|
||||
description: 'Store and organize all vehicle documents, receipts, and important paperwork.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Document Storage',
|
||||
},
|
||||
{
|
||||
title: 'Service Stations',
|
||||
description: 'Find and track your favorite service stations and fuel locations.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1594940887841-4996b7f80874?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Service Stations',
|
||||
},
|
||||
{
|
||||
title: 'Reports & Analytics',
|
||||
description: 'Generate detailed reports on costs, mileage, and vehicle performance.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Reports & Analytics',
|
||||
},
|
||||
{
|
||||
title: 'Reminders',
|
||||
description: 'Set up automated reminders for maintenance, registration, and insurance renewals.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1434494878577-86c23bcb06b9?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Reminders',
|
||||
},
|
||||
{
|
||||
title: 'Data Export',
|
||||
description: 'Export your data in various formats for reporting and record keeping.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=400&fit=crop',
|
||||
imageAlt: 'Data Export',
|
||||
},
|
||||
];
|
||||
|
||||
export const FeaturesGrid = () => {
|
||||
return (
|
||||
<section className="py-16 px-4 md:px-8 bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<p className="text-primary-500 text-sm font-semibold uppercase tracking-wide mb-2">
|
||||
Our Features
|
||||
</p>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">What We Offer</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{features.map((feature) => (
|
||||
<FeatureCard key={feature.title} {...feature} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<p className="text-lg text-gray-600 mb-6">
|
||||
We are a cloud-based platform accessible anywhere, anytime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
134
frontend/src/pages/HomePage/HeroCarousel.tsx
Normal file
134
frontend/src/pages/HomePage/HeroCarousel.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import { useRef } from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
|
||||
interface HeroSlide {
|
||||
id: number;
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
}
|
||||
|
||||
const heroSlides: HeroSlide[] = [
|
||||
{
|
||||
id: 1,
|
||||
imageSrc: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=1920&h=1080&fit=crop',
|
||||
imageAlt: 'Luxury Sports Car',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imageSrc: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1920&h=1080&fit=crop',
|
||||
imageAlt: 'Red Sports Car',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imageSrc: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=1920&h=1080&fit=crop',
|
||||
imageAlt: 'Green Performance Car',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
imageSrc: 'https://images.unsplash.com/photo-1544636331-e26879cd4d9b?w=1920&h=1080&fit=crop',
|
||||
imageAlt: 'Black Luxury Vehicle',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
imageSrc: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=1920&h=1080&fit=crop',
|
||||
imageAlt: 'SUV on Road',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
imageSrc: 'https://images.unsplash.com/photo-1520031441872-265e4ff70366?w=1920&h=1080&fit=crop',
|
||||
imageAlt: 'Luxury Sedan',
|
||||
},
|
||||
];
|
||||
|
||||
export const HeroCarousel = () => {
|
||||
const sliderRef = useRef<Slider>(null);
|
||||
|
||||
const settings = {
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 1000,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 5000,
|
||||
fade: true,
|
||||
cssEase: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
pauseOnHover: true,
|
||||
arrows: true,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full hero-carousel">
|
||||
<Slider ref={sliderRef} {...settings}>
|
||||
{heroSlides.map((slide) => (
|
||||
<div key={slide.id} className="relative">
|
||||
<div className="relative h-[500px] md:h-[600px] lg:h-[700px]">
|
||||
<img
|
||||
src={slide.imageSrc}
|
||||
alt={slide.imageAlt}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/60" />
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
|
||||
<p className="text-white text-sm md:text-base font-semibold uppercase tracking-widest mb-4">
|
||||
Welcome to
|
||||
</p>
|
||||
<h1 className="text-white text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
|
||||
MOTOVAULTPRO
|
||||
</h1>
|
||||
<button className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300">
|
||||
Learn More
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
|
||||
<style>{`
|
||||
.hero-carousel .slick-dots {
|
||||
bottom: 25px;
|
||||
}
|
||||
|
||||
.hero-carousel .slick-dots li button:before {
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hero-carousel .slick-dots li.slick-active button:before {
|
||||
color: #7A212A;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero-carousel .slick-prev,
|
||||
.hero-carousel .slick-next {
|
||||
z-index: 10;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.hero-carousel .slick-prev {
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
.hero-carousel .slick-next {
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.hero-carousel .slick-prev:before,
|
||||
.hero-carousel .slick-next:before {
|
||||
font-size: 50px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.hero-carousel .slick-prev:hover:before,
|
||||
.hero-carousel .slick-next:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user