fix(ui): enhance the how it works section layout.

src/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
 import React, { useState, useEffect, useRef } from "react";
 import { Star, Clock, Filter } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -71,7 +71,7 @@
 
 const AcademicHub = () => {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
 
   const featuredProjects = [
     {
@@ -327,7 +327,7 @@
             <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
               {stats.map((stat, index) => (
                 <div key={index} className="text-center">
-                  <div className="text-4xl lg:text-5xl font-bold text-white mb-2 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                  <div className="text-4xl lg:text-5xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                     {stat.number}
                   </div>
                   <div className="text-slate-400 font-medium">{stat.label}</div>

src/app/page.tsx

@@ -132,37 +132,37 @@ export default function BackgroundBoxesDemo() {
       </div>
       {/* 3 Steps Section */}
       <section className="relative z-20 flex flex-col items-center justify-center w-full py-16 bg-transparent">
-        <div className="mb-2 text-center text-sm font-mono text-red-500 tracking-widest">HOW IT WORKS</div>
+        <div className="mb-2 text-center text-sm font-mono text-green-500 tracking-widest">HOW IT WORKS</div>
         <h2 className="text-3xl sm:text-5xl font-bold text-white dark:text-white mb-12 text-center">Just 3 steps to get started</h2>
-        <div className="flex flex-col md:flex-row gap-10 md:gap-20 max-w-5xl mx-auto w-full justify-center items-start">
+        <div className="w-[90%] lg:w-[75%] mx-auto grid grid-col-1 lg:grid-cols-3 gap-10">
           {/* Step 1 */}
-          <div className="flex flex-row items-start gap-4 w-full md:w-1/3">
+          <div className="flex flex-row items-start gap-4 w-full p-4 group hover:bg-gray-50/5 focus-within:bg-gray-50/5 rounded-lg transition-all duration-300">
             <span className="flex items-center justify-center w-16 h-16 rounded-full bg-red-50 text-red-500 text-3xl shrink-0">
               <UploadCloud size={36} />
             </span>
             <div>
               <h3 className="text-lg font-bold text-white dark:text-white mb-1">1. Upload Your Data</h3>
-              <p className="text-gray-600 dark:text-gray-300 text-base">Simply upload your data to our secure platform. We support various file formats and data types to ensure a seamless integration with your existing systems.</p>
+              <p className="text-gray-500 group-hover:text-gray-400 dark:text-gray-300 text-base">Simply upload your data to our secure platform. We support various file formats and data types to ensure a seamless integration with your existing systems.</p>
             </div>
           </div>
           {/* Step 2 */}
-          <div className="flex flex-row items-start gap-4 w-full md:w-1/3">
+          <div className="flex flex-row items-start gap-4 w-full p-4 group hover:bg-gray-50/5 focus-within:bg-gray-50/5 rounded-lg transition-all duration-300">
             <span className="flex items-center justify-center w-16 h-16 rounded-full bg-red-50 text-red-500 text-3xl shrink-0">
               <FileText size={36} />
             </span>
             <div>
               <h3 className="text-lg font-bold text-white dark:text-white mb-1">2. Click Start</h3>
-              <p className="text-gray-600 dark:text-gray-300 text-base">Our advanced AI algorithms automatically process and analyze your data, extracting valuable insights and patterns that would be difficult to identify manually.</p>
+              <p className="text-gray-500 group-hover:text-gray-400 dark:text-gray-300 text-base">Our advanced AI algorithms automatically process and analyze your data, extracting valuable insights and patterns that would be difficult to identify manually.</p>
             </div>
           </div>
           {/* Step 3 */}
-          <div className="flex flex-row items-start gap-4 w-full md:w-1/3">
+          <div className="flex flex-row items-start gap-4 w-full p-4 group hover:bg-gray-50/5 focus-within:bg-gray-50/5 rounded-lg transition-all duration-300">
             <span className="flex items-center justify-center w-16 h-16 rounded-full bg-red-50 text-red-500 text-3xl shrink-0">
               <CreditCard size={36} />
             </span>
             <div>
               <h3 className="text-lg font-bold text-white dark:text-white mb-1">3. Get Actionable Insights</h3>
-              <p className="text-gray-600 dark:text-gray-300 text-base">Receive clear, actionable insights and recommendations based on the AI analysis. Use these insights to make data-driven decisions and improve your business strategies.</p>
+              <p className="text-gray-500 group-hover:text-gray-400 dark:text-gray-300 text-base">Receive clear, actionable insights and recommendations based on the AI analysis. Use these insights to make data-driven decisions and improve your business strategies.</p>
             </div>
           </div>
         </div>