feat: replace licensing page with enterprise contact/demo page

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

@@ -0,0 +1,200 @@
+"use client";
+
+import { FileText, Monitor, Shield } from "lucide-react";
+import type { FormEvent } from "react";
+import { useState } from "react";
+
+import { FadeIn } from "@/components/fade-in";
+import { Footer } from "@/components/footer";
+import { Navbar } from "@/components/navbar";
+
+const benefits = [
+  {
+    icon: Monitor,
+    title: "Live Demo",
+    description: "See SnapOtter in action with a personalized walkthrough of all features.",
+  },
+  {
+    icon: Shield,
+    title: "Deployment Support",
+    description: "Get expert help setting up SnapOtter on your infrastructure.",
+  },
+  {
+    icon: FileText,
+    title: "Enterprise Licensing",
+    description: "Custom agreements for proprietary use, OEM, and commercial distribution.",
+  },
+];
+
+const subjects = ["Book a Demo", "Enterprise Licensing", "Deployment Help", "General Inquiry"];
+
+export default function ContactPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [company, setCompany] = useState("");
+  const [subject, setSubject] = useState(subjects[0]);
+  const [message, setMessage] = useState("");
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+
+    const lines = [
+      `Name: ${name}`,
+      company ? `Company: ${company}` : "",
+      `Email: ${email}`,
+      "",
+      message,
+    ]
+      .filter(Boolean)
+      .join("\n");
+
+    const mailto = `mailto:contact@snapotter.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines)}`;
+    window.location.href = mailto;
+  }
+
+  return (
+    <>
+      <Navbar />
+      <main className="pt-16">
+        <section className="px-6 py-24 md:py-32">
+          <div className="mx-auto grid max-w-5xl gap-16 md:grid-cols-2">
+            {/* Left column */}
+            <FadeIn>
+              <div>
+                <h1 className="text-4xl font-bold tracking-tight md:text-5xl">Get in touch</h1>
+                <p className="mt-6 text-lg leading-relaxed text-muted">
+                  Whether you need a demo, have questions about deployment, or want to discuss
+                  enterprise licensing, we are here to help.
+                </p>
+
+                <div className="mt-12 space-y-6">
+                  {benefits.map((item) => (
+                    <div
+                      key={item.title}
+                      className="flex gap-4 rounded-xl border border-border p-5"
+                    >
+                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent/10">
+                        <item.icon size={20} className="text-accent" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold">{item.title}</h3>
+                        <p className="mt-1 text-sm leading-relaxed text-muted">
+                          {item.description}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                <p className="mt-10 text-sm text-muted">
+                  Open source under AGPL-3.0. Commercial licenses available.
+                </p>
+              </div>
+            </FadeIn>
+
+            {/* Right column */}
+            <FadeIn delay={0.1}>
+              <form
+                onSubmit={handleSubmit}
+                className="rounded-2xl border border-border bg-background-alt p-8"
+              >
+                <div className="space-y-5">
+                  <div>
+                    <label htmlFor="name" className="mb-1.5 block text-sm font-medium">
+                      Name <span className="text-accent">*</span>
+                    </label>
+                    <input
+                      id="name"
+                      type="text"
+                      required
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      className="w-full rounded-lg border border-border bg-background px-4 py-2.5 text-sm outline-none transition-colors focus:border-accent focus:ring-1 focus:ring-accent"
+                    />
+                  </div>
+
+                  <div>
+                    <label htmlFor="email" className="mb-1.5 block text-sm font-medium">
+                      Email <span className="text-accent">*</span>
+                    </label>
+                    <input
+                      id="email"
+                      type="email"
+                      required
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      className="w-full rounded-lg border border-border bg-background px-4 py-2.5 text-sm outline-none transition-colors focus:border-accent focus:ring-1 focus:ring-accent"
+                    />
+                  </div>
+
+                  <div>
+                    <label htmlFor="company" className="mb-1.5 block text-sm font-medium">
+                      Company
+                    </label>
+                    <input
+                      id="company"
+                      type="text"
+                      value={company}
+                      onChange={(e) => setCompany(e.target.value)}
+                      className="w-full rounded-lg border border-border bg-background px-4 py-2.5 text-sm outline-none transition-colors focus:border-accent focus:ring-1 focus:ring-accent"
+                    />
+                  </div>
+
+                  <div>
+                    <label htmlFor="subject" className="mb-1.5 block text-sm font-medium">
+                      Subject
+                    </label>
+                    <select
+                      id="subject"
+                      value={subject}
+                      onChange={(e) => setSubject(e.target.value)}
+                      className="w-full rounded-lg border border-border bg-background px-4 py-2.5 text-sm outline-none transition-colors focus:border-accent focus:ring-1 focus:ring-accent"
+                    >
+                      {subjects.map((s) => (
+                        <option key={s} value={s}>
+                          {s}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div>
+                    <label htmlFor="message" className="mb-1.5 block text-sm font-medium">
+                      Message <span className="text-accent">*</span>
+                    </label>
+                    <textarea
+                      id="message"
+                      required
+                      rows={5}
+                      value={message}
+                      onChange={(e) => setMessage(e.target.value)}
+                      className="w-full resize-none rounded-lg border border-border bg-background px-4 py-2.5 text-sm outline-none transition-colors focus:border-accent focus:ring-1 focus:ring-accent"
+                    />
+                  </div>
+
+                  <button
+                    type="submit"
+                    className="w-full rounded-lg bg-accent py-3 text-sm font-bold text-accent-foreground transition-colors hover:bg-accent-hover"
+                  >
+                    Send Message
+                  </button>
+                </div>
+
+                <p className="mt-5 text-center text-sm text-muted">
+                  Or email us directly at{" "}
+                  <a
+                    href="mailto:contact@snapotter.com"
+                    className="text-accent underline underline-offset-4 hover:text-accent-hover"
+                  >
+                    contact@snapotter.com
+                  </a>
+                </p>
+              </form>
+            </FadeIn>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}

apps/landing/src/app/licensing/page.tsx

@@ -1,263 +0,0 @@
-import { Check } from "lucide-react";
-import { FadeIn } from "@/components/fade-in";
-import { FaqAccordion } from "@/components/faq-accordion";
-import { Footer } from "@/components/footer";
-import { Navbar } from "@/components/navbar";
-
-const openSourceFeatures = [
-  "Full access to all 50+ tools",
-  "Self-host on your infrastructure",
-  "Community support via GitHub",
-  "Modify and distribute under AGPL-3.0",
-  "Access to all updates",
-];
-
-const commercialFeatures = [
-  "Everything in Open Source",
-  "No AGPL obligations",
-  "Proprietary use allowed",
-  "Unlimited users and devices",
-  "Priority email support",
-  "Lifetime updates included",
-  "Use in commercial products",
-  "Flexible deployment terms",
-];
-
-const useCases = [
-  { useCase: "Personal projects", license: "Free (AGPL-3.0)" },
-  { useCase: "Open source projects", license: "Free (AGPL-3.0)" },
-  {
-    useCase: "Internal company use (source code shared)",
-    license: "Free (AGPL-3.0)",
-  },
-  { useCase: "Education and research", license: "Free (AGPL-3.0)" },
-  {
-    useCase: "SaaS product (code not shared publicly)",
-    license: "Commercial",
-  },
-  { useCase: "Proprietary software distribution", license: "Commercial" },
-  {
-    useCase: "OEM / embedding in commercial products",
-    license: "Commercial",
-  },
-  {
-    useCase: "Removing AGPL attribution requirements",
-    license: "Commercial",
-  },
-];
-
-const faqItems = [
-  {
-    question: "What is AGPL-3.0?",
-    answer:
-      "AGPL-3.0 is an open-source license that requires anyone who modifies or uses the software over a network to make their source code available under the same license. It ensures the software remains free and open.",
-  },
-  {
-    question: "Can I use SnapOtter for free in my company?",
-    answer:
-      "Yes, as long as you comply with AGPL-3.0 requirements. This means making your source code available if you modify SnapOtter or use it as part of a network service.",
-  },
-  {
-    question: "What does the commercial license include?",
-    answer:
-      "The commercial license removes all AGPL obligations. You can use SnapOtter in proprietary products, embed it in commercial software, and deploy it without sharing your source code.",
-  },
-  {
-    question: "Is the commercial license a subscription?",
-    answer: "No. It is a one-time payment that includes lifetime updates. No recurring fees.",
-  },
-  {
-    question: "Can I try SnapOtter before purchasing?",
-    answer:
-      "Yes. SnapOtter is fully functional under the AGPL-3.0 license. You can evaluate all features before deciding if you need a commercial license.",
-  },
-  {
-    question: "Do I need a license key?",
-    answer:
-      "No. There are no license keys or activation required. The commercial license is a legal agreement, not a technical restriction.",
-  },
-];
-
-export default function LicensingPage() {
-  return (
-    <>
-      <Navbar />
-      <main className="pt-16">
-        {/* Hero */}
-        <section className="px-6 py-24 md:py-32">
-          <div className="mx-auto max-w-3xl text-center">
-            <FadeIn>
-              <h1 className="text-4xl font-bold tracking-tight md:text-5xl">
-                Simple, transparent licensing
-              </h1>
-              <p className="mt-6 text-lg text-muted md:text-xl">
-                SnapOtter is open source under AGPL-3.0. Use it freely or get a commercial license
-                for proprietary use.
-              </p>
-            </FadeIn>
-          </div>
-        </section>
-
-        {/* Pricing Cards */}
-        <section className="px-6 pb-24">
-          <div className="mx-auto grid max-w-4xl gap-8 md:grid-cols-2">
-            {/* Open Source Card */}
-            <FadeIn>
-              <div className="flex h-full flex-col rounded-2xl border border-border p-8">
-                <div className="mb-4">
-                  <span className="inline-block rounded-full border border-border px-3 py-1 text-xs font-medium text-muted">
-                    AGPL-3.0
-                  </span>
-                </div>
-                <h2 className="text-2xl font-bold">Open Source</h2>
-                <div className="mt-4">
-                  <span className="text-4xl font-bold">Free</span>
-                </div>
-                <p className="mt-2 text-sm text-muted">
-                  For personal use, open source projects, and evaluation
-                </p>
-
-                <ul className="mt-8 flex-1 space-y-3">
-                  {openSourceFeatures.map((feature) => (
-                    <li key={feature} className="flex items-start gap-3">
-                      <Check size={18} className="mt-0.5 shrink-0 text-accent" />
-                      <span className="text-sm">{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-
-                <a
-                  href="https://github.com/ashim-hq/ashim"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="mt-8 block rounded-lg border border-border py-3 text-center text-sm font-medium transition-colors hover:bg-background-alt"
-                >
-                  View on GitHub
-                </a>
-              </div>
-            </FadeIn>
-
-            {/* Commercial Card */}
-            <FadeIn delay={0.1}>
-              <div className="relative flex h-full flex-col rounded-2xl border-2 border-accent/40 p-8 shadow-[0_0_40px_-12px] shadow-accent/20">
-                <div className="mb-4">
-                  <span className="inline-block rounded-full bg-accent px-3 py-1 text-xs font-bold text-accent-foreground">
-                    RECOMMENDED
-                  </span>
-                </div>
-                <h2 className="text-2xl font-bold">Commercial License</h2>
-                <div className="mt-4">
-                  <span className="text-4xl font-bold">$149</span>
-                </div>
-                <p className="mt-2 text-sm text-muted">one-time payment</p>
-                <p className="mt-1 text-sm text-muted">For businesses and proprietary use</p>
-
-                <ul className="mt-8 flex-1 space-y-3">
-                  {commercialFeatures.map((feature) => (
-                    <li key={feature} className="flex items-start gap-3">
-                      <Check size={18} className="mt-0.5 shrink-0 text-accent" />
-                      <span className="text-sm">{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-
-                <a
-                  href="mailto:contact@snapotter.com?subject=Commercial%20License"
-                  className="mt-8 block rounded-lg bg-accent py-3 text-center text-sm font-bold text-accent-foreground transition-colors hover:bg-accent-hover"
-                >
-                  Get License
-                </a>
-              </div>
-            </FadeIn>
-          </div>
-        </section>
-
-        {/* Use Cases Table */}
-        <section className="bg-background-alt px-6 py-24">
-          <div className="mx-auto max-w-3xl">
-            <FadeIn>
-              <h2 className="text-center text-2xl font-bold tracking-tight md:text-3xl">
-                Do I need a commercial license?
-              </h2>
-            </FadeIn>
-
-            <FadeIn delay={0.1}>
-              <div className="mt-12 overflow-hidden rounded-xl border border-border bg-background">
-                <table className="w-full">
-                  <thead>
-                    <tr className="border-b border-border bg-background-alt">
-                      <th className="px-6 py-4 text-left text-sm font-semibold">Use Case</th>
-                      <th className="px-6 py-4 text-left text-sm font-semibold">License Needed</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {useCases.map((row) => (
-                      <tr key={row.useCase} className="border-b border-border last:border-0">
-                        <td className="px-6 py-4 text-sm">{row.useCase}</td>
-                        <td className="px-6 py-4 text-sm">
-                          <span
-                            className={
-                              row.license === "Commercial"
-                                ? "inline-block rounded-full bg-accent/10 px-3 py-1 text-xs font-medium text-accent-hover"
-                                : "inline-block rounded-full bg-green-50 px-3 py-1 text-xs font-medium text-green-700"
-                            }
-                          >
-                            {row.license}
-                          </span>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </FadeIn>
-          </div>
-        </section>
-
-        {/* FAQ */}
-        <section className="px-6 py-24">
-          <div className="mx-auto max-w-3xl">
-            <FadeIn>
-              <h2 className="text-center text-2xl font-bold tracking-tight md:text-3xl">
-                Frequently asked questions
-              </h2>
-            </FadeIn>
-
-            <FadeIn delay={0.1}>
-              <div className="mt-12">
-                <FaqAccordion items={faqItems} />
-              </div>
-            </FadeIn>
-          </div>
-        </section>
-
-        {/* Contact */}
-        <section className="bg-background-alt px-6 py-24">
-          <div className="mx-auto max-w-2xl text-center">
-            <FadeIn>
-              <h2 className="text-2xl font-bold tracking-tight md:text-3xl">
-                Need a custom agreement or have questions?
-              </h2>
-              <p className="mt-4 text-lg text-muted">
-                Contact us at{" "}
-                <a
-                  href="mailto:contact@snapotter.com"
-                  className="text-accent underline underline-offset-4 hover:text-accent-hover"
-                >
-                  contact@snapotter.com
-                </a>
-              </p>
-              <a
-                href="mailto:contact@snapotter.com?subject=Commercial%20License%20Inquiry"
-                className="mt-8 inline-block rounded-lg bg-accent px-8 py-3 text-sm font-bold text-accent-foreground transition-colors hover:bg-accent-hover"
-              >
-                Contact Sales
-              </a>
-            </FadeIn>
-          </div>
-        </section>
-      </main>
-      <Footer />
-    </>
-  );
-}

apps/landing/src/components/faq-accordion.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { ChevronDown } from "lucide-react";
-import { useState } from "react";
-
-interface FaqItem {
-  question: string;
-  answer: string;
-}
-
-function FaqEntry({ item }: { item: FaqItem }) {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="border-b border-border">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className="flex w-full items-center justify-between py-5 text-left"
-      >
-        <span className="text-base font-medium">{item.question}</span>
-        <ChevronDown
-          size={20}
-          className={`shrink-0 text-muted transition-transform duration-200 ${open ? "rotate-180" : ""}`}
-        />
-      </button>
-      {open && <p className="pb-5 leading-relaxed text-muted">{item.answer}</p>}
-    </div>
-  );
-}
-
-export function FaqAccordion({ items }: { items: FaqItem[] }) {
-  return (
-    <div className="divide-y-0">
-      {items.map((item) => (
-        <FaqEntry key={item.question} item={item} />
-      ))}
-    </div>
-  );
-}

apps/landing/src/components/footer.tsx

@@ -6,7 +6,7 @@ const columns = [
     links: [
       { label: "Features", href: "#features" },
       { label: "Demo", href: "https://demo.snapotter.com" },
-      { label: "Enterprise", href: "#enterprise" },
+      { label: "Enterprise", href: "/contact" },
     ],
   },
   {

apps/landing/src/components/navbar.tsx

@@ -7,10 +7,10 @@ const links = [
   { label: "Features", href: "#features" },
   { label: "Download", href: "#how-it-works" },
   { label: "API", href: "#api" },
-  { label: "Pricing", href: "/licensing" },
+  { label: "Pricing", href: "#enterprise" },
   { label: "Docs", href: "https://docs.snapotter.com" },
   { label: "About", href: "#open-source" },
-  { label: "Contact", href: "mailto:contact@snapotter.com" },
+  { label: "Contact", href: "/contact" },
 ];
 
 export function Navbar() {
@@ -59,7 +59,7 @@ export function Navbar() {
             Try Demo
           </a>
           <a
-            href="mailto:contact@snapotter.com?subject=Book%20a%20Demo"
+            href="/contact"
             className="rounded-lg bg-accent px-4 py-1.5 text-sm font-medium text-accent-foreground transition-colors hover:bg-accent-hover"
           >
             Book a Demo
@@ -106,7 +106,7 @@ export function Navbar() {
               Try Demo
             </a>
             <a
-              href="mailto:contact@snapotter.com?subject=Book%20a%20Demo"
+              href="/contact"
               className="block rounded-lg bg-accent px-4 py-2 text-center text-sm font-medium text-accent-foreground"
             >
               Book a Demo