@contractspec/bundle.marketing 1.12.0

package/src/components/marketing/CofounderPage.tsx

@@ -0,0 +1,409 @@
+'use client';
+
+import { ButtonLink, MarketingSection } from '@contractspec/lib.design-system';
+import { Box, HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import {
+  H1,
+  H2,
+  H3,
+  Lead,
+  Muted,
+  Small,
+} from '@contractspec/lib.ui-kit-web/ui/typography';
+import {
+  Check,
+  Clock,
+  MapPin,
+  MessageSquare,
+  Percent,
+  Rocket,
+  Target,
+  Users,
+  X,
+} from 'lucide-react';
+
+const COFOUNDER_EMAIL = 'tboutron@contractspec.io';
+const APPLY_SUBJECT = 'Co-founder application: ContractSpec';
+const APPLY_BODY = `Hi Theo,
+
+I am reaching out about co-founding ContractSpec.
+
+LinkedIn: [your link]
+Proof of work #1: [link]
+Proof of work #2: [link]
+
+Why ContractSpec:
+[your answer]
+
+What I would own in the first 90 days:
+[your answer]
+`;
+
+const mailtoLink = `mailto:${COFOUNDER_EMAIL}?subject=${encodeURIComponent(APPLY_SUBJECT)}&body=${encodeURIComponent(APPLY_BODY)}`;
+
+/* -------------------------------------------------------------------------- */
+/*                              Section Components                            */
+/* -------------------------------------------------------------------------- */
+
+function HeroSection() {
+  return (
+    <MarketingSection tone="gradient" padding="spacious" align="center">
+      <VStack gap="lg" align="center" className="text-center">
+        <H1 className="text-4xl leading-tight font-bold text-balance md:text-5xl">
+          Co-founder wanted
+        </H1>
+        <Lead className="text-muted-foreground max-w-2xl text-lg text-balance md:text-xl">
+          ContractSpec is a contract-first compiler for AI-generated code.
+          Define specs, enforce policies, regenerate safely. Pre-PMF. Building
+          in public.
+        </Lead>
+        <HStack gap="md" justify="center" wrap="wrap" className="pt-2">
+          <ButtonLink href={mailtoLink}>Talk about co-founding</ButtonLink>
+          <ButtonLink variant="ghost" href="/contact">
+            Become a design partner
+          </ButtonLink>
+        </HStack>
+      </VStack>
+    </MarketingSection>
+  );
+}
+
+function WhatExistsSection() {
+  const realNow = [
+    'ContractSpec Core: open-source spec compiler',
+    'Working CLI and TypeScript runtime',
+    'Design partner pipeline open',
+    'Solo founder, bootstrapped',
+  ];
+
+  const planned = [
+    'Visual studio for specs',
+    'Auto-evolution engine',
+    'Multi-tenant SaaS',
+    'Integration marketplace',
+  ];
+
+  return (
+    <MarketingSection padding="comfortable" align="center" maxWidth="lg">
+      <VStack gap="lg">
+        <H2 className="text-3xl font-bold">What exists today</H2>
+        <div className="grid w-full gap-8 md:grid-cols-2">
+          <VStack gap="sm" align="start">
+            <H3 className="text-lg font-semibold text-emerald-400">Real now</H3>
+            <ul className="space-y-2">
+              {realNow.map((item) => (
+                <li key={item} className="flex items-start gap-2">
+                  <Check size={16} className="mt-1 shrink-0 text-emerald-400" />
+                  <Small>{item}</Small>
+                </li>
+              ))}
+            </ul>
+          </VStack>
+          <VStack gap="sm" align="start">
+            <H3 className="text-lg font-semibold text-blue-400">Planned</H3>
+            <ul className="space-y-2">
+              {planned.map((item) => (
+                <li key={item} className="flex items-start gap-2">
+                  <Target size={16} className="mt-1 shrink-0 text-blue-400" />
+                  <Small>{item}</Small>
+                </li>
+              ))}
+            </ul>
+          </VStack>
+        </div>
+      </VStack>
+    </MarketingSection>
+  );
+}
+
+function RoleSection() {
+  const gtmDeliverables = [
+    'Run 5+ sales conversations per week',
+    'Own the design partner pipeline end-to-end',
+    'Write positioning copy that ships',
+    'Build and maintain partnership channels',
+    'Turn user feedback into roadmap signal',
+  ];
+
+  const productDeliverables = [
+    'Ship UI/UX improvements weekly',
+    'Define specs based on user research',
+    'Own the studio experience',
+    'Collaborate on architecture decisions',
+  ];
+
+  return (
+    <MarketingSection
+      // tone="subtle"
+      padding="comfortable"
+      align="center"
+      maxWidth="lg"
+    >
+      <VStack gap="lg">
+        <H2 className="text-3xl font-bold">The role</H2>
+        <VStack gap="md" align="start" className="w-full">
+          <H3 className="text-xl font-semibold">
+            Option A: GTM / Sales / Partnerships
+          </H3>
+          <Muted>Weekly deliverables, not vague traits:</Muted>
+          <ul className="space-y-2">
+            {gtmDeliverables.map((item) => (
+              <li key={item} className="flex items-start gap-2">
+                <Rocket size={16} className="mt-1 shrink-0 text-amber-400" />
+                <Small>{item}</Small>
+              </li>
+            ))}
+          </ul>
+        </VStack>
+        <VStack gap="md" align="start" className="w-full pt-4">
+          <H3 className="text-xl font-semibold">Option B: Product / Design</H3>
+          <Muted>If this is your strength:</Muted>
+          <ul className="space-y-2">
+            {productDeliverables.map((item) => (
+              <li key={item} className="flex items-start gap-2">
+                <Rocket size={16} className="mt-1 shrink-0 text-purple-400" />
+                <Small>{item}</Small>
+              </li>
+            ))}
+          </ul>
+        </VStack>
+      </VStack>
+    </MarketingSection>
+  );
+}
+
+function IdealCofounderSection() {
+  const qualities = [
+    "You have shipped products people paid for — links or it didn't happen",
+    'You have sold something (product, consulting, yourself)',
+    'You write clearly and fast — emails, docs, copy',
+    'You have taste: you know good UX when you see it',
+    'You can work 6+ months without a salary',
+    'You are allergic to meetings that could be docs',
+    'You have built in public or contributed to open source',
+    'You are based in Europe or overlap significantly with CET',
+  ];
+
+  return (
+    <MarketingSection padding="comfortable" align="center" maxWidth="lg">
+      <VStack gap="lg">
+        <H2 className="text-3xl font-bold">The ideal co-founder</H2>
+        <ul className="space-y-3">
+          {qualities.map((item) => (
+            <li key={item} className="flex items-start gap-2">
+              <Check size={16} className="mt-1 shrink-0 text-emerald-400" />
+              <Small>{item}</Small>
+            </li>
+          ))}
+        </ul>
+        <Box className="border-border mt-4 rounded-lg border p-4">
+          <VStack gap="sm" align="start">
+            <H3 className="text-lg font-semibold">Proof of work examples</H3>
+            <Muted className="text-sm">
+              GitHub profile, shipped product, writing (blog/Twitter/essays),
+              revenue screenshot, open-source contributions, or anything that
+              shows you execute.
+            </Muted>
+          </VStack>
+        </Box>
+      </VStack>
+    </MarketingSection>
+  );
+}
+
+function WhatYouGetSection() {
+  const benefits = [
+    {
+      icon: <Percent size={20} className="text-emerald-400" />,
+      title: 'Equity-first',
+      desc: 'Meaningful co-founder equity. Salary is minimal/zero until revenue covers it.',
+    },
+    {
+      icon: <Users size={20} className="text-blue-400" />,
+      title: 'Real ownership',
+      desc: 'You own your domain. No permission-seeking. Ship and iterate.',
+    },
+    {
+      icon: <MessageSquare size={20} className="text-amber-400" />,
+      title: 'Written-first decisions',
+      desc: 'We default to async, docs, and fast decisions. Meetings are last resort.',
+    },
+  ];
+
+  const values = [
+    'Contracts over conventions',
+    'Clarity over cleverness',
+    'Safety over speed (in code)',
+    'Leverage over labor',
+  ];
+
+  return (
+    <MarketingSection
+      // tone="subtle"
+      padding="comfortable"
+      align="center"
+      maxWidth="lg"
+    >
+      <VStack gap="lg">
+        <H2 className="text-3xl font-bold">What you get</H2>
+        <div className="grid w-full gap-6 md:grid-cols-3">
+          {benefits.map((b) => (
+            <VStack
+              key={b.title}
+              gap="sm"
+              align="start"
+              className="border-border rounded-lg border p-4"
+            >
+              {b.icon}
+              <H3 className="text-lg font-semibold">{b.title}</H3>
+              <Muted className="text-sm">{b.desc}</Muted>
+            </VStack>
+          ))}
+        </div>
+        <VStack gap="sm" align="start" className="w-full pt-4">
+          <H3 className="text-lg font-semibold">Our values</H3>
+          <HStack gap="sm" wrap="wrap">
+            {values.map((v) => (
+              <Box
+                key={v}
+                className="border-border rounded-full border px-3 py-1 text-sm"
+              >
+                {v}
+              </Box>
+            ))}
+          </HStack>
+        </VStack>
+      </VStack>
+    </MarketingSection>
+  );
+}
+
+function RedFlagsSection() {
+  const redFlags = [
+    'Needs a big salary now',
+    'Hates selling or talking to users',
+    'Vague about past execution',
+    'Wants to "advise" instead of build',
+    'Needs a big team to feel productive',
+    'Cannot write clearly',
+  ];
+
+  return (
+    <MarketingSection padding="comfortable" align="center" maxWidth="lg">
+      <VStack gap="lg">
+        <H2 className="text-3xl font-bold">Non-negotiables / red flags</H2>
+        <Muted>If any of these apply, this is not the right fit:</Muted>
+        <ul className="space-y-2">
+          {redFlags.map((item) => (
+            <li key={item} className="flex items-start gap-2">
+              <X size={16} className="mt-1 shrink-0 text-red-400" />
+              <Small>{item}</Small>
+            </li>
+          ))}
+        </ul>
+      </VStack>
+    </MarketingSection>
+  );
+}
+
+function FAQSection() {
+  const faqs = [
+    {
+      icon: <Users size={18} />,
+      q: 'Why co-founder instead of hiring?',
+      a: "I need a partner who thinks like an owner, not an employee. Someone who will stay when things get hard and share in the upside when they don't.",
+    },
+    {
+      icon: <Clock size={18} />,
+      q: 'What is the timeline to revenue?',
+      a: 'Design partners are converting now. Goal: paying customers in 2025. But this is startup life — timelines are best guesses.',
+    },
+    {
+      icon: <MapPin size={18} />,
+      q: 'Is this remote?',
+      a: 'Yes. Async-first. Occasional in-person (Paris-based) for planning. Europe timezone overlap strongly preferred.',
+    },
+    {
+      icon: <Percent size={18} />,
+      q: 'How much equity?',
+      a: 'Depends on what you bring, when you join, and how much you can commit. Expect meaningful co-founder equity with 4-year vesting. We will discuss specifics in person.',
+    },
+  ];
+
+  return (
+    <MarketingSection
+      // tone="subtle"
+      padding="comfortable"
+      align="center"
+      maxWidth="lg"
+    >
+      <VStack gap="lg">
+        <H2 className="text-3xl font-bold">FAQ</H2>
+        <VStack gap="md" className="w-full">
+          {faqs.map((faq) => (
+            <VStack
+              key={faq.q}
+              gap="xs"
+              align="start"
+              className="border-border w-full rounded-lg border p-4"
+            >
+              <HStack gap="sm" align="center">
+                <span className="text-muted-foreground">{faq.icon}</span>
+                <H3 className="text-lg font-semibold">{faq.q}</H3>
+              </HStack>
+              <Muted>{faq.a}</Muted>
+            </VStack>
+          ))}
+        </VStack>
+      </VStack>
+    </MarketingSection>
+  );
+}
+
+function FinalCtaSection() {
+  return (
+    <MarketingSection
+      tone="gradient"
+      padding="comfortable"
+      align="center"
+      maxWidth="lg"
+    >
+      <VStack gap="md" align="center" className="text-center">
+        <H2 className="text-3xl font-bold md:text-4xl">Ready to talk?</H2>
+        <Lead className="text-muted-foreground max-w-xl">
+          Send an email with: your LinkedIn, 2 proof-of-work links, why
+          ContractSpec, and what you would own in the first 90 days.
+        </Lead>
+        <HStack gap="md" justify="center" wrap="wrap" className="pt-2">
+          <ButtonLink href={mailtoLink}>Talk about co-founding</ButtonLink>
+          <ButtonLink variant="ghost" href="/contact">
+            Become a design partner
+          </ButtonLink>
+        </HStack>
+        <Muted className="pt-4 text-sm">
+          CHAMAN VENTURES, SASU · RCS Paris · SIREN 989 498 902 · 229 rue
+          Saint-Honoré, 75001 Paris
+        </Muted>
+      </VStack>
+    </MarketingSection>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*                               Main Component                               */
+/* -------------------------------------------------------------------------- */
+
+export function CofounderPage() {
+  return (
+    <VStack as="main" gap="none">
+      <HeroSection />
+      <WhatExistsSection />
+      <RoleSection />
+      <IdealCofounderSection />
+      <WhatYouGetSection />
+      <RedFlagsSection />
+      <FAQSection />
+      <FinalCtaSection />
+    </VStack>
+  );
+}

package/src/components/marketing/ContactClient.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { useActionState } from 'react';
+import {
+  Calendar,
+  MessageSquare,
+  CheckCircle,
+  AlertCircle,
+} from 'lucide-react';
+import { submitContactForm } from '../../libs/email/contact';
+import type { SubmitContactFormResult } from '../../libs/email/types'; // Assuming these are exported from root or similar, need to check where submitContactForm lives.
+// Wait check imports again. submitContactForm is imported from @contractspec/bundle.marketing.
+// In bundle.marketing, it is likely in 'src/actions' or 'src/utils'.
+// I need to check where submitContactForm is defined in bundle.marketing.
+import { WaitlistSection } from './waitlist-section';
+import {
+  ActionForm,
+  Button,
+  Input,
+  Textarea,
+} from '@contractspec/lib.design-system';
+import { VStack, HStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import {
+  H2,
+  H1,
+  Small,
+  Muted,
+} from '@contractspec/lib.ui-kit-web/ui/typography';
+
+export function ContactClient() {
+  // Contact form handler
+  const handleContactSubmit = async (
+    _prevState: SubmitContactFormResult | null,
+    formData: FormData
+  ): Promise<SubmitContactFormResult> => {
+    const result = await submitContactForm(formData);
+
+    if (result.success) {
+      return {
+        success: true,
+        text: "Message sent successfully! We'll get back to you soon.",
+      };
+    } else {
+      return {
+        success: false,
+        text: result.text || 'Failed to send message. Please try again.',
+      };
+    }
+  };
+
+  const [contactResult, contactAction, contactPending] = useActionState<
+    SubmitContactFormResult | null,
+    FormData
+  >(handleContactSubmit, null);
+
+  return (
+    <section className="section-padding hero-gradient w-full">
+      <VStack className="mx-auto max-w-4xl gap-16">
+        <VStack className="gap-4 text-center">
+          <H1 className="text-5xl font-bold">Get in touch</H1>
+          <Muted className="text-lg">
+            Choose how you'd like to connect with us
+          </Muted>
+        </VStack>
+
+        {/* Waitlist Registration Section */}
+        <WaitlistSection context="contact" />
+
+        {/* Book a Call Section */}
+        <VStack className="card-subtle gap-6 p-8" id="call">
+          <HStack className="items-center gap-3">
+            <Calendar className="text-blue-400" size={24} />
+            <VStack className="items-start gap-1">
+              <H2 className="text-2xl font-bold">Book a 20-min call</H2>
+              <Muted className="text-sm">
+                Schedule a walkthrough with our team to see ContractSpec in
+                action
+              </Muted>
+            </VStack>
+          </HStack>
+
+          <div className="border-border overflow-hidden rounded-lg border">
+            <object
+              data="https://meet.reclaimai.com/e/f863cb29-caac-44b6-972b-1407dd9545a3"
+              width="100%"
+              height="700px"
+              style={{ outline: 'none' }}
+              aria-label="Calendar booking widget"
+            />
+          </div>
+        </VStack>
+
+        {/* Send Message Section */}
+        <VStack className="card-subtle gap-6 p-8" id="message">
+          <HStack className="items-center gap-3">
+            <MessageSquare className="text-emerald-400" size={24} />
+            <VStack className="items-start gap-1">
+              <H2 className="text-2xl font-bold">Send us a message</H2>
+              <Muted className="text-sm">
+                Have questions or feedback? We'd love to hear from you
+              </Muted>
+            </VStack>
+          </HStack>
+
+          <ActionForm action={contactAction}>
+            <VStack className="gap-4">
+              <VStack className="gap-2">
+                <Small className="text-sm font-medium">Name</Small>
+                <Input
+                  id="contact-name"
+                  name="name"
+                  type="text"
+                  placeholder="Your name"
+                  disabled={contactPending || contactResult?.success}
+                  required
+                />
+              </VStack>
+
+              <VStack className="gap-2">
+                <Small className="text-sm font-medium">Email</Small>
+                <Input
+                  id="contact-email"
+                  name="email"
+                  type="email"
+                  keyboard={{ kind: 'email' }}
+                  placeholder="your@email.com"
+                  disabled={contactPending || contactResult?.success}
+                  required
+                />
+              </VStack>
+
+              <VStack className="gap-2">
+                <Small className="text-sm font-medium">Message</Small>
+                <Textarea
+                  id="contact-message"
+                  name="message"
+                  placeholder="Tell us what's on your mind..."
+                  disabled={contactPending || contactResult?.success}
+                  rows={6}
+                  required
+                />
+              </VStack>
+
+              {contactResult && !contactPending && (
+                <HStack
+                  className={`items-center gap-2 rounded-lg p-3 text-sm ${
+                    contactResult.success
+                      ? 'border border-green-500/20 bg-green-500/10 text-green-400'
+                      : 'border border-red-500/20 bg-red-500/10 text-red-400'
+                  }`}
+                >
+                  {contactResult.success ? (
+                    <CheckCircle size={16} />
+                  ) : (
+                    <AlertCircle size={16} />
+                  )}
+                  <Small>{contactResult.text}</Small>
+                </HStack>
+              )}
+
+              <Button
+                type="submit"
+                disabled={contactPending || contactResult?.success}
+                className="w-full"
+              >
+                {contactPending ? 'Sending...' : 'Send message'}
+              </Button>
+            </VStack>
+          </ActionForm>
+        </VStack>
+      </VStack>
+    </section>
+  );
+}