updated the navbar

VedantAnand17 · Oct 2, 2024 · 3119d04 · 3119d04
1 parent 06c958e
commit 3119d04
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 22 deletions.
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,29 +1,41 @@
 import React from 'react';
-import { Link } from 'react-router-dom'; // Assuming you're using React Router for navigation
-import { Globe } from 'lucide-react'; // Optional: Add any icons you want
+import { Link } from 'react-router-dom';
+import { Globe } from 'lucide-react';
 
 const Navbar = () => {
   return (
-    <nav className="bg-gray-800 text-white shadow-md">
-      <div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
-        <div className="flex items-center">
-          <Globe className="mr-2" />
-          <h1 className="text-2xl font-bold">Web3-Wallet</h1>
+    <nav className="bg-gradient-to-r from-blue-800 to-purple-800 text-white shadow-lg">
+      <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+        {/* Logo Section */}
+        <div className="flex items-center space-x-3">
+          <Globe className="w-8 h-8 text-white" />
+          <h1 className="text-3xl font-extrabold tracking-tight">
+            Web3-Wallet
+          </h1>
         </div>
-        <div className="space-x-4">
-          <Link to="/" className="hover:text-blue-400 transition duration-300">
+
+        {/* Navigation Links */}
+        <div className="flex space-x-6">
+          <Link to="/" className="hover:text-blue-300 transition duration-300 ease-in-out font-medium">
             Home
           </Link>
-          <Link to="/about" className="hover:text-blue-400 transition duration-300">
-            About
-          </Link>
-          <Link to="/services" className="hover:text-blue-400 transition duration-300">
+          <Link to="/services" className="hover:text-blue-300 transition duration-300 ease-in-out font-medium">
             Services
           </Link>
-          <Link to="/contact" className="hover:text-blue-400 transition duration-300">
+          <Link to="/contact" className="hover:text-blue-300 transition duration-300 ease-in-out font-medium">
             Contact
           </Link>
         </div>
+
+        {/* Call-to-Action Button (Optional) */}
+        <div className="hidden md:flex">
+          <Link
+            to="/dapp-browser"
+            className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full shadow-md transition duration-300 ease-in-out"
+          >
+            DAppBrowser
+          </Link>
+        </div>
       </div>
     </nav>
   );

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -27,7 +27,7 @@ function Home() {
   };
 
   const handleNavigateToDAppBrowser = () => {
-    navigate('/dapp-browser'); // Navigate to DAppBrowserPage
+    navigate('/dapp-browser'); 
   };
 
   return (
@@ -48,13 +48,6 @@ function Home() {
         {mnemonic && <SolanaWallet mnemonic={mnemonic} />}
         {mnemonic && <EthWallet mnemonic={mnemonic} />}
       </div>
-
-      <button
-        className="p-2 rounded-3xl mt-8 bg-blue-500 hover:bg-blue-600 transition-all duration-300 ease-in-out"
-        onClick={handleNavigateToDAppBrowser}
-      >
-        Go to DApp Browser
-      </button>
     </div>
   );
 }