mirror of
https://github.com/katanemo/plano.git
synced 2026-06-29 15:49:40 +02:00
introduce SEO optimizations for marketing reach
This commit is contained in:
Musa
parent
43bdd0bfcf
commit
d67f9f205c
12 changed files with 701 additions and 275 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -149,3 +149,4 @@ apps/*/dist/
|
||||||
*.logs
|
*.logs
|
||||||
|
|
||||||
.cursor/
|
.cursor/
|
||||||
|
.agents
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
import { client, urlFor } from "@/lib/sanity";
|
import { client, urlFor } from "@/lib/sanity";
|
||||||
|
import type { Metadata } from "next";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { PortableText } from "@/components/PortableText";
|
import { PortableText } from "@/components/PortableText";
|
||||||
import { notFound } from "next/navigation";
|
import { notFound } from "next/navigation";
|
||||||
import { UnlockPotentialSection } from "@/components/UnlockPotentialSection";
|
import { UnlockPotentialSection } from "@/components/UnlockPotentialSection";
|
||||||
|
import { createBlogPostMetadata } from "@/lib/metadata";
|
||||||
|
|
||||||
interface BlogPost {
|
interface BlogPost {
|
||||||
_id: string;
|
_id: string;
|
||||||
|
|
@ -67,6 +69,30 @@ export async function generateStaticParams() {
|
||||||
return slugs.map((slug) => ({ slug }));
|
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({
|
export default async function BlogPostPage({
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,9 @@ import { BlogHeader } from "@/components/BlogHeader";
|
||||||
import { FeaturedBlogCard } from "@/components/FeaturedBlogCard";
|
import { FeaturedBlogCard } from "@/components/FeaturedBlogCard";
|
||||||
import { BlogCard } from "@/components/BlogCard";
|
import { BlogCard } from "@/components/BlogCard";
|
||||||
import { BlogSectionHeader } from "@/components/BlogSectionHeader";
|
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 {
|
interface BlogPost {
|
||||||
_id: string;
|
_id: string;
|
||||||
|
|
|
||||||
233
apps/www/src/app/contact/ContactPageClient.tsx
Normal file
233
apps/www/src/app/contact/ContactPageClient.tsx
Normal file
|
|
@ -0,0 +1,233 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Button } from "@katanemo/ui";
|
||||||
|
import { MessageSquare, Building2, MessagesSquare } from "lucide-react";
|
||||||
|
|
||||||
|
export default function ContactPageClient() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
email: "",
|
||||||
|
company: "",
|
||||||
|
lookingFor: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
|
||||||
|
const [errorMessage, setErrorMessage] = useState("");
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setStatus("submitting");
|
||||||
|
setErrorMessage("");
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/contact", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(formData),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error(data.error || "Something went wrong");
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatus("success");
|
||||||
|
setFormData({
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
email: "",
|
||||||
|
company: "",
|
||||||
|
lookingFor: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
setStatus("error");
|
||||||
|
setErrorMessage(error instanceof Error ? error.message : "Failed to submit form");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col min-h-screen">
|
||||||
|
{/* Hero / Header Section */}
|
||||||
|
<section className="pt-20 pb-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-324 mx-auto text-left">
|
||||||
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-normal leading-tight tracking-tighter text-black mb-6 text-left">
|
||||||
|
<span className="font-sans">Let's start a </span>
|
||||||
|
<span className="font-sans font-medium text-secondary">
|
||||||
|
conversation
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg sm:text-xl text-black/60 max-w-2xl text-left font-sans">
|
||||||
|
Whether you're an enterprise looking for a custom solution or a developer building cool agents, we'd love to hear from you.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Main Content - Split Layout */}
|
||||||
|
<section className="pb-24 px-4 sm:px-6 lg:px-8 grow">
|
||||||
|
<div className="max-w-324 mx-auto">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 items-stretch">
|
||||||
|
|
||||||
|
{/* Left Side: Community (Discord) */}
|
||||||
|
<div className="group relative bg-white rounded-2xl p-8 sm:p-10 flex flex-col justify-between h-full overflow-hidden">
|
||||||
|
{/* Background icon */}
|
||||||
|
<div className="absolute -top-4 -right-4 w-32 h-32 opacity-[0.03] group-hover:opacity-[0.06] transition-opacity duration-300">
|
||||||
|
<MessagesSquare size={128} className="text-blue-600" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="relative z-10 mb-6">
|
||||||
|
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-gray-100/80 backdrop-blur-sm text-gray-700 text-xs font-mono font-bold tracking-wider uppercase mb-6 w-fit border border-gray-200/50">
|
||||||
|
<MessageSquare size={12} className="text-gray-600" />
|
||||||
|
Community
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-gray-900">Join Our Discord</h2>
|
||||||
|
</div>
|
||||||
|
<p className="text-base sm:text-lg text-gray-600 mb-8 leading-relaxed max-w-md">
|
||||||
|
Connect with other developers, ask questions, share what you're building, and stay updated on the latest features by joining our Discord server.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 mt-auto">
|
||||||
|
<Button asChild>
|
||||||
|
<a href="https://discord.gg/pGZf2gcwEc" target="_blank" rel="noopener noreferrer">
|
||||||
|
<MessageSquare size={18} />
|
||||||
|
Join Discord Server
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Side: Enterprise Contact */}
|
||||||
|
<div className="group relative bg-white rounded-2xl p-8 sm:p-10 h-full overflow-hidden">
|
||||||
|
{/* Subtle background pattern */}
|
||||||
|
<div className="absolute inset-0 bg-[linear-gradient(to_bottom_right,transparent_0%,rgba(0,0,0,0.01)_50%,transparent_100%)] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||||
|
|
||||||
|
{/* Background icon */}
|
||||||
|
<div className="absolute -top-4 -right-4 w-32 h-32 opacity-[0.08]">
|
||||||
|
<Building2 size={128} className="text-gray-400" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 mb-8">
|
||||||
|
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-gray-100/80 backdrop-blur-sm text-gray-700 text-xs font-mono font-bold tracking-wider uppercase mb-6 w-fit border border-gray-200/50">
|
||||||
|
<Building2 size={12} className="text-gray-600" />
|
||||||
|
Enterprise
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight mb-4 text-gray-900">Contact Us</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10">
|
||||||
|
{status === "success" ? (
|
||||||
|
<div className="bg-gradient-to-br from-green-50 to-emerald-50/50 rounded-xl p-8 text-center border border-green-200/50 shadow-sm">
|
||||||
|
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4 mx-auto">
|
||||||
|
<svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="text-green-700 text-xl font-semibold mb-2">Message Sent!</div>
|
||||||
|
<p className="text-gray-600 mb-6 text-sm">Thank you for reaching out. We'll be in touch shortly.</p>
|
||||||
|
<Button variant="outline" onClick={() => setStatus("idle")} className="bg-white border-gray-200 hover:bg-gray-50">
|
||||||
|
Send another message
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="flex flex-col gap-5">
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label htmlFor="firstName" className="text-sm font-medium text-gray-600">First Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="firstName"
|
||||||
|
name="firstName"
|
||||||
|
required
|
||||||
|
value={formData.firstName}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||||
|
placeholder="Steve"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label htmlFor="lastName" className="text-sm font-medium text-gray-600">Last Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="lastName"
|
||||||
|
name="lastName"
|
||||||
|
required
|
||||||
|
value={formData.lastName}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||||
|
placeholder="Wozniak"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label htmlFor="email" className="text-sm font-medium text-gray-600">Work Email</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
required
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||||
|
placeholder="steve@apple.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label htmlFor="company" className="text-sm font-medium text-gray-600">Company Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="company"
|
||||||
|
name="company"
|
||||||
|
value={formData.company}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||||
|
placeholder="Apple Inc."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label htmlFor="lookingFor" className="text-sm font-medium text-gray-600">How can we help?</label>
|
||||||
|
<textarea
|
||||||
|
id="lookingFor"
|
||||||
|
name="lookingFor"
|
||||||
|
required
|
||||||
|
value={formData.lookingFor}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="flex min-h-[120px] w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300 resize-none"
|
||||||
|
placeholder="Tell us about your use case, requirements, or questions..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{errorMessage && (
|
||||||
|
<div className="text-red-700 text-sm bg-red-50 p-4 rounded-lg border border-red-200/50 shadow-sm">
|
||||||
|
<div className="font-medium mb-1">Error</div>
|
||||||
|
<div className="text-red-600">{errorMessage}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-1">
|
||||||
|
<Button type="submit" className="w-full" size="lg" disabled={status === "submitting"}>
|
||||||
|
{status === "submitting" ? "Sending..." : "Send Message"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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() {
|
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>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -3,11 +3,15 @@ import Script from "next/script";
|
||||||
import "@katanemo/shared-styles/globals.css";
|
import "@katanemo/shared-styles/globals.css";
|
||||||
import { Analytics } from "@vercel/analytics/next";
|
import { Analytics } from "@vercel/analytics/next";
|
||||||
import { ConditionalLayout } from "@/components/ConditionalLayout";
|
import { ConditionalLayout } from "@/components/ConditionalLayout";
|
||||||
|
import { defaultMetadata } from "@/lib/metadata";
|
||||||
|
|
||||||
export const metadata: 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({
|
export default function RootLayout({
|
||||||
|
|
@ -23,7 +27,7 @@ export default function RootLayout({
|
||||||
src="https://www.googletagmanager.com/gtag/js?id=G-ML7B1X9HY2"
|
src="https://www.googletagmanager.com/gtag/js?id=G-ML7B1X9HY2"
|
||||||
strategy="afterInteractive"
|
strategy="afterInteractive"
|
||||||
/>
|
/>
|
||||||
<Script id="google-analytics" strategy="afterInteractive">
|
<Script strategy="afterInteractive">
|
||||||
{`
|
{`
|
||||||
window.dataLayer = window.dataLayer || [];
|
window.dataLayer = window.dataLayer || [];
|
||||||
function gtag(){dataLayer.push(arguments);}
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
|
|
||||||
26
apps/www/src/app/research/ResearchPageClient.tsx
Normal file
26
apps/www/src/app/research/ResearchPageClient.tsx
Normal file
|
|
@ -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" />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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() {
|
export default function ResearchPage() {
|
||||||
return (
|
return <ResearchPageClient />;
|
||||||
<>
|
|
||||||
<ResearchHero />
|
|
||||||
<ResearchGrid />
|
|
||||||
<ResearchTimeline />
|
|
||||||
<ResearchCTA />
|
|
||||||
<ResearchCapabilities />
|
|
||||||
<ResearchBenchmarks />
|
|
||||||
{/* <ResearchFamily /> */}
|
|
||||||
<UnlockPotentialSection variant="transparent" />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
32
apps/www/src/app/robots.ts
Normal file
32
apps/www/src/app/robots.ts
Normal file
|
|
@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
77
apps/www/src/app/sitemap.ts
Normal file
77
apps/www/src/app/sitemap.ts
Normal file
|
|
@ -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];
|
||||||
|
}
|
||||||
285
apps/www/src/lib/metadata.ts
Normal file
285
apps/www/src/lib/metadata.ts
Normal file
|
|
@ -0,0 +1,285 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
|
||||||
|
const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || "https://planoai.dev";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Site-wide metadata configuration
|
||||||
|
* Centralized SEO settings for consistent branding and search optimization
|
||||||
|
*/
|
||||||
|
export const siteConfig = {
|
||||||
|
name: "Plano",
|
||||||
|
tagline: "Delivery Infrastructure for Agentic Apps",
|
||||||
|
description:
|
||||||
|
"Build agents faster and deliver them reliably to production. Plano is an AI-native proxy and data plane for agent orchestration, LLM routing, guardrails, and observability.",
|
||||||
|
url: BASE_URL,
|
||||||
|
ogImage: `${BASE_URL}/Logomark.png`,
|
||||||
|
links: {
|
||||||
|
docs: "https://docs.planoai.dev",
|
||||||
|
github: "https://github.com/katanemo/plano",
|
||||||
|
discord: "https://discord.gg/pGZf2gcwEc",
|
||||||
|
huggingface: "https://huggingface.co/katanemo",
|
||||||
|
},
|
||||||
|
keywords: [
|
||||||
|
// Primary keywords
|
||||||
|
"AI gateway",
|
||||||
|
"AI agents",
|
||||||
|
"agent orchestration",
|
||||||
|
"LLM gateway",
|
||||||
|
"LLM routing",
|
||||||
|
// Secondary keywords
|
||||||
|
"multi-agent systems",
|
||||||
|
"AI infrastructure",
|
||||||
|
"AI proxy",
|
||||||
|
"agentic applications",
|
||||||
|
"LLM proxy",
|
||||||
|
// Technical keywords
|
||||||
|
"AI observability",
|
||||||
|
"agent tracing",
|
||||||
|
"AI guardrails",
|
||||||
|
"model routing",
|
||||||
|
"prompt routing",
|
||||||
|
// Long-tail keywords
|
||||||
|
"mixture of agents",
|
||||||
|
"AI agent framework",
|
||||||
|
"production AI agents",
|
||||||
|
"deploy AI agents",
|
||||||
|
"open source AI gateway",
|
||||||
|
// brand specific keywords
|
||||||
|
"Plano",
|
||||||
|
"Plano AI",
|
||||||
|
"Plano AI gateway",
|
||||||
|
"Katanemo",
|
||||||
|
"Katanemo AI",
|
||||||
|
"Katanemo AI gateway",
|
||||||
|
"Arch gateway",
|
||||||
|
"Arch AI",
|
||||||
|
"Arch AI gateway",
|
||||||
|
],
|
||||||
|
authors: [{ name: "Katanemo", url: "https://github.com/katanemo/plano" }],
|
||||||
|
creator: "Katanemo",
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate page-specific metadata with consistent defaults
|
||||||
|
*/
|
||||||
|
export function createMetadata({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
keywords = [],
|
||||||
|
image,
|
||||||
|
noIndex = false,
|
||||||
|
pathname = "",
|
||||||
|
}: {
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
keywords?: string[];
|
||||||
|
image?: string;
|
||||||
|
noIndex?: boolean;
|
||||||
|
pathname?: string;
|
||||||
|
}): Metadata {
|
||||||
|
const pageTitle = title
|
||||||
|
? `${title} | ${siteConfig.name}`
|
||||||
|
: `${siteConfig.name} - ${siteConfig.tagline}`;
|
||||||
|
|
||||||
|
const pageDescription = description || siteConfig.description;
|
||||||
|
const pageImage = image || siteConfig.ogImage;
|
||||||
|
const pageUrl = pathname ? `${BASE_URL}${pathname}` : BASE_URL;
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: pageTitle,
|
||||||
|
description: pageDescription,
|
||||||
|
keywords: [...siteConfig.keywords, ...keywords],
|
||||||
|
authors: siteConfig.authors,
|
||||||
|
creator: siteConfig.creator,
|
||||||
|
metadataBase: new URL(BASE_URL),
|
||||||
|
alternates: {
|
||||||
|
canonical: pageUrl,
|
||||||
|
},
|
||||||
|
openGraph: {
|
||||||
|
type: "website",
|
||||||
|
locale: "en_US",
|
||||||
|
url: pageUrl,
|
||||||
|
title: pageTitle,
|
||||||
|
description: pageDescription,
|
||||||
|
siteName: siteConfig.name,
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: pageImage,
|
||||||
|
width: 1200,
|
||||||
|
height: 630,
|
||||||
|
alt: `${siteConfig.name} - ${siteConfig.tagline}`,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
twitter: {
|
||||||
|
card: "summary_large_image",
|
||||||
|
title: pageTitle,
|
||||||
|
description: pageDescription,
|
||||||
|
images: [pageImage],
|
||||||
|
creator: "@katanemo",
|
||||||
|
},
|
||||||
|
robots: noIndex
|
||||||
|
? {
|
||||||
|
index: false,
|
||||||
|
follow: false,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
index: true,
|
||||||
|
follow: true,
|
||||||
|
googleBot: {
|
||||||
|
index: true,
|
||||||
|
follow: true,
|
||||||
|
"max-video-preview": -1,
|
||||||
|
"max-image-preview": "large",
|
||||||
|
"max-snippet": -1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default metadata for the root layout
|
||||||
|
*/
|
||||||
|
export const defaultMetadata: Metadata = createMetadata({});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Page-specific metadata configurations
|
||||||
|
*/
|
||||||
|
export const pageMetadata = {
|
||||||
|
home: createMetadata({
|
||||||
|
pathname: "/",
|
||||||
|
keywords: ["AI gateway", "agent orchestration", "LLM routing"],
|
||||||
|
}),
|
||||||
|
|
||||||
|
research: createMetadata({
|
||||||
|
title: "Research",
|
||||||
|
description:
|
||||||
|
"Explore Plano's applied AI research focusing on safe and efficient agent delivery. Discover our orchestrator models, benchmarks, and open-source LLMs on Hugging Face.",
|
||||||
|
pathname: "/research",
|
||||||
|
keywords: [
|
||||||
|
"AI research",
|
||||||
|
"orchestrator models",
|
||||||
|
"Plano orchestrator",
|
||||||
|
"AI benchmarks",
|
||||||
|
"open source LLM",
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
|
||||||
|
blog: createMetadata({
|
||||||
|
title: "Blog",
|
||||||
|
description:
|
||||||
|
"Latest insights, tutorials, and updates from Plano. Learn about AI agents, agent orchestration, LLM routing, and building production-ready agentic applications.",
|
||||||
|
pathname: "/blog",
|
||||||
|
keywords: [
|
||||||
|
"AI blog",
|
||||||
|
"agent tutorials",
|
||||||
|
"LLM guides",
|
||||||
|
"AI engineering",
|
||||||
|
"agentic AI",
|
||||||
|
"Plano blog",
|
||||||
|
"Plano blog posts",
|
||||||
|
"Arch gateway blog",
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
|
||||||
|
contact: createMetadata({
|
||||||
|
title: "Contact",
|
||||||
|
description:
|
||||||
|
"Get in touch with the Plano team. Join our Discord community or contact us for enterprise solutions for your AI agent infrastructure needs.",
|
||||||
|
pathname: "/contact",
|
||||||
|
keywords: [
|
||||||
|
"contact Plano",
|
||||||
|
"AI support",
|
||||||
|
"enterprise AI",
|
||||||
|
"AI consulting",
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
|
||||||
|
docs: createMetadata({
|
||||||
|
title: "Documentation",
|
||||||
|
description:
|
||||||
|
"Comprehensive documentation for Plano. Learn how to set up agent orchestration, LLM routing, guardrails, and observability for your AI applications.",
|
||||||
|
pathname: "/docs",
|
||||||
|
keywords: [
|
||||||
|
"Plano docs",
|
||||||
|
"AI gateway documentation",
|
||||||
|
"agent setup guide",
|
||||||
|
"LLM configuration",
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate metadata for blog posts
|
||||||
|
*/
|
||||||
|
export function createBlogPostMetadata({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
slug,
|
||||||
|
publishedAt,
|
||||||
|
author,
|
||||||
|
image,
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
slug: string;
|
||||||
|
publishedAt?: string;
|
||||||
|
author?: string;
|
||||||
|
image?: string;
|
||||||
|
}): Metadata {
|
||||||
|
const pageUrl = `${BASE_URL}/blog/${slug}`;
|
||||||
|
// Use the dynamic OG image endpoint for blog posts
|
||||||
|
const ogImage = `${BASE_URL}/api/og/${slug}`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: `${title} | ${siteConfig.name} Blog`,
|
||||||
|
description:
|
||||||
|
description ||
|
||||||
|
`Read "${title}" on the Plano blog. Insights about AI agents, orchestration, and building production-ready agentic applications.`,
|
||||||
|
authors: author ? [{ name: author }] : siteConfig.authors,
|
||||||
|
metadataBase: new URL(BASE_URL),
|
||||||
|
alternates: {
|
||||||
|
canonical: pageUrl,
|
||||||
|
},
|
||||||
|
openGraph: {
|
||||||
|
type: "article",
|
||||||
|
locale: "en_US",
|
||||||
|
url: pageUrl,
|
||||||
|
title: title,
|
||||||
|
description:
|
||||||
|
description ||
|
||||||
|
`Read "${title}" on the Plano blog.`,
|
||||||
|
siteName: siteConfig.name,
|
||||||
|
publishedTime: publishedAt,
|
||||||
|
authors: author ? [author] : undefined,
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: ogImage,
|
||||||
|
width: 1200,
|
||||||
|
height: 630,
|
||||||
|
alt: title,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
twitter: {
|
||||||
|
card: "summary_large_image",
|
||||||
|
title: title,
|
||||||
|
description:
|
||||||
|
description ||
|
||||||
|
`Read "${title}" on the Plano blog.`,
|
||||||
|
images: [ogImage],
|
||||||
|
creator: "@katanemo",
|
||||||
|
},
|
||||||
|
robots: {
|
||||||
|
index: true,
|
||||||
|
follow: true,
|
||||||
|
googleBot: {
|
||||||
|
index: true,
|
||||||
|
follow: true,
|
||||||
|
"max-video-preview": -1,
|
||||||
|
"max-image-preview": "large",
|
||||||
|
"max-snippet": -1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue