feat: update layout and navigation structure, add profile and submit …

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>

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>
+    </>
   );
 }

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>
+  );
+}

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>
+  );
+}

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>

dongle/components/layout/Navbar.tsx

@@ -1,28 +1,44 @@
 "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">
         <div className="flex items-center gap-8">
           <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,8 +65,41 @@ 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>
   );
 }
+