From b1d3e3bfe3210810c6444b4b3db1ec0c46afbd30 Mon Sep 17 00:00:00 2001
From: bithighlander <bithighlander@gmail.com>
Date: Thu, 24 Oct 2024 13:33:26 -0500
Subject: [PATCH 1/5] BEX

---
 components/navbar.tsx | 111 +++++++++++++++++++++++-------------------
 1 file changed, 60 insertions(+), 51 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 8fec1e4..1868d20 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -117,61 +117,70 @@ export default function Navbar() {
   };
 
   return (
-      <nav className={`nav fixed w-full py-4 z-10 transition-all ease-in-out duration-400 ${scroll ? 'bg-black' : ''} ${isMenuOpen ? 'bg-black' : ''}`}>
-        <div className="container mx-auto flex flex-wrap items-center justify-between">
-          <Link href="/">
-            <a className="nav__logo-wrap" onClick={() => setIsMenuOpen(false)}>
-              <Image src={keepkeyLogo} alt="KeepKey logo" layout="responsive" quality={100} />
+      <>
+        {/* Yellow title bar for browser extension */}
+        <div className="w-full bg-yellow-500 text-center py-2 fixed top-0 left-0 z-50">
+          <Link href="https://keepkey.com/bex" passHref>
+            <a className="text-black font-bold hover:underline">
+              Try the new KeepKey Browser Extension! Click here to learn more.
             </a>
           </Link>
-          <button className="lg:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
-            <span className="hamburger-icon"></span>
-          </button>
-          <div className={`lg:flex ${isMenuOpen ? 'flex' : 'hidden'} flex-col lg:flex-row w-full lg:w-auto`}>
-            {navLinks.map((link) => (
-                <div key={link.id} className="relative">
-                  {link.name === 'Security' ? (
-                      <Link href={link.url}>
-                        <a className="text-white text-base px-4 font-normal opacity-80 hover:opacity-100 flex items-center">
-                          {link.name}
-                          <span style={{ backgroundColor: '#f5f5f5', borderRadius: '50%', padding: '2px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
-                      <Image src={SecurityIcon} alt="Security" width={24} height={24} />
-                    </span>
-                        </a>
-                      </Link>
-                  ) : link.children ? (
-                      <button className="text-white px-4" onClick={() => toggleDropdown(link.id)}>{link.name}</button>
-                  ) : (
-                      <Link href={link.url}>
-                        <a className="text-white text-base px-4 font-normal opacity-80 hover:opacity-100">{link.name}</a>
-                      </Link>
-                  )}
-                  {dropdownOpen[link.id] && (
-                      <div className="absolute left-0 bg-white shadow-md" ref={(el) => (dropdownRefs.current[link.id] = el)}>
-                        {link.children.map((sublink) => (
-                            <Link href={sublink.url} key={sublink.id}>
-                              <a className="block p-2 text-black hover:bg-gray-200">{sublink.name}</a>
-                            </Link>
-                        ))}
-                      </div>
-                  )}
-                </div>
-            ))}
-          </div>
-          <div className="hidden lg:flex items-center">
-            {/*<Link href="https://keepkey-affiliate.vercel.app/">*/}
-            {/*  <a className="btn btn-lg w-100 text-black" target="_blank" rel="noreferrer">Earn Crypto with Us</a>*/}
-            {/*</Link>*/}
-            <Link href="https://github.com/keepkey">
-              <a className="px-4">
-                <Image src={githubIcon} alt="GitHub" width={30} height={30} />
+        </div>
+
+        {/* Navigation bar */}
+        <nav className={`nav fixed w-full py-4 z-40 top-8 transition-all ease-in-out duration-400 ${scroll ? 'bg-black' : ''} ${isMenuOpen ? 'bg-black' : ''}`}>
+          <div className="container mx-auto flex flex-wrap items-center justify-between">
+            <Link href="/">
+              <a className="nav__logo-wrap" onClick={() => setIsMenuOpen(false)}>
+                <Image src={keepkeyLogo} alt="KeepKey logo" layout="responsive" quality={100} />
               </a>
             </Link>
-            <Link href="https://keepkey-docs-o9qn.vercel.app/">
-              <a className="px-4">Docs</a>
-            </Link>
+            <button className="lg:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
+              <span className="hamburger-icon"></span>
+            </button>
+            <div className={`lg:flex ${isMenuOpen ? 'flex' : 'hidden'} flex-col lg:flex-row w-full lg:w-auto`}>
+              {navLinks.map((link) => (
+                  <div key={link.id} className="relative">
+                    {link.name === 'Security' ? (
+                        <Link href={link.url}>
+                          <a className="text-white text-base px-4 font-normal opacity-80 hover:opacity-100 flex items-center">
+                            {link.name}
+                            <span style={{ backgroundColor: '#f5f5f5', borderRadius: '50%', padding: '2px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <Image src={SecurityIcon} alt="Security" width={24} height={24} />
+                      </span>
+                          </a>
+                        </Link>
+                    ) : link.children ? (
+                        <button className="text-white px-4" onClick={() => toggleDropdown(link.id)}>{link.name}</button>
+                    ) : (
+                        <Link href={link.url}>
+                          <a className="text-white text-base px-4 font-normal opacity-80 hover:opacity-100">{link.name}</a>
+                        </Link>
+                    )}
+                    {dropdownOpen[link.id] && (
+                        <div className="absolute left-0 bg-white shadow-md" ref={(el) => (dropdownRefs.current[link.id] = el)}>
+                          {link.children.map((sublink) => (
+                              <Link href={sublink.url} key={sublink.id}>
+                                <a className="block p-2 text-black hover:bg-gray-200">{sublink.name}</a>
+                              </Link>
+                          ))}
+                        </div>
+                    )}
+                  </div>
+              ))}
+            </div>
+            <div className="hidden lg:flex items-center">
+              <Link href="https://github.com/keepkey">
+                <a className="px-4">
+                  <Image src={githubIcon} alt="GitHub" width={30} height={30} />
+                </a>
+              </Link>
+              <Link href="https://keepkey-docs-o9qn.vercel.app/">
+                <a className="px-4">Docs</a>
+              </Link>
+            </div>
           </div>
-        </div>
-      </nav>
+        </nav>
+      </>
   );
 }

From ae260d85d8a101a9f3cc06ed7c7ba8bf171c34ea Mon Sep 17 00:00:00 2001
From: bithighlander <bithighlander@gmail.com>
Date: Sat, 2 Nov 2024 13:34:08 -0500
Subject: [PATCH 2/5] warning

---
 components/SecurityWarning.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/SecurityWarning.tsx b/components/SecurityWarning.tsx
index c57d6c8..e8f7d8f 100644
--- a/components/SecurityWarning.tsx
+++ b/components/SecurityWarning.tsx
@@ -41,7 +41,7 @@ export default function SecurityWarning() {
                     <div className="md:ml-8 mt-4 md:mt-0">
                         <h4 className="font-medium">Security Warning</h4>
                         <p className="mt-2">
-                            The KeepKey Chrome app has been retired, and there are scam versions which can steal your money. NEVER enter a recovery phrase into any software unencrypted. Official clients will always use KeepKeys built-in text cipher.
+                            there are scam versions of browser exensions and wallet which can steal your money. NEVER enter a recovery phrase into any software unencrypted. Official clients will always use KeepKeys built-in text cipher.
                         </p>
                     </div>
                 </div>

From 642456321189c3e45a31d0b9dc1c0256c4c7b46d Mon Sep 17 00:00:00 2001
From: Nathan Moore <nate@nmoore.net>
Date: Fri, 15 Nov 2024 10:36:29 -0700
Subject: [PATCH 3/5] add dismiss icon

---
 components/navbar.tsx | 147 +++++++++++++++++++++++++-----------------
 1 file changed, 88 insertions(+), 59 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 1868d20..e6c4955 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -72,6 +72,20 @@ export default function Navbar() {
   const [dropdownOpen, setDropdownOpen] = useState<Record<number, boolean>>({});
   const dropdownRefs = useRef<Record<number, HTMLDivElement | null>>({});
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [showBanner, setShowBanner] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    try {
+      const isDismissed = localStorage.getItem('bexBannerDismissed');
+      if (!isDismissed) {
+        setShowBanner(true);
+      }
+    } catch (error) {
+      console.warn('localStorage not available');
+    }
+  }, []);
 
   useEffect(() => {
     const initialDropdownState: Record<number, boolean> = {};
@@ -108,6 +122,11 @@ export default function Navbar() {
     };
   }, [dropdownOpen]);
 
+  const dismissBanner = () => {
+    setShowBanner(false);
+    localStorage.setItem('bexBannerDismissed', 'true');
+  };
+
   const toggleDropdown = (id: number) => {
     setDropdownOpen((prev) => ({
       ...prev,
@@ -117,70 +136,80 @@ export default function Navbar() {
   };
 
   return (
-      <>
-        {/* Yellow title bar for browser extension */}
-        <div className="w-full bg-yellow-500 text-center py-2 fixed top-0 left-0 z-50">
-          <Link href="https://keepkey.com/bex" passHref>
-            <a className="text-black font-bold hover:underline">
-              Try the new KeepKey Browser Extension! Click here to learn more.
+    <>
+      <div
+        className={`w-full bg-yellow-500 text-center py-2 fixed top-0 left-0 z-[60] flex justify-center items-center transition-opacity duration-300 ${!isMounted || !showBanner ? 'opacity-0 pointer-events-none' : 'opacity-100'
+          }`}
+      >
+        <Link href="https://keepkey.com/bex" passHref>
+          <a className="text-black font-bold hover:underline flex-grow">
+            Try the new KeepKey Browser Extension! Click here to learn more.
+          </a>
+        </Link>
+        <button
+          onClick={dismissBanner}
+          className="px-4 hover:opacity-75 text-black"
+          aria-label="Dismiss banner"
+        >
+          ✕
+        </button>
+      </div>
+
+      {/* Navigation bar */}
+      <nav className={`nav fixed w-full py-4 z-[50] ${showBanner ? 'top-8' : 'top-0'} transition-all ease-in-out duration-400 ${scroll ? 'bg-black' : ''
+        } ${isMenuOpen ? 'bg-black' : ''}`}>
+        <div className="container mx-auto flex flex-wrap items-center justify-between">
+          <Link href="/">
+            <a className="nav__logo-wrap" onClick={() => setIsMenuOpen(false)}>
+              <Image src={keepkeyLogo} alt="KeepKey logo" layout="responsive" quality={100} />
             </a>
           </Link>
-        </div>
-
-        {/* Navigation bar */}
-        <nav className={`nav fixed w-full py-4 z-40 top-8 transition-all ease-in-out duration-400 ${scroll ? 'bg-black' : ''} ${isMenuOpen ? 'bg-black' : ''}`}>
-          <div className="container mx-auto flex flex-wrap items-center justify-between">
-            <Link href="/">
-              <a className="nav__logo-wrap" onClick={() => setIsMenuOpen(false)}>
-                <Image src={keepkeyLogo} alt="KeepKey logo" layout="responsive" quality={100} />
-              </a>
-            </Link>
-            <button className="lg:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
-              <span className="hamburger-icon"></span>
-            </button>
-            <div className={`lg:flex ${isMenuOpen ? 'flex' : 'hidden'} flex-col lg:flex-row w-full lg:w-auto`}>
-              {navLinks.map((link) => (
-                  <div key={link.id} className="relative">
-                    {link.name === 'Security' ? (
-                        <Link href={link.url}>
-                          <a className="text-white text-base px-4 font-normal opacity-80 hover:opacity-100 flex items-center">
-                            {link.name}
-                            <span style={{ backgroundColor: '#f5f5f5', borderRadius: '50%', padding: '2px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+          <button className="lg:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
+            <span className="hamburger-icon"></span>
+          </button>
+          <div className={`lg:flex ${isMenuOpen ? 'flex' : 'hidden'} flex-col lg:flex-row w-full lg:w-auto`}>
+            {navLinks.map((link) => (
+              <div key={link.id} className="relative">
+                {link.name === 'Security' ? (
+                  <Link href={link.url}>
+                    <a className="text-white text-base px-4 font-normal opacity-80 hover:opacity-100 flex items-center">
+                      {link.name}
+                      <span style={{ backgroundColor: '#f5f5f5', borderRadius: '50%', padding: '2px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                         <Image src={SecurityIcon} alt="Security" width={24} height={24} />
                       </span>
-                          </a>
-                        </Link>
-                    ) : link.children ? (
-                        <button className="text-white px-4" onClick={() => toggleDropdown(link.id)}>{link.name}</button>
-                    ) : (
-                        <Link href={link.url}>
-                          <a className="text-white text-base px-4 font-normal opacity-80 hover:opacity-100">{link.name}</a>
-                        </Link>
-                    )}
-                    {dropdownOpen[link.id] && (
-                        <div className="absolute left-0 bg-white shadow-md" ref={(el) => (dropdownRefs.current[link.id] = el)}>
-                          {link.children.map((sublink) => (
-                              <Link href={sublink.url} key={sublink.id}>
-                                <a className="block p-2 text-black hover:bg-gray-200">{sublink.name}</a>
-                              </Link>
-                          ))}
-                        </div>
-                    )}
+                    </a>
+                  </Link>
+                ) : link.children ? (
+                  <button className="text-white px-4" onClick={() => toggleDropdown(link.id)}>{link.name}</button>
+                ) : (
+                  <Link href={link.url}>
+                    <a className="text-white text-base px-4 font-normal opacity-80 hover:opacity-100">{link.name}</a>
+                  </Link>
+                )}
+                {dropdownOpen[link.id] && (
+                  <div className="absolute left-0 bg-white shadow-md" ref={(el) => (dropdownRefs.current[link.id] = el)}>
+                    {link.children.map((sublink) => (
+                      <Link href={sublink.url} key={sublink.id}>
+                        <a className="block p-2 text-black hover:bg-gray-200">{sublink.name}</a>
+                      </Link>
+                    ))}
                   </div>
-              ))}
-            </div>
-            <div className="hidden lg:flex items-center">
-              <Link href="https://github.com/keepkey">
-                <a className="px-4">
-                  <Image src={githubIcon} alt="GitHub" width={30} height={30} />
-                </a>
-              </Link>
-              <Link href="https://keepkey-docs-o9qn.vercel.app/">
-                <a className="px-4">Docs</a>
-              </Link>
-            </div>
+                )}
+              </div>
+            ))}
+          </div>
+          <div className="hidden lg:flex items-center">
+            <Link href="https://github.com/keepkey">
+              <a className="px-4">
+                <Image src={githubIcon} alt="GitHub" width={30} height={30} />
+              </a>
+            </Link>
+            <Link href="https://keepkey-docs-o9qn.vercel.app/">
+              <a className="px-4">Docs</a>
+            </Link>
           </div>
-        </nav>
-      </>
+        </div>
+      </nav>
+    </>
   );
 }

From fb9de1a7d65d4003ab6d52c934f390bcacec5e5b Mon Sep 17 00:00:00 2001
From: Nathan Moore <nate@nmoore.net>
Date: Fri, 15 Nov 2024 12:04:35 -0700
Subject: [PATCH 4/5] fix banner  overlapping issue

---
 components/navbar.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index e6c4955..ef2333f 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -136,9 +136,9 @@ export default function Navbar() {
   };
 
   return (
-    <>
+    <div className="fixed w-full top-0 left-0 z-50">
       <div
-        className={`w-full bg-yellow-500 text-center py-2 fixed top-0 left-0 z-[60] flex justify-center items-center transition-opacity duration-300 ${!isMounted || !showBanner ? 'opacity-0 pointer-events-none' : 'opacity-100'
+        className={`w-full bg-yellow-500 text-center py-2 flex justify-center items-center transition-opacity duration-300 ${!isMounted || !showBanner ? 'opacity-0 pointer-events-none h-0' : 'opacity-100'
           }`}
       >
         <Link href="https://keepkey.com/bex" passHref>
@@ -155,8 +155,7 @@ export default function Navbar() {
         </button>
       </div>
 
-      {/* Navigation bar */}
-      <nav className={`nav fixed w-full py-4 z-[50] ${showBanner ? 'top-8' : 'top-0'} transition-all ease-in-out duration-400 ${scroll ? 'bg-black' : ''
+      <nav className={`nav w-full py-4 transition-all ease-in-out duration-400 ${scroll ? 'bg-black' : ''
         } ${isMenuOpen ? 'bg-black' : ''}`}>
         <div className="container mx-auto flex flex-wrap items-center justify-between">
           <Link href="/">
@@ -210,6 +209,6 @@ export default function Navbar() {
           </div>
         </div>
       </nav>
-    </>
+    </div>
   );
 }

From 7f4ae2229e0504f6d42c0100468aa7926d9f8462 Mon Sep 17 00:00:00 2001
From: Nathan Moore <nate@nmoore.net>
Date: Fri, 15 Nov 2024 13:40:26 -0700
Subject: [PATCH 5/5] mobile updates

---
 components/hero-simple.tsx |  2 +-
 components/navbar.tsx      | 11 ++++++-----
 pages/index.tsx            | 36 ++++++++++++++++++------------------
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/components/hero-simple.tsx b/components/hero-simple.tsx
index 4ce2819..79d7c10 100644
--- a/components/hero-simple.tsx
+++ b/components/hero-simple.tsx
@@ -14,7 +14,7 @@ interface Props {
 const Hero = ({ heroBgImg, pageTitle, subTitle, assets, blockchains, dapps }: Props) => {
 
     return (
-        <div className="relative z-0 pt-28 pb-20 lg:pt-52 lg:pb-36 bg-black">
+        <div className="relative z-0 pt-40 pb-20 lg:pt-52 lg:pb-36 bg-black">
             <Image
                 src={heroBgImg}
                 alt='keepkey wallet on desk'
diff --git a/components/navbar.tsx b/components/navbar.tsx
index ef2333f..f7bddd0 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -137,8 +137,9 @@ export default function Navbar() {
 
   return (
     <div className="fixed w-full top-0 left-0 z-50">
+      {/* banner */}
       <div
-        className={`w-full bg-yellow-500 text-center py-2 flex justify-center items-center transition-opacity duration-300 ${!isMounted || !showBanner ? 'opacity-0 pointer-events-none h-0' : 'opacity-100'
+        className={`w-full bg-yellow-500 text-center py-2 flex justify-center items-center transition-opacity duration-300 ${!isMounted || !showBanner ? 'opacity-0 pointer-events-none h-0 py-0' : 'opacity-100'
           }`}
       >
         <Link href="https://keepkey.com/bex" passHref>
@@ -166,12 +167,12 @@ export default function Navbar() {
           <button className="lg:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
             <span className="hamburger-icon"></span>
           </button>
-          <div className={`lg:flex ${isMenuOpen ? 'flex' : 'hidden'} flex-col lg:flex-row w-full lg:w-auto`}>
+          <div className={`lg:flex ${isMenuOpen ? 'flex gap-y-5 pt-4' : 'hidden'} flex-col lg:flex-row w-full lg:w-auto`}>
             {navLinks.map((link) => (
               <div key={link.id} className="relative">
                 {link.name === 'Security' ? (
                   <Link href={link.url}>
-                    <a className="text-white text-base px-4 font-normal opacity-80 hover:opacity-100 flex items-center">
+                    <a className="text-white text-xl lg:text-base px-0 lg:px-4 font-normal opacity-80 hover:opacity-100 flex items-center">
                       {link.name}
                       <span style={{ backgroundColor: '#f5f5f5', borderRadius: '50%', padding: '2px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                         <Image src={SecurityIcon} alt="Security" width={24} height={24} />
@@ -179,10 +180,10 @@ export default function Navbar() {
                     </a>
                   </Link>
                 ) : link.children ? (
-                  <button className="text-white px-4" onClick={() => toggleDropdown(link.id)}>{link.name}</button>
+                  <button className="text-white text-xl lg:text-base px-0 lg:px-4" onClick={() => toggleDropdown(link.id)}>{link.name}</button>
                 ) : (
                   <Link href={link.url}>
-                    <a className="text-white text-base px-4 font-normal opacity-80 hover:opacity-100">{link.name}</a>
+                    <a className="text-white text-xl lg:text-base px-0 lg:px-4 font-normal opacity-80 hover:opacity-100">{link.name}</a>
                   </Link>
                 )}
                 {dropdownOpen[link.id] && (
diff --git a/pages/index.tsx b/pages/index.tsx
index f0e9da4..0413a35 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -70,7 +70,7 @@ const Hero = () => {
   }
 
   return (
-    <div className="relative z-0 pt-32 pb-20 lg:py-4 bg-black">
+    <div className="relative z-0 pt-40 pb-20 lg:py-4 bg-black">
       <Image
         src={heroBgImage}
         alt='keepkey wallet on desk'
@@ -104,27 +104,27 @@ const Hero = () => {
             </div>
 
             {platform.macos && (
-                <div className="mb-4 flex-none ml-8 mr-4">
-                  <Link href={urlMacOS}>
-                    <a className="btn btn-lg btn--transparent">Download for macOS</a>
-                  </Link>
-                </div>
+              <div className="mb-4 flex-none ml-8 mr-4">
+                <Link href={urlMacOS}>
+                  <a className="btn btn-lg btn--transparent">Download for macOS</a>
+                </Link>
+              </div>
             )}
 
             {platform.windows && (
-                <div className="mb-4 flex-none mr-4">
-                  <Link href={urlWindows}>
-                    <a className="btn btn-lg btn--transparent">Download for Windows</a>
-                  </Link>
-                </div>
+              <div className="mb-4 flex-none mr-4">
+                <Link href={urlWindows}>
+                  <a className="btn btn-lg btn--transparent">Download for Windows</a>
+                </Link>
+              </div>
             )}
 
             {platform.linux && (
-                <div className="mb-4 flex-none mr-4">
-                  <Link href={urlLinux}>
-                    <a className="btn btn-lg btn--transparent">Download for Linux</a>
-                  </Link>
-                </div>
+              <div className="mb-4 flex-none mr-4">
+                <Link href={urlLinux}>
+                  <a className="btn btn-lg btn--transparent">Download for Linux</a>
+                </Link>
+              </div>
             )}
 
             <div className="mb-4 flex-none">
@@ -139,7 +139,7 @@ const Hero = () => {
 
           </div>
 
-          <br/>
+          <br />
 
 
 
@@ -331,7 +331,7 @@ const ProductInfo = () => {
             <a className="btn mt-8" target="_blank">Get started!</a>
           </Link>
         </div>
-        <br/>
+        <br />
       </div>
       <div className="text-center">KeepKey is OSS: to contribute to donate here: bc1qfce6cck3tcy94v8s4q6fpfeusj0g8g27asaakh</div>
     </section>