Homepage Redesign

frontend/src/pages/HomePage.tsx

@@ -0,0 +1,221 @@
+import { useState } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+import { HeroCarousel } from './HomePage/HeroCarousel';
+import { FeaturesGrid } from './HomePage/FeaturesGrid';
+import { motion } from 'framer-motion';
+
+export const HomePage = () => {
+  const { loginWithRedirect } = useAuth0();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const handleGetStarted = () => {
+    loginWithRedirect();
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Navigation Bar */}
+      <nav className="bg-white shadow-md sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 md:px-8">
+          <div className="flex justify-between items-center h-16">
+            {/* Logo */}
+            <div className="flex-shrink-0">
+              <h1 className="text-2xl font-bold text-primary-500">MotoVaultPro</h1>
+            </div>
+
+            {/* Desktop Menu */}
+            <div className="hidden md:flex items-center space-x-8">
+              <a href="#home" className="text-gray-700 hover:text-primary-500 transition-colors">
+                Home
+              </a>
+              <a
+                href="#features"
+                className="text-gray-700 hover:text-primary-500 transition-colors"
+              >
+                Features
+              </a>
+              <a href="#about" className="text-gray-700 hover:text-primary-500 transition-colors">
+                About
+              </a>
+              <button
+                onClick={handleGetStarted}
+                className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
+              >
+                Get Started
+              </button>
+            </div>
+
+            {/* Mobile Menu Button */}
+            <div className="md:hidden">
+              <button
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                className="text-gray-700 hover:text-primary-500 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"
+            >
+              <a
+                href="#home"
+                className="block text-gray-700 hover:text-primary-500 transition-colors py-2"
+              >
+                Home
+              </a>
+              <a
+                href="#features"
+                className="block text-gray-700 hover:text-primary-500 transition-colors py-2"
+              >
+                Features
+              </a>
+              <a
+                href="#about"
+                className="block text-gray-700 hover:text-primary-500 transition-colors py-2"
+              >
+                About
+              </a>
+              <button
+                onClick={handleGetStarted}
+                className="w-full bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
+              >
+                Get Started
+              </button>
+            </motion.div>
+          )}
+        </div>
+      </nav>
+
+      {/* Hero Carousel */}
+      <section id="home">
+        <HeroCarousel />
+      </section>
+
+      {/* Welcome Section */}
+      <section className="py-16 px-4 md:px-8 bg-white">
+        <div className="max-w-4xl mx-auto text-center">
+          <p className="text-primary-500 text-sm font-semibold uppercase tracking-wide mb-4">
+            Welcome
+          </p>
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
+            Thank you for your interest in MotoVaultPro!
+          </h2>
+          <p className="text-lg text-gray-600 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-gray-600 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={handleGetStarted}
+            className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300"
+          >
+            Get Started
+          </button>
+        </div>
+      </section>
+
+      {/* About Section */}
+      <section id="about" className="py-16 px-4 md:px-8 bg-gray-100">
+        <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-gray-900 mb-6">
+                Overall, our goal is to meet each individual&apos;s needs with quality, passion, and
+                professionalism.
+              </h2>
+              <p className="text-lg text-gray-600 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-gray-600 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 flex items-center justify-center">
+                <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-primary-500 text-white">
+        <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={handleGetStarted}
+            className="bg-white text-primary-500 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition-colors duration-300"
+          >
+            Get Started
+          </button>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-white py-8 px-4 md:px-8">
+        <div className="max-w-7xl mx-auto text-center">
+          <p className="text-gray-400">
+            &copy; {new Date().getFullYear()} MotoVaultPro. All rights reserved.
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+};

frontend/src/pages/HomePage/FeatureCard.tsx

@@ -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>
+  );
+};

frontend/src/pages/HomePage/FeaturesGrid.tsx

@@ -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>
+  );
+};

frontend/src/pages/HomePage/HeroCarousel.tsx

@@ -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>
+  );
+};