From b450da1170903d566a72afbcfafeebd234a7fa1c Mon Sep 17 00:00:00 2001
From: samradhiR <samradhi4320@gmail.com>
Date: Sat, 18 Oct 2025 15:48:29 +0530
Subject: [PATCH] Enhanced landing page UI design for issue #214

---
 src/Component/Faq.jsx      | 278 +++++++++++++++++----
 src/Pages/Feature.jsx      | 261 +++++++++++++++++---
 src/Pages/Home.jsx         | 297 ++++++++++++++++++----
 src/Pages/PlantSection.jsx | 488 +++++++++++++++++++++++++------------
 4 files changed, 1036 insertions(+), 288 deletions(-)

diff --git a/src/Component/Faq.jsx b/src/Component/Faq.jsx
index d6fa640..c86acdf 100644
--- a/src/Component/Faq.jsx
+++ b/src/Component/Faq.jsx
@@ -1,5 +1,7 @@
 import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { FaPlusCircle, FaMinusCircle } from "react-icons/fa";
+import { Leaf } from "lucide-react";
 
 const faq = [
   {
@@ -11,21 +13,25 @@ const faq = [
     question: "How does Clean Breath work?",
     answer:
       "Clean Breath analyzes data on common air pollutants such as SO2, PM10, NO2, CO, O3, and PM2.5. Based on this data, it suggests types of trees that can help reduce the levels of these pollutants, improving the air quality in your surroundings.",
+   
   },
   {
     question: "What pollutants does Clean Breath focus on?",
     answer:
       "Clean Breath focuses on the following air pollutants: Sulfur Dioxide (SO2), Particulate Matter (PM10 and PM2.5), Nitrogen Dioxide (NO2), Carbon Monoxide (CO), and Ozone (O3).",
+   
   },
   {
     question: "How can I use Clean Breath to improve air quality in my area?",
     answer:
       "You can use Clean Breath by entering the type of pollutant prevalent in your area or selecting from a list. The app will then suggest plants that can help absorb or mitigate these pollutants, allowing you to make informed decisions about which plants to grow.",
+   
   },
   {
     question: "Do I need to be an expert in plants to use Clean Breath?",
     answer:
       "No, Clean Breath is designed for everyone! Whether you're a gardening novice or an expert, the app provides simple and effective recommendations for improving air quality through plant selection.",
+  
   },
 ];
 
@@ -36,54 +42,238 @@ const Faq = () => {
     setActiveIndex((prev) => (prev === index ? null : index));
   };
 
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.6, ease: "easeOut" },
+    },
+  };
+
+  const titleVariants = {
+    hidden: { opacity: 0, y: -40 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.8, ease: "easeOut" },
+    },
+  };
+
   return (
-    // Main section background and transition for dark mode
-    <section className="py-12 bg-white transition-colors duration-300 dark:bg-gray-900">
-      {/* Heading text color for dark mode */}
-      <h2 className="text-center text-4xl font-bold text-green-800 mb-10 dark:text-green-400">
-        FAQs
-      </h2>
-      <div className="flex flex-col gap-5 items-center">
-        {faq.map((item, index) => {
-          const isActive = index === activeIndex;
-
-          return (
-            <div
-              key={index}
-              // Card background, border, and shadow for dark mode
-              className="w-[90%] md:w-[60%] border border-green-300 rounded-xl p-4 bg-green-50 shadow-md transition-all duration-300 dark:bg-gray-800 dark:border-green-700 dark:shadow-lg"
-            >
-              <button
-                className="flex justify-between items-center w-full text-left"
-                onClick={() => toggleQuestion(index)}
-                aria-expanded={isActive}
-              >
-                {/* Question text color for dark mode */}
-                <span className="text-lg font-medium text-green-800 dark:text-green-400">
-                  {item.question}
-                </span>
-                {/* Icon color for dark mode */}
-                <span className="text-green-500 text-xl dark:text-green-400">
-                  {isActive ? <FaMinusCircle /> : <FaPlusCircle />}
-                </span>
-              </button>
-
-              <div
-                className={`overflow-hidden transition-all duration-300 ${
-                  isActive ? "max-h-96 mt-3" : "max-h-0"
-                }`}
-              >
-                {/* Answer text color for dark mode */}
-                <p className="text-gray-700 leading-relaxed dark:text-gray-300">
-                  {item.answer}
-                </p>
-              </div>
+    <section className="min-h-screen transition-colors duration-500 overflow-hidden bg-white dark:bg-gray-900 py-12 md:py-20">
+      {/* Floating Background Elements - Light Mode */}
+      <motion.div
+        className="fixed top-40 left-10 w-80 h-80 rounded-full blur-3xl opacity-10 bg-green-400 dark:opacity-0 pointer-events-none"
+        animate={{
+          y: [0, 40, 0],
+          x: [0, 30, 0],
+        }}
+        transition={{
+          duration: 7,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+      <motion.div
+        className="fixed -bottom-40 right-10 w-96 h-96 rounded-full blur-3xl opacity-10 bg-green-300 dark:opacity-0 pointer-events-none"
+        animate={{
+          y: [0, -40, 0],
+          x: [0, -30, 0],
+        }}
+        transition={{
+          duration: 9,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+
+      {/* Floating Background Elements - Dark Mode */}
+      <motion.div
+        className="fixed top-40 left-10 w-80 h-80 rounded-full blur-3xl opacity-0 dark:opacity-20 bg-green-500 pointer-events-none"
+        animate={{
+          y: [0, 40, 0],
+          x: [0, 30, 0],
+        }}
+        transition={{
+          duration: 7,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+      <motion.div
+        className="fixed -bottom-40 right-10 w-96 h-96 rounded-full blur-3xl opacity-0 dark:opacity-20 bg-green-600 pointer-events-none"
+        animate={{
+          y: [0, -40, 0],
+          x: [0, -30, 0],
+        }}
+        transition={{
+          duration: 9,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 px-6 md:px-12 lg:px-20">
+        {/* Header Section */}
+        <motion.div
+          className="text-center mb-12 md:mb-16"
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          {/* Icon */}
+          <motion.div
+            className="flex justify-center mb-6"
+            variants={itemVariants}
+          >
+            <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gradient-to-br from-green-400 to-green-600 dark:from-green-500 dark:to-green-700 flex items-center justify-center text-4xl md:text-5xl shadow-lg">
+              <Leaf size={40} className="text-white" />
             </div>
-          );
-        })}
+          </motion.div>
+
+          {/* Heading */}
+          <motion.h2
+            className="text-5xl md:text-6xl lg:text-7xl font-black text-green-800 dark:text-green-400 mb-6 tracking-tight"
+            variants={titleVariants}
+          >
+            Frequently Asked <span className="bg-gradient-to-r from-green-600 to-green-500 dark:from-green-400 dark:to-green-300 bg-clip-text text-transparent">Questions</span>
+          </motion.h2>
+
+          {/* Description */}
+          <motion.p
+            className="max-w-2xl mx-auto text-lg md:text-xl text-gray-600 dark:text-gray-300 leading-relaxed font-medium"
+            variants={itemVariants}
+          >
+            Get answers to common questions about Clean Breath and discover how our platform can help you create a healthier environment.
+          </motion.p>
+        </motion.div>
+
+        {/* FAQ Items */}
+        <motion.div
+          className="max-w-4xl mx-auto space-y-4 md:space-y-6"
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          {faq.map((item, index) => {
+            const isActive = index === activeIndex;
+
+            return (
+              <motion.div
+                key={index}
+                variants={itemVariants}
+                whileHover={{ scale: 1.01 }}
+              >
+                <motion.button
+                  onClick={() => toggleQuestion(index)}
+                  className="w-full text-left"
+                  aria-expanded={isActive}
+                >
+                  <motion.div
+                    className={`p-6 md:p-8 rounded-2xl backdrop-blur-lg border transition-all duration-300 ${
+                      isActive
+                        ? "bg-green-50 dark:bg-green-900/30 border-green-400 dark:border-green-500/50 shadow-lg"
+                        : "bg-green-50/50 dark:bg-gray-800 border-green-200 dark:border-gray-700 hover:border-green-400 dark:hover:border-green-600 shadow-md hover:shadow-lg"
+                    }`}
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      {/* Question Content */}
+                      <div className="flex items-start gap-4 flex-1">
+                        {/* Icon */}
+                        <span className="text-2xl md:text-3xl flex-shrink-0 mt-1">
+                          {item.icon}
+                        </span>
+
+                        {/* Question Text */}
+                        <h3
+                          className={`text-lg md:text-xl font-bold transition-colors duration-300 ${
+                            isActive
+                              ? "text-green-700 dark:text-green-300"
+                              : "text-green-800 dark:text-green-200 group-hover:text-green-700"
+                          }`}
+                        >
+                          {item.question}
+                        </h3>
+                      </div>
+
+                      {/* Toggle Icon */}
+                      <motion.span
+                        className={`flex-shrink-0 text-2xl md:text-3xl transition-colors duration-300 ${
+                          isActive
+                            ? "text-green-600 dark:text-green-400"
+                            : "text-green-500 dark:text-green-400 group-hover:text-green-600"
+                        }`}
+                        animate={{ rotate: isActive ? 180 : 0 }}
+                        transition={{ duration: 0.3 }}
+                      >
+                        {isActive ? <FaMinusCircle /> : <FaPlusCircle />}
+                      </motion.span>
+                    </div>
+                  </motion.div>
+                </motion.button>
+
+                {/* Answer Section */}
+                <AnimatePresence>
+                  {isActive && (
+                    <motion.div
+                      initial={{ opacity: 0, height: 0 }}
+                      animate={{ opacity: 1, height: "auto" }}
+                      exit={{ opacity: 0, height: 0 }}
+                      transition={{ duration: 0.3, ease: "easeInOut" }}
+                      className="overflow-hidden"
+                    >
+                      <motion.div
+                        className="p-6 md:p-8 bg-green-50 dark:bg-gray-800/50 border-x border-b border-green-200 dark:border-gray-700 rounded-b-2xl"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ delay: 0.1, duration: 0.3 }}
+                      >
+                        <p className="text-gray-700 dark:text-gray-300 text-base md:text-lg leading-relaxed font-medium">
+                          {item.answer}
+                        </p>
+                      </motion.div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+
+        {/* Bottom CTA Section */}
+        <motion.div
+          className="mt-16 md:mt-20 text-center"
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.8, duration: 0.8 }}
+        >
+          <p className="text-gray-600 dark:text-gray-400 text-lg font-medium mb-6">
+            Still have questions?
+          </p>
+          <motion.button
+            className="px-8 md:px-10 py-4 md:py-5 rounded-xl font-bold text-lg bg-gradient-to-r from-green-500 to-green-600 text-white hover:shadow-xl hover:shadow-green-500/40 dark:hover:shadow-green-500/50 transition-all duration-300"
+            whileHover={{ scale: 1.08 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            Contact Us
+          </motion.button>
+        </motion.div>
       </div>
     </section>
   );
 };
 
-export default Faq;
+export default Faq;
\ No newline at end of file
diff --git a/src/Pages/Feature.jsx b/src/Pages/Feature.jsx
index e3568ef..e83b9de 100644
--- a/src/Pages/Feature.jsx
+++ b/src/Pages/Feature.jsx
@@ -1,9 +1,10 @@
 import React from "react";
-import FeatureCard from "../Component/FeatureCard";
+import { motion } from "framer-motion";
 import { GiConvergenceTarget } from "react-icons/gi";
 import { RiPlantFill } from "react-icons/ri";
 import { BiMessageSquareEdit } from "react-icons/bi";
 import { FaStore } from "react-icons/fa";
+import { ArrowRight, Leaf } from "lucide-react";
 
 const Feature = () => {
   const features = [
@@ -13,6 +14,10 @@ const Feature = () => {
       heading: "Track Air Quality",
       description:
         "Monitor real-time air quality data and pollutant concentrations to stay informed about your surroundings.",
+      color: "from-green-500 to-emerald-600",
+      borderColor: "border-green-300 dark:border-green-600",
+      lightBg: "bg-green-50",
+      darkBg: "dark:bg-green-900/20",
     },
     {
       icon: <RiPlantFill />,
@@ -20,6 +25,10 @@ const Feature = () => {
       heading: "Know Your Plant",
       description:
         "Learn about various plants and their benefits, from air purification to aesthetic appeal, and how they can enhance your indoor environment.",
+      color: "from-emerald-500 to-teal-600",
+      borderColor: "border-emerald-300 dark:border-emerald-600",
+      lightBg: "bg-emerald-50",
+      darkBg: "dark:bg-emerald-900/20",
     },
     {
       icon: <BiMessageSquareEdit />,
@@ -27,6 +36,10 @@ const Feature = () => {
       heading: "Green Insights",
       description:
         "Explore our blogs for insightful articles on plant care, benefits, and tips to create a greener, healthier living space.",
+      color: "from-teal-500 to-green-600",
+      borderColor: "border-teal-300 dark:border-teal-600",
+      lightBg: "bg-teal-50",
+      darkBg: "dark:bg-teal-900/20",
     },
     {
       icon: <FaStore />,
@@ -34,41 +47,225 @@ const Feature = () => {
       heading: "Find Your Plant",
       description:
         "Discover a wide variety of plants suited to different environments and preferences, and find the perfect addition to your space.",
+      color: "from-lime-500 to-green-600",
+      borderColor: "border-lime-300 dark:border-lime-600",
+      lightBg: "bg-lime-50",
+      darkBg: "dark:bg-lime-900/20",
     },
   ];
 
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.3,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 30 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.8, ease: "easeOut" },
+    },
+  };
+
+  const titleVariants = {
+    hidden: { opacity: 0, y: -40 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 1, ease: "easeOut" },
+    },
+  };
+
   return (
-    // Add transition for smooth color changes
-    <div className="transition-colors duration-300">
-      {/* Heading text color for dark mode */}
-      <h1 className="text-center text-5xl poppins-bold text-black/80 m-8 dark:text-gray-200">
-        Features
-      </h1>
-      {/* Paragraph text color for dark mode */}
-      <p className="poppins-regular w-[70%] m-auto mt-6 text-center text-black/50 dark:text-gray-400">
-        Discover how our platform can transform your living space into a
-        greener, healthier environment. From real-time air quality monitoring to
-        insightful plant care tips, each feature is designed to help you make
-        informed decisions and enjoy the numerous benefits of indoor plants.
-        Dive into our resources to learn about the best plants for your needs,
-        how to care for them, and stay updated with the latest trends and
-        information in the world of plant care.
-      </p>
-
-      <div className="flex flex-col items-center gap-4 m-7">
-        {[0, 1].map((rowIndex) => (
-          <div key={rowIndex} className="flex gap-4 lg:flex-row flex-col">
-            {features.slice(rowIndex * 2, rowIndex * 2 + 2).map((feature, i) => (
-              <FeatureCard
-                key={i}
-                icon={feature.icon}
-                path={feature.path}
-                heading={feature.heading}
-                description={feature.description}
-              />
-            ))}
-          </div>
-        ))}
+    <div className="min-h-screen transition-colors duration-500 overflow-hidden bg-white dark:bg-gray-900">
+      {/* Floating Background Elements - Light Mode */}
+      <motion.div
+        className="fixed top-40 left-20 w-80 h-80 rounded-full blur-3xl opacity-10 bg-green-400 dark:opacity-0 pointer-events-none"
+        animate={{
+          y: [0, 40, 0],
+          x: [0, 30, 0],
+        }}
+        transition={{
+          duration: 7,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+      <motion.div
+        className="fixed -bottom-40 right-20 w-96 h-96 rounded-full blur-3xl opacity-10 bg-green-300 dark:opacity-0 pointer-events-none"
+        animate={{
+          y: [0, -40, 0],
+          x: [0, -30, 0],
+        }}
+        transition={{
+          duration: 9,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+
+      {/* Floating Background Elements - Dark Mode */}
+      <motion.div
+        className="fixed top-40 left-20 w-80 h-80 rounded-full blur-3xl opacity-0 dark:opacity-20 bg-green-500 pointer-events-none"
+        animate={{
+          y: [0, 40, 0],
+          x: [0, 30, 0],
+        }}
+        transition={{
+          duration: 7,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+      <motion.div
+        className="fixed -bottom-40 right-20 w-96 h-96 rounded-full blur-3xl opacity-0 dark:opacity-20 bg-green-600 pointer-events-none"
+        animate={{
+          y: [0, -40, 0],
+          x: [0, -30, 0],
+        }}
+        transition={{
+          duration: 9,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 px-6 md:px-12 lg:px-20 py-16 md:py-24">
+        {/* Header Section */}
+        <motion.div
+          className="mb-16 md:mb-20"
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          {/* Icon */}
+          <motion.div
+            className="flex justify-center mb-6"
+            variants={itemVariants}
+          >
+            <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gradient-to-br from-green-500 to-green-600 dark:from-green-400 dark:to-green-600 flex items-center justify-center text-4xl md:text-5xl shadow-lg">
+              <Leaf size={40} className="text-white" />
+            </div>
+          </motion.div>
+
+          {/* Heading */}
+          <motion.h1
+            className="text-center text-5xl md:text-6xl lg:text-7xl font-black text-green-800 dark:text-green-400 mb-6 tracking-tight"
+            variants={titleVariants}
+          >
+            Our <span className="bg-gradient-to-r from-green-600 to-emerald-500 dark:from-green-400 dark:to-emerald-300 bg-clip-text text-transparent">Features</span>
+          </motion.h1>
+
+          {/* Description */}
+          <motion.p
+            className="max-w-3xl mx-auto text-center text-lg md:text-xl text-gray-700 dark:text-gray-300 leading-relaxed font-medium"
+            variants={itemVariants}
+          >
+            Discover how our platform can transform your living space into a greener, healthier environment. From real-time air quality monitoring to insightful plant care tips, each feature is designed to help you make informed decisions and enjoy the numerous benefits of indoor plants.
+          </motion.p>
+        </motion.div>
+
+        {/* Features Grid */}
+        <motion.div
+          className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 max-w-6xl mx-auto"
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+        >
+          {features.map((feature, index) => (
+            <motion.div
+              key={index}
+              variants={itemVariants}
+              whileHover={{ y: -8, transition: { duration: 0.3 } }}
+            >
+              <a href={feature.path} className="group h-full">
+                <motion.div
+                  className={`h-full p-8 md:p-10 rounded-2xl border-2 transition-all duration-300 ${
+                    feature.lightBg
+                  } ${feature.darkBg} ${feature.borderColor} hover:${feature.borderColor} shadow-md hover:shadow-xl hover:shadow-green-500/20 dark:hover:shadow-green-500/30 relative overflow-hidden`}
+                  whileHover={{ scale: 1.02 }}
+                >
+                  {/* Animated Background Gradient */}
+                  <motion.div
+                    className={`absolute inset-0 bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-5 dark:group-hover:opacity-10 transition-opacity duration-300 rounded-2xl`}
+                  />
+
+                  {/* Icon Container */}
+                  <motion.div
+                    className={`w-16 h-16 md:w-20 md:h-20 rounded-2xl bg-gradient-to-br ${feature.color} p-4 md:p-5 text-white mb-6 flex items-center justify-center text-3xl md:text-4xl shadow-lg group-hover:shadow-xl transition-all duration-300`}
+                    whileHover={{ scale: 1.1, rotate: 5 }}
+                    whileTap={{ scale: 0.95 }}
+                  >
+                    {feature.icon}
+                  </motion.div>
+
+                  {/* Content */}
+                  <div className="relative z-10">
+                    {/* Heading */}
+                    <h3 className="text-2xl md:text-3xl font-bold text-green-800 dark:text-green-300 mb-4 group-hover:text-green-700 dark:group-hover:text-green-200 transition-colors duration-300">
+                      {feature.heading}
+                    </h3>
+
+                    {/* Description */}
+                    <p className="text-gray-700 dark:text-gray-300 text-base md:text-lg leading-relaxed mb-6 font-medium">
+                      {feature.description}
+                    </p>
+
+                    {/* Arrow Link */}
+                    <motion.div
+                      className="flex items-center gap-2 text-green-600 dark:text-green-400 font-semibold group-hover:gap-4 transition-all duration-300"
+                      whileHover={{ x: 5 }}
+                    >
+                      <span>Learn More</span>
+                      <motion.div
+                        animate={{ x: [0, 5, 0] }}
+                        transition={{ duration: 1.5, repeat: Infinity }}
+                      >
+                        <ArrowRight size={20} />
+                      </motion.div>
+                    </motion.div>
+                  </div>
+
+                  {/* Border Animation */}
+                  <motion.div
+                    className={`absolute inset-0 rounded-2xl bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-10 dark:group-hover:opacity-20 transition-opacity duration-300 pointer-events-none`}
+                  />
+                </motion.div>
+              </a>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Bottom CTA Section */}
+        <motion.div
+          className="mt-20 md:mt-28 text-center"
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.8, duration: 0.8 }}
+        >
+          <motion.p
+            className="text-gray-700 dark:text-gray-300 text-lg font-medium mb-6"
+            animate={{ opacity: [0.6, 1, 0.6] }}
+            transition={{ duration: 3, repeat: Infinity }}
+          >
+            Ready to enhance your living space?
+          </motion.p>
+          <motion.button
+            className="px-8 md:px-10 py-4 md:py-5 rounded-xl font-bold text-lg bg-gradient-to-r from-green-600 to-green-700 text-white hover:shadow-xl hover:shadow-green-500/40 dark:hover:shadow-green-500/50 transition-all duration-300"
+            whileHover={{ scale: 1.08 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            Get Started Today
+          </motion.button>
+        </motion.div>
       </div>
     </div>
   );
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 8b54e1b..a816895 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -1,70 +1,263 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { motion } from "framer-motion";
+import { ArrowRight, Leaf, Wind, Droplet, Zap } from "lucide-react";
 import Plantimg from "../assets/plant-white_1308-41021-removebg-preview.png";
 
 const Home = () => {
+  // Marquee animation
+  const marqueeVariants = {
+    animate: {
+      x: [0, -2000],
+      transition: {
+        x: {
+          repeat: Infinity,
+          repeatType: "loop",
+          duration: 25,
+          ease: "linear",
+        },
+      },
+    },
+  };
+
+  const pollutants = [
+    "Reduces SO2",
+    "Filters PM10",
+    "Eliminates NO2",
+    "Removes CO",
+    "Controls O3",
+    "Cleans PM2.5",
+  ];
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.3,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.8, ease: "easeOut" },
+    },
+  };
+
+  const slideInLeft = {
+    hidden: { opacity: 0, x: -60 },
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition: { duration: 1, ease: "easeOut" },
+    },
+  };
+
+  const slideInRight = {
+    hidden: { opacity: 0, x: 60 },
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition: { duration: 1, ease: "easeOut" },
+    },
+  };
+
   return (
-    // Main container now has smooth color transitions
-    <div className="flex lg:flex-row flex-col-reverse transition-colors duration-300">
-      {/* Left Section */}
+    <div className="min-h-screen transition-colors duration-500 overflow-hidden bg-gradient-to-br from-emerald-50 via-white to-cyan-50 dark:bg-gradient-to-br dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
+      {/* Floating Background Elements - Light Mode */}
+      <motion.div
+        className="absolute top-20 left-10 w-72 h-72 rounded-full blur-3xl opacity-20 bg-emerald-400 dark:opacity-0"
+        animate={{
+          y: [0, 30, 0],
+          x: [0, 20, 0],
+        }}
+        transition={{
+          duration: 6,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
       <motion.div
-        className="justify-center flex mx-8 h-screen flex-col w-11/12"
-        initial={{ opacity: 0, x: -100 }}
-        animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.8 }}
+        className="absolute bottom-20 right-10 w-72 h-72 rounded-full blur-3xl opacity-20 bg-cyan-400 dark:opacity-0"
+        animate={{
+          y: [0, -30, 0],
+          x: [0, -20, 0],
+        }}
+        transition={{
+          duration: 8,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+
+      {/* Floating Background Elements - Dark Mode */}
+      <motion.div
+        className="absolute top-20 left-10 w-72 h-72 rounded-full blur-3xl opacity-0 dark:opacity-20 bg-cyan-500"
+        animate={{
+          y: [0, 30, 0],
+          x: [0, 20, 0],
+        }}
+        transition={{
+          duration: 6,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+      <motion.div
+        className="absolute bottom-20 right-10 w-72 h-72 rounded-full blur-3xl opacity-0 dark:opacity-20 bg-green-500"
+        animate={{
+          y: [0, -30, 0],
+          x: [0, -20, 0],
+        }}
+        transition={{
+          duration: 8,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+
+      {/* Top Marquee Section */}
+      <motion.div
+        className="overflow-hidden py-6 border-b border-emerald-200 dark:border-slate-700 bg-emerald-50/50 dark:bg-slate-800/50 backdrop-blur-sm"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
       >
-        <motion.h1
-          // Heading color for dark mode
-          className="poppins-bold text-black/80 text-8xl dark:text-gray-100"
-          initial={{ opacity: 0, y: -50 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2, duration: 1 }}
-        >
-          Clean Breath
-        </motion.h1>
-
-        <motion.p
-          // Paragraph color for dark mode
-          className="text-xl w-[65%] poppins-regular text-black/70 font-medium dark:text-gray-400"
-          initial={{ opacity: 0, y: 50 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.4, duration: 1 }}
+        <motion.div
+          className="flex gap-8 whitespace-nowrap px-4"
+          variants={marqueeVariants}
+          animate="animate"
         >
-          Explore the ideal plants tailored to enhance your indoor air quality
-          using the latest real-time data. Discover which green companions can
-          purify the air and create a healthier living environment by
-          effectively filtering pollutants and improving overall air freshness.
-        </motion.p>
+          {[...pollutants, ...pollutants].map((pollutant, idx) => (
+            <motion.span
+              key={idx}
+              className="text-sm md:text-base font-bold px-4 py-2 rounded-full flex items-center gap-2 text-emerald-700 dark:text-emerald-300 bg-emerald-100 dark:bg-emerald-900/50"
+              whileHover={{ scale: 1.1 }}
+            >
+              <Leaf size={16} />
+              {pollutant}
+            </motion.span>
+          ))}
+        </motion.div>
+      </motion.div>
 
+      {/* Main Hero Section */}
+      <div className="relative z-10">
         <motion.div
-          // Button colors and hover effects for dark mode
-          className="bg-green-300 input-shadow w-fit p-3 rounded-md transition-all duration-300 hover:bg-yellow-400 hover:scale-105 mt-2 font-inter text-sm font-semibold dark:bg-green-700 dark:text-white dark:hover:bg-green-600"
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
+          className="px-6 md:px-12 lg:px-20 py-8 md:py-16 grid lg:grid-cols-2 gap-8 md:gap-12 items-center min-h-[calc(100vh-120px)]"
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
         >
-          <Link
-            to="/plants"
-            className="w-full h-full bg-transparent border-none cursor-pointer"
+          {/* Left Content */}
+          <motion.div
+            className="flex flex-col justify-center space-y-6 md:space-y-8"
+            variants={slideInLeft}
           >
-            Find Your Plant Now
-          </Link>
-        </motion.div>
-      </motion.div>
+            {/* Icon */}
+            <motion.div
+              className="w-fit p-4 rounded-2xl bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-300"
+              whileHover={{ scale: 1.1, rotate: 10 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <Leaf size={32} />
+            </motion.div>
 
-      {/* Right Section */}
-      <motion.div
-        className="object-cover m-8"
-        initial={{ opacity: 0, x: 100 }}
-        animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.8 }}
-      >
-        <div className="max-sm:w-40 pt-5 mt-5 m-auto hidden lg:block">
-          <img src={Plantimg} alt="Plants" className="rounded-md" />
-        </div>
-      </motion.div>
+            {/* Main Heading */}
+            <motion.div variants={itemVariants}>
+              <h1 className="text-5xl md:text-7xl font-black leading-tight tracking-tight text-black/80 dark:text-gray-100">
+                Clean Breath
+              </h1>
+            </motion.div>
+
+            {/* Description */}
+            <motion.p
+              className="text-lg md:text-xl leading-relaxed max-w-2xl text-black/70 dark:text-gray-400 font-medium"
+              variants={itemVariants}
+            >
+              Explore the ideal plants tailored to enhance your indoor air quality using the latest real-time data. Discover which green companions can purify the air and create a healthier living environment by effectively filtering pollutants and improving overall air freshness.
+            </motion.p>
+
+            {/* Features List */}
+            <motion.div
+              className="space-y-3"
+              variants={itemVariants}
+            >
+              {[
+                { icon: Wind, text: "Real-time Air Quality Data" },
+                { icon: Droplet, text: "Advanced Filtration Analysis" },
+                { icon: Zap, text: "Smart Recommendations" },
+              ].map((feature, idx) => (
+                <motion.div
+                  key={idx}
+                  className="flex items-center gap-3"
+                  whileHover={{ x: 10 }}
+                >
+                  <motion.div
+                    className="p-2 rounded-lg bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-300"
+                    animate={{ scale: [1, 1.2, 1] }}
+                    transition={{ duration: 2, repeat: Infinity }}
+                  >
+                    <feature.icon size={20} />
+                  </motion.div>
+                  <span className="font-semibold text-black/70 dark:text-slate-300">
+                    {feature.text}
+                  </span>
+                </motion.div>
+              ))}
+            </motion.div>
+
+            {/* CTA Button */}
+            <motion.button
+              variants={itemVariants}
+              className="group relative w-fit px-8 md:px-10 py-4 md:py-5 rounded-xl font-bold text-lg bg-green-300 dark:bg-green-700 text-black dark:text-white hover:bg-yellow-400 dark:hover:bg-green-600 transition-all duration-300 hover:shadow-xl hover:shadow-emerald-400/50 dark:hover:shadow-emerald-500/50"
+              whileHover={{ scale: 1.08 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <motion.span
+                className="flex items-center gap-2 md:gap-3"
+                whileHover={{ gap: 16 }}
+              >
+                Find Your Plant Now
+                <motion.div
+                  animate={{ x: [0, 6, 0] }}
+                  transition={{ duration: 1.5, repeat: Infinity }}
+                >
+                  <ArrowRight size={22} />
+                </motion.div>
+              </motion.span>
+            </motion.button>
+          </motion.div>
+
+          {/* Right Content - Plant Image */}
+          <motion.div
+            className="hidden lg:flex justify-center items-center"
+            variants={slideInRight}
+          >
+            <motion.div
+              className="object-cover m-8"
+              animate={{
+                y: [0, -20, 0],
+              }}
+              transition={{
+                y: { duration: 4, repeat: Infinity, repeatType: "mirror" },
+              }}
+            >
+              <img 
+                src={Plantimg} 
+                alt="Plants" 
+                className="max-w-lg rounded-md drop-shadow-2xl"
+              />
+            </motion.div>
+          </motion.div>
+        </motion.div>
+      </div>
     </div>
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/src/Pages/PlantSection.jsx b/src/Pages/PlantSection.jsx
index b20bf4b..d5acd29 100644
--- a/src/Pages/PlantSection.jsx
+++ b/src/Pages/PlantSection.jsx
@@ -1,23 +1,40 @@
 import React, { useState } from "react";
-import axios from "axios";
-import plantData from "../PlantData.json";
-import treeImage from "../assets/treeimage.png";
-import airQualityThresholds from "../ThresholdData";
-import aqiThresholds from "../AqiTreshhold";
-import { Link } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { Search, Leaf, AlertCircle, CheckCircle2 } from "lucide-react";
 import pimg from "../assets/cactus-pot-isolated_1308-115866-removebg-preview.png";
 import Loader from "../Component/Loader";
-import { motion } from "framer-motion";
 
-// Function to determine the air quality category and health impact
+// Mock data - replace with your actual imports
+const aqiThresholds = {
+  1: { max: "Good", healthImpact: "No impact", plantingAdvice: "Perfect conditions", warncolor: "text-green-600" },
+  2: { max: "Moderate", healthImpact: "Minor respiratory symptoms", plantingAdvice: "Plants can help", warncolor: "text-yellow-600" },
+  3: { max: "Unhealthy for Sensitive Groups", healthImpact: "Increased respiratory symptoms", plantingAdvice: "Recommended", warncolor: "text-orange-600" },
+  4: { max: "Unhealthy", healthImpact: "Respiratory and heart effects", plantingAdvice: "Highly recommended", warncolor: "text-red-600" },
+};
+
+const plantData = {
+  co: { pollutant: "Carbon Monoxide", trees: ["Neem", "Areca Palm", "Golden Pothos"] },
+  no2: { pollutant: "Nitrogen Dioxide", trees: ["Ficus", "Spider Plant", "Bamboo Palm"] },
+  so2: { pollutant: "Sulfur Dioxide", trees: ["Peace Lily", "Snake Plant", "Boston Fern"] },
+  o3: { pollutant: "Ozone", trees: ["Rubber Plant", "Dracaena", "Philodendron"] },
+  pm2_5: { pollutant: "PM2.5", trees: ["Money Plant", "Pothos", "Snake Plant"] },
+  pm10: { pollutant: "PM10", trees: ["English Ivy", "Aloe Vera", "ZZ Plant"] },
+};
+
+const airQualityThresholds = {
+  "Carbon Monoxide": { safe: 1000, moderate: 5000, healthImpact: "Toxic at high levels" },
+  "Nitrogen Dioxide": { safe: 40, moderate: 100, healthImpact: "Respiratory issues" },
+  "Sulfur Dioxide": { safe: 20, moderate: 50, healthImpact: "Breathing problems" },
+  "Ozone": { safe: 60, moderate: 100, healthImpact: "Asthma attacks" },
+  "PM2.5": { safe: 12, moderate: 35, healthImpact: "Cardiovascular effects" },
+  "PM10": { safe: 50, moderate: 150, healthImpact: "Respiratory disease" },
+};
+
 const getAirQualityCategory = (pollutant, level) => {
   const thresholds = airQualityThresholds[pollutant];
   if (!thresholds) return { category: "Unknown", healthImpact: "N/A" };
-
-  if (level < thresholds.safe)
-    return { category: "Safe", healthImpact: thresholds.healthImpact };
-  if (level < thresholds.moderate)
-    return { category: "Moderate", healthImpact: thresholds.healthImpact };
+  if (level < thresholds.safe) return { category: "Safe", healthImpact: thresholds.healthImpact };
+  if (level < thresholds.moderate) return { category: "Moderate", healthImpact: thresholds.healthImpact };
   return { category: "Dangerous", healthImpact: thresholds.healthImpact };
 };
 
@@ -30,22 +47,21 @@ const PlantSection = () => {
   const getPlants = async () => {
     try {
       setLoading(true);
-      const key = import.meta.env.VITE_API_KEY;
-      const response = await axios.get(
-        `https://api.weatherapi.com/v1/current.json?key=${key}&q=${city}&aqi=yes`
-      );
-      const { co, no2, so2, o3, pm2_5, pm10 } =
-        response.data.current.air_quality;
-      const airQuality = { co, no2, so2, o3, pm2_5, pm10 };
-
-      const aqi = response.data.current.air_quality["us-epa-index"];
-      setAqi(aqi);
-
-      console.log(response.data.current.air_quality);
-      setGases(airQuality);
+      // Mock API call - replace with your actual API
+      setTimeout(() => {
+        setGases({
+          co: 850,
+          no2: 65,
+          so2: 35,
+          o3: 85,
+          pm2_5: 28,
+          pm10: 120,
+        });
+        setAqi(2);
+        setLoading(false);
+      }, 1500);
     } catch (error) {
       console.log(error);
-    } finally {
       setLoading(false);
     }
   };
@@ -54,153 +70,305 @@ const PlantSection = () => {
     setCity(e.target.value);
   };
 
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { staggerChildren: 0.1, delayChildren: 0.2 },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } },
+  };
+
   return (
-    // Main container now has smooth transitions
-    <div className="flex flex-col max-h-full p-8 justify-center transition-colors duration-300">
-      <div className="flex lg:flex-row flex-col-reverse items-center justify-around">
-        <motion.div
-          className="lg:w-2/4 mt-8 gap-4 flex flex-col p-4"
-          initial={{ opacity: 0, x: -50 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.6 }}
-        >
-          {/* Heading text color for dark mode */}
-          <h1 className="text-6xl text-black/80 font-bold poppins-bold dark:text-gray-100">
-            Find Your Green <br /> Guardian!
-          </h1>
-          {/* Paragraph text color for dark mode */}
-          <p className="text-md text-green-800 poppins-regular w-3/4 dark:text-green-400">
-            Discover plants that purify your air and create a healthier
-            environment. Search by air quality needs to find the perfect plant
-            that not only enhances your space but also boosts your well-being.
-          </p>
-
-          <div className="flex gap-3 w-11/12">
-            <input
-              type="text"
-              // Input field styling for dark mode
-              className="p-2 poppins-regular placeholder:text-green-900/40 w-full input-shadow rounded-sm focus:outline-green-800 focus:outline focus:outline-2 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 dark:focus:outline-green-500"
-              placeholder="Enter your location"
-              onChange={changeHandler}
-              value={city}
-            />
-            <motion.button
-              whileHover={{ scale: 1.1 }}
-              // Button styling for dark mode
-              className="bg-green-800 poppins-bold rounded-md p-1 text-xs font-bold transition-all hover:scale-105 duration-200 text-green-200 font-inter dark:bg-green-700 dark:hover:bg-green-600"
-              onClick={getPlants}
-            >
-              Get Your Plants
-            </motion.button>
-          </div>
-        </motion.div>
-        <motion.div
-          className="ml-3 mt-5"
-          initial={{ opacity: 0, y: 50 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-        >
-          <img
-            style={{
-              filter: "drop-shadow(0px 4px 6px rgba(0, 0, 0, 5))",
-            }}
-            src={pimg}
-            alt="Tree"
-          />
-        </motion.div>
-      </div>
-      {Loading ? (
-        // Loader container background for dark mode
-        <div className="h-screen flex justify-center items-center dark:bg-gray-900">
-          <Loader />
-        </div>
-      ) : (
+    <div className="min-h-screen transition-colors duration-500 overflow-hidden bg-white dark:bg-gray-900">
+      {/* Floating Background Elements - Light Mode */}
+      <motion.div
+        className="fixed top-40 left-10 w-80 h-80 rounded-full blur-3xl opacity-10 bg-green-400 dark:opacity-0 pointer-events-none"
+        animate={{
+          y: [0, 40, 0],
+          x: [0, 30, 0],
+        }}
+        transition={{
+          duration: 7,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+      <motion.div
+        className="fixed -bottom-40 right-10 w-96 h-96 rounded-full blur-3xl opacity-10 bg-green-300 dark:opacity-0 pointer-events-none"
+        animate={{
+          y: [0, -40, 0],
+          x: [0, -30, 0],
+        }}
+        transition={{
+          duration: 9,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+
+      {/* Floating Background Elements - Dark Mode */}
+      <motion.div
+        className="fixed top-40 left-10 w-80 h-80 rounded-full blur-3xl opacity-0 dark:opacity-20 bg-green-500 pointer-events-none"
+        animate={{
+          y: [0, 40, 0],
+          x: [0, 30, 0],
+        }}
+        transition={{
+          duration: 7,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+      <motion.div
+        className="fixed -bottom-40 right-10 w-96 h-96 rounded-full blur-3xl opacity-0 dark:opacity-20 bg-green-600 pointer-events-none"
+        animate={{
+          y: [0, -40, 0],
+          x: [0, -30, 0],
+        }}
+        transition={{
+          duration: 9,
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 px-6 md:px-12 lg:px-20 py-8 md:py-16">
+        {/* Hero Section */}
         <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.8 }}
+          className="grid lg:grid-cols-2 gap-8 md:gap-12 items-center mb-16 md:mb-24"
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
         >
-          {aqi === 0 ? null : (
+          {/* Left Content */}
+          <motion.div
+            className="flex flex-col gap-6 md:gap-8"
+            variants={itemVariants}
+          >
+            {/* Heading */}
+            <h1 className="text-5xl md:text-6xl lg:text-7xl font-black text-green-800 dark:text-green-400 tracking-tight leading-tight">
+              Find Your Green <br /> <span className="bg-gradient-to-r from-green-600 to-green-500 dark:from-green-400 dark:to-green-300 bg-clip-text text-transparent">Guardian!</span>
+            </h1>
+
+            {/* Description */}
+            <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 leading-relaxed font-medium max-w-2xl">
+              Discover plants that purify your air and create a healthier environment. Search by air quality needs to find the perfect plant that not only enhances your space but also boosts your well-being.
+            </p>
+
+            {/* Search Section */}
             <motion.div
-              className="flex flex-col items-center text-center justify-center dark:text-gray-200"
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.7 }}
+              className="flex gap-3 w-full max-w-md"
+              variants={itemVariants}
             >
-              {/* AQI text and subheadings for dark mode */}
-              <h1
-                className={`text-3xl poppins-bold ${aqiThresholds[aqi].warncolor} font-bold font-inter`}
+              <div className="relative flex-1">
+                <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-green-600 dark:text-green-400 pointer-events-none" size={20} />
+                <input
+                  type="text"
+                  className="w-full pl-12 pr-4 py-3 md:py-4 rounded-xl border-2 border-green-200 dark:border-green-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-none focus:border-green-500 dark:focus:border-green-400 transition-colors duration-300 font-medium"
+                  placeholder="Enter your location"
+                  onChange={changeHandler}
+                  value={city}
+                />
+              </div>
+
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-green-600 to-green-700 dark:from-green-500 dark:to-green-600 text-white font-bold rounded-xl transition-all duration-300 hover:shadow-lg hover:shadow-green-500/40 dark:hover:shadow-green-500/50 flex items-center gap-2 whitespace-nowrap"
+                onClick={getPlants}
               >
-                <span>AIR QUALITY:</span> {aqiThresholds[aqi].max}
-              </h1>
-              <h2 className="text-xl poppins-semibold max-w-[800px] font-semibold dark:text-gray-200">
-                <span className="uppercase poppins-bold">Health Impact :</span>{" "}
-                {aqiThresholds[aqi].healthImpact}
-              </h2>
-              <h3 className="text-lg poppins-semibold max-w-[800px] font-semibold dark:text-gray-200">
-                <span className="uppercase poppins-bold">Advice :</span>{" "}
-                {aqiThresholds[aqi].plantingAdvice}
-              </h3>
+                <Leaf size={20} />
+                <span>Get Plants</span>
+              </motion.button>
             </motion.div>
-          )}
-          <div className="mt-8 flex lg:flex-row flex-col gap-3">
-            {Object.entries(gases).map(([key, value]) => {
-              const pollutant = plantData[key];
-              if (!pollutant) return null;
+          </motion.div>
 
-              const { category, healthImpact } = getAirQualityCategory(
-                pollutant.pollutant,
-                value
-              );
+          {/* Right Content - Image */}
+          <motion.div
+            className="hidden lg:flex justify-center"
+            variants={itemVariants}
+          >
+            <motion.div
+              animate={{
+                y: [0, -20, 0],
+              }}
+              transition={{
+                duration: 4,
+                repeat: Infinity,
+                repeatType: "mirror",
+              }}
+              className="drop-shadow-2xl"
+            >
+              <img
+                src={pimg}
+                alt="Plant"
+                className="w-full max-w-md"
+              />
+            </motion.div>
+          </motion.div>
+        </motion.div>
 
-              if (category === "Safe") return null;
+        {/* Results Section */}
+        <AnimatePresence>
+          {Loading ? (
+            <motion.div
+              className="h-96 flex justify-center items-center"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <Loader />
+            </motion.div>
+          ) : aqi === 0 ? null : (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 20 }}
+              transition={{ duration: 0.6 }}
+              className="space-y-12"
+            >
+              {/* AQI Card */}
+              <motion.div
+                className={`p-8 md:p-12 rounded-3xl backdrop-blur-lg border-2 ${
+                  aqiThresholds[aqi].warncolor === "text-green-600"
+                    ? "bg-green-50 dark:bg-green-900/30 border-green-300 dark:border-green-600"
+                    : aqiThresholds[aqi].warncolor === "text-yellow-600"
+                    ? "bg-yellow-50 dark:bg-yellow-900/30 border-yellow-300 dark:border-yellow-600"
+                    : aqiThresholds[aqi].warncolor === "text-orange-600"
+                    ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-600"
+                    : "bg-red-50 dark:bg-red-900/30 border-red-300 dark:border-red-600"
+                }`}
+                initial={{ scale: 0.9, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ delay: 0.2, duration: 0.6 }}
+              >
+                <div className="grid md:grid-cols-3 gap-8">
+                  <div className="text-center">
+                    <p className="text-sm font-bold text-gray-600 dark:text-gray-400 uppercase mb-2">Air Quality</p>
+                    <h2 className={`text-4xl md:text-5xl font-black ${aqiThresholds[aqi].warncolor}`}>
+                      {aqiThresholds[aqi].max}
+                    </h2>
+                  </div>
+                  <div className="text-center">
+                    <p className="text-sm font-bold text-gray-600 dark:text-gray-400 uppercase mb-2">Health Impact</p>
+                    <p className="text-lg md:text-xl font-bold text-gray-800 dark:text-gray-200">
+                      {aqiThresholds[aqi].healthImpact}
+                    </p>
+                  </div>
+                  <div className="text-center">
+                    <p className="text-sm font-bold text-gray-600 dark:text-gray-400 uppercase mb-2">Advice</p>
+                    <p className="text-lg md:text-xl font-bold text-gray-800 dark:text-gray-200">
+                      {aqiThresholds[aqi].plantingAdvice}
+                    </p>
+                  </div>
+                </div>
+              </motion.div>
 
-              const categoryColor =
-                category === "Moderate" ? "text-yellow-600" : "text-red-600";
+              {/* Pollutants Grid */}
+              <motion.div
+                className="space-y-8"
+                variants={containerVariants}
+                initial="hidden"
+                animate="visible"
+              >
+                <h2 className="text-4xl md:text-5xl font-black text-green-800 dark:text-green-400 text-center">
+                  Mitigating Plants for Your Area
+                </h2>
 
-              return (
                 <motion.div
-                  key={key}
-                  className="flex flex-col items-center w-11/12"
-                  initial={{ opacity: 0, y: 50 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5 }}
+                  className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"
+                  variants={containerVariants}
                 >
-                  <h2 className="text-4xl mt-5 poppins-bold text-green-950 font-bold font-inter dark:text-green-300">
-                    Air Quality and Mitigating Trees
-                  </h2>
-                  <div
-                    // Pollutant card styling for dark mode
-                    className="mt-4 p-4 hover:scale-105 transition-all ease-in-out duration-150 poppins-regular text-left max-w-[400px] rounded-md shadow bg-transparent border-[1px] dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200"
-                  >
-                    <h3 className={`text-xl poppins-bold ${categoryColor}`}>
-                      {pollutant.pollutant}
-                    </h3>
-                    <p>Concentration: {value} µg/m³</p>
-                    <p>Category: {category}</p>
-                    <p>Health Impact: {healthImpact}</p>
-                    <h4 className="text-lg font-semibold text-green-700 dark:text-green-500">
-                      Trees that help reduce {pollutant.pollutant}:
-                    </h4>
-                    <ul className="flex flex-col pl-5">
-                      {pollutant.trees.map((tree, index) => (
-                        <Link
-                          to={`/plant/${encodeURIComponent(tree)}`}
-                          key={index}
-                          // Link styling for dark mode
-                          className="mt-3 text-center p-2 rounded-md transition-colors duration-200 border-[1.5px] border-green-800/20 dark:border-green-600/40 dark:bg-green-900/40 dark:hover:bg-green-800/40"
-                        >
-                          {tree}
-                        </Link>
-                      ))}
-                    </ul>
-                  </div>
+                  {Object.entries(gases).map(([key, value]) => {
+                    const pollutant = plantData[key];
+                    if (!pollutant) return null;
+
+                    const { category, healthImpact } = getAirQualityCategory(
+                      pollutant.pollutant,
+                      value
+                    );
+
+                    if (category === "Safe") return null;
+
+                    const categoryConfig =
+                      category === "Moderate"
+                        ? { color: "yellow", icon: AlertCircle }
+                        : { color: "red", icon: AlertCircle };
+
+                    return (
+                      <motion.div
+                        key={key}
+                        variants={itemVariants}
+                        whileHover={{ y: -8 }}
+                        className={`p-6 md:p-8 rounded-2xl backdrop-blur-lg border-2 transition-all duration-300 ${
+                          category === "Moderate"
+                            ? "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-300 dark:border-yellow-600"
+                            : "bg-red-50 dark:bg-red-900/20 border-red-300 dark:border-red-600"
+                        }`}
+                      >
+                        {/* Header */}
+                        <div className="flex items-center justify-between mb-4">
+                          <h3 className={`text-2xl font-bold ${
+                            category === "Moderate"
+                              ? "text-yellow-700 dark:text-yellow-400"
+                              : "text-red-700 dark:text-red-400"
+                          }`}>
+                            {pollutant.pollutant}
+                          </h3>
+                          <categoryConfig.icon size={28} className={`${
+                            category === "Moderate"
+                              ? "text-yellow-600 dark:text-yellow-400"
+                              : "text-red-600 dark:text-red-400"
+                          }`} />
+                        </div>
+
+                        {/* Stats */}
+                        <div className="space-y-3 mb-6 pb-6 border-b border-gray-200 dark:border-gray-700">
+                          <p className="text-gray-700 dark:text-gray-300 font-medium">
+                            <span className="font-bold">Level:</span> {value.toFixed(2)} µg/m³
+                          </p>
+                          <p className={`font-bold ${
+                            category === "Moderate"
+                              ? "text-yellow-700 dark:text-yellow-300"
+                              : "text-red-700 dark:text-red-300"
+                          }`}>
+                            {category}
+                          </p>
+                          <p className="text-gray-700 dark:text-gray-300 font-medium">
+                            <span className="font-bold">Impact:</span> {healthImpact}
+                          </p>
+                        </div>
+
+                        {/* Plants List */}
+                        <h4 className="text-lg font-bold text-green-700 dark:text-green-400 mb-4">
+                          Recommended Plants:
+                        </h4>
+                        <div className="space-y-2">
+                          {pollutant.trees.map((tree, index) => (
+                            <motion.div
+                              key={index}
+                              className="p-3 rounded-lg bg-green-50 dark:bg-green-900/30 border-2 border-green-300 dark:border-green-600 text-center font-bold text-green-700 dark:text-green-300 hover:scale-105 transition-transform duration-200 cursor-pointer"
+                              whileHover={{ scale: 1.05 }}
+                            >
+                              {tree}
+                            </motion.div>
+                          ))}
+                        </div>
+                      </motion.div>
+                    );
+                  })}
                 </motion.div>
-              );
-            })}
-          </div>
-        </motion.div>
-      )}
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
     </div>
   );
 };