Implement Cards with Color Coding, Blur Effect for Advantages and Disadvantages

frontend/package.json

@@ -19,6 +19,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-intersection-observer": "^9.13.1",
     "react-router-dom": "^6.24.1",
     "tailwind-merge": "^2.3.0"
   },

frontend/src/components/AdvantagesDisadvantages.jsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react';
+
+const items = [
+  { type: 'advantage', text: 'Helps farmers make data-driven decisions.' },
+  { type: 'disadvantage', text: 'Requires accurate and up-to-date data for best results.' },
+  { type: 'advantage', text: 'Increases crop yield by selecting the most suitable crops.' },
+  { type: 'disadvantage', text: 'May involve initial costs for data collection and analysis tools.' },
+  { type: 'advantage', text: 'Reduces the risk of crop failure by considering environmental factors.' },
+  { type: 'disadvantage', text: 'Dependent on technology, which can be a barrier for some farmers.' },
+  { type: 'advantage', text: 'Optimizes resource use like water and fertilizers.' },
+  { type: 'disadvantage', text: 'May need ongoing support and updates to stay effective.' },
+];
+
+function Item({ item }) {
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(entry.target);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, []);
+
+  const gradientClass = item.type === 'advantage' 
+    ? 'bg-gradient-to-r from-green-400 to-green-600'
+    : 'bg-gradient-to-r from-red-400 to-red-600';
+
+  return (
+    <div
+      ref={ref}
+      className={`p-6 rounded-lg shadow-lg ${gradientClass} text-white transform transition-all duration-500 ease-in-out ${
+        isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'
+      }`}
+    >
+      <p>{item.text}</p>
+    </div>
+  );
+}
+
+export default function Component() {
+  const advantages = items.filter(item => item.type === 'advantage');
+  const disadvantages = items.filter(item => item.type === 'disadvantage');
+
+  return (
+    <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-5xl mx-auto">
+        <h1 className="text-2xl md:text-3xl font-bold text-center mb-8 text-black"><span className='text-green-600'>Advantages</span> and <span className='text-red-600'>Disadvantages</span></h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div>
+            <div className="space-y-6">
+              {advantages.map((item, index) => (
+                <Item key={index} item={item} />
+              ))}
+            </div>
+          </div>
+          <div>
+            <div className="space-y-6">
+              {disadvantages.map((item, index) => (
+                <Item key={index} item={item} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/CropRecommendation.jsx

@@ -6,6 +6,9 @@ import img2 from "../assets/img2.jpg";
 import img3 from "../assets/116.jpg";
 import img4 from "../assets/112.jpg";
 import img5 from "../assets/111.jpeg";
+import img6 from "../assets/AdvDisadv.png"
+import AdvantagesDisadvantages from './AdvantagesDisadvantages';
+import img7 from "../assets/cropinspection.png";
 
 const CropRecommendation = () => {
     const [loading, setLoading] = useState(true);
@@ -254,28 +257,14 @@ const CropRecommendation = () => {
 
 
                         </div>
-                        <div className="flex flex-col sm:flex-row items-center justify-between ">
-                            <div className="sm:w-1/2 p-4 items-center">
-
-                                <p className='  text-2xl font-bold py-2 text-[#000435] '>
-                                    🚀<span className="bg-gradient-to-r from-green-600 via-green-500 to-green-600 inline-block text-transparent bg-clip-text    md:text-3xl sm:text-3xl">Advantages and</span>📉<span className="bg-gradient-to-r from-green-600 via-green-500 to-green-400 inline-block text-transparent bg-clip-text    md:text-3xl sm:text-3xl">Disadvantages</span>
-                                </p>
-                                <p className="text-lg text-[#000435] ">
-                                    <span> ✅ <strong>Advantages:</strong></span><br />
-                                    <span> 🌟 Helps farmers make data-driven decisions.</span><br />
-                                    <span> 🌟 Increases crop yield by selecting the most suitable crops.</span><br />
-                                    <span> 🌟 Reduces the risk of crop failure by considering environmental factors.</span><br />
-                                    <span> 🌟 Optimizes resource use like water and fertilizers.</span><br />
-                                    <span> ❌ <strong>Disadvantages:</strong></span><br />
-                                    <span> ⚠️ Requires accurate and up-to-date data for best results.</span><br />
-                                    <span> ⚠️ May involve initial costs for data collection and analysis tools.</span><br />
-                                    <span> ⚠️ Dependent on technology, which can be a barrier for some farmers.</span><br />
-                                    <span> ⚠️ May need ongoing support and updates to stay effective.</span><br />
+                        <div className="flex flex-row sm:flex-row items-center justify-between rounded-3xl">
+                            <div className="w-[850px] p-4 items-center rounded-3xl">
+                                <p className="text-lg text-[#000435] justify-center">
+                                    <AdvantagesDisadvantages/>
                                 </p>
                             </div>
-
-                            <div className="sm:w-1/2 flex flex-wrap px-10 my-10 rounded-md justify-center">
-                                <img src={img4} alt="Crop 1" style={{ borderRadius: '10%' }} className="w-full p-2" />
+                            <div className='mx-auto'>
+                                <img src={img7} alt="" className='w-[512px] h-[450px] rounded-2xl hidden md:inline' />
                             </div>
                         </div>
                     </div>

frontend/src/components/Navbar.jsx

@@ -71,12 +71,6 @@ const Navbar = () => {
 
                     </div>
                 </div>
-                {/* <button
-                    className="inline-flex   items-center justify-center w-10 h-10 text-gray-100 rounded-lg hover:bg-green-400 focus:outline-none focus:ring-1 focus:ring-gray-200"
-                    onClick={toggleTheme}
-                >
-                    {theme === 'light' ? <FaMoon className="text-2xl p-1" /> : <FaSun className="text-2xl p-1" />}
-                </button> */}
             </div>
         </nav>
     );