egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: navigation and UX improvements complete

Browse Source
This commit is contained in:
Eric Gullickson
2025-12-26 09:25:42 -06:00
parent 50baec390f
commit 8c13dc0a55
23 changed files with 327 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/pages/HomePage/HeroCarousel.tsx
View File

@@ -1,4 +1,4 @@
import { useRef } from 'react';
import React, { useRef } from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
@@ -22,8 +22,8 @@ const heroSlides: HeroSlide[] = [
},
{
id: 3,
imageSrc: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=1920&h=1080&fit=crop',
imageAlt: 'Green Performance Car',
imageSrc: 'https://images.unsplash.com/photo-1609138315745-4e44ac3bbd8d?w=1920&h=1080&fit=crop&crop=focalpoint&fp-x=0.5&fp-y=0.6&q=80&auto=format&ixlib=rb-4.1.0',
imageAlt: 'Ferrari SF90',
},
{
id: 4,
@@ -32,8 +32,8 @@ const heroSlides: HeroSlide[] = [
},
{
id: 5,
imageSrc: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=1920&h=1080&fit=crop',
imageAlt: 'SUV on Road',
imageSrc: 'https://images.unsplash.com/photo-1740095960937-c7b03f511da4?w=1920&h=1080&fit=crop&crop=focalpoint&fp-x=0.5&fp-y=0.6&q=80&auto=format&ixlib=rb-4.1.0',
imageAlt: 'Corvette Z06 - Black Rose',
},
{
id: 6,
@@ -42,7 +42,11 @@ const heroSlides: HeroSlide[] = [
},
];
export const HeroCarousel = () => {
interface HeroCarouselProps {
onGetStarted: () => void;
}
export const HeroCarousel: React.FC<HeroCarouselProps> = ({ onGetStarted }) => {
const sliderRef = useRef<Slider>(null);
const settings = {
@@ -76,6 +80,19 @@ export const HeroCarousel = () => {
))}
</Slider>
{/* Hero Text Overlay - positioned outside Slider to prevent fading */}
<div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4 pointer-events-none">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 md:mb-8 drop-shadow-lg">
Track every mile. Own every detail.
</h1>
<button
onClick={onGetStarted}
className="pointer-events-auto bg-primary-500 hover:bg-primary-600 text-white font-semibold py-3 px-8 md:py-4 md:px-10 rounded-lg text-lg md:text-xl transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
>
Get Started
</button>
</div>
<style>{`
.hero-carousel .slick-dots {
bottom: 25px;