Added animations to Landing page

Frontend/package-lock.json

@@ -9,10 +9,13 @@
       "version": "0.0.0",
       "dependencies": {
         "@reduxjs/toolkit": "^2.2.7",
+        "@splinetool/react-spline": "^4.0.0",
         "flowbite": "^2.5.1",
+        "framer-motion": "^12.4.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
+        "react-intersection-observer": "^9.15.1",
         "react-player": "^2.16.0",
         "react-redux": "^9.1.2",
         "react-router-dom": "^6.26.1",
@@ -1312,6 +1315,38 @@
       "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
       "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
     },
+    "node_modules/@splinetool/react-spline": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@splinetool/react-spline/-/react-spline-4.0.0.tgz",
+      "integrity": "sha512-FqrV7/K2q998Y0t83QUauQxsifKWAg9CFZoSb64qRuH7IfHkDs5/OgU1ACkg0aTgsEPtFlH+kATQ+8X6MrizHQ==",
+      "dependencies": {
+        "blurhash": "2.0.5",
+        "lodash.debounce": "4.0.8",
+        "react-merge-refs": "2.1.1",
+        "thumbhash": "0.1.1"
+      },
+      "peerDependencies": {
+        "@splinetool/runtime": "*",
+        "next": ">=14.2.0",
+        "react": "*",
+        "react-dom": "*"
+      },
+      "peerDependenciesMeta": {
+        "next": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@splinetool/runtime": {
+      "version": "1.9.69",
+      "resolved": "https://registry.npmjs.org/@splinetool/runtime/-/runtime-1.9.69.tgz",
+      "integrity": "sha512-ZetIw+4e/Q94OW6sdfasuM8RBKDA7Ap21aNsf2ZLH89Mk8Iut6G34SNM7YgdkFLW9OSiLGHKD8KYZbrMjE3DLA==",
+      "peer": true,
+      "dependencies": {
+        "on-change": "^4.0.0",
+        "semver-compare": "^1.0.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2116,6 +2151,12 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "license": "MIT"
     },
+    "node_modules/blurhash": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz",
+      "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==",
+      "license": "MIT"
+    },
     "node_modules/bn.js": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
@@ -3941,6 +3982,33 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.4.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.7.tgz",
+      "integrity": "sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.4.5",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@@ -5166,6 +5234,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5426,6 +5500,21 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.4.5",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.5.tgz",
+      "integrity": "sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+      "license": "MIT"
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -5790,6 +5879,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/on-change": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.2.tgz",
+      "integrity": "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/on-change?sponsor=1"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -6474,6 +6576,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -6485,6 +6588,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -6506,11 +6610,36 @@
         "react": "*"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.15.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
+      "integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-merge-refs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-2.1.1.tgz",
+      "integrity": "sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
     "node_modules/react-player": {
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz",
@@ -7054,6 +7183,13 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/serialize-javascript": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
@@ -7969,6 +8105,12 @@
         "xtend": "~4.0.1"
       }
     },
+    "node_modules/thumbhash": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz",
+      "integrity": "sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg==",
+      "license": "MIT"
+    },
     "node_modules/timers-browserify": {
       "version": "2.0.12",
       "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
@@ -8104,6 +8246,12 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",

Frontend/package.json

@@ -11,10 +11,13 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.7",
+    "@splinetool/react-spline": "^4.0.0",
     "flowbite": "^2.5.1",
+    "framer-motion": "^12.4.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-intersection-observer": "^9.15.1",
     "react-player": "^2.16.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.1",

Frontend/src/pages/Home/Cards.jsx

@@ -0,0 +1,111 @@
+
+import React from "react";
+
+export const HeroSecn = () =>{
+    return(
+        <section className=" py-40 w-full flex justify-center text-gray-100">
+        <div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
+          <div className="container mx-auto flex flex-col justify-between h-full w-full">
+            <div className="text-center md:text-start flex flex-col justify-around h-full">
+              <h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
+                Anything and Everything you Need to know About
+              </h1>
+              <p className="text-2xl font-semibold mb-8 ">
+                Your crops and their Health!
+              </p>
+            </div>
+          </div>
+          <div className="w-full md:w-4/5 object-contain flex justify-center items-center">
+            <img src="/images/plant.png" className="w-full h-auto rounded-3xl shadow-xl" alt="plant" />
+          </div>
+        </div>
+      </section>
+    )
+}
+
+export const CardWithImage = () => {
+    return (
+        <div class="max-w-sm  rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+              <a href="#">
+                  <img class="rounded-t-lg" src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg" alt="plant" />
+              </a>
+              <div class="p-6 backdrop-blur-md  rounded-b-lg">
+                  <a href="#">
+                      <h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Excellent Dashboards</h5>
+                  </a>
+                  <p class="mb-3 font-normal text-white  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 shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
+                      Read more
+                      <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                      </svg>
+                  </a>
+              </div>
+        </div>
+    )
+}
+
+export const CardOnlyText = () => {
+    return(
+        <div>
+              <a href="#" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+              <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+              <p class="font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+              </a>
+        </div>
+    )
+}
+
+export const CardWithButton = () => {
+    return(
+        <div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+                <a href="#">
+                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+                </a>
+                <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+                <a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
+                      Read more
+                      <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                      </svg>
+                  </a>
+            </div>
+    )
+}
+
+export const CardWithOnlyImage = () => {
+    return(
+        <div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
+            <a href="#">
+                <img class=" rounded-lg" src="/images/plant.png" alt="product image" />
+            </a>
+        </div>
+    )
+}
+
+const cards = [HeroSecn, CardWithImage, CardOnlyText, CardWithButton, CardWithImage];
+
+export default cards;
+
+
+export const CardLayout = () => {
+    return(
+        <div>
+            <HeroSecn />
+            <div className=" flex justify-center">
+                <div className=" flex justify-between  py-8 w-5/6 ">     
+                <cardWithImage />
+                <div className="flex flex-col gap-10 justify-between ">
+                    <cardOnlyText />
+                    <cardWithButton />
+                </div>
+
+                <div className=" flex flex-col justify-between">
+                    <cardWithOnlyImage />
+                    <cardOnlyText />
+                </div>
+                </div>
+            </div>
+        </div>
+    )
+}

Frontend/src/pages/Home/Hero2.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+import { CardOnlyText, CardWithButton, CardWithImage, CardWithOnlyImage, HeroSecn, } from "./Cards";
+
+const ScrollReveal = ({ children, direction = "left" }) => {
+  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
+
+  const variants = {
+    left: { opacity: 0, x: -100 },
+    right: { opacity: 0, x: 100 },
+    up: { opacity: 0, y: 100 },
+    down: { opacity: 0, y: -100 },
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={variants[direction]}
+      animate={inView ? { opacity: 1, x: 0, y: 0 } : {}}
+      transition={{ duration: 1.2, ease: "easeOut" }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+function Hero2() {
+    const myRef = document.querySelector('.scrollable-div')
+
+  return (
+    <div>
+      <ScrollReveal direction='up'>
+        <HeroSecn />
+      </ScrollReveal>
+      <div className=" flex justify-center">
+        <div className=" flex justify-between  py-8 w-5/6 ">
+
+          <ScrollReveal direction='up'>
+            <CardWithImage />
+          </ScrollReveal>
+        
+        <div className="flex flex-col gap-10 justify-between ">
+          <ScrollReveal direction='up' > <CardOnlyText /> </ScrollReveal>
+          <ScrollReveal direction='up'> <CardWithButton /> </ScrollReveal>
+        </div>
+
+        <div className=" flex flex-col justify-between">
+          <ScrollReveal direction='up'> <CardWithOnlyImage /> </ScrollReveal>
+          <ScrollReveal direction='up'> <CardOnlyText /> </ScrollReveal>
+        </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Hero2

Frontend/src/pages/Home/HomePage.jsx

@@ -2,17 +2,14 @@ import React from "react";
 import Navbar from "../../components/Navbar";
 import Hero from "./Hero";
 import Testimonial from "./Testimonial";
-import About from "./About";
+import Hero2 from "./Hero2";
-import Customization from "./Customization";
-import SubjectSection from "./SubjectSection";
-import ReviewSection from "./ReviewSection";
 import Footer from "./Footer";
 
 const HomePage = () => {
   return (
     <>
       <div className=" bg-[url(/images/bgphoto.png)] bg-no-repeat bg-cover">
-        <Hero />
+        <Hero2 />
         <Testimonial />
         <Footer />
       </div>

Frontend/src/pages/Home/Testimonial.jsx

@@ -2,80 +2,117 @@ import React from "react";
 import { IoMdContacts } from "react-icons/io";
 import { FaClock } from "react-icons/fa";
 import { FaMessage } from "react-icons/fa6";
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
 import TypeWriterEffect from "react-typewriter-effect";
+import cards from "./Cards";
+
+const ScrollReveal = ({ children, direction = "left" }) => {
+  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.5 });
+
+  const variants = {
+    left: { opacity: 0, x: -100 },
+    right: { opacity: 0, x: 100 },
+    up: { opacity: 0, y: 100 },
+    down: { opacity: 0, y: -100 },
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={variants[direction]}
+      animate={inView ? { opacity: 1, x: 0, y: 0 } : {}}
+      transition={{ duration: 1.2, ease: "easeOut" }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
 
 const Testimonial = () => {
 
   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 ">
+          <div className="text-center flex-col justify-center align-middle ">
-            <h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">WHY CHOOSE US?</h2>
+            <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">
+              <h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">WHY CHOOSE US?</h2>
-              <TypeWriterEffect
+            </ScrollReveal>
-                width="230" 
+            <ScrollReveal direction="up">
-                trackWidth="13" 
+              <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">
-                scrollArea={myRef}
+                <TypeWriterEffect
-                startDelay={100}
+                  width="230" 
-                cursorColor="gray"
+                  trackWidth="13" 
-                text="Record breaking features like never before"
+                  scrollArea={myRef}
-                typeSpeed={100}
+                  startDelay={100}
-              />
+                  cursorColor="white"
-            </h1>
+                  text="Record breaking features like never before!"
+                  typeSpeed={100}
+                />
+              </h1>
+            </ScrollReveal>
           </div>
 
           <div className="flex flex-col sm:flex-row  justify-around mt-8 h-auto">
             
-            <div class="max-w-sm p-6 backdrop-blur-lg rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+            <ScrollReveal direction="up">
-              <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">
+              <div class="max-w-sm p-6 backdrop-blur-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                  <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 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">
-              </svg>
+                    <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"/>
-              <a href="#">
+                </svg>
-                  <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
+                <a href="#">
-              </a>
+                    <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
-              <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
+                </a>
-              <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
+                <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
-                  See our guideline
+                <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
-                  <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">
+                    See our guideline
-                      <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 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">
-                  </svg>
+                        <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"/>
-              </a>
+                    </svg>
-            </div>
+                </a>
+              </div>
+            </ScrollReveal>
 
 
-            <div class="max-w-sm p-6 backdrop-blur-lg rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+            <ScrollReveal direction="up">
-              <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">
+              <div class="max-w-sm p-6 backdrop-blur-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                  <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 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">
-              </svg>
+                    <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"/>
-              <a href="#">
+                </svg>
-                  <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
+                <a href="#">
-              </a>
+                    <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
-              <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
+                </a>
-              <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
+                <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
-                  See our guideline
+                <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
-                  <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">
+                    See our guideline
-                      <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 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">
-                  </svg>
+                        <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"/>
-              </a>
+                    </svg>
-            </div>
+                </a>
+              </div>
+            </ScrollReveal>
 
-            <div class="max-w-sm p-6 backdrop-blur-lg rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+            <ScrollReveal direction="up">
-              <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">
+              <div class="max-w-sm p-6 backdrop-blur-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
-                  <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 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">
-              </svg>
+                    <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"/>
-              <a href="#">
+                </svg>
-                  <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
+                <a href="#">
-              </a>
+                    <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
-              <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
+                </a>
-              <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
+                <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
-                  See our guideline
+                <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
-                  <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">
+                    See our guideline
-                      <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 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">
-                  </svg>
+                        <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"/>
-              </a>
+                    </svg>
-            </div>
+                </a>
+              </div>
+            </ScrollReveal>
 
           </div>
         </div>