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

Fix:Kept the original Navbar

Browse Source
This commit is contained in:
Atharva
2025-02-22 20:57:30 +05:30
parent 6dc57b28b1
commit b805b8e34e
1 changed files with 85 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/components/Navbar.jsx
+17 -11
View File
@@ -1,17 +1,22 @@
const Navbar = () => {
return (
<nav className="h-18 mt-3 mb-3 w-[97.5%] mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-sm border border-gray-200 rounded-full">
<div className="h-full flex items-center justify-between p-4">
<a href="#" className="flex items-center space-x-3 rtl:space-x-reverse">
<img src="/images/logo.png" className="h-8" alt="Logo" />
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
<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/10 to-gray-500/20 pointer-events-none rounded-full"></div>
<div className="relative h-full flex items-center justify-between p-4">
<a
href="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
<img src="/images/logo.png" className="size-10" alt="Logo" />
<span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white">
Crop Compass
</span>
</a>
<div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<button
type="button"
className="text-black bg-white rounded-full hover:bg-green-100 focus:ring-4 focus:outline-none focus:ring-black-300 font-medium text-sm px-5 py-2 text-center"
className="text-black bg-white hover:bg-purple-200 focus:ring-4 focus:outline-none focus:ring-black-300 font-medium rounded-full text-sm py-2 px-4 text-center"
>
Get started
</button>
@@ -44,11 +49,11 @@ const Navbar = () => {
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
id="navbar-sticky"
>
<ul className="flex flex-col p-4 md:p-0 font-bold mt-4 gap-3 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-transparent">
<ul className="flex flex-col p-4 md:p-0 mt-4 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-transparent font-bold">
<li>
<a
href="#"
className="block py-1 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
className="block py-2 px-3 text-gray-50 rounded-sm md:bg-transparent md:text-gray-50 md:p-0 md:dark:text-gray-50"
aria-current="page"
>
Home
@@ -57,7 +62,7 @@ const Navbar = () => {
<li>
<a
href="#"
className="block py-1 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent "
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent "
>
About
</a>
@@ -65,7 +70,7 @@ const Navbar = () => {
<li>
<a
href="#"
className="block py-1 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
>
Services
</a>
@@ -73,7 +78,7 @@ const Navbar = () => {
<li>
<a
href="#"
className="block py-1 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-50 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
>
Contact
</a>
@@ -82,6 +87,7 @@ const Navbar = () => {
</div>
</div>
</nav>
</div>
);
};