feat: Landing Page Layout Structure

dongle/app/globals.css

@@ -10,17 +10,35 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+
+  --animate-fade-in: fade-in 0.5s ease-out;
+  --animate-fade-up: fade-up 0.5s ease-out;
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes fade-up {
+    from { 
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to { 
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@layer base {
+  .container {
+    @apply mx-auto px-4 sm:px-6 lg:px-8;
   }
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans);
+  overflow-x: hidden;
 }

dongle/app/page.tsx

@@ -1,107 +1,16 @@
-"use client";
-
-import Image from "next/image";
-import { useWallet } from "@/context/wallet.context";
+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() {
-  const { isConnected, isConnecting, publicKey, connectWallet, disconnectWallet } =
-    useWallet();
-
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black relative">
-      {/* Wallet Header */}
-      <div className="absolute top-4 right-4 sm:top-8 sm:right-8 z-50">
-        {isConnected ? (
-          <div className="flex items-center gap-3 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-2 rounded-full shadow-sm">
-            <div className="h-2.5 w-2.5 bg-green-500 rounded-full ml-2 animate-pulse" />
-            <span className="text-sm font-mono text-zinc-600 dark:text-zinc-400">
-              {publicKey ? `${publicKey.substring(0, 6)}...${publicKey.substring(publicKey.length - 4)}` : "Connected"}
-            </span>
-            <button
-              onClick={disconnectWallet}
-              className="text-sm px-4 py-1.5 bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 rounded-full transition-colors text-zinc-900 dark:text-zinc-100"
-            >
-              Disconnect
-            </button>
-          </div>
-        ) : (
-          <button
-            onClick={connectWallet}
-            disabled={isConnecting}
-            className="flex items-center justify-center min-w-[140px] text-sm px-6 py-2.5 bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 rounded-full transition-colors shadow-sm font-medium disabled:opacity-70 disabled:cursor-not-allowed"
-          >
-            {isConnecting ? (
-              <>
-                <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
-                Connecting...
-              </>
-            ) : (
-              "Connect Wallet"
-            )}
-          </button>
-        )}
-      </div>
-
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+    <LayoutWrapper>
+      <Hero />
+      <Features />
+      <FeaturedProjects />
+      <CTA />
+    </LayoutWrapper>
   );
 }

dongle/components/landing/CTA.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+
+export default function CTA() {
+  return (
+    <section className="py-24">
+      <div className="container mx-auto px-4">
+        <div className="bg-black dark:bg-white text-white dark:text-black rounded-[2.5rem] p-12 md:p-24 text-center relative overflow-hidden">
+          <div className="relative z-10 max-w-2xl mx-auto">
+            <h2 className="text-4xl md:text-5xl font-bold mb-6 tracking-tight">
+              Ready to list your application?
+            </h2>
+            <p className="text-lg opacity-80 mb-10 leading-relaxed">
+              Join the growing ecosystem of transparent dApps on Stellar. Get verified and build trust with your users today.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Link 
+                href="/listing" 
+                className="w-full sm:w-auto px-8 py-4 bg-white dark:bg-black text-black dark:text-white font-bold rounded-full hover:scale-105 transition-transform"
+              >
+                Submit Project
+              </Link>
+              <Link 
+                href="/verify" 
+                className="w-full sm:w-auto px-8 py-4 bg-transparent border border-white/20 dark:border-black/20 font-bold rounded-full hover:bg-white/10 dark:hover:bg-black/5 transition-colors"
+              >
+                Learn More
+              </Link>
+            </div>
+          </div>
+
+          {/* Background pattern */}
+          <div className="absolute inset-0 opacity-10 pointer-events-none">
+            <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)', backgroundSize: '40px 40px' }}></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

dongle/components/landing/FeaturedProjects.tsx

@@ -0,0 +1,86 @@
+import Link from "next/link";
+
+const projects = [
+  {
+    name: "Soroban Swap",
+    category: "DeFi / DEX",
+    description: "Next-generation automated market maker on Soroban.",
+    rating: 4.8,
+    reviews: 124,
+  },
+  {
+    name: "Stellar Guardians",
+    category: "Gaming / NFT",
+    description: "A decentralized strategy game with on-chain assets.",
+    rating: 4.5,
+    reviews: 89,
+  },
+  {
+    name: "Anchor Connect",
+    category: "Infrastructure",
+    description: "Seamless on/off ramp protocol for Stellar anchors.",
+    rating: 4.9,
+    reviews: 210,
+  },
+];
+
+export default function FeaturedProjects() {
+  return (
+    <section className="py-24 bg-zinc-50 dark:bg-zinc-950">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
+          <div>
+            <h2 className="text-3xl font-bold mb-4">Featured Projects</h2>
+            <p className="text-zinc-500 dark:text-zinc-400">
+              Discover the most trusted and highly-rated dApps on Stellar.
+            </p>
+          </div>
+          <Link 
+            href="/discover" 
+            className="text-sm font-semibold flex items-center gap-2 hover:gap-3 transition-all underline underline-offset-4"
+          >
+            View all projects
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+            </svg>
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {projects.map((project, idx) => (
+            <div 
+              key={idx}
+              className="group bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 hover:shadow-xl transition-all"
+            >
+              <div className="w-full aspect-video bg-zinc-100 dark:bg-zinc-800 rounded-2xl mb-6 overflow-hidden relative">
+                <div className="absolute inset-0 flex items-center justify-center text-zinc-300 dark:text-zinc-700 font-bold text-lg">
+                  {project.name[0]}
+                </div>
+              </div>
+              <div className="flex justify-between items-start mb-2">
+                <span className="text-xs font-semibold text-blue-500 bg-blue-50 dark:bg-blue-900/20 px-2 py-1 rounded">
+                  {project.category}
+                </span>
+                <div className="flex items-center gap-1 text-sm font-bold">
+                  <svg className="w-4 h-4 text-yellow-500 fill-current" viewBox="0 0 20 20">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                  </svg>
+                  {project.rating}
+                </div>
+              </div>
+              <h3 className="text-xl font-bold mb-2 group-hover:text-blue-500 transition-colors">
+                {project.name}
+              </h3>
+              <p className="text-zinc-500 dark:text-zinc-400 text-sm mb-6 line-clamp-2">
+                {project.description}
+              </p>
+              <div className="text-xs text-zinc-400 dark:text-zinc-500">
+                {project.reviews} reviews
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

dongle/components/landing/Features.tsx

@@ -0,0 +1,61 @@
+const features = [
+  {
+    title: "On-Chain Verification",
+    description: "Every app listing and review is stored directly on the Stellar blockchain, ensuring data integrity and censorship resistance.",
+    icon: (
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+      </svg>
+    ),
+  },
+  {
+    title: "Community Reviews",
+    description: "Real users provide verified feedback. Reviewers earn reputation based on the accuracy and depth of their contributions.",
+    icon: (
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+      </svg>
+    ),
+  },
+  {
+    title: "Developer Focused",
+    description: "Simple integration for developers to list their Stellar dApps and reach a community that values trust and transparency.",
+    icon: (
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+      </svg>
+    ),
+  },
+];
+
+export default function Features() {
+  return (
+    <section className="py-24 bg-white dark:bg-black">
+      <div className="container mx-auto px-4">
+        <div className="mb-16 text-center">
+          <h2 className="text-3xl font-bold mb-4">Why Dongle?</h2>
+          <p className="text-zinc-500 dark:text-zinc-400 max-w-2xl mx-auto">
+            We&apos;re building the infrastructure for a more trustworthy decentralized ecosystem.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {features.map((feature, idx) => (
+            <div 
+              key={idx} 
+              className="p-8 rounded-3xl border border-zinc-100 dark:border-zinc-900 hover:border-zinc-200 dark:hover:border-zinc-800 transition-colors bg-zinc-50/50 dark:bg-zinc-900/30"
+            >
+              <div className="w-12 h-12 rounded-2xl bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center mb-6 text-black dark:text-white">
+                {feature.icon}
+              </div>
+              <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
+              <p className="text-zinc-500 dark:text-zinc-400 leading-relaxed italic">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}