Uiv2

apps/landing/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@astrojs/react": "^4.4.2",
     "@maple/infra": "workspace:*",
+    "@maple/ui": "workspace:*",
     "alchemy": "https://pkg.pr.new/Makisuo/alchemy@e3f48848",
     "@base-ui/react": "^1.1.0",
     "@clerk/clerk-react": "^5.60.0",
@@ -24,9 +25,11 @@
     "astro": "^5.17.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "recharts": "2.15.4",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0"
   }
 }

apps/landing/src/components/FeatureDetailGrid.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+    items: Array<{ title: string; description: string }>;
+}
+
+const { items } = Astro.props;
+---
+
+<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-border border border-border">
+    {items.map(item => (
+        <div class="bg-bg p-6 md:p-8">
+            <h3 class="text-base font-semibold text-fg mb-2">{item.title}</h3>
+            <p class="text-sm text-fg-muted leading-relaxed">{item.description}</p>
+        </div>
+    ))}
+</div>

apps/landing/src/components/FeatureHero.astro

@@ -0,0 +1,49 @@
+---
+interface Props {
+    label: string;
+    title: string;
+    subtitle: string;
+}
+
+const { label, title, subtitle } = Astro.props;
+---
+
+<section class="relative pt-[47px] overflow-hidden">
+    <!-- Grid background -->
+    <div class="absolute inset-0 pointer-events-none" style="
+        background-image:
+            linear-gradient(to right, oklch(1 0 0 / 4%) 1px, transparent 1px),
+            linear-gradient(to bottom, oklch(1 0 0 / 4%) 1px, transparent 1px);
+        background-size: 60px 60px;
+        mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black, transparent);
+    "></div>
+
+    <div class="relative mx-auto max-w-6xl px-6 pt-24 md:pt-32 pb-16 md:pb-24">
+        <!-- Badge -->
+        <div class="mb-6">
+            <span class="inline-block border border-border px-3 py-1 text-[11px] text-accent uppercase tracking-wider">
+                {label}
+            </span>
+        </div>
+
+        <!-- Headline -->
+        <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-fg leading-tight max-w-3xl">
+            {title}
+        </h1>
+
+        <!-- Subtitle -->
+        <p class="mt-5 text-sm md:text-base text-fg-muted max-w-xl leading-relaxed">
+            {subtitle}
+        </p>
+
+        <!-- Dual CTAs -->
+        <div class="mt-8 flex flex-wrap items-center gap-4">
+            <a href="/waitlist" class="bg-accent text-accent-foreground px-6 py-2.5 text-sm font-medium hover:opacity-90 transition-opacity">
+                Join the waitlist
+            </a>
+            <a href="https://github.com/Makisuo/maple" target="_blank" rel="noopener noreferrer" class="border border-border px-6 py-2.5 text-sm font-medium text-fg hover:opacity-90 transition-opacity">
+                View on GitHub
+            </a>
+        </div>
+    </div>
+</section>

apps/landing/src/components/FeatureSpotlights.astro

@@ -18,7 +18,7 @@
                     Visualize request flows across services with flamegraph and waterfall views.
                     Drill into any span to see attributes, events, and timing.
                 </p>
-                <a href="#" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
+                <a href="/features/distributed-tracing" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
             </div>
             <div class="border border-border bg-bg-elevated overflow-hidden">
                 <!-- Mini waterfall view -->
@@ -96,7 +96,7 @@
                 <p class="mt-3 text-sm text-fg-muted leading-relaxed">
                     Search and filter logs with full-text search. Correlated with traces for seamless debugging across your stack.
                 </p>
-                <a href="#" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
+                <a href="/features/log-management" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
             </div>
         </div>
 
@@ -108,7 +108,7 @@
                 <p class="mt-3 text-sm text-fg-muted leading-relaxed">
                     Track request rates, error rates, and latency percentiles. Build custom charts from any metric your services emit.
                 </p>
-                <a href="#" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
+                <a href="/features/metrics-dashboards" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
             </div>
             <div class="grid grid-cols-2 gap-2">
                 <!-- Latency chart -->
@@ -183,7 +183,7 @@
                 <p class="mt-3 text-sm text-fg-muted leading-relaxed">
                     See all your services at a glance with latency percentiles, throughput, error rates, and environment badges.
                 </p>
-                <a href="#" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
+                <a href="/features/service-catalog" class="mt-4 inline-block text-xs text-accent hover:underline underline-offset-2">Learn more &rarr;</a>
             </div>
         </div>
     </div>

apps/landing/src/components/Footer.astro

@@ -4,7 +4,7 @@
 
 <footer class="border-t border-border">
     <div class="mx-auto max-w-6xl px-6 py-12">
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+        <div class="grid grid-cols-2 md:grid-cols-5 gap-8">
             <!-- Col 1: Logo + tagline -->
             <div class="col-span-2 md:col-span-1">
                 <div class="flex items-center gap-3 mb-3">
@@ -28,20 +28,35 @@
                 </ul>
             </div>
 
-            <!-- Col 3: Resources -->
+            <!-- Col 3: Features -->
             <div>
-                <h4 class="text-[11px] text-fg font-medium uppercase tracking-wider mb-4">Resources</h4>
+                <h4 class="text-[11px] text-fg font-medium uppercase tracking-wider mb-4">Features</h4>
                 <ul class="space-y-2">
-                    <li><a href="https://github.com/Makisuo/maple" target="_blank" rel="noopener noreferrer" class="text-fg-muted text-xs hover:text-fg transition-colors">GitHub</a></li>
-                    <li><a href="https://opentelemetry.io" target="_blank" rel="noopener noreferrer" class="text-fg-muted text-xs hover:text-fg transition-colors">OpenTelemetry</a></li>
+                    <li><a href="/features/distributed-tracing" class="text-fg-muted text-xs hover:text-fg transition-colors">Distributed Tracing</a></li>
+                    <li><a href="/features/log-management" class="text-fg-muted text-xs hover:text-fg transition-colors">Log Management</a></li>
+                    <li><a href="/features/metrics-dashboards" class="text-fg-muted text-xs hover:text-fg transition-colors">Metrics & Dashboards</a></li>
+                    <li><a href="/features/service-catalog" class="text-fg-muted text-xs hover:text-fg transition-colors">Service Catalog</a></li>
+                    <li><a href="/features/error-tracking" class="text-fg-muted text-xs hover:text-fg transition-colors">Error Tracking</a></li>
+                    <li><a href="/features/ai-mcp-integration" class="text-fg-muted text-xs hover:text-fg transition-colors">AI & MCP</a></li>
                 </ul>
             </div>
 
-            <!-- Col 4: Community -->
+            <!-- Col 4: Use Cases -->
+            <div>
+                <h4 class="text-[11px] text-fg font-medium uppercase tracking-wider mb-4">Use Cases</h4>
+                <ul class="space-y-2">
+                    <li><a href="/use-cases/ecommerce-observability" class="text-fg-muted text-xs hover:text-fg transition-colors">E-Commerce</a></li>
+                    <li><a href="/use-cases/microservices-debugging" class="text-fg-muted text-xs hover:text-fg transition-colors">Microservices</a></li>
+                    <li><a href="/use-cases/api-performance" class="text-fg-muted text-xs hover:text-fg transition-colors">API Performance</a></li>
+                </ul>
+            </div>
+
+            <!-- Col 5: Community -->
             <div>
                 <h4 class="text-[11px] text-fg font-medium uppercase tracking-wider mb-4">Community</h4>
                 <ul class="space-y-2">
-                    <li><span class="relative group cursor-default opacity-40 text-fg-muted text-xs">Discussions<span class="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap bg-bg border border-border px-2 py-1 text-[10px] text-fg-muted opacity-0 group-hover:opacity-100 transition-opacity">Coming soon</span></span></li>
+                    <li><a href="https://github.com/Makisuo/maple" target="_blank" rel="noopener noreferrer" class="text-fg-muted text-xs hover:text-fg transition-colors">GitHub</a></li>
+                    <li><a href="https://opentelemetry.io" target="_blank" rel="noopener noreferrer" class="text-fg-muted text-xs hover:text-fg transition-colors">OpenTelemetry</a></li>
                     <li><a href="https://x.com/maple_dev" target="_blank" rel="noopener noreferrer" class="text-fg-muted text-xs hover:text-fg transition-colors">Twitter / X</a></li>
                 </ul>
             </div>

apps/landing/src/components/Nav.astro

@@ -1,5 +1,5 @@
 ---
-
+import { NavBar } from "./NavBar"
 ---
 
 <!-- Announcement bar -->
@@ -8,25 +8,7 @@
 </div>
 
 <nav class="fixed top-[28px] left-0 right-0 z-50 border-b border-border bg-bg/95 backdrop-blur-md">
-    <div class="mx-auto max-w-6xl flex items-center justify-between px-6 h-14">
-        <a href="/" class="flex items-center gap-3">
-            <div class="w-7 h-7 bg-accent flex items-center justify-center">
-                <span class="text-accent-foreground text-sm font-bold">M</span>
-            </div>
-            <span class="text-fg font-medium text-sm">Maple</span>
-        </a>
-
-        <div class="flex items-center gap-6">
-            <a href="#features" class="text-fg-muted text-xs hover:text-fg transition-colors hidden sm:block">Features</a>
-            <a href="#how-it-works" class="text-fg-muted text-xs hover:text-fg transition-colors hidden sm:block">How it works</a>
-            <a href="https://github.com/Makisuo/maple" target="_blank" rel="noopener noreferrer" class="text-fg-muted hover:text-fg transition-colors hidden sm:block">
-                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                </svg>
-            </a>
-            <a href="/waitlist" class="bg-accent text-accent-foreground px-4 py-1.5 text-xs font-medium hover:opacity-90 transition-opacity">
-                Join waitlist
-            </a>
-        </div>
+    <div class="mx-auto max-w-6xl px-6 h-14">
+        <NavBar client:load />
     </div>
 </nav>

apps/landing/src/components/NavBar.tsx

@@ -0,0 +1,101 @@
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+} from "@maple/ui/components/ui/navigation-menu"
+
+const featureLinks = [
+  { href: "/features/distributed-tracing", label: "Distributed Tracing" },
+  { href: "/features/metrics-dashboards", label: "Metrics & Dashboards" },
+  { href: "/features/log-management", label: "Log Management" },
+  { href: "/features/service-catalog", label: "Service Catalog & Map" },
+  { href: "/features/error-tracking", label: "Error Tracking" },
+  { href: "/features/ai-mcp-integration", label: "AI & MCP Integration" },
+]
+
+const useCaseLinks = [
+  { href: "/use-cases/ecommerce-observability", label: "E-Commerce Observability" },
+  { href: "/use-cases/microservices-debugging", label: "Microservices Debugging" },
+  { href: "/use-cases/api-performance", label: "API Performance" },
+]
+
+export function NavBar() {
+  return (
+    <div className="flex items-center justify-between h-full">
+      {/* Left group: Logo + Navigation */}
+      <div className="flex items-center gap-1">
+        <a href="/" className="flex items-center gap-3 mr-2">
+          <div className="w-7 h-7 bg-accent flex items-center justify-center">
+            <span className="text-accent-foreground text-sm font-bold">M</span>
+          </div>
+          <span className="text-fg font-medium text-sm">Maple</span>
+        </a>
+
+        <NavigationMenu className="hidden sm:flex">
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger className="bg-transparent hover:bg-muted/20 text-fg-muted hover:text-fg">
+                Features
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <div className="grid grid-cols-2 gap-1 p-2">
+                  {featureLinks.map((link) => (
+                    <NavigationMenuLink
+                      key={link.href}
+                      href={link.href}
+                      className="whitespace-nowrap"
+                    >
+                      {link.label}
+                    </NavigationMenuLink>
+                  ))}
+                </div>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+
+            <NavigationMenuItem>
+              <NavigationMenuTrigger className="bg-transparent hover:bg-muted/20 text-fg-muted hover:text-fg">
+                Use Cases
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <div className="p-2 min-w-[220px]">
+                  {useCaseLinks.map((link) => (
+                    <NavigationMenuLink
+                      key={link.href}
+                      href={link.href}
+                    >
+                      {link.label}
+                    </NavigationMenuLink>
+                  ))}
+                </div>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      {/* Right group: GitHub + CTA */}
+      <div className="flex items-center gap-6">
+        <a
+          href="https://github.com/Makisuo/maple"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-fg-muted hover:text-fg transition-colors hidden sm:block"
+        >
+          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+          </svg>
+        </a>
+
+        <a
+          href="/waitlist"
+          className="bg-accent text-accent-foreground px-4 py-1.5 text-xs font-medium hover:opacity-90 transition-opacity"
+        >
+          Join waitlist
+        </a>
+      </div>
+    </div>
+  )
+}

apps/landing/src/components/RelatedFeatures.astro

@@ -0,0 +1,34 @@
+---
+interface Props {
+    current: string;
+}
+
+const { current } = Astro.props;
+
+const features = [
+    { slug: "distributed-tracing", label: "Distributed Tracing", description: "Follow every request across services" },
+    { slug: "log-management", label: "Log Management", description: "Search and correlate logs instantly" },
+    { slug: "metrics-dashboards", label: "Metrics & Dashboards", description: "Track every signal that matters" },
+    { slug: "service-catalog", label: "Service Catalog & Map", description: "All your services at a glance" },
+    { slug: "error-tracking", label: "Error Tracking", description: "Find and fix errors faster" },
+    { slug: "ai-mcp-integration", label: "AI & MCP Integration", description: "AI-powered diagnostics via MCP" },
+];
+
+const filtered = features.filter(f => f.slug !== current).slice(0, 3);
+---
+
+<section class="py-24 md:py-32">
+    <div class="mx-auto max-w-6xl px-6">
+        <span class="text-[11px] text-accent uppercase tracking-wider">Explore more</span>
+        <h2 class="mt-3 text-2xl md:text-3xl font-bold text-fg mb-12">Related features</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-border border border-border">
+            {filtered.map(f => (
+                <a href={`/features/${f.slug}`} class="bg-bg p-6 md:p-8 hover:bg-muted/10 transition-colors group">
+                    <h3 class="text-base font-semibold text-fg mb-2 group-hover:text-accent transition-colors">{f.label}</h3>
+                    <p class="text-sm text-fg-muted leading-relaxed">{f.description}</p>
+                    <span class="mt-4 inline-block text-xs text-accent">Learn more &rarr;</span>
+                </a>
+            ))}
+        </div>
+    </div>
+</section>

apps/landing/src/components/SeoHead.astro

@@ -0,0 +1,31 @@
+---
+interface Props {
+    title: string;
+    description: string;
+    type?: "SoftwareApplication" | "WebPage";
+    url?: string;
+}
+
+const { title, description, type = "WebPage", url } = Astro.props;
+
+const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": type,
+    name: title,
+    description,
+    ...(url ? { url } : {}),
+    ...(type === "SoftwareApplication"
+        ? {
+              applicationCategory: "DeveloperApplication",
+              operatingSystem: "Web",
+              offers: {
+                  "@type": "Offer",
+                  price: "0",
+                  priceCurrency: "USD",
+              },
+          }
+        : {}),
+};
+---
+
+<script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />