From 028e9f4bc5d09ba4f842e3ec143b41865b5a54ae Mon Sep 17 00:00:00 2001
From: kikiola <oluwatoby007@gmail.com>
Date: Sat, 25 Apr 2026 11:36:06 +0100
Subject: [PATCH 1/2] feat: update layout and navigation structure, add profile
 and submit pages

---
 dongle/app/layout.tsx               | 10 ++--
 dongle/app/page.tsx                 |  5 +-
 dongle/app/profile/page.tsx         | 11 +++++
 dongle/app/submit/page.tsx          | 11 +++++
 dongle/components/layout/Footer.tsx |  6 +--
 dongle/components/layout/Navbar.tsx | 74 +++++++++++++++++++++++++----
 6 files changed, 98 insertions(+), 19 deletions(-)
 create mode 100644 dongle/app/profile/page.tsx
 create mode 100644 dongle/app/submit/page.tsx

diff --git a/dongle/app/layout.tsx b/dongle/app/layout.tsx
index 73fb573..5fb5c6a 100644
--- a/dongle/app/layout.tsx
+++ b/dongle/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { WalletProvider } from "@/context/wallet.context";
+import LayoutWrapper from "@/components/layout/LayoutWrapper";
+
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -13,8 +15,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Dongle - Your Onchain App Store",
+  description: "The decentralized app store for Stellar. Discovery, reviews, and verification powered by on-chain transparency.",
 };
 
 export default function RootLayout({
@@ -28,7 +30,9 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <WalletProvider>
-          {children}
+          <LayoutWrapper>
+            {children}
+          </LayoutWrapper>
         </WalletProvider>
       </body>
     </html>
diff --git a/dongle/app/page.tsx b/dongle/app/page.tsx
index 32629e7..475353b 100644
--- a/dongle/app/page.tsx
+++ b/dongle/app/page.tsx
@@ -2,15 +2,14 @@ import Hero from "@/components/landing/Hero";
 import Features from "@/components/landing/Features";
 import FeaturedProjects from "@/components/landing/FeaturedProjects";
 import CTA from "@/components/landing/CTA";
-import LayoutWrapper from "@/components/layout/LayoutWrapper";
 
 export default function Home() {
   return (
-    <LayoutWrapper>
+    <>
       <Hero />
       <Features />
       <FeaturedProjects />
       <CTA />
-    </LayoutWrapper>
+    </>
   );
 }
diff --git a/dongle/app/profile/page.tsx b/dongle/app/profile/page.tsx
new file mode 100644
index 0000000..1cf647a
--- /dev/null
+++ b/dongle/app/profile/page.tsx
@@ -0,0 +1,11 @@
+export default function Profile() {
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <h1 className="text-3xl font-bold mb-8">Your Profile</h1>
+      <p className="text-zinc-600 dark:text-zinc-400">
+        Manage your account and view your activity on Dongle.
+      </p>
+      {/* TODO: Add profile content */}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/dongle/app/submit/page.tsx b/dongle/app/submit/page.tsx
new file mode 100644
index 0000000..c9d8f70
--- /dev/null
+++ b/dongle/app/submit/page.tsx
@@ -0,0 +1,11 @@
+export default function Submit() {
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <h1 className="text-3xl font-bold mb-8">Submit Your dApp</h1>
+      <p className="text-zinc-600 dark:text-zinc-400">
+        Submit your decentralized application to the Dongle app store.
+      </p>
+      {/* TODO: Add submission form */}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/dongle/components/layout/Footer.tsx b/dongle/components/layout/Footer.tsx
index 3c06414..9430f27 100644
--- a/dongle/components/layout/Footer.tsx
+++ b/dongle/components/layout/Footer.tsx
@@ -16,9 +16,9 @@ export default function Footer() {
           <div>
             <h4 className="font-semibold text-sm mb-4">Platform</h4>
             <ul className="space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
-              <li><Link href="/discover" className="hover:text-black dark:hover:text-white">Discover</Link></li>
-              <li><Link href="/reviews" className="hover:text-black dark:hover:text-white">Reviews</Link></li>
-              <li><Link href="/verify" className="hover:text-black dark:hover:text-white">Verification</Link></li>
+              <li><Link href="/" className="hover:text-black dark:hover:text-white">Home</Link></li>
+              <li><Link href="/submit" className="hover:text-black dark:hover:text-white">Submit</Link></li>
+              <li><Link href="/profile" className="hover:text-black dark:hover:text-white">Profile</Link></li>
             </ul>
           </div>
           <div>
diff --git a/dongle/components/layout/Navbar.tsx b/dongle/components/layout/Navbar.tsx
index 1b53cc7..651db12 100644
--- a/dongle/components/layout/Navbar.tsx
+++ b/dongle/components/layout/Navbar.tsx
@@ -1,11 +1,23 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
 import { useWallet } from "@/context/wallet.context";
 
 export default function Navbar() {
+  const pathname = usePathname();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { isConnected, isConnecting, publicKey, connectWallet, disconnectWallet } = useWallet();
 
+  const navLinks = [
+    { href: "/", label: "Home" },
+    { href: "/submit", label: "Submit" },
+    { href: "/profile", label: "Profile" },
+  ];
+
+  const isActive = (href: string) => pathname === href;
+
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-black/80 backdrop-blur-md border-b border-zinc-200 dark:border-zinc-800">
       <div className="container mx-auto px-4 h-16 flex items-center justify-between">
@@ -13,16 +25,20 @@ export default function Navbar() {
           <Link href="/" className="text-xl font-bold tracking-tighter">
             DONGLE
           </Link>
-          <div className="hidden md:flex items-center gap-6 text-sm font-medium text-zinc-600 dark:text-zinc-400">
-            <Link href="/discover" className="hover:text-black dark:hover:text-white transition-colors">
-              Discover
-            </Link>
-            <Link href="/reviews" className="hover:text-black dark:hover:text-white transition-colors">
-              Reviews
-            </Link>
-            <Link href="/verify" className="hover:text-black dark:hover:text-white transition-colors">
-              Verify
-            </Link>
+          <div className="hidden md:flex items-center gap-6 text-sm font-medium">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`transition-colors ${
+                  isActive(link.href)
+                    ? "text-black dark:text-white"
+                    : "text-zinc-600 dark:text-zinc-400 hover:text-black dark:hover:text-white"
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
           </div>
         </div>
 
@@ -49,6 +65,44 @@ export default function Navbar() {
               {isConnecting ? "Connecting..." : "Connect Wallet"}
             </button>
           )}
+
+          {/* Mobile menu button */}
+          <button
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            className="md:hidden p-2 rounded-md text-zinc-600 dark:text-zinc-400 hover:text-black dark:hover:text-white"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {isMenuOpen && (
+        <div className="md:hidden bg-white dark:bg-black border-t border-zinc-200 dark:border-zinc-800">
+          <div className="px-4 py-4 space-y-2">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setIsMenuOpen(false)}
+                className={`block py-2 text-sm font-medium transition-colors ${
+                  isActive(link.href)
+                    ? "text-black dark:text-white"
+                    : "text-zinc-600 dark:text-zinc-400 hover:text-black dark:hover:text-white"
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}
+          )}
         </div>
       </div>
     </nav>

From 20fab01ba50ee07213bc40f8ae7896e4563e107f Mon Sep 17 00:00:00 2001
From: kikiola <oluwatoby007@gmail.com>
Date: Sat, 25 Apr 2026 11:50:55 +0100
Subject: [PATCH 2/2] fix: remove unused closing tags in Navbar component

---
 dongle/components/layout/Navbar.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/dongle/components/layout/Navbar.tsx b/dongle/components/layout/Navbar.tsx
index 651db12..bc01be9 100644
--- a/dongle/components/layout/Navbar.tsx
+++ b/dongle/components/layout/Navbar.tsx
@@ -102,9 +102,4 @@ export default function Navbar() {
     </nav>
   );
 }
-          )}
-        </div>
-      </div>
-    </nav>
-  );
-}
+