From f8d50ec15c7f779a77754d73ae9fa144c652d0f3 Mon Sep 17 00:00:00 2001
From: Remon Oldenbeuving <remon@kilocode.ai>
Date: Fri, 26 Jun 2026 11:29:58 +0200
Subject: [PATCH] feat(web): refresh enterprise organization onboarding

---
 .../CreateOrganizationPage.stories.tsx        |  21 +-
 apps/web/src/components/AnimatedKiloLogo.tsx  |   8 +-
 .../new/CreateOrganizationPage.tsx            | 443 +++++++++++-------
 3 files changed, 285 insertions(+), 187 deletions(-)

diff --git a/apps/storybook/stories/CreateOrganizationPage.stories.tsx b/apps/storybook/stories/CreateOrganizationPage.stories.tsx
index 251fcdb699..a23ca425c0 100644
--- a/apps/storybook/stories/CreateOrganizationPage.stories.tsx
+++ b/apps/storybook/stories/CreateOrganizationPage.stories.tsx
@@ -16,7 +16,7 @@ const meta: Meta<typeof CreateOrganizationPage> = {
   },
   decorators: [
     Story => (
-      <div className="bg-background min-h-screen p-8">
+      <div className="bg-background min-h-screen">
         <Story />
       </div>
     ),
@@ -26,8 +26,23 @@ const meta: Meta<typeof CreateOrganizationPage> = {
 export default meta;
 type Story = StoryObj<typeof CreateOrganizationPage>;
 
-export const Default: Story = {
+export const Empty: Story = {
+  globals: {
+    viewport: { value: 'desktop', isRotated: false },
+  },
+};
+
+export const Prefilled: Story = {
   args: {
-    mockSelectedOrgName: 'Acme Corp',
+    initialOrganizationName: 'Acme Engineering',
+  },
+  globals: {
+    viewport: { value: 'desktop', isRotated: false },
+  },
+};
+
+export const Mobile: Story = {
+  globals: {
+    viewport: { value: 'mobile2', isRotated: false },
   },
 };
diff --git a/apps/web/src/components/AnimatedKiloLogo.tsx b/apps/web/src/components/AnimatedKiloLogo.tsx
index 5c2315fd08..7d23e3b78d 100644
--- a/apps/web/src/components/AnimatedKiloLogo.tsx
+++ b/apps/web/src/components/AnimatedKiloLogo.tsx
@@ -2,6 +2,10 @@
 
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 
-export default function AnimatedKiloLogo() {
-  return <DotLottieReact src="/lottie/YellowKiloLogo.lottie" loop autoplay />;
+type AnimatedKiloLogoProps = {
+  loop?: boolean;
+};
+
+export default function AnimatedKiloLogo({ loop = true }: AnimatedKiloLogoProps) {
+  return <DotLottieReact src="/lottie/YellowKiloLogo.lottie" loop={loop} autoplay />;
 }
diff --git a/apps/web/src/components/organizations/new/CreateOrganizationPage.tsx b/apps/web/src/components/organizations/new/CreateOrganizationPage.tsx
index a7f60ac6ee..0e938cdb50 100644
--- a/apps/web/src/components/organizations/new/CreateOrganizationPage.tsx
+++ b/apps/web/src/components/organizations/new/CreateOrganizationPage.tsx
@@ -1,40 +1,34 @@
 'use client';
 
+import { useRef, useState, type FormEvent } from 'react';
+import Link from 'next/link';
 import * as z from 'zod';
-import { useState, useRef } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import {
   AlertCircle,
   ArrowRight,
-  Clock,
-  TrendingUp,
-  ArrowLeftRight,
-  CreditCard,
-  Key,
-  Users,
-  Filter,
-  FileText,
-  KeyRound,
-  Star,
-  Coins,
+  ChartNoAxesCombined,
+  GitBranch,
+  LoaderCircle,
+  ShieldCheck,
   type LucideIcon,
 } from 'lucide-react';
-import { OrganizationNameSchema } from '@/lib/organizations/organization-types';
-import { motion, AnimatePresence } from 'motion/react';
 import { useCreateOrganization } from '@/app/api/organizations/hooks';
-import { SubscriptionsSeatQuantitySchema } from '@/app/payments/subscriptions/types';
-import Link from 'next/link';
+import AnimatedKiloLogo from '@/components/AnimatedKiloLogo';
+import { PageContainer } from '@/components/layouts/PageContainer';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { CompanyDomainSchema } from '@/lib/organizations/company-domain';
+import { OrganizationNameSchema } from '@/lib/organizations/organization-types';
 
 const CreateOrganizationSchema = z.object({
   organizationName: OrganizationNameSchema,
-  seats: SubscriptionsSeatQuantitySchema,
+  companyDomain: CompanyDomainSchema,
 });
 
-type CreateOrganizationForm = z.infer<typeof CreateOrganizationSchema>;
-
-const DEFAULT_ERROR = 'Failed to create organization. Please try again.';
+const DEFAULT_ERROR = "We couldn't create the organization. Check your connection and try again.";
 
 function extractErrorMessage(error: unknown): string {
   if (!(error instanceof Error)) return DEFAULT_ERROR;
@@ -52,215 +46,300 @@ function extractErrorMessage(error: unknown): string {
       }
     }
   } catch {
-    // not JSON — use raw message
+    return error.message || DEFAULT_ERROR;
   }
   return error.message || DEFAULT_ERROR;
 }
 
 type CreateOrganizationPageProps = {
-  mockSelectedOrgName?: string; // For Storybook
+  initialOrganizationName?: string;
+};
+
+type FormErrors = {
+  organizationName?: string;
+  companyDomain?: string;
+  general?: string;
 };
 
-type FeatureItem = {
-  text: string;
+type EnterpriseValue = {
+  title: string;
+  description: string;
   icon: LucideIcon;
 };
 
-const enterpriseTrialFeatures: FeatureItem[] = [
-  { text: 'Usage analytics & reporting', icon: Clock },
-  { text: 'AI adoption score', icon: TrendingUp },
-  { text: 'Shared agent modes', icon: ArrowLeftRight },
-  { text: 'Centralized billing', icon: CreditCard },
-  { text: 'Shared BYOK', icon: Key },
-  { text: 'Team management', icon: Users },
-  { text: 'Limit models and/or providers', icon: Filter },
-  { text: 'Audit logs', icon: FileText },
-  { text: 'SSO, OIDC, & SCIM support', icon: KeyRound },
-  { text: 'Priority support', icon: Star },
+const enterpriseValues: EnterpriseValue[] = [
+  {
+    title: 'Choose without lock-in',
+    description:
+      'Use an inspectable open-source harness across your workflows, with 300+ models, automated routing, BYOK, and private inference.',
+    icon: GitBranch,
+  },
+  {
+    title: 'Govern every team',
+    description:
+      'Apply shared identity, role-based access, model and provider controls, and audit logs from one control plane.',
+    icon: ShieldCheck,
+  },
+  {
+    title: 'Make spend visible',
+    description:
+      'Track adoption and usage by team, model, and provider with centralized billing and shared configuration.',
+    icon: ChartNoAxesCombined,
+  },
 ];
 
-export function CreateOrganizationPage({ mockSelectedOrgName }: CreateOrganizationPageProps = {}) {
-  const [name, setName] = useState(mockSelectedOrgName || '');
+export function CreateOrganizationPage({
+  initialOrganizationName = '',
+}: CreateOrganizationPageProps = {}) {
+  const [organizationName, setOrganizationName] = useState(initialOrganizationName);
   const [companyDomain, setCompanyDomain] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [errors, setErrors] = useState<{
-    name?: string;
-    general?: string;
-  }>({});
-  const nameInputRef = useRef<HTMLInputElement>(null);
-
+  const [errors, setErrors] = useState<FormErrors>({});
+  const organizationNameInputRef = useRef<HTMLInputElement>(null);
+  const companyDomainInputRef = useRef<HTMLInputElement>(null);
   const createOrganizationMutation = useCreateOrganization();
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setErrors({});
-    setIsSubmitting(true);
+  const validateOrganizationName = () => {
+    const result = OrganizationNameSchema.safeParse(organizationName);
+    setErrors(current => ({
+      ...current,
+      organizationName: result.success ? undefined : result.error.issues[0]?.message,
+    }));
+  };
+
+  const validateCompanyDomain = () => {
+    const result = CompanyDomainSchema.safeParse(companyDomain);
+    setErrors(current => ({
+      ...current,
+      companyDomain: result.success ? undefined : result.error.issues[0]?.message,
+    }));
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (createOrganizationMutation.isPending) return;
 
-    const formData: CreateOrganizationForm = {
-      organizationName: name,
-      seats: 1,
-    };
-    const validationResult = CreateOrganizationSchema.safeParse(formData);
+    const validationResult = CreateOrganizationSchema.safeParse({
+      organizationName,
+      companyDomain,
+    });
 
     if (!validationResult.success) {
-      const fieldErrors: typeof errors = {};
-      validationResult.error.issues.forEach(issue => {
-        const field = issue.path[0] as keyof typeof errors;
-        if (field && field !== 'general') {
-          fieldErrors[field] = issue.message;
+      const fieldErrors: FormErrors = {};
+      for (const issue of validationResult.error.issues) {
+        if (issue.path[0] === 'organizationName' && !fieldErrors.organizationName) {
+          fieldErrors.organizationName = issue.message;
         }
-      });
+        if (issue.path[0] === 'companyDomain' && !fieldErrors.companyDomain) {
+          fieldErrors.companyDomain = issue.message;
+        }
+      }
       setErrors(fieldErrors);
-      setIsSubmitting(false);
+
+      if (fieldErrors.organizationName) {
+        organizationNameInputRef.current?.focus();
+      } else if (fieldErrors.companyDomain) {
+        companyDomainInputRef.current?.focus();
+      }
       return;
     }
 
+    setErrors({});
+
     try {
-      const orgId = (
-        await createOrganizationMutation.mutateAsync({
-          name: validationResult.data.organizationName,
-          autoAddCreator: true,
-          company_domain: companyDomain.trim() || undefined,
-        })
-      ).organization.id;
+      const result = await createOrganizationMutation.mutateAsync({
+        name: validationResult.data.organizationName,
+        autoAddCreator: true,
+        company_domain: validationResult.data.companyDomain ?? undefined,
+      });
 
-      // Redirect with query param that will force users to invite a single user.
-      window.location.href = `/organizations/${orgId}/welcome?firstTime=1`;
+      window.location.href = `/organizations/${result.organization.id}/welcome?firstTime=1`;
     } catch (error) {
       console.error('Failed to create organization:', error);
-      setErrors({
-        general: extractErrorMessage(error),
-      });
-      setIsSubmitting(false);
+      setErrors({ general: extractErrorMessage(error) });
     }
   };
 
-  const isFormValid = name.trim().length > 0;
+  const isSubmitting = createOrganizationMutation.isPending;
 
   return (
-    <div className="bg-background mx-auto h-full w-full max-w-[1200px] px-4 py-8 md:px-6 md:py-12">
-      <div className="mb-10 text-center">
-        <h1 className="mb-2 text-3xl font-bold lg:text-4xl">
-          Create an organization and start your
-          <br />
-          14-day free trial for Kilo Enterprise
-        </h1>
+    <PageContainer className="min-h-svh justify-center gap-8 py-8 md:gap-10 md:py-12">
+      <div className="flex items-center gap-3 self-center">
+        <div className="size-14" aria-hidden="true">
+          <AnimatedKiloLogo loop={false} />
+        </div>
+        <span className="font-jetbrains text-3xl font-bold">Kilo</span>
+      </div>
+
+      <header className="flex max-w-3xl flex-col gap-3 border-b border-border pb-8">
+        <p className="type-eyebrow text-muted-foreground">Kilo Enterprise</p>
+        <h1 className="type-title text-balance">Agentic engineering, on your terms</h1>
+        <p className="type-body-lg text-muted-foreground max-w-[65ch] text-pretty">
+          Give every engineering team the interfaces and models that fit their work, while leaders
+          keep shared security, visibility, and spend controls.
+        </p>
         <Link
           href="/get-started/personal"
-          className="text-foreground text-lg underline underline-offset-4 hover:opacity-80"
+          className="type-body text-link hover:text-link-hover focus-visible:ring-ring/50 w-fit rounded-sm underline underline-offset-4 focus-visible:ring-[3px] focus-visible:outline-none"
         >
-          Or continue as individual instead.
+          Continue with an individual account
         </Link>
-      </div>
+      </header>
 
-      <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 lg:grid-cols-2">
-        <Card className="border-2">
-          <CardContent className="p-6 lg:p-8">
-            <h3 className="mb-4 text-lg font-bold">What your Kilo Enterprise trial includes:</h3>
-            <ul className="space-y-2">
-              {enterpriseTrialFeatures.map((feature, index) => {
-                const Icon = feature.icon;
-                return (
-                  <li key={index} className="flex items-start gap-2">
-                    <Icon className="text-brand-primary mt-0.5 h-4 w-4 flex-shrink-0" />
-                    <span>{feature.text}</span>
-                  </li>
-                );
-              })}
-              <li className="flex items-start gap-2">
-                <Coins className="text-brand-primary mt-0.5 h-4 w-4 flex-shrink-0" />
-                <span className="font-bold">
-                  Pay as you go usage based pricing, no tokens included in trial
-                </span>
-              </li>
-            </ul>
-          </CardContent>
-        </Card>
+      <div className="grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(20rem,0.8fr)] lg:gap-12">
+        <section
+          className="order-2 min-w-0 lg:order-1 lg:self-center"
+          aria-labelledby="enterprise-value-title"
+        >
+          <div className="flex flex-col gap-3">
+            <p className="type-eyebrow text-muted-foreground">Built for enterprise engineering</p>
+            <h2 id="enterprise-value-title" className="type-heading text-balance">
+              Choice where it matters. Control where it counts.
+            </h2>
+            <p className="type-body text-muted-foreground max-w-[65ch] text-pretty">
+              Standardize how agentic work is managed without forcing every team onto one tool,
+              model, or provider.
+            </p>
+          </div>
 
-        <div className="flex flex-col gap-6">
-          <Card className="border-2">
-            <CardContent className="flex min-h-[140px] items-center justify-center p-6 lg:p-8">
-              <form onSubmit={handleSubmit} className="w-full space-y-4">
-                <AnimatePresence>
-                  {errors.general && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: 'auto' }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="flex items-center gap-2 rounded-lg bg-red-950/30 p-4 text-sm text-red-400"
-                    >
-                      <AlertCircle className="h-4 w-4" />
-                      <span>{errors.general}</span>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
+          <ul className="mt-6 divide-y divide-border border-y border-border">
+            {enterpriseValues.map(value => {
+              const Icon = value.icon;
+              return (
+                <li key={value.title} className="grid grid-cols-[auto_1fr] gap-4 py-5">
+                  <div className="bg-surface-raised text-brand-primary flex size-9 items-center justify-center rounded-md border border-border">
+                    <Icon className="size-4" aria-hidden="true" />
+                  </div>
+                  <div className="flex min-w-0 flex-col gap-1">
+                    <h3 className="type-body font-medium text-foreground">{value.title}</h3>
+                    <p className="type-body text-muted-foreground text-pretty">
+                      {value.description}
+                    </p>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </section>
 
+        <Card className="order-1 min-w-0 lg:order-2">
+          <CardHeader>
+            <p className="type-eyebrow text-muted-foreground">14-day Enterprise trial</p>
+            <h2 className="type-heading">Set up your organization</h2>
+            <p className="type-body text-muted-foreground text-pretty">
+              No credit card required. You can invite your team after creating the organization.
+            </p>
+          </CardHeader>
+          <CardContent>
+            <form
+              className="flex flex-col gap-6"
+              onSubmit={handleSubmit}
+              noValidate
+              aria-busy={isSubmitting}
+            >
+              {errors.general ? (
+                <Alert variant="destructive">
+                  <AlertCircle aria-hidden="true" />
+                  <AlertDescription>{errors.general}</AlertDescription>
+                </Alert>
+              ) : null}
+
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="organization-name">Organization name</Label>
                 <Input
-                  ref={nameInputRef}
-                  id="name"
-                  name="name"
-                  value={name}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
-                  placeholder="Company Name"
-                  className={`h-12 text-center text-lg transition-all duration-200 focus:ring-2 ${
-                    errors.name ? 'border-red-400 focus:ring-red-400/20' : 'focus:ring-blue-500/20'
-                  }`}
-                  autoFocus
+                  ref={organizationNameInputRef}
+                  id="organization-name"
+                  name="organizationName"
+                  value={organizationName}
+                  onChange={event => setOrganizationName(event.target.value)}
+                  onBlur={validateOrganizationName}
+                  autoComplete="organization"
+                  maxLength={100}
+                  required
+                  disabled={isSubmitting}
+                  aria-invalid={errors.organizationName ? true : undefined}
+                  aria-describedby={errors.organizationName ? 'organization-name-error' : undefined}
+                  placeholder="Acme Engineering"
                 />
+                {errors.organizationName ? (
+                  <p id="organization-name-error" className="type-label text-status-destructive">
+                    {errors.organizationName}
+                  </p>
+                ) : null}
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="company-domain">
+                  Company website
+                  <span className="type-label text-muted-foreground font-normal">Optional</span>
+                </Label>
                 <Input
-                  id="company_domain"
-                  name="company_domain"
+                  ref={companyDomainInputRef}
+                  id="company-domain"
+                  name="companyDomain"
                   value={companyDomain}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    setCompanyDomain(e.target.value)
+                  onChange={event => setCompanyDomain(event.target.value)}
+                  onBlur={validateCompanyDomain}
+                  inputMode="url"
+                  autoComplete="url"
+                  autoCapitalize="none"
+                  autoCorrect="off"
+                  spellCheck={false}
+                  disabled={isSubmitting}
+                  aria-invalid={errors.companyDomain ? true : undefined}
+                  aria-describedby={
+                    errors.companyDomain
+                      ? 'company-domain-help company-domain-error'
+                      : 'company-domain-help'
                   }
-                  placeholder="Company Website (e.g. acme.com)"
-                  className={`h-12 text-center text-lg transition-all duration-200 focus:ring-2 focus:ring-blue-500/20`}
+                  placeholder="acme.com"
                 />
-                <AnimatePresence>
-                  {errors.name && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: 'auto' }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="flex items-center justify-center gap-2 text-sm text-red-400"
-                    >
-                      <AlertCircle className="h-4 w-4" />
-                      <span>{errors.name}</span>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </form>
-            </CardContent>
-          </Card>
+                <p id="company-domain-help" className="type-label text-muted-foreground">
+                  Enter a domain such as acme.com.
+                </p>
+                {errors.companyDomain ? (
+                  <p id="company-domain-error" className="type-label text-status-destructive">
+                    {errors.companyDomain}
+                  </p>
+                ) : null}
+              </div>
 
-          <Card className="border-2">
-            <CardContent className="p-6 text-center lg:p-8">
-              <Button
-                type="button"
-                variant="primary"
-                size="lg"
-                className="mb-4 h-auto px-6 py-4 text-lg"
-                disabled={!isFormValid || isSubmitting}
-                onClick={handleSubmit}
-              >
+              <div className="flex flex-col gap-4 border-y border-border py-4">
+                <dl className="grid grid-cols-2 gap-4">
+                  <div className="flex flex-col gap-1">
+                    <dt className="type-label text-muted-foreground">Enterprise access</dt>
+                    <dd className="type-body font-medium tabular-nums">14 days</dd>
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <dt className="type-label text-muted-foreground">Credit card</dt>
+                    <dd className="type-body font-medium">Not required</dd>
+                  </div>
+                  <div className="col-span-2 flex flex-col gap-1">
+                    <dt className="type-label text-muted-foreground">Model inference</dt>
+                    <dd className="type-body font-medium">BYOK or pay as you go</dd>
+                  </div>
+                </dl>
+                <p className="type-label text-muted-foreground text-pretty">
+                  AI model usage is not included in the trial and is billed separately.
+                </p>
+              </div>
+
+              <Button type="submit" variant="primary" size="lg" disabled={isSubmitting}>
                 {isSubmitting ? (
-                  'Processing...'
+                  <>
+                    <LoaderCircle className="animate-spin" aria-hidden="true" />
+                    Creating organization...
+                  </>
                 ) : (
-                  <span className="flex items-center gap-2">
-                    Start 14-day free trial for Kilo Enterprise
-                    <ArrowRight className="h-5 w-5" />
-                  </span>
+                  <>
+                    Create organization
+                    <ArrowRight aria-hidden="true" />
+                  </>
                 )}
               </Button>
-              <p className="text-muted-foreground italic">
-                (after the trial pricing for Kilo Teams starts at $15 per user/month, billed
-                annually. You can choose your tier at the end of your trial)
-              </p>
-            </CardContent>
-          </Card>
-        </div>
+            </form>
+          </CardContent>
+        </Card>
       </div>
-    </div>
+    </PageContainer>
   );
 }