From 58cd02b3a562c26d0e2f8da28e8b0eeef4cc8591 Mon Sep 17 00:00:00 2001
From: Bhakti <tbhakti274@gmail.com>
Date: Sat, 22 Feb 2025 19:25:24 +0530
Subject: [PATCH] Glassmorphism added to all parts of landing page

---
 Frontend/src/components/Navbar2.jsx     |  2 +-
 Frontend/src/pages/Home/Footer.jsx      | 26 +++++++++++------------
 Frontend/src/pages/Home/Hero.jsx        | 28 ++++++++++++-------------
 Frontend/src/pages/Home/Testimonial.jsx | 22 +++++++++----------
 4 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/Frontend/src/components/Navbar2.jsx b/Frontend/src/components/Navbar2.jsx
index f9bf25a..9359f62 100644
--- a/Frontend/src/components/Navbar2.jsx
+++ b/Frontend/src/components/Navbar2.jsx
@@ -2,7 +2,7 @@ const Navbar2 = () => {
     return (
     <div className=" flex  justify-center rounded-full">
       <nav className=" h-18 mt-3 mb-3 w-[97.5%] mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-md rounded-full">
-        <div className="absolute inset-0 bg-gradient-to-r from-gray-100/0 to-gray-500/20 pointer-events-none rounded-full"></div>
+        <div className="absolute inset-0 bg-gradient-to-r from-gray-100/10 to-gray-500/20 pointer-events-none rounded-full"></div>
         <div className="relative h-full flex items-center justify-between p-4">
 
           <a
diff --git a/Frontend/src/pages/Home/Footer.jsx b/Frontend/src/pages/Home/Footer.jsx
index d884d84..9d9a386 100644
--- a/Frontend/src/pages/Home/Footer.jsx
+++ b/Frontend/src/pages/Home/Footer.jsx
@@ -3,18 +3,18 @@ import React from "react";
 const Footer = () => {
   return (
     <>
-      <footer className=" dark:bg-gray-900">
+      <footer className=" text-gray-500">
         <div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
           <div className="md:flex md:justify-between">
             <div className="mb-6 md:mb-0">
-              <a href="https://flowbite.com/" class="flex items-center gap-2">
+              <a href="/" class="flex items-center gap-2">
                 <img
-                  src="/images/logo.jpg"
+                  src="/images/logo.png"
                   className="h-9 rounded-full"
-                  alt="Flowbite Logo"
+                  alt="Logo"
                 />
                 <span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
-                  MentorFlux
+                  Crop Compass
                 </span>
               </a>
             </div>
@@ -80,17 +80,17 @@ const Footer = () => {
           </div>
           <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
           <div className="sm:flex sm:items-center sm:justify-between">
-            <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
+            <span className="text-sm text-gray-50 sm:text-center dark:text-gray-400">
               © 2024{" "}
-              <a href="https://flowbite.com/" class="hover:underline">
-                MentorFlux™
+              <a href="/" class="hover:underline">
+                Crop Compass™
               </a>
               . All Rights Reserved.
             </span>
             <div className="flex mt-4 sm:justify-center sm:mt-0">
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+                className="text-gray-50 hover:text-gray-900 dark:hover:text-white"
               >
                 <svg
                   className="w-4 h-4"
@@ -109,7 +109,7 @@ const Footer = () => {
               </a>
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
+                className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
               >
                 <svg
                   className="w-4 h-4"
@@ -124,7 +124,7 @@ const Footer = () => {
               </a>
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
+                className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
               >
                 <svg
                   className="w-4 h-4"
@@ -143,7 +143,7 @@ const Footer = () => {
               </a>
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
+                className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
               >
                 <svg
                   className="w-4 h-4"
@@ -162,7 +162,7 @@ const Footer = () => {
               </a>
               <a
                 href="#"
-                className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
+                className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
               >
                 <svg
                   className="w-4 h-4"
diff --git a/Frontend/src/pages/Home/Hero.jsx b/Frontend/src/pages/Home/Hero.jsx
index de3cdad..cf0b7e5 100644
--- a/Frontend/src/pages/Home/Hero.jsx
+++ b/Frontend/src/pages/Home/Hero.jsx
@@ -26,16 +26,16 @@ const Hero = () => {
       <div className=" flex justify-center">
         <div className=" flex justify-between  py-8 w-5/6 ">     
 
-          <div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+          <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="/images/plant.png" alt="plant" />
               </a>
-              <div class="p-8 bg-[#A3D1C6] rounded-b-lg">
+              <div class="p-8 backdrop-blur-md  rounded-b-lg">
                   <a href="#">
                       <h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Noteworthy technology acquisitions 2021</h5>
                   </a>
                   <p class="mb-3 font-normal text-white  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 items-center px-3 py-2 text-sm font-medium text-center text-white bg-[#5aa392] rounded-lg hover:bg-[#3a685d] focus:bg-[#3a685d] dark:bg-[#5aa392] dark:hover:bg-[#3a685d] dark:focus:ring-[#3a685d]">
+                  <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"/>
@@ -47,19 +47,19 @@ const Hero = () => {
           <div className="flex flex-col gap-10 justify-between ">
             
             <div>
-              <a href="#" class="block max-w-sm p-6 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-md hover:bg-[#A3D1C6] 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-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-              <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+              <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>
 
 
-            <div class="max-w-sm p-6 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
+            <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-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+                    <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-700 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 items-center px-3 py-2 text-sm font-medium text-center text-white bg-[#5aa392] rounded-lg hover:bg-[#3a685d] focus:bg-[#3a685d] dark:bg-[#5aa392] dark:hover:bg-[#3a685d] dark:focus:ring-[#3a685d]">
+                <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"/>
@@ -72,7 +72,7 @@ const Hero = () => {
 
           <div className=" flex flex-col justify-between">
           
-            <div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+            <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>
@@ -80,9 +80,9 @@ const Hero = () => {
 
 
             <div>
-              <a href="#" class="block max-w-sm p-6 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 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-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-              <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+              <a href="#" class="block max-w-sm p-6 backdrop-blur-xl rounded-lg shadow-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>
 
diff --git a/Frontend/src/pages/Home/Testimonial.jsx b/Frontend/src/pages/Home/Testimonial.jsx
index 34be8ac..b4ce6e2 100644
--- a/Frontend/src/pages/Home/Testimonial.jsx
+++ b/Frontend/src/pages/Home/Testimonial.jsx
@@ -6,7 +6,7 @@ import { FaMessage } from "react-icons/fa6";
 const Testimonial = () => {
   return (
     <>
-      <section className=" py-12 px-2 md:px-32">
+      <section className=" py-12 px-2 md:px-32 text-white">
         <div className="container mx-auto">
           <div className="text-center">
             <h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US?</h2>
@@ -15,14 +15,14 @@ const Testimonial = () => {
             </h1>
           </div>
 
-          <div className="flex flex-col sm:flex-row  justify-center mt-8 h-auto">
+          <div className="flex flex-col sm:flex-row  justify-around mt-8 h-auto">
             
-            <div class="max-w-sm p-6   rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
-              <svg class="w-7 h-7 text-gray-500 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-lg rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+              <svg class="w-7 h-7 text-gray-400 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-900 dark:text-white">Need a help in Claim?</h5>
+                  <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-600 dark:text-white">Need a help in Claim?</h5>
               </a>
               <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
               <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
@@ -34,12 +34,12 @@ const Testimonial = () => {
             </div>
 
 
-            <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
-              <svg class="w-7 h-7 text-gray-500 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-lg rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+              <svg class="w-7 h-7 text-gray-300 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-900 dark:text-white">Need a help in Claim?</h5>
+                  <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-600 dark:text-white">Need a help in Claim?</h5>
               </a>
               <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
               <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
@@ -50,12 +50,12 @@ const Testimonial = () => {
               </a>
             </div>
 
-            <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
-              <svg class="w-7 h-7 text-gray-500 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-lg rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+              <svg class="w-7 h-7 text-gray-300 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-900 dark:text-white">Need a help in Claim?</h5>
+                  <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-600 dark:text-white">Need a help in Claim?</h5>
               </a>
               <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
               <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">