From e842ad29f5c279507ba6a8fe6a4b79244fae25dd Mon Sep 17 00:00:00 2001
From: Swetakshi Mishra <swetakshimishra@gmail.com>
Date: Fri, 24 Oct 2025 11:02:57 +0530
Subject: [PATCH] Landing page enhancement

---
 static/css/home.css  | 280 ++++++++++++++++++++++++++++++++-----------
 static/css/steps.css | 258 ++++++++++++++++++++++++++++++++-------
 templates/index.html | 197 +++++++++++++++++++-----------
 3 files changed, 553 insertions(+), 182 deletions(-)

diff --git a/static/css/home.css b/static/css/home.css
index 0e246b8..56f42ca 100644
--- a/static/css/home.css
+++ b/static/css/home.css
@@ -1,118 +1,262 @@
-/* HERO SECTION */
+/* CSS Variables */
+:root {
+  --golden-primary: #FFD700;
+  --golden-secondary: #B8860B;
+  --golden-deep: #704214;
+  --golden-gradient: linear-gradient(135deg, var(--golden-primary), var(--golden-secondary));
+  --glass-bg: rgba(255, 255, 255, 0.1);
+  --card-shadow: 0 8px 32px rgba(255, 215, 0, 0.15);
+}
+
+/* Hero Section */
 .hero {
+  min-height: 100vh;
+  position: relative;
+  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
+              var(--golden-gradient);
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
-  justify-content: space-between;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
-  padding: 80px;
-  background: #efdca6;
+  padding: 0 10%;
+  overflow: hidden;
+}
+
+.hero-left {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding-right: 5rem;
+  z-index: 2;
 }
 
-.hero-text {
-  max-width: 50%;
+.tagline {
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: rgba(255,215,0,0.1);
+  border-radius: 20px;
+  margin-bottom: 1.5rem;
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
 }
 
-.hero-text h1 {
-  font-size: 2.8rem;
-  margin-bottom: 20px;
+.hero h1 {
+  font-size: 3.5rem;
+  background: var(--golden-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 1.5rem;
+  line-height: 1.2;
 }
 
-.hero-text p {
-  font-size: 1.2rem;
-  margin-bottom: 20px;
-  color: #444;
+.hero-description {
+  color: #fff;
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+  line-height: 1.6;
+  opacity: 0.9;
 }
 
-.buttons a {
-  display: inline-block;
-  padding: 12px 24px;
-  margin-right: 15px;
-  font-size: 1rem;
-  text-decoration: none;
-  border-radius: 6px;
-  transition: background 0.3s;
+.hero-buttons {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
 }
 
 .btn-primary {
-  background: #e2be09;
-  color: white;
+  padding: 1rem 2rem;
+  background: var(--golden-gradient);
+  border: none;
+  border-radius: 30px;
+  color: #000;
+  font-weight: bold;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  will-change: transform;
 }
 
-.btn-primary:hover {
-  background: #0056b3;
+.btn-primary:hover,
+.btn-primary:focus-visible {
+  -webkit-transform: translateY(-3px);
+  transform: translateY(-3px);
+  box-shadow: 0 10px 20px rgba(255,215,0,0.3);
 }
 
 .btn-secondary {
-  background: #e7eaed;
-  color: #333;
+  padding: 1rem 2rem;
+  background: transparent;
+  border: 2px solid var(--golden-primary);
+  border-radius: 30px;
+  color: var(--golden-primary);
+  font-weight: bold;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
 }
 
-.btn-secondary:hover {
-  background: #0056b3;
-  color: white;
+.btn-secondary:hover,
+.btn-secondary:focus-visible {
+  background: rgba(255,215,0,0.1);
+  -webkit-transform: translateY(-3px);
+  transform: translateY(-3px);
 }
 
-.hero-image img {
-  max-width: 420px;
-  border-radius: 10px;
+.hero-right {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  position: relative;
+  z-index: 1;
 }
 
-/* FEATURES SECTION */
-.features-section {
-  text-align: center;
-  padding: 80px 20px;
-  margin: 60px auto;
-  max-width: 1500px;
-  background: transparent; /* 🚀 keep section background fully transparent */
+.hero-right img {
+  width: 100%;
+  border-radius: 20px;
+  box-shadow: 0 0 30px rgba(255,215,0,0.2);
+  -webkit-animation: float 3s ease-in-out infinite;
+  animation: float 3s ease-in-out infinite;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
 }
 
-.features-section h2 {
-  color: #d88c0d;
-  font-size: 2.8rem;
-  margin-bottom: 15px;
+/* Features Section */
+.features-section {
+  padding: 5rem 10%;
+  background: #0a0a0a;
+  position: relative;
+  overflow: hidden;
 }
 
-.features-subtitle {
-  font-size: 1.1rem;
-  color: #333;
-  max-width: 700px;
-  margin: 0 auto 40px auto;
+.features-section h2 {
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+  background: var(--golden-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .features-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-  gap: 25px;
-  justify-content: center;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
 }
 
 .feature-card {
-  background: rgba(255, 255, 255, 0.2); /* semi-transparent glass */
+  background: var(--glass-bg);
+  padding: 2rem;
   border-radius: 15px;
-  padding: 30px 20px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  backdrop-filter: blur(12px); /* frosted glass */
-  border: 1px solid rgba(255,255,255,0.3);
+  border: 1px solid rgba(255,215,0,0.1);
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  will-change: transform;
 }
 
 .feature-card:hover {
-  transform: scale(1.07);
-  box-shadow: 0 8px 30px rgba(21, 16, 16, 0.2);
+  -webkit-transform: translateY(-10px);
+  transform: translateY(-10px);
+  border-color: var(--golden-primary);
+  box-shadow: 0 15px 30px rgba(255,215,0,0.2);
 }
 
 .feature-icon {
   font-size: 2.5rem;
-  margin-bottom: 15px;
+  margin-bottom: 1rem;
+  background: var(--golden-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-transition: transform 0.3s ease;
+  transition: transform 0.3s ease;
+}
+
+.feature-card:hover .feature-icon {
+  -webkit-transform: scale(1.2);
+  transform: scale(1.2);
+}
+
+/* Animations */
+@-webkit-keyframes float {
+  0% { -webkit-transform: translateY(0); }
+  50% { -webkit-transform: translateY(-20px); }
+  100% { -webkit-transform: translateY(0); }
+}
+
+@keyframes float {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+  100% { transform: translateY(0); }
 }
 
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .hero-right img,
+  .feature-card,
+  .feature-icon {
+    -webkit-animation: none !important;
+    animation: none !important;
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .hero {
+    padding: 0 5%;
+  }
+  
+  .hero h1 {
+    font-size: 3rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    text-align: center;
+    padding: 5rem 5%;
+  }
+
+  .hero-left {
+    padding-right: 0;
+    margin-bottom: 3rem;
+  }
+
+  .hero h1 {
+    font-size: 2.5rem;
+  }
+
+  .hero-buttons {
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
 
-.feature-card h3 {
-  margin-bottom: 10px;
-  font-size: 1.3rem;
-  color: #111;
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
-.feature-card p {
-  font-size: 0.95rem;
-  color: #444;
+@media (max-width: 480px) {
+  .hero-buttons {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
 }
diff --git a/static/css/steps.css b/static/css/steps.css
index da76949..3d4c0ff 100644
--- a/static/css/steps.css
+++ b/static/css/steps.css
@@ -1,82 +1,258 @@
+/* Variables */
+:root {
+  --golden-primary: #FFD700;
+  --golden-secondary: #B8860B;
+  --golden-deep: #704214;
+  --golden-light: #FFF3D4;
+  --golden-gradient: linear-gradient(135deg, var(--golden-primary), var(--golden-secondary));
+  --glass-bg: rgba(255, 255, 255, 0.1);
+  --card-shadow: 0 8px 32px rgba(255, 215, 0, 0.15);
+}
+
 /* WRAPPER */
 .steps-wrapper {
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
-  padding: 80px 20px;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: 120px 20px;
+  background: #0a0a0a;
+  background: linear-gradient(to bottom, #0a0a0a, #1a1a1a);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.steps-wrapper::before,
+.steps-wrapper::after {
+  content: '';
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  background: var(--golden-gradient);
+  -webkit-filter: blur(100px);
+  filter: blur(100px);
+  opacity: 0.1;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.steps-wrapper::before {
+  top: -50px;
+  left: -50px;
+  -webkit-animation: floatElement 8s infinite alternate;
+  animation: floatElement 8s infinite alternate;
+}
+
+.steps-wrapper::after {
+  bottom: -50px;
+  right: -50px;
+  -webkit-animation: floatElement 8s infinite alternate-reverse;
+  animation: floatElement 8s infinite alternate-reverse;
 }
 
 /* MAIN PARENT CARD */
 .steps-main-card {
-  background: linear-gradient(90deg, #ffb347, #ffcc33); /* orange-yellow like your image */
-  padding: 50px 50px;
-  border-radius: 80px;
-  max-width: 1200px;
+  background: var(--golden-secondary);
+  background: -webkit-linear-gradient(145deg, var(--golden-secondary), var(--golden-primary));
+  background: linear-gradient(145deg, var(--golden-secondary), var(--golden-primary));
+  padding: 80px 60px;
+  border-radius: 50px;
+  max-width: 1400px;
   width: 100%;
-  text-align: center;
-  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
-  padding-bottom: 50px;
+  position: relative;
+  z-index: 1;
+  box-shadow: var(--card-shadow);
+  overflow: hidden;
+}
+
+.steps-main-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.15);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  z-index: -1;
 }
 
 .steps-main-card .section-title {
-  font-size: 2rem;
-  margin-bottom: 40px;
-  color: #111;
+  font-size: 3.5rem;
+  font-weight: 800;
+  background: -webkit-linear-gradient(right, #111, #333);
+  background: linear-gradient(to right, #111, #333);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  margin-bottom: 80px;
+  text-align: center;
+  position: relative;
+}
+
+.steps-main-card .section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 120px;
+  height: 4px;
+  background: var(--golden-gradient);
+  border-radius: 2px;
 }
 
 /* FLEX LAYOUT FOR SUBCARDS */
 .steps-subcards {
-  display: flex;
-  justify-content: center;
-  gap: 20px;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 40px;
+  padding: 20px;
 }
 
 /* SUBCARDS */
 .step-subcard {
-  background: rgba(255, 255, 255, 0.15); /* translucent */
-  backdrop-filter: blur(12px);
+  background: var(--glass-bg);
   -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255,255,255,0.3);
-  border-radius: 15px;
-  padding: 25px 20px;
-  width: 250px;
-  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 25px;
+  padding: 40px;
+  -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  position: relative;
+  overflow: hidden;
+  will-change: transform;
 }
 
-/* Hover lift effect */
-.step-subcard:hover {
-  transform: translateY(-6px);
-  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+.step-subcard:hover,
+.step-subcard:focus-visible {
+  -webkit-transform: translateY(-15px) scale(1.02);
+  transform: translateY(-15px) scale(1.02);
+  border-color: var(--golden-primary);
+  box-shadow: 0 20px 50px rgba(255, 215, 0, 0.3);
+}
+
+.step-subcard:focus-visible {
+  outline: 2px solid var(--golden-primary);
+  outline-offset: 2px;
 }
 
 /* ICON */
 .step-icon {
-  width: 70px;
-  height: 70px;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 30px;
+  background: var(--golden-gradient);
   border-radius: 50%;
-  background: rgba(255,255,255,0.25);
-  margin: 0 auto 15px auto;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
-  backdrop-filter: blur(8px);
-  border:rgba(255,255,255,0.25);
+  position: relative;
+  -webkit-transition: all 0.5s ease;
+  transition: all 0.5s ease;
 }
 
 .step-icon img {
-  width: 35px;
-  height: 35px;
+  width: 50px;
+  height: 50px;
+  -webkit-filter: brightness(0) invert(1);
+  filter: brightness(0) invert(1);
+  -webkit-transition: transform 0.5s ease;
+  transition: transform 0.5s ease;
+}
+
+.step-subcard:hover .step-icon {
+  -webkit-transform: scale(1.1) rotate(10deg);
+  transform: scale(1.1) rotate(10deg);
+  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
+}
+
+.step-subcard:hover .step-icon img {
+  -webkit-transform: scale(1.2);
+  transform: scale(1.2);
 }
 
-/* TEXT (opaque, not translucent) */
+/* TEXT */
 .step-subcard h3 {
-  font-size: 1.2rem;
-  color: black; /* crisp white */
-  margin-bottom: 10px;
+  font-size: 1.8rem;
+  color: var(--golden-deep);
+  margin-bottom: 20px;
+  font-weight: 700;
+  -webkit-transition: color 0.3s ease;
+  transition: color 0.3s ease;
 }
 
 .step-subcard p {
-  font-size: 0.95rem;
-  color: #4f4a4a; /* lighter gray-white */
+  color: #333;
+  line-height: 1.8;
+  font-size: 1.1rem;
+}
+
+/* Animations */
+@-webkit-keyframes floatElement {
+  0% { -webkit-transform: translate(0, 0) rotate(0deg); }
+  100% { -webkit-transform: translate(20px, -20px) rotate(10deg); }
+}
+
+@keyframes floatElement {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  100% { transform: translate(20px, -20px) rotate(10deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .steps-wrapper::before,
+  .steps-wrapper::after,
+  .step-subcard,
+  .step-icon,
+  .step-icon img {
+    animation: none;
+    transition: none;
+  }
+}
+
+@media (max-width: 1200px) {
+  .steps-main-card {
+    padding: 60px 40px;
+  }
+  
+  .section-title {
+    font-size: 3rem;
+    margin-bottom: 60px;
+  }
+}
+
+@media (max-width: 768px) {
+  .steps-wrapper {
+    padding: 80px 15px;
+  }
+
+  .steps-main-card {
+    padding: 40px 20px;
+    border-radius: 30px;
+  }
+
+  .section-title {
+    font-size: 2.5rem;
+    margin-bottom: 50px;
+  }
+
+  .steps-subcards {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
 }
diff --git a/templates/index.html b/templates/index.html
index 0ef2995..8465a27 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,105 +1,156 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>{{ _('CropScanAI- Scan your Millet for Ergot') }}</title>
   <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/steps.css') }}">
- 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 </head>
 <body>
-
   {% include 'base.html' %}
 
-
-<section class="hero">
-  <div class="hero-left">
-    <span class="tagline"><i class="fa-solid fa-bolt"></i> {{ _('AI Powered Crop Protection') }}</span>
-    <h1>{{ _('Pearl Millet Ergot') }}<br>{{ _('Disease Detection') }}<br>{{ _('System') }}</h1>
-    <p>
-      {{ _('Advanced AI-powered detection for early identification and treatment of ergot disease in pearl millet crops') }}
-    </p>
-    <div class="hero-buttons">
-      <a href="{{ url_for('identify') }}" class="btn-primary">{{ _('Get Started') }} <i class="fa-solid fa-arrow-right"></i></a>
-      <a href="{{ url_for('about_ergot') }}" class="btn-secondary">{{ _('Learn More') }}</a>
-    </div>
-  </div>
-  <div class="hero-right">
-    <img src="{{ url_for('static', filename='images/pearl.jpg') }}" alt="Pearl Millet">
-  </div>
-</section>
-
-<section class="features-section">
-  <h2>{{ _('Your Complete Crop Protection Toolkit') }}</h2>
-  <p class="features-subtitle">
-    {{ _('Our comprehensive system provides everything you need to detect, diagnose, and treat ergot disease in pearl millet crops.') }}
-  </p>
-
-  <div class="features-grid">
-    <div class="feature-card">
-      <i class="fa-solid fa-camera-retro feature-icon" style="color:#ff9800;"></i>
-      <h3>{{ _('Image Analysis') }}</h3>
-      <p>{{ _('Upload crop images for instant AI-powered disease detection') }}</p>
+  <!-- Hero Section with Parallax Effect -->
+  <section class="hero parallax-section">
+    <div class="hero-overlay"></div>
+    <div class="hero-content">
+      <div class="hero-left" data-aos="fade-right">
+        <span class="tagline">
+          <i class="fa-solid fa-bolt pulse"></i> 
+          {{ _('AI Powered Crop Protection') }}
+        </span>
+        <h1 class="gradient-text">
+          {{ _('Pearl Millet Ergot') }}<br>
+          {{ _('Disease Detection') }}<br>
+          {{ _('System') }}
+        </h1>
+        <p class="hero-description">
+          {{ _('Advanced AI-powered detection for early identification and treatment of ergot disease in pearl millet crops') }}
+        </p>
+        <div class="hero-buttons">
+          <a href="{{ url_for('identify') }}" class="btn-primary glow-effect">
+            {{ _('Get Started') }} 
+            <i class="fa-solid fa-arrow-right"></i>
+          </a>
+          <a href="{{ url_for('about_ergot') }}" class="btn-secondary border-gradient">
+            {{ _('Learn More') }}
+          </a>
+        </div>
+      </div>
+      <div class="hero-right" data-aos="fade-left">
+        <div class="image-container">
+          <img src="{{ url_for('static', filename='images/pearl.jpg') }}" alt="Pearl Millet" class="floating">
+        </div>
+      </div>
     </div>
-
-    <div class="feature-card">
-      <i class="fa-solid fa-notes-medical feature-icon" style="color:#f44336;"></i>
-      <h3>{{ _('Symptom Checker') }}</h3>
-      <p>{{ _('Check symptoms manually for comprehensive diagnosis') }}</p>
+    <div class="scroll-indicator">
+      <div class="mouse"></div>
+      <span>Scroll Down</span>
     </div>
+  </section>
 
-    <div class="feature-card">
-      <i class="fa-solid fa-seedling feature-icon" style="color:#4caf50;"></i>
-      <h3>{{ _('Soil Health Assessment') }}</h3>
-      <p>{{ _('Analyze soil conditions for optimal pearl millet growth') }}</p>
-    </div>
-
-    <div class="feature-card">
-      <i class="fa-solid fa-shield-alt feature-icon" style="color:#3f51b5;"></i>
-      <h3>{{ _('Treatment Recommendations') }}</h3>
-      <p>{{ _('Get personalized treatment plans based on diagnosis') }}</p>
-    </div>
-  </div>
-</section>
+  <!-- Features Section with Card Hover Effects -->
+  <section class="features-section" data-aos="fade-up">
+    <h2 class="section-title gradient-text">{{ _('Your Complete Crop Protection Toolkit') }}</h2>
+    <p class="features-subtitle">
+      {{ _('Our comprehensive system provides everything you need to detect, diagnose, and treat ergot disease in pearl millet crops.') }}
+    </p>
 
-<section class="steps-wrapper">
-  <div class="steps-main-card">
-    <h1 class="section-title">{{ _('How Does it Work') }}</h1>
-    <div class="steps-subcards">
+    <div class="features-grid">
+      <div class="feature-card" data-aos="zoom-in" data-aos-delay="100">
+        <div class="feature-icon-wrapper">
+          <i class="fa-solid fa-camera-retro feature-icon"></i>
+        </div>
+        <h3>{{ _('Image Analysis') }}</h3>
+        <p>{{ _('Upload crop images for instant AI-powered disease detection') }}</p>
+        <div class="card-hover-effect"></div>
+      </div>
 
-      <div class="step-subcard">
-        <div class="step-icon">
-          <img src="{{ url_for('static', filename='images/upload-icon.jpg') }}" alt="Upload">
+      <div class="feature-card" data-aos="zoom-in" data-aos-delay="200">
+        <div class="feature-icon-wrapper">
+          <i class="fa-solid fa-notes-medical feature-icon"></i>
         </div>
-        <h3>{{ _('Step 1: Upload Image') }}</h3>
-        <p>{{ _('Simply upload a clear photo of your millet crop for analysis.') }}</p>
+        <h3>{{ _('Symptom Checker') }}</h3>
+        <p>{{ _('Check symptoms manually for comprehensive diagnosis') }}</p>
+        <div class="card-hover-effect"></div>
       </div>
 
-      <div class="step-subcard">
-        <div class="step-icon">
-          <img src="{{ url_for('static', filename='images/ai-icon.jpg') }}" alt="AI Analysis">
+      <div class="feature-card" data-aos="zoom-in" data-aos-delay="300">
+        <div class="feature-icon-wrapper">
+          <i class="fa-solid fa-seedling feature-icon"></i>
         </div>
-        <h3>{{ _('Step 2: AI Analysis') }}</h3>
-        <p>{{ _('Our advanced AI scans the image for signs of ergot infection.') }}</p>
+        <h3>{{ _('Soil Health Assessment') }}</h3>
+        <p>{{ _('Analyze soil conditions for optimal pearl millet growth') }}</p>
+        <div class="card-hover-effect"></div>
       </div>
 
-      <div class="step-subcard">
-        <div class="step-icon">
-          <img src="{{ url_for('static', filename='images/report-icon.jpg') }}" alt="Report">
+      <div class="feature-card" data-aos="zoom-in" data-aos-delay="400">
+        <div class="feature-icon-wrapper">
+          <i class="fa-solid fa-shield-alt feature-icon"></i>
         </div>
-        <h3>{{ _('Step 3: Get Results') }}</h3>
-        <p>{{ _('Receive instant results with detection confidence percentage.') }}</p>
+        <h3>{{ _('Treatment Recommendations') }}</h3>
+        <p>{{ _('Get personalized treatment plans based on diagnosis') }}</p>
+        <div class="card-hover-effect"></div>
       </div>
+    </div>
+  </section>
 
+  <!-- Steps Section with Timeline Effect -->
+  <section class="steps-wrapper" data-aos="fade-up">
+    <div class="steps-main-card">
+      <h1 class="section-title gradient-text">{{ _('How Does it Work') }}</h1>
+      <div class="steps-timeline">
+        <div class="steps-subcards">
+          <div class="step-subcard" data-aos="fade-right">
+            <div class="step-icon">
+              <img src="{{ url_for('static', filename='images/upload-icon.jpg') }}" alt="Upload">
+              <div class="step-number">1</div>
+            </div>
+            <h3>{{ _('Upload Image') }}</h3>
+            <p>{{ _('Simply upload a clear photo of your millet crop for analysis.') }}</p>
+          </div>
+
+          <div class="step-subcard" data-aos="fade-right" data-aos-delay="200">
+            <div class="step-icon">
+              <img src="{{ url_for('static', filename='images/ai-icon.jpg') }}" alt="AI Analysis">
+              <div class="step-number">2</div>
+            </div>
+            <h3>{{ _('AI Analysis') }}</h3>
+            <p>{{ _('Our advanced AI scans the image for signs of ergot infection.') }}</p>
+          </div>
+
+          <div class="step-subcard" data-aos="fade-right" data-aos-delay="400">
+            <div class="step-icon">
+              <img src="{{ url_for('static', filename='images/report-icon.jpg') }}" alt="Report">
+              <div class="step-number">3</div>
+            </div>
+            <h3>{{ _('Get Results') }}</h3>
+            <p>{{ _('Receive instant results with detection confidence percentage.') }}</p>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
-</section>
-  
-{% include 'footer.html' %}
+  </section>
+
+  {% include 'footer.html' %}
+
+  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+  <script>
+    AOS.init({
+      duration: 1000,
+      once: true,
+      offset: 100
+    });
 
+    // Parallax effect
+    window.addEventListener('scroll', function() {
+      const parallax = document.querySelector('.parallax-section');
+      let scrollPosition = window.pageYOffset;
+      parallax.style.backgroundPositionY = scrollPosition * 0.5 + 'px';
+    });
+  </script>
 </body>
 </html>
\ No newline at end of file