feat: launch Den preorder landing flow (#603)

Add a dedicated Den page and navigation entry while keeping the existing waitlist intact so users can preorder hosted OpenWork with Polar checkout.

packages/landing/.gitignore

@@ -1,3 +1,4 @@
 .vercel
 .env
 .env.*
+.env*.local

packages/landing/README.md

@@ -7,6 +7,11 @@
 2. Run the app:
    `pnpm --filter @different-ai/openwork-landing dev`
 
+### Optional env vars
+
+- `NEXT_PUBLIC_CAL_URL` - enterprise booking link
+- `NEXT_PUBLIC_DEN_CHECKOUT_URL` - Polar checkout URL for the Den preorder CTA
+
 ## Deploy (recommended)
 
 This app is ready for Vercel or any Node-compatible Next.js host.

packages/landing/app/den/page.tsx

@@ -0,0 +1,118 @@
+import { SiteFooter } from "../../components/site-footer";
+import { SiteNav } from "../../components/site-nav";
+import { OpenCodeLogo } from "../../components/opencode-logo";
+import { getGithubData } from "../../lib/github";
+
+export const metadata = {
+  title: "OpenWork — Den",
+  description: "Hosted OpenWork for teams with priority onboarding.",
+};
+
+export default async function Den() {
+  const github = await getGithubData();
+  const checkoutUrl = process.env.NEXT_PUBLIC_DEN_CHECKOUT_URL ?? "";
+
+  return (
+    <div className="min-h-screen">
+      <SiteNav stars={github.stars} active="den" />
+
+      <main className="pb-24 pt-20">
+        <div className="content-max-width px-6">
+          <div className="animate-fade-up">
+            <div className="mb-3 text-[12px] font-bold uppercase tracking-wider text-gray-500">
+              OpenWork hosted
+            </div>
+            <h1 className="mb-3 text-4xl font-bold tracking-tight">Den</h1>
+            <h2 className="mb-8 text-[34px] font-bold leading-tight tracking-tight text-black">
+              Hosted OpenWork for teams
+            </h2>
+            <p className="max-w-3xl text-[18px] leading-relaxed text-gray-600">
+              Den gives your team a managed OpenWork runtime with priority
+              onboarding and custom workflows, so you can ship automations
+              without running infrastructure yourself.
+            </p>
+          </div>
+
+          <div className="mb-12 mt-10 flex flex-wrap items-center gap-3">
+            {checkoutUrl ? (
+              <a
+                href={checkoutUrl}
+                className="doc-button"
+                rel="noreferrer"
+                target="_blank"
+              >
+                Start Den preorder
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                  />
+                </svg>
+              </a>
+            ) : (
+              <a href="/enterprise#book" className="doc-button">
+                Book onboarding
+              </a>
+            )}
+          </div>
+
+          <div className="mb-8 text-[20px] font-semibold text-black">
+            $1 first month, then $50/month for 1 seat. Cancel anytime.
+          </div>
+          <p className="mb-12 max-w-3xl text-[15px] leading-relaxed text-gray-600">
+            Preorder includes priority onboarding, custom workflow setup, and
+            Den access when hosted rollout drops by Feb 24.
+          </p>
+
+          <div className="mb-14 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+            <div className="feature-card">
+              <h4 className="mb-2 text-[14px] font-bold">Priority onboarding</h4>
+              <p className="text-[13px] leading-relaxed text-gray-500">
+                We set up your first workflows with your team and tighten the
+                operating setup together.
+              </p>
+            </div>
+            <div className="feature-card">
+              <h4 className="mb-2 text-[14px] font-bold">Custom workflows</h4>
+              <p className="text-[13px] leading-relaxed text-gray-500">
+                Bring your internal tasks and we package them into reusable,
+                permissioned OpenWork flows.
+              </p>
+            </div>
+            <div className="feature-card">
+              <h4 className="mb-2 text-[14px] font-bold">Hosted reliability</h4>
+              <p className="text-[13px] leading-relaxed text-gray-500">
+                Managed runtime with clearer guardrails and less infrastructure
+                burden on your side.
+              </p>
+            </div>
+          </div>
+
+          <div className="mb-16 flex flex-wrap items-center gap-2 text-[13px] text-gray-500">
+            <span className="font-semibold text-gray-900">Powered by</span>
+            <a
+              href="https://opencode.ai"
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center"
+              aria-label="opencode.ai"
+            >
+              <OpenCodeLogo className="h-3 w-auto" />
+            </a>
+            <span>Everything from opencode just works.</span>
+          </div>
+
+          <SiteFooter />
+        </div>
+      </main>
+    </div>
+  );
+}

packages/landing/app/enterprise/page.tsx

@@ -71,6 +71,20 @@ export default async function Enterprise() {
                   <div>Team rollout</div>
                 </div>
               </div>
+
+              <div className="rounded-xl border border-gray-100 bg-white p-6 shadow-sm">
+                <div className="mb-2 text-[12px] font-bold uppercase tracking-wider text-gray-500">
+                  New
+                </div>
+                <h3 className="mb-2 text-[18px] font-bold">Den preorder</h3>
+                <p className="mb-4 text-[13px] leading-relaxed text-gray-600">
+                  $1 first month, then $50/month for 1 seat. Cancel anytime.
+                  Includes priority onboarding and custom workflows.
+                </p>
+                <a href="/den" className="doc-button">
+                  View Den
+                </a>
+              </div>
             </div>
 
             <BookCallForm calUrl={cal} />

packages/landing/app/page.tsx

@@ -345,6 +345,26 @@ export default async function Home() {
               </div>
             </div>
 
+            <div className="mb-6">
+              <a href="/den" className="doc-button">
+                Explore Den preorder
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                  />
+                </svg>
+              </a>
+            </div>
+
             <WaitlistForm />
           </section>
 

packages/landing/components/site-nav.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 type Props = {
   stars: string;
   callUrl?: string;
-  active?: "home" | "enterprise";
+  active?: "home" | "enterprise" | "den";
 };
 
 export function SiteNav(props: Props) {
@@ -30,8 +30,8 @@ export function SiteNav(props: Props) {
             <Link href="/enterprise" className={navLink(props.active === "enterprise")}>
               Enterprise
             </Link>
-            <Link href="#" className="transition hover:text-black">
-              Blog
+            <Link href="/den" className={navLink(props.active === "den")}>
+              Den
             </Link>
           </div>
         </div>