include contact page and restructuring (#640)

* include contact and navbar changes * removereact references * tweak contacts APi route * change font
2026-04-25 00:36:34 +02:00 · 2025-12-22 15:02:45 -08:00 · 2025-12-22 15:02:45 -08:00 · 60162e0575
commit 60162e0575
parent 0c3efdbef2
12 changed files with 468 additions and 10 deletions
--- a/apps/www/package.json
+++ b/apps/www/package.json
@ -31,6 +31,7 @@
    "papaparse": "^5.5.3",
    "react": "19.2.0",
    "react-dom": "19.2.0",
+    "resend": "^6.6.0",
    "sanity": "^4.18.0",
    "styled-components": "^6.1.19"
  },
--- a/apps/www/src/app/api/contact/route.ts
+++ b/apps/www/src/app/api/contact/route.ts
@ -0,0 +1,102 @@
+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');
+  }
+  return new Resend(apiKey);
+}
+
+interface ContactPayload {
+  email: string;
+  firstName: string;
+  lastName: string;
+  company?: string;
+  lookingFor: string;
+}
+
+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() || '';
+  return (
+    errorMessage.includes('already exists') ||
+    errorMessage.includes('duplicate') ||
+    error.statusCode === 409
+  );
+}
+
+function createContactPayload(
+  email: string,
+  firstName: string,
+  lastName: string,
+  company?: string,
+  lookingFor?: string
+) {
+  const properties = buildProperties(company, lookingFor);
+  return {
+    email,
+    firstName,
+    lastName,
+    unsubscribed: false,
+    ...(properties && { properties }),
+  };
+}
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    const { firstName, lastName, email, company, lookingFor }: ContactPayload = body;
+
+    if (!email || !firstName || !lastName || !lookingFor) {
+      return NextResponse.json(
+        { error: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+
+    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
+        );
+
+        if (updateError) {
+          console.error('Resend update error:', updateError);
+          return NextResponse.json(
+            { error: updateError.message || 'Failed to update contact' },
+            { status: 500 }
+          );
+        }
+
+        return NextResponse.json({ success: true, data: updateData });
+      }
+
+      console.error('Resend create error:', error);
+      return NextResponse.json(
+        { error: error.message || 'Failed to create contact' },
+        { status: error.statusCode || 500 }
+      );
+    }
+
+    return NextResponse.json({ success: true, data });
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
--- a/apps/www/src/app/contact/page.tsx
+++ b/apps/www/src/app/contact/page.tsx
@ -0,0 +1,234 @@
+"use client";
+
+import { useState } from "react";
+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({
+    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>
+  );
+}
--- a/apps/www/src/app/docs/page.tsx
+++ b/apps/www/src/app/docs/page.tsx
@ -1,5 +1,3 @@
-import React from "react";
-
 export default function DocsPage() {
  return (
    <section className="px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-24">
--- a/apps/www/src/app/page.tsx
+++ b/apps/www/src/app/page.tsx
@ -1,6 +1,5 @@
 "use client";

-import React from "react";
 import { Hero } from "@/components/Hero";
 import { IntroSection } from "@/components/IntroSection";
 import { IdeaToAgentSection } from "@/components/IdeaToAgentSection";
--- a/apps/www/src/app/research/page.tsx
+++ b/apps/www/src/app/research/page.tsx
@ -1,6 +1,5 @@
 "use client";

-import React from "react";
 import {
  ResearchHero,
  ResearchGrid,
--- a/apps/www/tsconfig.json
+++ b/apps/www/tsconfig.json
@ -2,6 +2,7 @@
  "extends": "@katanemo/tsconfig/nextjs.json",
  "compilerOptions": {
    "jsx": "react-jsx",
+    "esModuleInterop": true,
    "paths": {
      "@/*": ["./src/*"],
      "@katanemo/ui": ["../../packages/ui/src"]
--- a/package-lock.json
+++ b/package-lock.json
@ -11,6 +11,10 @@
        "apps/*",
        "packages/*"
      ],
+      "dependencies": {
+        "react": "^19.2.3",
+        "resend": "^6.6.0"
+      },
      "devDependencies": {
        "turbo": "^2.6.3"
      },
@ -61,6 +65,7 @@
        "papaparse": "^5.5.3",
        "react": "19.2.0",
        "react-dom": "19.2.0",
+        "resend": "^6.6.0",
        "sanity": "^4.18.0",
        "styled-components": "^6.1.19"
      },
@ -404,6 +409,15 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "apps/www/node_modules/react": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
+      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "apps/www/node_modules/tldts": {
      "version": "7.0.19",
      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.19.tgz",
@ -7056,6 +7070,12 @@
        "react": "^16.14.0 || 17.x || 18.x || 19.x"
      }
    },
+    "node_modules/@stablelib/base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+      "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==",
+      "license": "MIT"
+    },
    "node_modules/@swc/helpers": {
      "version": "0.5.15",
      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@ -9365,6 +9385,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
    "node_modules/esbuild": {
      "version": "0.27.0",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.0.tgz",
@ -9593,6 +9619,12 @@
        "node": ">=8.6.0"
      }
    },
+    "node_modules/fast-sha256": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+      "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==",
+      "license": "Unlicense"
+    },
    "node_modules/fastq": {
      "version": "1.19.1",
      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@ -13496,6 +13528,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -13538,9 +13576,9 @@
      }
    },
    "node_modules/react": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
-      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@ -14091,12 +14129,38 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
    "node_modules/reselect": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
      "license": "MIT"
    },
+    "node_modules/resend": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/resend/-/resend-6.6.0.tgz",
+      "integrity": "sha512-d1WoOqSxj5x76JtQMrieNAG1kZkh4NU4f+Je1yq4++JsDpLddhEwnJlNfvkCzvUuZy9ZquWmMMAm2mENd2JvRw==",
+      "license": "MIT",
+      "dependencies": {
+        "svix": "1.76.1"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@react-email/render": "*"
+      },
+      "peerDependenciesMeta": {
+        "@react-email/render": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/resolve": {
      "version": "1.22.11",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@ -15208,6 +15272,42 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/svix": {
+      "version": "1.76.1",
+      "resolved": "https://registry.npmjs.org/svix/-/svix-1.76.1.tgz",
+      "integrity": "sha512-CRuDWBTgYfDnBLRaZdKp9VuoPcNUq9An14c/k+4YJ15Qc5Grvf66vp0jvTltd4t7OIRj+8lM1DAgvSgvf7hdLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@stablelib/base64": "^1.0.0",
+        "@types/node": "^22.7.5",
+        "es6-promise": "^4.2.8",
+        "fast-sha256": "^1.3.0",
+        "url-parse": "^1.5.10",
+        "uuid": "^10.0.0"
+      }
+    },
+    "node_modules/svix/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/svix/node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
    "node_modules/symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@ -16378,6 +16478,16 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
    "node_modules/urlpattern-polyfill": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.1.0.tgz",
@ -17602,6 +17712,15 @@
        "react": "^19.2.0",
        "react-dom": "^19.2.0"
      }
+    },
+    "packages/ui/node_modules/react": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
+      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -20,5 +20,9 @@
  "engines": {
    "node": ">=18.0.0"
  },
-  "packageManager": "npm@10.0.0"
+  "packageManager": "npm@10.0.0",
+  "dependencies": {
+    "react": "^19.2.3",
+    "resend": "^6.6.0"
+  }
 }
--- a/packages/shared-styles/package.json
+++ b/packages/shared-styles/package.json
@ -12,6 +12,6 @@
  "scripts": {
    "build": "echo 'Skipping build'",
    "lint": "biome check",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "echo 'Skipping typecheck - CSS-only package'"
  }
 }
--- a/packages/ui/src/components/Footer.tsx
+++ b/packages/ui/src/components/Footer.tsx
@ -10,7 +10,7 @@ const footerLinks = {
    { label: "Hugging Face", href: "https://huggingface.co/katanemo", external: true },
  ],
  resources: [
-    { label: "GitHub", href: "https://github.com/katanemo/arch", external: true },
+    { label: "GitHub", href: "https://github.com/katanemo/archgw", external: true },
    { label: "Discord", href: "https://discord.gg/pGZf2gcwEc", external: true },
    { label: "Get Started", href: "https://docs.planoai.dev/get_started/installation", external: true },
  ],
--- a/packages/ui/src/components/Navbar.tsx
+++ b/packages/ui/src/components/Navbar.tsx
@ -13,6 +13,7 @@ const navItems = [
  { href: "https://docs.planoai.dev", label: "docs" },
  { href: "/research", label: "research" },
  { href: "/blog", label: "blog" },
+  { href: "/contact", label: "contact" },
 ];

 export function Navbar() {