frontend/src/pages/HomePage/FeatureCard.tsx

@@ -5,31 +5,34 @@ interface FeatureCardProps {
   description: string;
   imageSrc: string;
   imageAlt: string;
+  href: string;
 }
 
-export const FeatureCard = ({ title, description, imageSrc, imageAlt }: FeatureCardProps) => {
+export const FeatureCard = ({ title, description, imageSrc, imageAlt, href }: FeatureCardProps) => {
   return (
     <motion.div
-      className="group cursor-pointer"
+      className="group"
       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 bg-white/5 border border-white/10 shadow-lg shadow-black/30 hover:border-white/20 hover:shadow-xl hover:shadow-black/40 transition-all 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"
-          />
+      <a href={href} className="block">
+        <div className="overflow-hidden rounded-lg bg-white/5 border border-white/10 shadow-lg shadow-black/30 hover:border-white/20 hover:shadow-xl hover:shadow-black/40 transition-all 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="p-6">
+            <h3 className="text-xl font-bold text-avus mb-2">{title}</h3>
+            <p className="text-titanio leading-relaxed">{description}</p>
+          </div>
         </div>
-        <div className="p-6">
-          <h3 className="text-xl font-bold text-avus mb-2">{title}</h3>
-          <p className="text-titanio leading-relaxed">{description}</p>
-        </div>
-      </div>
+      </a>
     </motion.div>
   );
 };

frontend/src/pages/HomePage/FeaturesGrid.tsx

@@ -26,6 +26,7 @@ type Feature = {
   title: string;
   description: string;
   image: UnsplashImageSpec;
+  href: string;
 };
 
 // Centralize Unsplash identifiers so you only update them in one place if needed.
@@ -69,6 +70,7 @@ const features: readonly Feature[] = [
   {
     title: 'Vehicle Management',
     description: 'Track all your vehicles in one centralized location with detailed information and history.',
+    href: '/guide#vehicles',
     image: {
       photoId: '1503376780353-7e6692767b70',
       alt: 'Vehicle Management',
@@ -77,6 +79,7 @@ const features: readonly Feature[] = [
   {
     title: 'Fuel Log Tracking',
     description: 'Monitor fuel consumption, costs, and efficiency across all your vehicles.',
+    href: '/guide#fuel-logs',
     image: {
       photoId: '1529369623266-f5264b696110',
       alt: 'Fuel Log Tracking',
@@ -85,6 +88,7 @@ const features: readonly Feature[] = [
   {
     title: 'Maintenance Records',
     description: 'Keep detailed maintenance logs and never miss scheduled service appointments.',
+    href: '/guide#maintenance',
     image: {
       photoId: '1486262715619-67b85e0b08d3',
       alt: 'Maintenance Records',
@@ -93,6 +97,7 @@ const features: readonly Feature[] = [
   {
     title: 'Document Storage',
     description: 'Store and organize all vehicle documents, receipts, and important paperwork.',
+    href: '/guide#documents',
     image: {
       photoId: '1568605117036-5fe5e7bab0b7',
       alt: 'Document Storage',
@@ -101,6 +106,7 @@ const features: readonly Feature[] = [
   {
     title: 'Fuel Stations',
     description: 'Find and track your favorite fuel locations. Community verified stations with Premium 93 Octane.',
+    href: '/guide#gas-stations',
     image: {
       photoId: '1572281335102-5f780686ee91',
       alt: 'Fuel Stations',
@@ -110,6 +116,7 @@ const features: readonly Feature[] = [
   {
     title: 'Reports & Analytics',
     description: 'Generate detailed reports on costs, mileage, and vehicle performance.',
+    href: '/guide#dashboard',
     image: {
       photoId: '1551288049-bebda4e38f71',
       alt: 'Reports & Analytics',
@@ -118,6 +125,7 @@ const features: readonly Feature[] = [
   {
     title: 'Reminders',
     description: 'Set up automated reminders for maintenance, registration, and insurance renewals.',
+    href: '/guide#maintenance-schedules',
     image: {
       photoId: '1434494878577-86c23bcb06b9',
       alt: 'Reminders',
@@ -126,6 +134,7 @@ const features: readonly Feature[] = [
   {
     title: 'Data Export',
     description: 'Export your data in various formats for reporting and record keeping.',
+    href: '/guide#data-import-and-export',
     image: {
       photoId: '1460925895917-afdab827c52f',
       alt: 'Data Export',
@@ -152,6 +161,7 @@ export const FeaturesGrid = () => {
               description={feature.description}
               imageSrc={buildUnsplashUrl(feature.image)}
               imageAlt={feature.image.alt}
+              href={feature.href}
             />
           ))}
         </div>