notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

Glassmorphism added to all parts of landing page

Browse Source
This commit is contained in:
Bhakti
2025-02-22 19:25:24 +05:30
parent d5086e21ae
commit 58cd02b3a5
4 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/components/Navbar2.jsx
+1 -1
View File
@@ -2,7 +2,7 @@ const Navbar2 = () => {
return ( return (
<div className=" flex justify-center rounded-full"> <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"> <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"> <div className="relative h-full flex items-center justify-between p-4">
<a <a
Frontend/src/pages/Home/Footer.jsx
+13 -13
View File
@@ -3,18 +3,18 @@ import React from "react";
const Footer = () => { const Footer = () => {
return ( 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="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
<div className="md:flex md:justify-between"> <div className="md:flex md:justify-between">
<div className="mb-6 md:mb-0"> <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 <img
src="/images/logo.jpg" src="/images/logo.png"
className="h-9 rounded-full" className="h-9 rounded-full"
alt="Flowbite Logo" alt="Logo"
/> />
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white"> <span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
MentorFlux Crop Compass
</span> </span>
</a> </a>
</div> </div>
@@ -80,17 +80,17 @@ const Footer = () => {
</div> </div>
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" /> <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"> <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{" "} © 2024{" "}
<a href="https://flowbite.com/" class="hover:underline"> <a href="/" class="hover:underline">
MentorFlux™ Crop Compass™
</a> </a>
. All Rights Reserved. . All Rights Reserved.
</span> </span>
<div className="flex mt-4 sm:justify-center sm:mt-0"> <div className="flex mt-4 sm:justify-center sm:mt-0">
<a <a
href="#" 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 <svg
className="w-4 h-4" className="w-4 h-4"
@@ -109,7 +109,7 @@ const Footer = () => {
</a> </a>
<a <a
href="#" 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 <svg
className="w-4 h-4" className="w-4 h-4"
@@ -124,7 +124,7 @@ const Footer = () => {
</a> </a>
<a <a
href="#" 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 <svg
className="w-4 h-4" className="w-4 h-4"
@@ -143,7 +143,7 @@ const Footer = () => {
</a> </a>
<a <a
href="#" 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 <svg
className="w-4 h-4" className="w-4 h-4"
@@ -162,7 +162,7 @@ const Footer = () => {
</a> </a>
<a <a
href="#" 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 <svg
className="w-4 h-4" className="w-4 h-4"
Frontend/src/pages/Home/Hero.jsx
+14 -14
View File
@@ -26,16 +26,16 @@ const Hero = () => {
<div className=" flex justify-center"> <div className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 "> <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="#"> <a href="#">
<img class="rounded-t-lg" src="/images/plant.png" alt="plant" /> <img class="rounded-t-lg" src="/images/plant.png" alt="plant" />
</a> </a>
<div class="p-8 bg-[#A3D1C6] rounded-b-lg"> <div class="p-8 backdrop-blur-md rounded-b-lg">
<a href="#"> <a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Noteworthy technology acquisitions 2021</h5> <h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a> </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> <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 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"> <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"/> <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 className="flex flex-col gap-10 justify-between ">
<div> <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"> <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-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>
<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> <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> </a>
</div> </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="#"> <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> </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> <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 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 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"> <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"/> <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 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="#"> <a href="#">
<img class=" rounded-lg" src="/images/plant.png" alt="product image" /> <img class=" rounded-lg" src="/images/plant.png" alt="product image" />
</a> </a>
@@ -80,9 +80,9 @@ const Hero = () => {
<div> <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"> <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-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>
<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> <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> </a>
</div> </div>
Frontend/src/pages/Home/Testimonial.jsx
+11 -11
View File
@@ -6,7 +6,7 @@ import { FaMessage } from "react-icons/fa6";
const Testimonial = () => { const Testimonial = () => {
return ( 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="container mx-auto">
<div className="text-center"> <div className="text-center">
<h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US?</h2> <h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US?</h2>
@@ -15,14 +15,14 @@ const Testimonial = () => {
</h1> </h1>
</div> </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"> <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-500 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> <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"/> <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> </svg>
<a href="#"> <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> </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> <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"> <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
@@ -34,12 +34,12 @@ const Testimonial = () => {
</div> </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"> <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-500 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> <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"/> <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> </svg>
<a href="#"> <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> </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> <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"> <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
@@ -50,12 +50,12 @@ const Testimonial = () => {
</a> </a>
</div> </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"> <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-500 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> <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"/> <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> </svg>
<a href="#"> <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> </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> <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"> <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">