introduce SEO optimization and improve blog content rendering (#709)

* introduce SEO optimizations for marketing reach

* quality of life updates to Next

* format with biome

* improve wording on home badge

* adding additional keyword based on trends

* add code block and markdown support for blogs

* Update metadata for SEO

.gitignore

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

apps/www/package.json

@@ -21,18 +21,25 @@
     "@portabletext/react": "^5.0.0",
     "@portabletext/types": "^3.0.0",
     "@sanity/client": "^7.13.0",
+    "@sanity/code-input": "^6.0.4",
     "@sanity/image-url": "^1.2.0",
+    "@sanity/table": "^2.0.1",
     "@vercel/analytics": "^1.5.0",
     "csv-parse": "^6.1.0",
+    "easymde": "^2.20.0",
     "framer-motion": "^12.23.24",
     "jsdom": "^27.2.0",
-    "next": "^16.0.7",
+    "next": "^16.1.6",
     "next-sanity": "^11.6.9",
     "papaparse": "^5.5.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.1",
     "resend": "^6.6.0",
     "sanity": "^4.18.0",
+    "sanity-plugin-markdown": "^7.0.4",
     "styled-components": "^6.1.19"
   },
   "devDependencies": {
@@ -44,6 +51,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5"

apps/www/sanity.config.ts

@@ -1,4 +1,7 @@
 import { defineConfig } from "sanity";
+import { codeInput } from "@sanity/code-input";
+import { table } from "@sanity/table";
+import { markdownSchema } from "sanity-plugin-markdown";
 import { structureTool } from "sanity/structure";
 import { schemaTypes } from "./schemaTypes";
 
@@ -11,7 +14,7 @@ export default defineConfig({
 
   basePath: "/studio",
 
-  plugins: [structureTool()],
+  plugins: [structureTool(), codeInput(), table(), markdownSchema()],
 
   schema: {
     types: schemaTypes,

apps/www/schemaTypes/blogType.ts

@@ -35,6 +35,45 @@ export const blogType = defineType({
         {
           type: "block",
         },
+        {
+          type: "code",
+          options: {
+            language: "typescript",
+            languageAlternatives: [
+              { title: "TypeScript", value: "typescript" },
+              { title: "JavaScript", value: "javascript" },
+              { title: "HTML", value: "html" },
+              { title: "CSS", value: "css" },
+              { title: "Bash", value: "sh" },
+              { title: "Python", value: "python" },
+              { title: "Markdown", value: "markdown" },
+              { title: "YAML", value: "yaml" },
+              { title: "JSON", value: "json" },
+              { title: "XML", value: "xml" },
+              { title: "SQL", value: "sql" },
+              { title: "Shell", value: "shell" },
+              { title: "PowerShell", value: "powershell" },
+              { title: "Batch", value: "batch" },
+            ],
+            withFilename: true,
+          },
+        },
+        {
+          type: "object",
+          name: "markdownBlock",
+          title: "Markdown",
+          fields: [
+            {
+              name: "markdown",
+              title: "Markdown",
+              type: "markdown",
+              description: "Markdown content with preview and image uploads",
+            },
+          ],
+        },
+        {
+          type: "table",
+        },
         {
           type: "image",
           fields: [

apps/www/src/app/api/contact/route.ts

@@ -1,10 +1,10 @@
-import { Resend } from 'resend';
+import { Resend } from "resend";
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
 function getResendClient() {
   const apiKey = process.env.RESEND_API_KEY;
   if (!apiKey) {
-    throw new Error('RESEND_API_KEY environment variable is not set');
+    throw new Error("RESEND_API_KEY environment variable is not set");
   }
   return new Resend(apiKey);
 }
@@ -17,18 +17,24 @@ interface ContactPayload {
   lookingFor: string;
 }
 
-function buildProperties(company?: string, lookingFor?: string): Record<string, string> | undefined {
+function buildProperties(
+  company?: string,
+  lookingFor?: string,
+): Record<string, string> | undefined {
   const properties: Record<string, string> = {};
   if (company) properties.company_name = company;
   if (lookingFor) properties.looking_for = lookingFor;
   return Object.keys(properties).length > 0 ? properties : undefined;
 }
 
-function isDuplicateError(error: { message?: string; statusCode?: number | null }): boolean {
+function isDuplicateError(error: {
-  const errorMessage = error.message?.toLowerCase() || '';
+  message?: string;
+  statusCode?: number | null;
+}): boolean {
+  const errorMessage = error.message?.toLowerCase() || "";
   return (
-    errorMessage.includes('already exists') ||
+    errorMessage.includes("already exists") ||
-    errorMessage.includes('duplicate') ||
+    errorMessage.includes("duplicate") ||
     error.statusCode === 409
   );
 }
@@ -38,7 +44,7 @@ function createContactPayload(
   firstName: string,
   lastName: string,
   company?: string,
-  lookingFor?: string
+  lookingFor?: string,
 ) {
   const properties = buildProperties(company, lookingFor);
   return {
@@ -53,50 +59,56 @@ function createContactPayload(
 export async function POST(req: Request) {
   try {
     const body = await req.json();
-    const { firstName, lastName, email, company, lookingFor }: ContactPayload = body;
+    const { firstName, lastName, email, company, lookingFor }: ContactPayload =
+      body;
 
     if (!email || !firstName || !lastName || !lookingFor) {
       return NextResponse.json(
-        { error: 'Missing required fields' },
+        { error: "Missing required fields" },
-        { status: 400 }
+        { status: 400 },
       );
     }
 
-    const contactPayload = createContactPayload(email, firstName, lastName, company, lookingFor);
+    const contactPayload = createContactPayload(
+      email,
+      firstName,
+      lastName,
+      company,
+      lookingFor,
+    );
     const resend = getResendClient();
 
     const { data, error } = await resend.contacts.create(contactPayload);
 
     if (error) {
       if (isDuplicateError(error)) {
-        const { data: updateData, error: updateError } = await resend.contacts.update(
+        const { data: updateData, error: updateError } =
-          contactPayload
+          await resend.contacts.update(contactPayload);
-        );
 
         if (updateError) {
-          console.error('Resend update error:', updateError);
+          console.error("Resend update error:", updateError);
           return NextResponse.json(
-            { error: updateError.message || 'Failed to update contact' },
+            { error: updateError.message || "Failed to update contact" },
-            { status: 500 }
+            { status: 500 },
           );
         }
 
         return NextResponse.json({ success: true, data: updateData });
       }
 
-      console.error('Resend create error:', error);
+      console.error("Resend create error:", error);
       return NextResponse.json(
-        { error: error.message || 'Failed to create contact' },
+        { error: error.message || "Failed to create contact" },
-        { status: error.statusCode || 500 }
+        { status: error.statusCode || 500 },
       );
     }
 
     return NextResponse.json({ success: true, data });
   } catch (error) {
-    console.error('Unexpected error:', error);
+    console.error("Unexpected error:", error);
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { error: error instanceof Error ? error.message : "Unknown error" },
-      { status: 500 }
+      { status: 500 },
     );
   }
 }

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 = {
+import { pageMetadata } from "@/lib/metadata";
-  title: "Blog - Plano",
+
-  description: "Latest insights, updates, and stories from Plano",
+export const metadata: Metadata = pageMetadata.blog;
-};
 
 interface BlogPost {
   _id: string;

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

@@ -0,0 +1,299 @@
+"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";
+export const metadata: Metadata = pageMetadata.contact;
-import { Button } from "@katanemo/ui";
-import Link from "next/link";
-import { ArrowRight, MessageSquare, Building2, MessagesSquare } from "lucide-react";
 
 export default function ContactPage() {
-  const [formData, setFormData] = useState({
+  return <ContactPageClient />;
-    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/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",
+  ...defaultMetadata,
-  description:
+  manifest: "/manifest.json",
-    "Build agents faster, and deliver them reliably to production - by offloading the critical plumbing work to Plano!",
+  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 {
+export const metadata: Metadata = pageMetadata.research;
-  ResearchHero,
-  ResearchGrid,
-  ResearchTimeline,
-  ResearchCTA,
-  ResearchCapabilities,
-  ResearchBenchmarks,
-  ResearchFamily,
-} from "@/components/research";
-import { UnlockPotentialSection } from "@/components/UnlockPotentialSection";
 
 export default function ResearchPage() {
-  return (
+  return <ResearchPageClient />;
-    <>
-      <ResearchHero />
-      <ResearchGrid />
-      <ResearchTimeline />
-      <ResearchCTA />
-      <ResearchCapabilities />
-      <ResearchBenchmarks />
-      {/* <ResearchFamily /> */}
-      <UnlockPotentialSection variant="transparent" />
-    </>
-  );
 }

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/components/Hero.tsx

@@ -31,9 +31,11 @@ export function Hero() {
                 </span>
                 <span className="text-xs sm:text-sm font-[600] tracking-[-0.6px]! text-black leading-tight">
                   <span className="hidden sm:inline">
-                    Signals: Trace Sampling & Preference Data for Continuous Improvement
+                    Signals: Trace Sampling for Fast Error Analysis
+                  </span>
+                  <span className="sm:hidden">
+                    Signals: Trace Sampling for Fast Error Analysis
                   </span>
-                  <span className="sm:hidden">Signals: Trace Sampling & Preference Data for Continuous Improvement</span>
                 </span>
               </div>
             </Link>
@@ -58,12 +60,20 @@ export function Hero() {
           {/* CTA Buttons */}
           <div className="flex flex-col sm:flex-row items-stretch sm:items-start gap-3 sm:gap-4">
             <Button asChild className="w-full sm:w-auto">
-              <Link href="https://docs.planoai.dev/get_started/quickstart" target="_blank" rel="noopener noreferrer">
+              <Link
+                href="https://docs.planoai.dev/get_started/quickstart"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 Get started
               </Link>
             </Button>
             <Button variant="secondary" asChild className="w-full sm:w-auto">
-              <Link href="https://docs.planoai.dev" target="_blank" rel="noopener noreferrer">
+              <Link
+                href="https://docs.planoai.dev"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 Documentation
               </Link>
             </Button>

apps/www/src/components/PortableText.tsx

@@ -1,14 +1,273 @@
+"use client";
+
 import { PortableText as SanityPortableText } from "@portabletext/react";
 import Image from "next/image";
 import { urlFor } from "@/lib/sanity";
 import type { PortableTextBlock } from "@portabletext/types";
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import type { Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 interface PortableTextProps {
   content: PortableTextBlock[];
 }
 
+const codeTheme: any = oneLight;
+
+function CodeBlock({
+  code,
+  language,
+  filename,
+  highlightedLines,
+}: {
+  code: string;
+  language?: string;
+  filename?: string;
+  highlightedLines: Set<number>;
+}) {
+  const [copied, setCopied] = useState(false);
+  const displayLanguage = language || "text";
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return (
+    <div className="my-6 lg:my-8 not-prose">
+      <div className="rounded-xl border border-black/10 bg-white overflow-hidden shadow-sm">
+        {(filename || language) && (
+          <div className="flex items-center justify-between gap-4 px-4 py-2 text-xs font-semibold text-black/70 bg-black/4 border-b border-black/10">
+            <span className="truncate text-black/80">{filename || "Code"}</span>
+            <div className="flex items-center gap-2">
+              <span className="uppercase tracking-wide text-black/60 font-mono">
+                {displayLanguage}
+              </span>
+              <button
+                type="button"
+                onClick={handleCopy}
+                className="inline-flex items-center justify-center h-6 w-6 rounded border border-black/10 text-black/60 hover:text-black hover:border-black/20 hover:bg-black/5 transition-colors"
+                aria-label="Copy code"
+                title={copied ? "Copied" : "Copy"}
+              >
+                {copied ? (
+                  <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    className="h-3.5 w-3.5"
+                  >
+                    <title>Copied</title>
+                    <path d="M16.704 5.296a1 1 0 010 1.414l-7.25 7.25a1 1 0 01-1.414 0l-3.25-3.25a1 1 0 011.414-1.414L8.25 11.343l6.543-6.547a1 1 0 011.411 0z" />
+                  </svg>
+                ) : (
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    className="h-4 w-4"
+                  >
+                    <title>Copy</title>
+                    <rect x="9" y="9" width="10" height="10" rx="2" />
+                    <rect x="5" y="5" width="10" height="10" rx="2" />
+                  </svg>
+                )}
+              </button>
+            </div>
+          </div>
+        )}
+        <SyntaxHighlighter
+          language={displayLanguage}
+          style={codeTheme}
+          customStyle={{
+            margin: 0,
+            background: "transparent",
+            padding: "1rem",
+            fontSize: "0.875rem",
+          }}
+          lineProps={(lineNumber: number) =>
+            highlightedLines.has(lineNumber)
+              ? {
+                  style: {
+                    backgroundColor: "rgba(251, 191, 36, 0.2)",
+                  },
+                }
+              : { style: {} }
+          }
+          wrapLines
+          codeTagProps={{ style: { fontFamily: "inherit" } }}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+}
+
+const markdownComponents: Components = {
+  h1: (props) => (
+    <h1 className="text-2xl font-semibold text-black mb-3" {...props} />
+  ),
+  h2: (props) => (
+    <h2 className="text-xl font-semibold text-black mt-10 mb-5" {...props} />
+  ),
+  h3: (props) => (
+    <h3 className="text-lg font-semibold text-black mt-10 mb-5" {...props} />
+  ),
+  p: (props) => (
+    <p className="text-base text-black/80 mb-3 leading-relaxed" {...props} />
+  ),
+  ul: (props) => (
+    <ul className="list-disc list-inside mb-3 text-black/80" {...props} />
+  ),
+  ol: (props) => (
+    <ol className="list-decimal list-inside mb-3 text-black/80" {...props} />
+  ),
+  a: (props) => (
+    <a className="text-secondary hover:underline font-medium" {...props} />
+  ),
+  blockquote: (props) => (
+    <blockquote
+      className="border-l-4 border-secondary pl-4 italic text-black/70"
+      {...props}
+    />
+  ),
+  table: (props) => (
+    <div className="my-4 overflow-x-auto">
+      <table
+        className="w-full border-collapse text-sm text-left border border-black/20"
+        {...props}
+      />
+    </div>
+  ),
+  thead: (props) => <thead className="bg-black/4" {...props} />,
+  tbody: (props) => <tbody className="divide-y divide-black/10" {...props} />,
+  tr: (props) => <tr className="even:bg-black/2" {...props} />,
+  th: (props) => (
+    <th className="border border-black/20 px-3 py-2 text-left font-semibold text-black" {...props} />
+  ),
+  td: (props) => (
+    <td className="border border-black/20 px-3 py-2 text-left text-black/80" {...props} />
+  ),
+  pre: (props) => (
+    <pre className="rounded bg-black/10 p-3 text-sm overflow-x-auto" {...props} />
+  ),
+  code: ({ className, children }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    if (match) {
+      return (
+        <SyntaxHighlighter
+          style={codeTheme}
+          language={match[1]}
+          PreTag="div"
+          customStyle={{
+            margin: 0,
+            background: "transparent",
+            fontSize: "0.875rem",
+          }}
+          codeTagProps={{ style: { fontFamily: "inherit" } }}
+        >
+          {String(children).replace(/\n$/, "")}
+        </SyntaxHighlighter>
+      );
+    }
+
+    return (
+      <code
+        className="rounded bg-black/10 px-1.5 py-0.5 text-[0.95em] font-mono"
+      >
+        {children}
+      </code>
+    );
+  },
+};
+
 const components = {
   types: {
+    code: ({ value }: any) => {
+      if (!value?.code) return null;
+      const highlightedLines = new Set<number>(
+        Array.isArray(value.highlightedLines) ? value.highlightedLines : [],
+      );
+      return (
+        <CodeBlock
+          code={String(value.code)}
+          language={value.language}
+          filename={value.filename}
+          highlightedLines={highlightedLines}
+        />
+      );
+    },
+    table: ({ value }: any) => {
+      const rows = Array.isArray(value?.rows) ? value.rows : [];
+      if (rows.length === 0) return null;
+      const headerRowIndex = rows.findIndex((row: any) => row?.isHeader);
+      const headerRow =
+        headerRowIndex >= 0 ? rows[headerRowIndex] : undefined;
+      const bodyRows =
+        headerRowIndex >= 0
+          ? rows.filter((_: any, index: number) => index !== headerRowIndex)
+          : rows;
+      const renderCells = (cells: any[], isHeader: boolean) =>
+        (cells || []).map((cell: any, index: number) => {
+          const Tag = isHeader ? "th" : "td";
+          return (
+            <Tag
+              key={cell?._key || index}
+              className={`border border-black/20 px-3 py-2 text-left align-top ${
+                isHeader ? "font-semibold text-black" : "text-black/80"
+              }`}
+            >
+              {cell?.value || ""}
+            </Tag>
+          );
+        });
+
+      return (
+        <div className="my-6 lg:my-8 overflow-x-auto not-prose">
+          <div className="rounded-xl border border-black/20 overflow-hidden bg-white">
+            <table className="w-full border-collapse text-sm text-left">
+            {headerRow?.cells?.length ? (
+              <thead className="bg-black/4 text-black/80">
+                <tr>{renderCells(headerRow.cells, true)}</tr>
+              </thead>
+            ) : null}
+            <tbody className="divide-y divide-black/10">
+              {bodyRows.map((row: any, rowIndex: number) => (
+                <tr key={row?._key || rowIndex} className="even:bg-black/2">
+                  {renderCells(row?.cells || [], false)}
+                </tr>
+              ))}
+            </tbody>
+            </table>
+          </div>
+        </div>
+      );
+    },
+    markdownBlock: ({ value }: any) => {
+      const markdown = value?.markdown;
+      if (!markdown) return null;
+      return (
+        <div className="my-6 lg:my-8">
+          <div className="rounded-xl border border-black/10 bg-black/2 px-5 py-4">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={markdownComponents}
+            >
+              {markdown}
+            </ReactMarkdown>
+          </div>
+        </div>
+      );
+    },
     image: ({ value }: any) => {
       if (!value?.asset) return null;
 
@@ -55,12 +314,12 @@ const components = {
       </h1>
     ),
     h2: (props: any) => (
-      <h2 className="text-3xl sm:text-4xl lg:text-5xl font-normal leading-tight tracking-tighter text-black mt-8 mb-4 first:mt-0">
+      <h2 className="text-3xl sm:text-4xl lg:text-5xl font-normal leading-tight tracking-tighter text-black mt-10 mb-5 first:mt-0">
         <span className="font-sans">{props.children}</span>
       </h2>
     ),
     h3: (props: any) => (
-      <h3 className="text-2xl sm:text-3xl lg:text-4xl font-normal leading-tight tracking-tighter text-black mt-6 mb-3 first:mt-0">
+      <h3 className="text-2xl sm:text-3xl lg:text-4xl font-normal leading-tight tracking-tighter text-black mt-8 mb-4 first:mt-0">
         <span className="font-sans">{props.children}</span>
       </h3>
     ),

apps/www/src/components/UnlockPotentialSection.tsx

@@ -33,10 +33,14 @@ export function UnlockPotentialSection({
 
           <div className="flex flex-col sm:flex-row gap-5">
             <Button asChild>
-              <Link href="https://docs.planoai.dev/get_started/quickstart">Deploy today</Link>
+              <Link href="https://docs.planoai.dev/get_started/quickstart">
+                Deploy today
+              </Link>
             </Button>
             <Button variant="secondaryDark" asChild>
-              <Link href="https://docs.planoai.dev/get_started/quickstart">Documentation</Link>
+              <Link href="https://docs.planoai.dev/get_started/quickstart">
+                Documentation
+              </Link>
             </Button>
           </div>
         </div>

apps/www/src/lib/metadata.ts

@@ -0,0 +1,338 @@
+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: [
+    // High-intent comparison/alternative searches (proven search volume)
+    "LiteLLM alternative",
+    "Portkey alternative",
+    "Helicone alternative",
+    "OpenRouter alternative",
+    "Kong AI Gateway alternative",
+
+    // Primary keywords (high volume, validated by industry reports)
+    "AI gateway",
+    "LLM gateway",
+    "agentic AI",
+    "AI agents",
+    "agent orchestration",
+    "LLM routing",
+
+    // MCP - massive 2025 trend (97M+ SDK downloads, industry standard)
+    "MCP server",
+    "Model Context Protocol",
+    "MCP gateway",
+    "MCP observability",
+    "MCP security",
+
+    // Problem-aware searches (how developers search)
+    "LLM rate limiting",
+    "LLM load balancing",
+    "LLM failover",
+    "provider fallback",
+    "multi-provider LLM",
+    "LLM cost optimization",
+    "token usage tracking",
+
+    // Agent framework integration (trending frameworks)
+    "LangGraph gateway",
+    "LangChain infrastructure",
+    "CrewAI deployment",
+    "AutoGen orchestration",
+    "multi-agent orchestration",
+
+    // Production & reliability (enterprise focus)
+    "AI agents in production",
+    "production AI infrastructure",
+    "agent reliability",
+    "deploy AI agents",
+    "scaling AI agents",
+    "LLM traffic management",
+
+    // Observability & LLMOps (growing category)
+    "LLM observability",
+    "AI observability",
+    "agent tracing",
+    "LLMOps",
+    "AI telemetry",
+    "prompt versioning",
+
+    // Guardrails & safety (enterprise requirement)
+    "AI guardrails",
+    "LLM content filtering",
+    "prompt injection protection",
+    "AI safety middleware",
+
+    // Routing & optimization
+    "model routing",
+    "inference routing",
+    "latency based routing",
+    "intelligent model selection",
+    "semantic caching LLM",
+
+    // Emerging trends (A2A, agentic RAG)
+    "A2A protocol",
+    "agent to agent communication",
+    "agentic RAG",
+    "tool calling orchestration",
+    "function calling routing",
+
+    // Use cases (specific applications)
+    "RAG infrastructure",
+    "chatbot backend",
+    "AI customer service infrastructure",
+    "coding agent infrastructure",
+
+    // Infrastructure architecture
+    "AI data plane",
+    "AI control plane",
+    "AI proxy",
+    "unified LLM API",
+
+    // Open source & self-hosted (strong developer interest)
+    "open source AI gateway",
+    "open source LLM gateway",
+    "self hosted AI gateway",
+    "on premise LLM routing",
+
+    // Brand (minimal, necessary)
+    "Plano AI",
+    "Plano gateway",
+    "Arch 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,
+      },
+    },
+  };
+}

package.json

@@ -22,7 +22,7 @@
   },
   "packageManager": "npm@10.0.0",
   "dependencies": {
-    "next": "^16.1.1",
+    "next": "^16.1.6",
     "react": "^19.2.3",
     "resend": "^6.6.0"
   }

packages/ui/package.json

@@ -34,9 +34,9 @@
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.24",
     "lucide-react": "^0.548.0",
-    "next": "16.0.10",
+    "next": "^16.1.6",
-    "react": "19.2.0",
+    "react": "^19.2.0",
-    "react-dom": "19.2.0",
+    "react-dom": "^19.2.0",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
@@ -47,7 +47,6 @@
     "typescript": "^5"
   },
   "peerDependencies": {
-    "next": "^16.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   }