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

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

@@ -1,10 +1,10 @@
-import { Resend } from 'resend';
-import { NextResponse } from 'next/server';
+import { Resend } from "resend";
+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 {
-  const errorMessage = error.message?.toLowerCase() || '';
+function isDuplicateError(error: {
+  message?: string;
+  statusCode?: number | null;
+}): boolean {
+  const errorMessage = error.message?.toLowerCase() || "";
   return (
-    errorMessage.includes('already exists') ||
-    errorMessage.includes('duplicate') ||
+    errorMessage.includes("already exists") ||
+    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' },
-        { status: 400 }
+        { error: "Missing required fields" },
+        { 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(
-          contactPayload
-        );
+        const { data: updateData, error: updateError } =
+          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' },
-            { status: 500 }
+            { error: updateError.message || "Failed to update contact" },
+            { 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' },
-        { status: error.statusCode || 500 }
+        { error: error.message || "Failed to create contact" },
+        { 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' },
-      { status: 500 }
+      { error: error instanceof Error ? error.message : "Unknown error" },
+      { 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 = {
-  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,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";
-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];
+}