From 36911b5701edee120e75934285ed4d5152171be0 Mon Sep 17 00:00:00 2001
From: Atharva <aaombase@gmail.com>
Date: Sun, 23 Feb 2025 07:33:20 +0530
Subject: [PATCH] Feat:Added loader animation

---
 Frontend/src/pages/Home/Testimonial.jsx       | 169 +++++++++++++-----
 .../src/pages/UserPanel/Farm/CropTable.jsx    |   9 +-
 2 files changed, 126 insertions(+), 52 deletions(-)

diff --git a/Frontend/src/pages/Home/Testimonial.jsx b/Frontend/src/pages/Home/Testimonial.jsx
index 43d459f..26fcb74 100644
--- a/Frontend/src/pages/Home/Testimonial.jsx
+++ b/Frontend/src/pages/Home/Testimonial.jsx
@@ -29,24 +29,24 @@ const ScrollReveal = ({ children, direction = "left" }) => {
   );
 };
 
-
 const Testimonial = () => {
+  const myRef = document.querySelector(".scrollable-div");
 
-  const myRef = document.querySelector('.scrollable-div')
-  
   return (
     <>
       <section className=" py-12 px-2 md:px-32  text-white">
         <div className="container mx-auto ">
           <div className="text-center flex-col justify-center align-middle ">
             <ScrollReveal direction="up">
-              <h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">WHY CHOOSE US?</h2>
+              <h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">
+                WHY CHOOSE US?
+              </h2>
             </ScrollReveal>
             <ScrollReveal direction="up">
               <h1 className="text-3xl text-center sm:text-6xl text-white drop-shadow-[10px_10px_10px_rgba(0,0,0,0.25)] font-bold mb-4">
                 <TypeWriterEffect
-                  width="230" 
-                  trackWidth="13" 
+                  width="230"
+                  trackWidth="13"
                   scrollArea={myRef}
                   startDelay={100}
                   cursorColor="white"
@@ -58,62 +58,139 @@ const Testimonial = () => {
           </div>
 
           <div className="flex flex-col sm:flex-row  justify-around mt-8 h-auto">
-            
             <ScrollReveal direction="up">
-              <div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                <svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
+              <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+                <svg
+                  className="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
                 </svg>
                 <a href="#">
-                    <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Excellent Dashboards</h5>
+                  <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
+                    Excellent Dashboards
+                  </h5>
                 </a>
-                <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Our descriptive dashboards give insights into your crop's health and keeps track of your burning expenses</p>
-                <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
-                    Check Out
-                    <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
-                    </svg>
-                </a>
-              </div>
-            </ScrollReveal>
-
-
-            <ScrollReveal direction="up">
-              <div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                <svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
-                </svg>
-                <a href="#">
-                    <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white"> Crop Disease Prediction </h5>
-                </a>
-                <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Predict the possible crop diseases based on their shown symptoms</p>
-                <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
-                    Check Out
-                    <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
-                    </svg>
+                <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
+                  Our descriptive dashboards give insights into your crop's
+                  health and keeps track of your burning expenses
+                </p>
+                <a
+                  href="#"
+                  className="inline-flex font-medium items-center text-blue-600 hover:underline"
+                >
+                  Check Out
+                  <svg
+                    className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 18 18"
+                  >
+                    <path
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
+                    />
+                  </svg>
                 </a>
               </div>
             </ScrollReveal>
 
             <ScrollReveal direction="up">
-              <div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                <svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
+              <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+                <svg
+                  className="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
                 </svg>
                 <a href="#">
-                    <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Crop Planner</h5>
+                  <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
+                    {" "}
+                    Crop Disease Prediction{" "}
+                  </h5>
                 </a>
-                <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Based on previous season's crop and used pertilizers and pesticides, plan what crops would best suit the present state of your soil</p>
-                <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
-                    Check Out
-                    <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
-                    </svg>
+                <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
+                  Predict the possible crop diseases based on their shown
+                  symptoms
+                </p>
+                <a
+                  href="#"
+                  className="inline-flex font-medium items-center text-blue-600 hover:underline"
+                >
+                  Check Out
+                  <svg
+                    className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 18 18"
+                  >
+                    <path
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
+                    />
+                  </svg>
                 </a>
               </div>
             </ScrollReveal>
 
+            <ScrollReveal direction="up">
+              <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+                <svg
+                  className="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
+                </svg>
+                <a href="#">
+                  <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
+                    Crop Planner
+                  </h5>
+                </a>
+                <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
+                  Based on previous season's crop and used pertilizers and
+                  pesticides, plan what crops would best suit the present state
+                  of your soil
+                </p>
+                <a
+                  href="#"
+                  className="inline-flex font-medium items-center text-blue-600 hover:underline"
+                >
+                  Check Out
+                  <svg
+                    className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 18 18"
+                  >
+                    <path
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </ScrollReveal>
           </div>
         </div>
       </section>
diff --git a/Frontend/src/pages/UserPanel/Farm/CropTable.jsx b/Frontend/src/pages/UserPanel/Farm/CropTable.jsx
index b200dd9..07ce6ea 100644
--- a/Frontend/src/pages/UserPanel/Farm/CropTable.jsx
+++ b/Frontend/src/pages/UserPanel/Farm/CropTable.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import Laoder from "../../../components/Laoder";
 
 const CropTable = ({ farmId }) => {
   const [crops, setCrops] = useState([]);
@@ -48,11 +49,7 @@ const CropTable = ({ farmId }) => {
   }, []);
 
   if (loading) {
-    return (
-      <div className="flex justify-center items-center min-h-[400px]">
-        Loading crops...
-      </div>
-    );
+    return <Laoder></Laoder>;
   }
 
   if (error) {
@@ -161,7 +158,7 @@ const CropTable = ({ farmId }) => {
                   <div className="text-sm text-gray-900">
                     <button
                       type="button"
-                      class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
+                      className="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
                       onClick={() => handleRemoveCrop(crop._id)}
                     >
                       Remove