Homepage Redesign

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