introduce SEO optimizations for marketing reach

.gitignore

@@ -149,3 +149,4 @@ apps/*/dist/
 *.logs
 
 .cursor/
+.agents

apps/www/src/app/blog/[slug]/page.tsx

@@ -1,9 +1,11 @@
 import { client, urlFor } from "@/lib/sanity";
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import { PortableText } from "@/components/PortableText";
 import { notFound } from "next/navigation";
 import { UnlockPotentialSection } from "@/components/UnlockPotentialSection";
+import { createBlogPostMetadata } from "@/lib/metadata";
 
 interface BlogPost {
   _id: string;
@@ -67,6 +69,30 @@ export async function generateStaticParams() {
   return slugs.map((slug) => ({ slug }));
 }
 
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const post = await getBlogPost(slug);
+
+  if (!post) {
+    return {
+      title: "Post Not Found | Plano Blog",
+      description: "The requested blog post could not be found.",
+    };
+  }
+
+  return createBlogPostMetadata({
+    title: post.title,
+    description: post.summary,
+    slug: post.slug.current,
+    publishedAt: post.publishedAt,
+    author: post.author?.name,
+  });
+}
+
 export default async function BlogPostPage({
   params,
 }: {

apps/www/src/app/blog/page.tsx

@@ -5,10 +5,9 @@ import { BlogHeader } from "@/components/BlogHeader";
 import { FeaturedBlogCard } from "@/components/FeaturedBlogCard";
 import { BlogCard } from "@/components/BlogCard";
 import { BlogSectionHeader } from "@/components/BlogSectionHeader";
-export const metadata: Metadata = {
-  title: "Blog - Plano",
-  description: "Latest insights, updates, and stories from Plano",
-};
+import { pageMetadata } from "@/lib/metadata";
+
+export const metadata: Metadata = pageMetadata.blog;
 
 interface BlogPost {
   _id: string;

apps/www/src/app/contact/ContactPageClient.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@katanemo/ui";
+import { MessageSquare, Building2, MessagesSquare } from "lucide-react";
+
+export default function ContactPageClient() {
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    company: "",
+    lookingFor: "",
+    message: "",
+  });
+  const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus("submitting");
+    setErrorMessage("");
+
+    try {
+      const res = await fetch("/api/contact", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || "Something went wrong");
+      }
+
+      setStatus("success");
+      setFormData({
+        firstName: "",
+        lastName: "",
+        email: "",
+        company: "",
+        lookingFor: "",
+        message: "",
+      });
+    } catch (error) {
+      setStatus("error");
+      setErrorMessage(error instanceof Error ? error.message : "Failed to submit form");
+    }
+  };
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      {/* Hero / Header Section */}
+      <section className="pt-20 pb-16 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-324 mx-auto text-left">
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-normal leading-tight tracking-tighter text-black mb-6 text-left">
+            <span className="font-sans">Let's start a </span>
+            <span className="font-sans font-medium text-secondary">
+              conversation
+            </span>
+          </h1>
+          <p className="text-lg sm:text-xl text-black/60 max-w-2xl text-left font-sans">
+            Whether you're an enterprise looking for a custom solution or a developer building cool agents, we'd love to hear from you.
+          </p>
+        </div>
+      </section>
+
+      {/* Main Content - Split Layout */}
+      <section className="pb-24 px-4 sm:px-6 lg:px-8 grow">
+        <div className="max-w-324 mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 items-stretch">
+
+            {/* Left Side: Community (Discord) */}
+            <div className="group relative bg-white rounded-2xl p-8 sm:p-10 flex flex-col justify-between h-full overflow-hidden">
+               {/* Background icon */}
+               <div className="absolute -top-4 -right-4 w-32 h-32 opacity-[0.03] group-hover:opacity-[0.06] transition-opacity duration-300">
+                  <MessagesSquare size={128} className="text-blue-600" />
+               </div>
+
+               <div className="relative z-10">
+               <div className="relative z-10 mb-6">
+                  <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-gray-100/80 backdrop-blur-sm text-gray-700 text-xs font-mono font-bold tracking-wider uppercase mb-6 w-fit border border-gray-200/50">
+                    <MessageSquare size={12} className="text-gray-600" />
+                    Community
+                  </div>
+                  <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-gray-900">Join Our Discord</h2>
+               </div>
+                  <p className="text-base sm:text-lg text-gray-600 mb-8 leading-relaxed max-w-md">
+                    Connect with other developers, ask questions, share what you're building, and stay updated on the latest features by joining our Discord server.
+                  </p>
+               </div>
+
+               <div className="relative z-10 mt-auto">
+                 <Button asChild>
+                    <a href="https://discord.gg/pGZf2gcwEc" target="_blank" rel="noopener noreferrer">
+                      <MessageSquare size={18} />
+                      Join Discord Server
+                    </a>
+                 </Button>
+               </div>
+            </div>
+
+            {/* Right Side: Enterprise Contact */}
+            <div className="group relative bg-white rounded-2xl p-8 sm:p-10  h-full overflow-hidden">
+               {/* Subtle background pattern */}
+               <div className="absolute inset-0 bg-[linear-gradient(to_bottom_right,transparent_0%,rgba(0,0,0,0.01)_50%,transparent_100%)] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+               {/* Background icon */}
+               <div className="absolute -top-4 -right-4 w-32 h-32 opacity-[0.08]">
+                  <Building2 size={128} className="text-gray-400" />
+               </div>
+
+               <div className="relative z-10 mb-8">
+                  <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-gray-100/80 backdrop-blur-sm text-gray-700 text-xs font-mono font-bold tracking-wider uppercase mb-6 w-fit border border-gray-200/50">
+                    <Building2 size={12} className="text-gray-600" />
+                    Enterprise
+                  </div>
+                  <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight mb-4 text-gray-900">Contact Us</h2>
+               </div>
+
+               <div className="relative z-10">
+                 {status === "success" ? (
+                    <div className="bg-gradient-to-br from-green-50 to-emerald-50/50 rounded-xl p-8 text-center border border-green-200/50 shadow-sm">
+                       <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4 mx-auto">
+                         <svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                         </svg>
+                       </div>
+                       <div className="text-green-700 text-xl font-semibold mb-2">Message Sent!</div>
+                       <p className="text-gray-600 mb-6 text-sm">Thank you for reaching out. We'll be in touch shortly.</p>
+                       <Button variant="outline" onClick={() => setStatus("idle")} className="bg-white border-gray-200 hover:bg-gray-50">
+                          Send another message
+                       </Button>
+                    </div>
+                 ) : (
+                   <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                         <div className="flex flex-col gap-2">
+                            <label htmlFor="firstName" className="text-sm font-medium text-gray-600">First Name</label>
+                            <input
+                              type="text"
+                              id="firstName"
+                              name="firstName"
+                              required
+                              value={formData.firstName}
+                              onChange={handleChange}
+                              className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
+                              placeholder="Steve"
+                            />
+                         </div>
+                         <div className="flex flex-col gap-2">
+                            <label htmlFor="lastName" className="text-sm font-medium text-gray-600">Last Name</label>
+                             <input
+                              type="text"
+                              id="lastName"
+                              name="lastName"
+                              required
+                              value={formData.lastName}
+                              onChange={handleChange}
+                              className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
+                              placeholder="Wozniak"
+                            />
+                         </div>
+                      </div>
+
+                      <div className="flex flex-col gap-2">
+                         <label htmlFor="email" className="text-sm font-medium text-gray-600">Work Email</label>
+                         <input
+                            type="email"
+                            id="email"
+                            name="email"
+                            required
+                            value={formData.email}
+                            onChange={handleChange}
+                            className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
+                            placeholder="steve@apple.com"
+                          />
+                      </div>
+
+                      <div className="flex flex-col gap-2">
+                         <label htmlFor="company" className="text-sm font-medium text-gray-600">Company Name</label>
+                         <input
+                            type="text"
+                            id="company"
+                            name="company"
+                            value={formData.company}
+                            onChange={handleChange}
+                            className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
+                            placeholder="Apple Inc."
+                          />
+                      </div>
+
+                      <div className="flex flex-col gap-2">
+                          <label htmlFor="lookingFor" className="text-sm font-medium text-gray-600">How can we help?</label>
+                          <textarea
+                            id="lookingFor"
+                            name="lookingFor"
+                            required
+                            value={formData.lookingFor}
+                            onChange={handleChange}
+                            className="flex min-h-[120px] w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300 resize-none"
+                            placeholder="Tell us about your use case, requirements, or questions..."
+                          />
+                      </div>
+
+                      {errorMessage && (
+                        <div className="text-red-700 text-sm bg-red-50 p-4 rounded-lg border border-red-200/50 shadow-sm">
+                          <div className="font-medium mb-1">Error</div>
+                          <div className="text-red-600">{errorMessage}</div>
+                        </div>
+                      )}
+
+                      <div className="mt-1">
+                        <Button type="submit" className="w-full" size="lg" disabled={status === "submitting"}>
+                          {status === "submitting" ? "Sending..." : "Send Message"}
+                        </Button>
+                      </div>
+                   </form>
+                 )}
+               </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

apps/www/src/app/contact/page.tsx

@@ -1,234 +1,9 @@
-"use client";
+import type { Metadata } from "next";
+import { pageMetadata } from "@/lib/metadata";
+import ContactPageClient from "./ContactPageClient";
 
-import { useState } from "react";
-import { Button } from "@katanemo/ui";
-import Link from "next/link";
-import { ArrowRight, MessageSquare, Building2, MessagesSquare } from "lucide-react";
+export const metadata: Metadata = pageMetadata.contact;
 
 export default function ContactPage() {
-  const [formData, setFormData] = useState({
-    firstName: "",
-    lastName: "",
-    email: "",
-    company: "",
-    lookingFor: "",
-    message: "",
-  });
-  const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setStatus("submitting");
-    setErrorMessage("");
-
-    try {
-      const res = await fetch("/api/contact", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(formData),
-      });
-
-      const data = await res.json();
-
-      if (!res.ok) {
-        throw new Error(data.error || "Something went wrong");
-      }
-
-      setStatus("success");
-      setFormData({
-        firstName: "",
-        lastName: "",
-        email: "",
-        company: "",
-        lookingFor: "",
-        message: "",
-      });
-    } catch (error) {
-      setStatus("error");
-      setErrorMessage(error instanceof Error ? error.message : "Failed to submit form");
-    }
-  };
-
-  return (
-    <div className="flex flex-col min-h-screen">
-      {/* Hero / Header Section */}
-      <section className="pt-20 pb-16 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-324 mx-auto text-left">
-          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-normal leading-tight tracking-tighter text-black mb-6 text-left">
-            <span className="font-sans">Let's start a </span>
-            <span className="font-sans font-medium text-secondary">
-              conversation
-            </span>
-          </h1>
-          <p className="text-lg sm:text-xl text-black/60 max-w-2xl text-left font-sans">
-            Whether you're an enterprise looking for a custom solution or a developer building cool agents, we'd love to hear from you.
-          </p>
-        </div>
-      </section>
-
-      {/* Main Content - Split Layout */}
-      <section className="pb-24 px-4 sm:px-6 lg:px-8 grow">
-        <div className="max-w-324 mx-auto">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 items-stretch">
-
-            {/* Left Side: Community (Discord) */}
-            <div className="group relative bg-white rounded-2xl p-8 sm:p-10 flex flex-col justify-between h-full overflow-hidden">
-               {/* Background icon */}
-               <div className="absolute -top-4 -right-4 w-32 h-32 opacity-[0.03] group-hover:opacity-[0.06] transition-opacity duration-300">
-                  <MessagesSquare size={128} className="text-blue-600" />
-               </div>
-
-               <div className="relative z-10">
-               <div className="relative z-10 mb-6">
-                  <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-gray-100/80 backdrop-blur-sm text-gray-700 text-xs font-mono font-bold tracking-wider uppercase mb-6 w-fit border border-gray-200/50">
-                    <MessageSquare size={12} className="text-gray-600" />
-                    Community
-                  </div>
-                  <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-gray-900">Join Our Discord</h2>
-               </div>
-                  <p className="text-base sm:text-lg text-gray-600 mb-8 leading-relaxed max-w-md">
-                    Connect with other developers, ask questions, share what you're building, and stay updated on the latest features by joining our Discord server.
-                  </p>
-               </div>
-
-               <div className="relative z-10 mt-auto">
-                 <Button asChild>
-                    <a href="https://discord.gg/pGZf2gcwEc" target="_blank" rel="noopener noreferrer">
-                      <MessageSquare size={18} />
-                      Join Discord Server
-                    </a>
-                 </Button>
-               </div>
-            </div>
-
-            {/* Right Side: Enterprise Contact */}
-            <div className="group relative bg-white rounded-2xl p-8 sm:p-10  h-full overflow-hidden">
-               {/* Subtle background pattern */}
-               <div className="absolute inset-0 bg-[linear-gradient(to_bottom_right,transparent_0%,rgba(0,0,0,0.01)_50%,transparent_100%)] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-
-               {/* Background icon */}
-               <div className="absolute -top-4 -right-4 w-32 h-32 opacity-[0.08]">
-                  <Building2 size={128} className="text-gray-400" />
-               </div>
-
-               <div className="relative z-10 mb-8">
-                  <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-gray-100/80 backdrop-blur-sm text-gray-700 text-xs font-mono font-bold tracking-wider uppercase mb-6 w-fit border border-gray-200/50">
-                    <Building2 size={12} className="text-gray-600" />
-                    Enterprise
-                  </div>
-                  <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight mb-4 text-gray-900">Contact Us</h2>
-               </div>
-
-               <div className="relative z-10">
-                 {status === "success" ? (
-                    <div className="bg-gradient-to-br from-green-50 to-emerald-50/50 rounded-xl p-8 text-center border border-green-200/50 shadow-sm">
-                       <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4 mx-auto">
-                         <svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                         </svg>
-                       </div>
-                       <div className="text-green-700 text-xl font-semibold mb-2">Message Sent!</div>
-                       <p className="text-gray-600 mb-6 text-sm">Thank you for reaching out. We'll be in touch shortly.</p>
-                       <Button variant="outline" onClick={() => setStatus("idle")} className="bg-white border-gray-200 hover:bg-gray-50">
-                          Send another message
-                       </Button>
-                    </div>
-                 ) : (
-                   <form onSubmit={handleSubmit} className="flex flex-col gap-5">
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                         <div className="flex flex-col gap-2">
-                            <label htmlFor="firstName" className="text-sm font-medium text-gray-600">First Name</label>
-                            <input
-                              type="text"
-                              id="firstName"
-                              name="firstName"
-                              required
-                              value={formData.firstName}
-                              onChange={handleChange}
-                              className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
-                              placeholder="Steve"
-                            />
-                         </div>
-                         <div className="flex flex-col gap-2">
-                            <label htmlFor="lastName" className="text-sm font-medium text-gray-600">Last Name</label>
-                             <input
-                              type="text"
-                              id="lastName"
-                              name="lastName"
-                              required
-                              value={formData.lastName}
-                              onChange={handleChange}
-                              className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
-                              placeholder="Wozniak"
-                            />
-                         </div>
-                      </div>
-
-                      <div className="flex flex-col gap-2">
-                         <label htmlFor="email" className="text-sm font-medium text-gray-600">Work Email</label>
-                         <input
-                            type="email"
-                            id="email"
-                            name="email"
-                            required
-                            value={formData.email}
-                            onChange={handleChange}
-                            className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
-                            placeholder="steve@apple.com"
-                          />
-                      </div>
-
-                      <div className="flex flex-col gap-2">
-                         <label htmlFor="company" className="text-sm font-medium text-gray-600">Company Name</label>
-                         <input
-                            type="text"
-                            id="company"
-                            name="company"
-                            value={formData.company}
-                            onChange={handleChange}
-                            className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
-                            placeholder="Apple Inc."
-                          />
-                      </div>
-
-                      <div className="flex flex-col gap-2">
-                          <label htmlFor="lookingFor" className="text-sm font-medium text-gray-600">How can we help?</label>
-                          <textarea
-                            id="lookingFor"
-                            name="lookingFor"
-                            required
-                            value={formData.lookingFor}
-                            onChange={handleChange}
-                            className="flex min-h-[120px] w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300 resize-none"
-                            placeholder="Tell us about your use case, requirements, or questions..."
-                          />
-                      </div>
-
-                      {errorMessage && (
-                        <div className="text-red-700 text-sm bg-red-50 p-4 rounded-lg border border-red-200/50 shadow-sm">
-                          <div className="font-medium mb-1">Error</div>
-                          <div className="text-red-600">{errorMessage}</div>
-                        </div>
-                      )}
-
-                      <div className="mt-1">
-                        <Button type="submit" className="w-full" size="lg" disabled={status === "submitting"}>
-                          {status === "submitting" ? "Sending..." : "Send Message"}
-                        </Button>
-                      </div>
-                   </form>
-                 )}
-               </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  );
+  return <ContactPageClient />;
 }

apps/www/src/app/docs/page.tsx

@@ -1,14 +0,0 @@
-export default function DocsPage() {
-  return (
-    <section className="px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-24">
-      <div className="max-w-[81rem] mx-auto">
-        <h1 className="text-4xl sm:text-5xl lg:text-7xl font-normal leading-tight tracking-tighter text-black mb-6">
-          <span className="font-sans">Documentation</span>
-        </h1>
-        <p className="text-lg sm:text-xl lg:text-2xl font-sans font-[400] tracking-[-1.2px] text-black/70">
-          Coming soon...
-        </p>
-      </div>
-    </section>
-  );
-}

apps/www/src/app/layout.tsx

@@ -3,11 +3,15 @@ import Script from "next/script";
 import "@katanemo/shared-styles/globals.css";
 import { Analytics } from "@vercel/analytics/next";
 import { ConditionalLayout } from "@/components/ConditionalLayout";
+import { defaultMetadata } from "@/lib/metadata";
 
 export const metadata: Metadata = {
-  title: "Plano - Delivery Infrastructure for Agentic Apps",
-  description:
-    "Build agents faster, and deliver them reliably to production - by offloading the critical plumbing work to Plano!",
+  ...defaultMetadata,
+  manifest: "/manifest.json",
+  icons: {
+    icon: "/PlanoIcon.svg",
+    apple: "/Logomark.png",
+  },
 };
 
 export default function RootLayout({
@@ -23,7 +27,7 @@ export default function RootLayout({
           src="https://www.googletagmanager.com/gtag/js?id=G-ML7B1X9HY2"
           strategy="afterInteractive"
         />
-        <Script id="google-analytics" strategy="afterInteractive">
+        <Script strategy="afterInteractive">
           {`
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}

apps/www/src/app/research/ResearchPageClient.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import {
+  ResearchHero,
+  ResearchGrid,
+  ResearchTimeline,
+  ResearchCTA,
+  ResearchCapabilities,
+  ResearchBenchmarks,
+} from "@/components/research";
+import { UnlockPotentialSection } from "@/components/UnlockPotentialSection";
+
+export default function ResearchPageClient() {
+  return (
+    <>
+      <ResearchHero />
+      <ResearchGrid />
+      <ResearchTimeline />
+      <ResearchCTA />
+      <ResearchCapabilities />
+      <ResearchBenchmarks />
+      {/* <ResearchFamily /> */}
+      <UnlockPotentialSection variant="transparent" />
+    </>
+  );
+}

apps/www/src/app/research/page.tsx

@@ -1,27 +1,9 @@
-"use client";
+import type { Metadata } from "next";
+import { pageMetadata } from "@/lib/metadata";
+import ResearchPageClient from "./ResearchPageClient";
 
-import {
-  ResearchHero,
-  ResearchGrid,
-  ResearchTimeline,
-  ResearchCTA,
-  ResearchCapabilities,
-  ResearchBenchmarks,
-  ResearchFamily,
-} from "@/components/research";
-import { UnlockPotentialSection } from "@/components/UnlockPotentialSection";
+export const metadata: Metadata = pageMetadata.research;
 
 export default function ResearchPage() {
-  return (
-    <>
-      <ResearchHero />
-      <ResearchGrid />
-      <ResearchTimeline />
-      <ResearchCTA />
-      <ResearchCapabilities />
-      <ResearchBenchmarks />
-      {/* <ResearchFamily /> */}
-      <UnlockPotentialSection variant="transparent" />
-    </>
-  );
+  return <ResearchPageClient />;
 }

apps/www/src/app/robots.ts

@@ -0,0 +1,32 @@
+import { MetadataRoute } from "next";
+
+const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || "https://planoai.dev";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+        disallow: [
+          "/studio/", // Sanity Studio admin
+          "/api/", // API routes
+          "/_next/", // Next.js internal routes
+        ],
+      },
+      {
+        // Specific rules for common crawlers
+        userAgent: "Googlebot",
+        allow: "/",
+        disallow: ["/studio/", "/api/"],
+      },
+      {
+        userAgent: "Bingbot",
+        allow: "/",
+        disallow: ["/studio/", "/api/"],
+      },
+    ],
+    sitemap: `${BASE_URL}/sitemap.xml`,
+    host: BASE_URL,
+  };
+}

apps/www/src/app/sitemap.ts

@@ -0,0 +1,77 @@
+import { MetadataRoute } from "next";
+import { client } from "@/lib/sanity";
+
+const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || "https://planoai.dev";
+
+interface BlogPost {
+  slug: { current: string };
+  publishedAt?: string;
+  _updatedAt?: string;
+}
+
+async function getBlogPosts(): Promise<BlogPost[]> {
+  const query = `*[_type == "blog" && published == true] | order(publishedAt desc) {
+    slug,
+    publishedAt,
+    _updatedAt
+  }`;
+
+  try {
+    return await client.fetch(query);
+  } catch (error) {
+    console.error("Error fetching blog posts for sitemap:", error);
+    return [];
+  }
+}
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  // Static pages with their priorities and change frequencies
+  const staticPages: MetadataRoute.Sitemap = [
+    {
+      url: BASE_URL,
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 1.0,
+    },
+    {
+      url: `${BASE_URL}/research`,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.9,
+    },
+    {
+      url: `${BASE_URL}/blog`,
+      lastModified: new Date(),
+      changeFrequency: "daily",
+      priority: 0.8,
+    },
+    {
+      url: `${BASE_URL}/contact`,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.6,
+    },
+    {
+      url: `${BASE_URL}/docs`,
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 0.7,
+    },
+  ];
+
+  // Fetch dynamic blog posts
+  const blogPosts = await getBlogPosts();
+
+  const blogPages: MetadataRoute.Sitemap = blogPosts.map((post) => ({
+    url: `${BASE_URL}/blog/${post.slug.current}`,
+    lastModified: post._updatedAt
+      ? new Date(post._updatedAt)
+      : post.publishedAt
+        ? new Date(post.publishedAt)
+        : new Date(),
+    changeFrequency: "monthly" as const,
+    priority: 0.7,
+  }));
+
+  return [...staticPages, ...blogPages];
+}

apps/www/src/lib/metadata.ts

@@ -0,0 +1,285 @@
+import type { Metadata } from "next";
+
+const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || "https://planoai.dev";
+
+/**
+ * Site-wide metadata configuration
+ * Centralized SEO settings for consistent branding and search optimization
+ */
+export const siteConfig = {
+  name: "Plano",
+  tagline: "Delivery Infrastructure for Agentic Apps",
+  description:
+    "Build agents faster and deliver them reliably to production. Plano is an AI-native proxy and data plane for agent orchestration, LLM routing, guardrails, and observability.",
+  url: BASE_URL,
+  ogImage: `${BASE_URL}/Logomark.png`,
+  links: {
+    docs: "https://docs.planoai.dev",
+    github: "https://github.com/katanemo/plano",
+    discord: "https://discord.gg/pGZf2gcwEc",
+    huggingface: "https://huggingface.co/katanemo",
+  },
+  keywords: [
+    // Primary keywords
+    "AI gateway",
+    "AI agents",
+    "agent orchestration",
+    "LLM gateway",
+    "LLM routing",
+    // Secondary keywords
+    "multi-agent systems",
+    "AI infrastructure",
+    "AI proxy",
+    "agentic applications",
+    "LLM proxy",
+    // Technical keywords
+    "AI observability",
+    "agent tracing",
+    "AI guardrails",
+    "model routing",
+    "prompt routing",
+    // Long-tail keywords
+    "mixture of agents",
+    "AI agent framework",
+    "production AI agents",
+    "deploy AI agents",
+    "open source AI gateway",
+    // brand specific keywords
+    "Plano",
+    "Plano AI",
+    "Plano AI gateway",
+    "Katanemo",
+    "Katanemo AI",
+    "Katanemo AI gateway",
+    "Arch gateway",
+    "Arch AI",
+    "Arch AI gateway",
+  ],
+  authors: [{ name: "Katanemo", url: "https://github.com/katanemo/plano" }],
+  creator: "Katanemo",
+};
+
+/**
+ * Generate page-specific metadata with consistent defaults
+ */
+export function createMetadata({
+  title,
+  description,
+  keywords = [],
+  image,
+  noIndex = false,
+  pathname = "",
+}: {
+  title?: string;
+  description?: string;
+  keywords?: string[];
+  image?: string;
+  noIndex?: boolean;
+  pathname?: string;
+}): Metadata {
+  const pageTitle = title
+    ? `${title} | ${siteConfig.name}`
+    : `${siteConfig.name} - ${siteConfig.tagline}`;
+
+  const pageDescription = description || siteConfig.description;
+  const pageImage = image || siteConfig.ogImage;
+  const pageUrl = pathname ? `${BASE_URL}${pathname}` : BASE_URL;
+
+  return {
+    title: pageTitle,
+    description: pageDescription,
+    keywords: [...siteConfig.keywords, ...keywords],
+    authors: siteConfig.authors,
+    creator: siteConfig.creator,
+    metadataBase: new URL(BASE_URL),
+    alternates: {
+      canonical: pageUrl,
+    },
+    openGraph: {
+      type: "website",
+      locale: "en_US",
+      url: pageUrl,
+      title: pageTitle,
+      description: pageDescription,
+      siteName: siteConfig.name,
+      images: [
+        {
+          url: pageImage,
+          width: 1200,
+          height: 630,
+          alt: `${siteConfig.name} - ${siteConfig.tagline}`,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: pageTitle,
+      description: pageDescription,
+      images: [pageImage],
+      creator: "@katanemo",
+    },
+    robots: noIndex
+      ? {
+          index: false,
+          follow: false,
+        }
+      : {
+          index: true,
+          follow: true,
+          googleBot: {
+            index: true,
+            follow: true,
+            "max-video-preview": -1,
+            "max-image-preview": "large",
+            "max-snippet": -1,
+          },
+        },
+  };
+}
+
+/**
+ * Default metadata for the root layout
+ */
+export const defaultMetadata: Metadata = createMetadata({});
+
+/**
+ * Page-specific metadata configurations
+ */
+export const pageMetadata = {
+  home: createMetadata({
+    pathname: "/",
+    keywords: ["AI gateway", "agent orchestration", "LLM routing"],
+  }),
+
+  research: createMetadata({
+    title: "Research",
+    description:
+      "Explore Plano's applied AI research focusing on safe and efficient agent delivery. Discover our orchestrator models, benchmarks, and open-source LLMs on Hugging Face.",
+    pathname: "/research",
+    keywords: [
+      "AI research",
+      "orchestrator models",
+      "Plano orchestrator",
+      "AI benchmarks",
+      "open source LLM",
+    ],
+  }),
+
+  blog: createMetadata({
+    title: "Blog",
+    description:
+      "Latest insights, tutorials, and updates from Plano. Learn about AI agents, agent orchestration, LLM routing, and building production-ready agentic applications.",
+    pathname: "/blog",
+    keywords: [
+      "AI blog",
+      "agent tutorials",
+      "LLM guides",
+      "AI engineering",
+      "agentic AI",
+      "Plano blog",
+      "Plano blog posts",
+      "Arch gateway blog",
+    ],
+  }),
+
+  contact: createMetadata({
+    title: "Contact",
+    description:
+      "Get in touch with the Plano team. Join our Discord community or contact us for enterprise solutions for your AI agent infrastructure needs.",
+    pathname: "/contact",
+    keywords: [
+      "contact Plano",
+      "AI support",
+      "enterprise AI",
+      "AI consulting",
+    ],
+  }),
+
+  docs: createMetadata({
+    title: "Documentation",
+    description:
+      "Comprehensive documentation for Plano. Learn how to set up agent orchestration, LLM routing, guardrails, and observability for your AI applications.",
+    pathname: "/docs",
+    keywords: [
+      "Plano docs",
+      "AI gateway documentation",
+      "agent setup guide",
+      "LLM configuration",
+    ],
+  }),
+};
+
+/**
+ * Generate metadata for blog posts
+ */
+export function createBlogPostMetadata({
+  title,
+  description,
+  slug,
+  publishedAt,
+  author,
+  image,
+}: {
+  title: string;
+  description?: string;
+  slug: string;
+  publishedAt?: string;
+  author?: string;
+  image?: string;
+}): Metadata {
+  const pageUrl = `${BASE_URL}/blog/${slug}`;
+  // Use the dynamic OG image endpoint for blog posts
+  const ogImage = `${BASE_URL}/api/og/${slug}`;
+
+  return {
+    title: `${title} | ${siteConfig.name} Blog`,
+    description:
+      description ||
+      `Read "${title}" on the Plano blog. Insights about AI agents, orchestration, and building production-ready agentic applications.`,
+    authors: author ? [{ name: author }] : siteConfig.authors,
+    metadataBase: new URL(BASE_URL),
+    alternates: {
+      canonical: pageUrl,
+    },
+    openGraph: {
+      type: "article",
+      locale: "en_US",
+      url: pageUrl,
+      title: title,
+      description:
+        description ||
+        `Read "${title}" on the Plano blog.`,
+      siteName: siteConfig.name,
+      publishedTime: publishedAt,
+      authors: author ? [author] : undefined,
+      images: [
+        {
+          url: ogImage,
+          width: 1200,
+          height: 630,
+          alt: title,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: title,
+      description:
+        description ||
+        `Read "${title}" on the Plano blog.`,
+      images: [ogImage],
+      creator: "@katanemo",
+    },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        "max-video-preview": -1,
+        "max-image-preview": "large",
+        "max-snippet": -1,
+      },
+    },
+  };
+}