feat: UI refresh and user onboarding (#430)

* docs: design spec for lead-gen surfaces (Credits & Billing, Hire-an-Expert, Top-up, Enterprise) Add brainstorming spec for: sidebar OBSERVE→MANAGE rename + Credits & Billing link + Hire-an-Expert footer button; new /billing page with extracted Dograh Model Credits card + CTAs; Top-up / Hire-an-Expert / Enterprise intake modals with inline math captcha; and a workflow-builder Hire-an-Expert nudge. Frontend only; submissions fire PostHog events via a submitLead() seam for a future MongoDB endpoint. Also gitignore .superpowers/ brainstorm mockups. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * docs: implementation plan for user-onboarding lead-gen surfaces 14 bite-sized tasks: PostHog events, shared helpers (field options, work-email blocklist, submitLead seam, math captcha), three intake modals (enterprise/hire/top-up), LeadFormsProvider context, AppLayout mount, sidebar MANAGE rename + Credits & Billing link + footer Hire button, extracted DograhCreditsCard, /billing page, credits removal from Agent Runs, builder nudge, and a full verification/dogfood pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): register PostHog events for lead-gen surfaces Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): shared field options, work-email validation, and submit seam Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): inline math captcha field Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): enterprise intake modal Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): hire-an-expert modal with enterprise link Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): top-up modal with >20k volume-pricing gate Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): shared lead-forms context provider Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): mount LeadFormsProvider in app layout Wrap the sidebar branch of AppLayout with LeadFormsProvider so the shared lead modals are available to the sidebar, billing card, and builder nudge. Includes eslint import-order auto-fixes in TopUpModal and LeadFormsContext. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): rename OBSERVE to MANAGE, add Credits & Billing link and Hire-an-Expert footer button Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): extract DograhCreditsCard with top-up + hire CTAs Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): add Credits & Billing page Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(lead-gen): move Dograh Model Credits card out of Agent Runs to /billing Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(lead-gen): delayed Hire-an-Expert nudge on the workflow builder Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * ci(ui): add lint:lead-flow guard script Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(ui): restructure lead forms, self-serve Buy Credits, dialog blur Revised lead-capture surfaces and credits bar: - Dialog overlay gains backdrop blur (bg-black/60 backdrop-blur-sm). - Shared primitives: LeadModalShell (icon/eyebrow header, scrollable body, sticky footer, trust-line slot), PhoneField (react-international-phone, dark, E.164 out), FormTrustLine ("Average response: under 10 minutes..."). - HireExpertModal: Name, Company, Job title, agent goal, Phone (required), monthly volume. EnterpriseModal: + work email (required logged-out), conditional deployment (yes/no/maybe, source-gated), agent goal. OnboardingModal: drop useCase. Phone mandatory except onboarding. - Volume buckets match the backend qualifier (0-5k/5k-100k/100k+/not-sure). - Delete TopUpModal; DograhCreditsCard now self-serve Buy Credits (amount chips $5/$10/$25/$50/$100 + custom min $5 → startTopUp seam) + Hire an Expert + dashed custom-pricing link opening Enterprise (billing_custom_pricing). - PostHog events: drop topup_*, add buy_credits_clicked, buy_credits_amount_selected, custom_pricing_clicked. LeadFormsContext drops topup; LeadKind/LeadSource updated. - Introduce a single --cta warm accent token (CTAs + focus rings only). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(ui): split-screen auth + enterprise CTA + dark theme default - AuthShell: dark two-column auth layout (brand/value panel with CSS-only waveform motif + proof points + Bland-style enterprise CTA block on the left, zinc-900 form card on the right; single-column on mobile). - AuthEnterpriseCTA: "Talk to our team" → dograh.com/contact?intent=enterprise. - stack-theme: dark StackTheme token overrides synced to globals.css. - page.tsx: wrap StackHandler (non-fullPage) in AuthShell + StackTheme; local-auth fallback preserved inside the shell. BackButton slimmed for the card. - Dark locked as default: <html className="dark">, next-themes ThemeProvider (defaultTheme="dark", enableSystem=false); inline no-FOUC script defaults dark. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * ui rezig, onboarding, billing, hire us & on prem cues * ui changes * chore: update comment * chore: untrack docs/superpowers and gitignore it * feat: refactor user configuration table * feat(ui): 'check your email' confirmation on lead forms Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * added email and country in form submissions * chore: update leads api * fix: wrap dograh model config in card --------- Co-authored-by: Pritesh <pritesh@dograh.com> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-22 08:38:13 +02:00 · 2026-06-17 19:49:33 +05:30 · 2026-06-17 19:49:33 +05:30 · 00b35d6963
commit 00b35d6963
parent a2d9ed24ed
82 changed files with 3819 additions and 604 deletions
--- a/ui/src/components/auth/AuthEnterpriseCTA.tsx
+++ b/ui/src/components/auth/AuthEnterpriseCTA.tsx
@ -0,0 +1,38 @@
+"use client";
+
+// Enterprise call-to-action rendered inside the auth brand panel. Opens the
+// SAME in-app Enterprise lead modal used post-login (not the marketing site's
+// /contact page). The visitor is typically NOT authenticated here: the modal
+// requires a work email in that case, and submitLead persists the lead through
+// the user_onboarding service's public contact-sales endpoint instead of the
+// token-gated /leads/enterprise. Shared by the Stack Auth handler and the
+// local/OSS auth pages.
+
+import posthog from "posthog-js";
+import { useState } from "react";
+
+import { EnterpriseModal } from "@/components/lead-forms/EnterpriseModal";
+import { Button } from "@/components/ui/button";
+import { PostHogEvent } from "@/constants/posthog-events";
+
+export function AuthEnterpriseCTA() {
+  const [open, setOpen] = useState(false);
+
+  const openModal = () => {
+    setOpen(true);
+    posthog.capture(PostHogEvent.ENTERPRISE_LEAD_OPENED, { source: "auth_page" });
+  };
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        onClick={openModal}
+        className="w-full border-white/20 bg-white/5 text-zinc-100 hover:bg-white/10 hover:text-white"
+      >
+        Enterprise Enquiry
+      </Button>
+      <EnterpriseModal open={open} onOpenChange={setOpen} source="auth_page" />
+    </>
+  );
+}
--- a/ui/src/components/auth/AuthShell.tsx
+++ b/ui/src/components/auth/AuthShell.tsx
@ -0,0 +1,87 @@
+// Shared dark two-column auth shell, used by BOTH the Stack Auth handler
+// (/handler/[...stack], cloud) and the local/OSS auth pages (/auth/login,
+// /auth/signup). LEFT: a centered card that wraps the auth form (`children`).
+// RIGHT (lg+ only): a brand/value panel with the Dograh logo, proof points, and
+// a Bland-style enterprise CTA block at the bottom (passed in as `enterpriseSlot`).
+// Mobile collapses to the single card column. The form column scrolls and stays
+// centered so tall (sign-up) forms never clip on short viewports. Palette is the
+// app's blacks/greys with one warm CTA accent.
+
+import type { ReactNode } from "react";
+
+import { BrandLogo } from "@/components/BrandLogo";
+
+const HIGHLIGHTS = [
+  "Speech-to-speech",
+  "MCP-native",
+  "BYOK - any model",
+];
+
+export function AuthShell({
+  children,
+  enterpriseSlot,
+}: {
+  children: ReactNode;
+  enterpriseSlot?: ReactNode;
+}) {
+  return (
+    <div className="grid min-h-screen w-full bg-background lg:grid-cols-[55%_45%]">
+      {/* Form column (LEFT) — scrolls and stays centered so tall forms never
+          clip. Carries the giant faded "dograh" imprint along its bottom. */}
+      <main className="auth-imprint flex min-h-screen flex-col overflow-y-auto">
+        <div className="flex min-h-full items-center justify-center p-6 sm:p-10">
+          <div className="w-full max-w-md space-y-6 rounded-2xl border border-border/60 bg-card p-6 shadow-lg sm:p-8">
+            {/* Mobile-only wordmark (brand panel is hidden) */}
+            <div className="lg:hidden">
+              <BrandLogo className="h-7" />
+            </div>
+            {children}
+          </div>
+        </div>
+      </main>
+
+      {/* Brand / value panel (RIGHT) — hidden on mobile */}
+      <aside className="relative hidden flex-col justify-between overflow-hidden border-l border-border/60 bg-zinc-950 p-10 lg:flex xl:p-14">
+        {/* Ambient depth: soft radial glow behind the content */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -right-24 top-1/3 size-[28rem] rounded-full opacity-20 blur-3xl"
+          style={{ background: "radial-gradient(circle, var(--cta), transparent 70%)" }}
+        />
+
+        <div className="relative">
+          <BrandLogo inverse className="h-8" />
+        </div>
+
+        <div className="relative max-w-md space-y-5">
+          <h1 className="text-3xl font-semibold leading-tight tracking-tight text-zinc-50 xl:text-4xl">
+            The open-source voice AI platform.
+          </h1>
+          <ul className="flex flex-wrap gap-2">
+            {HIGHLIGHTS.map((point) => (
+              <li
+                key={point}
+                className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-medium text-zinc-300"
+              >
+                {point}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Enterprise CTA block (Bland-style) — bottom margin lifts it off the
+            viewport edge while justify-between keeps the column layout */}
+        <div className="relative mb-12 max-w-md space-y-3 rounded-xl border border-white/10 bg-white/[0.03] p-5 xl:mb-16">
+          <h2 className="text-sm font-semibold text-zinc-100">
+            Need on-prem, data residency &amp; a data perimeter?
+          </h2>
+          <p className="text-sm text-zinc-400">
+            We deploy Dograh inside your environment for regulated and
+            high-scale teams.
+          </p>
+          {enterpriseSlot}
+        </div>
+      </aside>
+    </div>
+  );
+}