From 89a45e36a0f4be151291fc751f79ac1a17e9141f Mon Sep 17 00:00:00 2001
From: Stephan-Thomas <xevermontes8@gmail.com>
Date: Tue, 24 Feb 2026 11:38:21 +0100
Subject: [PATCH] Fix: update wallet status title color to match Figma design

---
 app/page.tsx                |  18 +++----
 components/WalletStatus.tsx |  72 ++++++++++++++++++++++++++
 components/navbar.tsx       | 100 ++++++++++++++++++++++++++++++------
 package-lock.json           |  14 ++++-
 4 files changed, 177 insertions(+), 27 deletions(-)
 create mode 100644 components/WalletStatus.tsx

diff --git a/app/page.tsx b/app/page.tsx
index f4d19f6..872340d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,11 @@
-import { Hero } from '@/components/hero'
-import { Features } from '@/components/features'
-import { HowItWorks } from '@/components/how-it-works'
-import { Benefits } from '@/components/benefits'
-import { Testimonials } from '@/components/testimonials'
-import { CTA } from '@/components/cta'
-import { Footer } from '@/components/footer'
-import { Navbar } from '@/components/navbar'
+import { Hero } from "@/components/hero";
+import { Features } from "@/components/features";
+import { HowItWorks } from "@/components/how-it-works";
+import { Benefits } from "@/components/benefits";
+import { Testimonials } from "@/components/testimonials";
+import { CTA } from "@/components/cta";
+import { Footer } from "@/components/footer";
+import { Navbar } from "@/components/navbar";
 
 export default function Home() {
   return (
@@ -19,5 +19,5 @@ export default function Home() {
       <CTA />
       <Footer />
     </main>
-  )
+  );
 }
diff --git a/components/WalletStatus.tsx b/components/WalletStatus.tsx
new file mode 100644
index 0000000..a65865b
--- /dev/null
+++ b/components/WalletStatus.tsx
@@ -0,0 +1,72 @@
+"use client"
+import React from "react";
+
+interface WalletStatusProps {
+  isConnected: boolean;
+  walletAddress?: string;
+  network?: "Testnet" | "Mainnet";
+  onConnect?: () => void;
+}
+
+const truncateAddress = (address: string) => {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+};
+
+export const WalletStatus = ({
+  isConnected,
+  walletAddress,
+  network,
+  onConnect,
+}: WalletStatusProps) => {
+  return (
+    <div className="w-80 p-6 rounded-xl shadow-md bg-white border border-gray-200">
+      {/* Status Row */}
+      <div className="flex items-center gap-2 mb-4">
+        <span
+          className={`w-2.5 h-2.5 rounded-full ${
+            isConnected ? "bg-green-500" : "bg-gray-400"
+          }`}
+        ></span>
+
+        <span
+          className={`text-sm font-medium ${
+            isConnected ? "text-green-600" : "text-gray-500"
+          }`}
+        >
+          {isConnected ? "Connected" : "Disconnected"}
+        </span>
+      </div>
+
+      {/* Connected State */}
+      {isConnected && walletAddress && (
+        <>
+          <p className="text-gray-900 font-semibold text-sm mb-2">
+            {truncateAddress(walletAddress)}
+          </p>
+
+          {network && (
+            <span
+              className={`inline-block px-3 py-1 text-xs rounded-full ${
+                network === "Mainnet"
+                  ? "bg-blue-100 text-blue-700"
+                  : "bg-purple-100 text-purple-700"
+              }`}
+            >
+              {network}
+            </span>
+          )}
+        </>
+      )}
+
+      {/* Disconnected State */}
+      {!isConnected && (
+        <button
+          onClick={onConnect}
+          className="mt-2 w-full px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors"
+        >
+          Connect Wallet
+        </button>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/navbar.tsx b/components/navbar.tsx
index bbc991e..0eb1053 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,12 +1,33 @@
-'use client'
+"use client";
 
-import Link from 'next/link'
-import { Button } from '@/components/ui/button'
-import { Menu, X } from 'lucide-react'
-import { useState } from 'react'
+import Link from "next/link";
+import { useState, useRef, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Menu, X } from "lucide-react";
+import { WalletStatus } from "@/components/WalletStatus";
 
 export function Navbar() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const [open, setOpen] = useState(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  // Close when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        popupRef.current &&
+        !popupRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
 
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 backdrop-blur-xl bg-background/80">
@@ -18,16 +39,28 @@ export function Navbar() {
           </div>
 
           <div className="hidden md:flex items-center gap-8">
-            <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#features"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               Features
             </Link>
-            <Link href="#how-it-works" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#how-it-works"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               How It Works
             </Link>
-            <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#benefits"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               Benefits
             </Link>
-            <Link href="#testimonials" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#testimonials"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               Testimonials
             </Link>
           </div>
@@ -39,13 +72,36 @@ export function Navbar() {
             <Button asChild>
               <Link href="/signup">Get Started</Link>
             </Button>
+            <div className="hidden md:flex items-center gap-4">
+              <div className="relative">
+                <button
+                  onClick={() => setOpen(!open)}
+                  className="px-4 py-2 bg-indigo-600 text-white rounded-lg"
+                >
+                  Wallet
+                </button>
+
+                {open && (
+                  <div ref={popupRef} className="absolute right-0 mt-2 z-50">
+                    <WalletStatus
+                      isConnected={false}
+                      onConnect={() => alert("Connect clicked")}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
 
           <button
             className="md:hidden p-2 text-muted-foreground hover:text-foreground"
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
           >
-            {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+            {mobileMenuOpen ? (
+              <X className="h-6 w-6" />
+            ) : (
+              <Menu className="h-6 w-6" />
+            )}
           </button>
         </div>
       </div>
@@ -53,16 +109,28 @@ export function Navbar() {
       {mobileMenuOpen && (
         <div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur-xl">
           <div className="px-4 py-6 space-y-4">
-            <Link href="#features" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#features"
+              className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               Features
             </Link>
-            <Link href="#how-it-works" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#how-it-works"
+              className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               How It Works
             </Link>
-            <Link href="#benefits" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#benefits"
+              className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               Benefits
             </Link>
-            <Link href="#testimonials" className="block text-sm text-muted-foreground hover:text-foreground transition-colors">
+            <Link
+              href="#testimonials"
+              className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
               Testimonials
             </Link>
             <div className="pt-4 space-y-2">
@@ -77,5 +145,5 @@ export function Navbar() {
         </div>
       )}
     </nav>
-  )
+  );
 }
diff --git a/package-lock.json b/package-lock.json
index 418d78b..a9ad488 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2504,6 +2504,7 @@
       "integrity": "sha512-3MbSL37jEchWZz2p2mjntRZtPt837ij10ApxKfgmXCTuHWagYg7iA5bqPw6C8BMPfwidlvfPI/fxOc42HLhcyg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2514,6 +2515,7 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -2615,6 +2617,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2877,7 +2880,8 @@
       "version": "8.5.1",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.5.1.tgz",
       "integrity": "sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/embla-carousel-react": {
       "version": "8.5.1",
@@ -3324,6 +3328,7 @@
       "resolved": "https://registry.npmjs.org/next/-/next-16.0.10.tgz",
       "integrity": "sha512-RtWh5PUgI+vxlV3HdR+IfWA1UUHu0+Ram/JBO4vWB54cVPentCD0e+lxyAYEsDTqGGMg7qpjhKh6dc6aW7W/sA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@next/env": "16.0.10",
         "@swc/helpers": "0.5.15",
@@ -3480,6 +3485,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -3556,6 +3562,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3586,6 +3593,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -3598,6 +3606,7 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.1.tgz",
       "integrity": "sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -3883,7 +3892,8 @@
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",