DaisyAI Website Refactor - Complete Specification

Purpose: Comprehensive specification for refactoring daisyai.ai from SaaS-focused to FDE-first positioning, while showcasing the production HIPAA-compliant application as proof of building capability.

Last Updated: January 9, 2025 Status: Planning Complete, Ready for Implementation

---

Table of Contents

1. Executive Summary
2. Strategic Context
3. Current State Analysis
4. Target State Design
5. Implementation Plan
6. Component Specifications
7. Content Requirements
8. Open Items

---

Executive Summary

The Pivot

Why This Matters

DaisyAI is pivoting to a hybrid model (SaaS + FDE services). The website must:

1. Lead with services - Attract enterprise healthcare clients who need implementation partners
2. Showcase the product - Prove we can build production AI (not vaporware)
3. Qualify leads - Help visitors self-select based on budget and fit
4. Build credibility - Leverage founder backgrounds and thought leadership

The DaisyAI Application (Proof of Capability)

We have a production HIPAA-compliant application that demonstrates our building capability:

Repository: daisyai-ai/daisyai-app Stack: Next.js 15, React 19, TypeScript, Neon Postgres, Clerk Auth, Vercel AI SDK Pricing: $249.99/month SaaS

Key Features:

• 7 specialized AI agents for different review types
• Evidence extraction with source citations
• HIPAA-compliant, SOC2-ready infrastructure
• Integrates with existing clinical workflows
• Real nurses using it in production

This isn't a demo or mockup—it's running software that processes medical charts. This is the credibility anchor for FDE positioning: "We've already built it for ourselves."

---

Strategic Context

The FDE Thesis

The bottleneck for enterprise AI isn't models—it's implementation.

Key Statistics:

• 95% of AI projects fail to create business value
• 0% of companies have reached AI maturity
• 800%+ growth in demand for implementation engineers (Forward Deployed Engineers)

DaisyAI's Positioning:

• "Unlike consultants who deliver recommendations, we deliver working software"
• We embed with client teams, understand real workflows (not SOPs), and ship production code
• Our SaaS product proves we can build—it's running in production today

Target Market

Ideal Customer Profile:

• Regional health systems (3-20 hospitals)
• Specialty payers and TPAs
• UM/UR outsourcing companies
• Large physician groups with value-based contracts
• Revenue: $50M-$500M (big enough for budget, nimble enough to move fast)

Common Pain Points:

• Prior authorization backlogs causing care delays
• Nurse burnout from repetitive manual review
• Denial rates impacting revenue cycle
• Documentation bottlenecks slowing decisions
• Failed AI pilots with big vendors

Engagement Models

Competitive Differentiation

---

Current State Analysis

Repository: daisyai-www-v2

Location: /Users/tstartz/Code/daisyai-www-v2 Last Commit: a95fa80 - "Fix feature box heights and update output template copy"

Tech Stack (Confirmed)

Framework: Next.js 15.4.6 + React 19.1.0
Styling: Tailwind CSS v4
Animation: Framer Motion 12.x
3D Effects: Three.js (Vortex background)
Fonts: Playfair Display (serif headings), Nunito Sans (body)
Deployment: Vercel (assumed)

Current Page Structure

/                   # Homepage (SaaS-focused)
/about              # Team page (basic bios)

Homepage Section Flow:

Hero
  → ProblemStatement
  → DaisySolution
  → Features
  → CallToAction
  → Footer

Existing Components Inventory

Sections (/src/components/sections/)

Layout (/src/components/layout/)

UI (/src/components/ui/)

Backgrounds (/src/components/backgrounds/)

Design System

Color Palette:

• Background: #0a0a0a (near black)
• Text Primary: white
• Text Secondary: white/70
• Text Tertiary: white/60
• Accent: yellow-400 (CTAs, highlights)
• Borders: white/10

Typography:

• Headings: Playfair Display (serif)
• Body: Nunito Sans (sans-serif)
• Sizing: clamp() for responsive scaling

Animation Patterns:

• Scroll-triggered reveals via ScrollReveal.tsx
• Framer Motion useInView for stat counters
• Parallax effects on background
• Fade-in-up for text elements

Current Hero Content (To Replace)

// Current (SaaS-focused)
<h1>AI-Powered Medical Case Review</h1>
<p>Stop summarizing and start synthesizing. Extract defensible
   clinical evidence to justify reimbursement and manage evolving cases.</p>

// Target (FDE-focused)
<h1>We Build AI That Actually Works in Healthcare</h1>
<p>95% of enterprise AI projects fail. We're the engineers who make them succeed.</p>

---

Target State Design

New Site Architecture

/                   # Homepage (FDE-first narrative)
/about              # Enhanced team + philosophy page
/services           # NEW: Detailed engagement models
/product            # NEW: SaaS platform showcase (proof of capability)
/insights           # NEW: Thought leadership hub (Substack integration)

Target Homepage Section Flow

1. Hero                 # Hook with FDE thesis
2. ProblemStats         # NEW: 95% fail statistics
3. Approach             # NEW: Embed → Build → Scale
4. EngagementModels     # NEW: Three pricing tiers
5. ProofOfCapability    # Modified: Product as evidence
6. TargetMarket         # NEW: Who we work with
7. Team                 # Enhanced: Credibility focus
8. CallToAction         # Modified: Book a call

New Navigation

Header (Desktop):

[Logo: Daisy AI]  [Services] [Product] [Insights] [About]  [Twitter] [LinkedIn] [Substack]  [Book a Call →]

Header (Mobile):

[Logo]                                                      [☰ Menu]

Design Decisions

Keep Dark Theme + Vortex

Rationale:

1. Differentiation - Most healthcare sites are sterile blue/white
2. Premium positioning - Dark = high-end, sophisticated
3. Technical credibility - "We're engineers, not marketers"
4. Memorable - Vortex creates distinctive first impression

Show Pricing Publicly

Rationale:

1. Transparency builds trust - No "contact us for pricing" games
2. Qualifies leads - Filters out wrong-fit inquiries
3. Demonstrates confidence - We know our value
4. Aligns with FDE ethos - Direct, no BS

Direct Calendly (No Form)

Rationale:

1. Reduces friction - One click to book
2. Shows availability - Signals responsiveness
3. Self-service - Respects visitor time
4. Can add form later - Start simple, optimize based on data

---

Implementation Plan

Philosophy

Build from foundation outward:

1. Primitives (reusable UI components)
2. Layout (header/footer)
3. Sections (content blocks)
4. Page composition
5. New routes

Phase 1: Foundation (Day 1)

Objective: Establish building blocks without changing visible content

Step 1.1: Create SocialLinks Component

CREATE: /src/components/ui/SocialLinks.tsx

• Props: platforms[], size (sm/md/lg), variant (header/footer/inline)
• Icons for Twitter, LinkedIn, Substack
• Hover states matching design system
• Export SOCIAL_URLS config object

Step 1.2: Update Header

MODIFY: /src/components/layout/Header.tsx

Changes:

• Add NAV_LINKS array: [Services, Product, Insights, About]
• Import and render SocialLinks
• Change CTA text: "Request Access" → "Book a Call"
• Update CTA link to Calendly
• Add responsive nav (hamburger menu for mobile)

Step 1.3: Update Footer

MODIFY: /src/components/layout/Footer.tsx

Changes:

• Add SocialLinks row with labels
• Add "Follow our thinking" header
• Ensure consistent spacing with new sections

Phase 2: New Sections (Days 2-3)

Objective: Create all new content sections

Step 2.1: ProblemStats Section

CREATE: /src/components/sections/ProblemStats.tsx

Content:

Section Title: "The AI Implementation Crisis"

Stat 1: "95%" — "of AI projects fail to create business value"
Stat 2: "1%" — "of companies have reached AI maturity"
Stat 3: "800%" — "growth in demand for implementation engineers"

Body: "The bottleneck for enterprise AI isn't models—it's implementation.
Healthcare organizations have the budget and the pain, but lack the
talent to transform operations."

Technical:

• Animate stats with count-up on scroll (useInView + useSpring)
• Three-column grid (stack on mobile)
• Use ScrollReveal wrapper

Step 2.2: Approach Section

CREATE: /src/components/sections/Approach.tsx

Content:

Section Title: "Unlike Consultants, We Build Working Software"

Column 1: "Embed & Discover"
- Shadow actual workflows
- Map the real process (not the SOP)
- Build trust with end users
- Identify highest-impact opportunities

Column 2: "Build & Deploy"
- Write production code on your infrastructure
- Integrate with existing EHRs and systems
- Ship iteratively, not in 18-month cycles
- Train your team as we build

Column 3: "Improve & Scale"
- Every engagement improves our platform
- Knowledge compounds across clients
- Your success feeds our product roadmap
- Graduate from projects to partnership

Technical:

• Three-column grid with icons (Eye, Code, TrendingUp from Lucide)
• Numbered steps (1, 2, 3) for visual hierarchy
• Subtle hover effect on cards

Step 2.3: EngagementModels Section

CREATE: /src/components/sections/EngagementModels.tsx

Content:

Section Title: "Three Ways to Work With Us"

Card 1: "Discovery Sprint"
Price: "$15-25K"
Duration: "2 weeks"
Includes:
- Process mapping & observation
- 10-15 stakeholder interviews
- Opportunity sizing & ROI model
- Working prototype demo
- Implementation roadmap
Best for: "Is AI right for this workflow?"

Card 2: "Implementation Project" [FEATURED]
Price: "$75-200K"
Duration: "2-4 months"
Includes:
- Dedicated FDE team
- Production deployment
- Integration with existing systems
- Training & change management
- 30-day post-launch support
Best for: "We know what we need, help us build it"

Card 3: "Embedded FDE"
Price: "$20-30K/month"
Duration: "Ongoing"
Includes:
- Continuous engineering capacity
- Weekly syncs with leadership
- Quarterly business reviews
- Priority access to platform updates
- Expansion into new workflows
Best for: "Be our AI team"

Technical:

• Three cards, equal height
• Middle card "featured" (slight elevation or accent border)
• Responsive: 3-col → 1-col on mobile

Step 2.4: TargetMarket Section

CREATE: /src/components/sections/TargetMarket.tsx

Content:

Section Title: "Built for Healthcare Operations Leaders"

Organization Types:
- Regional health systems (3-20 hospitals)
- Specialty payers and TPAs
- UM/UR outsourcing companies
- Large physician groups

Common Challenges:
✓ Prior authorization backlogs causing care delays
✓ Nurse burnout from repetitive manual review
✓ Denial rates impacting revenue cycle
✓ Documentation bottlenecks slowing decisions

Qualifier: "We work best with organizations doing $50M-$500M in revenue—
big enough to have budget, nimble enough to move fast."

Technical:

• Two-column layout (org types left, challenges right)
• Icons for org types (Building, Shield, Clipboard, Users)
• Checkmarks for challenges

Step 2.5: TeamHighlight Section

CREATE: /src/components/sections/TeamHighlight.tsx

Content:

Section Title: "Wharton-Trained. Healthcare-Focused. Builder-Minded."

Founder 1: Thomas Startz
Role: CEO
Background: Columbia University, Wharton MBA
Experience: Healthcare operations and finance
Social: [LinkedIn] [Twitter]

Founder 2: Michael Yuan
Role: CTO
Background: Princeton University, Wharton MBA
Experience: Engineering and consulting
Social: [LinkedIn] [Twitter]

Closing: "We've worked at Bain, McKinsey, and in healthcare operations.
We left to build something that actually ships."

CTA: "Read Our Thinking →" links to Substack

Technical:

• Side-by-side founder photos
• Social icons under each name
• Link to thought leadership

Phase 3: Content Updates (Day 3)

Objective: Update existing components with new messaging

Step 3.1: Hero Content Swap

MODIFY: /src/components/sections/Hero.tsx

Changes:

// OLD
<h1>AI-Powered Medical Case Review</h1>
<p>Stop summarizing and start synthesizing...</p>

// NEW
<h1>We Build AI That Actually Works in Healthcare</h1>
<p>95% of enterprise AI projects fail. We're the engineers who make them succeed.</p>

// Add dual CTAs
<Button variant="solid">Book a Discovery Call</Button>
<Button variant="outline">See How We Work</Button>

Step 3.2: Rename DaisySolution

RENAME: DaisySolution.tsx → ProofOfCapability.tsx

Content Updates:

Section Title: "We've Already Built It For Ourselves"
Intro: "This isn't vaporware—it's running in production."

Key Points:
• 7 specialized AI agents for different review types
• Evidence extraction with source citations
• HIPAA-compliant, SOC2-ready infrastructure
• Integrates with existing clinical workflows

Closing: "We're not theorists. We're builders who ship."
CTA: "Explore the Platform →" links to /product

Step 3.3: CallToAction Update

MODIFY: /src/components/sections/CallToAction.tsx

Changes:

OLD Headline: "Ready to transform your medical review process?"
NEW Headline: "Let's Talk About Your AI Challenges"

OLD Body: [product-focused copy]
NEW Body: "Book a 30-minute call. No pitch, just problem-solving.
We'll tell you honestly if we can help—and if we can't, we'll point you
to someone who might."

OLD CTA: "Request Access"
NEW CTA: "Book a Discovery Call" → Calendly

ADD: "Prefer email? thomas@daisyai.ai"

Phase 4: Page Composition (Day 4)

Objective: Assemble the new homepage

Step 4.1: Recompose Homepage

MODIFY: /src/app/page.tsx

New Section Order:

import Hero from "@/components/sections/Hero";
import ProblemStats from "@/components/sections/ProblemStats";
import Approach from "@/components/sections/Approach";
import EngagementModels from "@/components/sections/EngagementModels";
import ProofOfCapability from "@/components/sections/ProofOfCapability";
import TargetMarket from "@/components/sections/TargetMarket";
import TeamHighlight from "@/components/sections/TeamHighlight";
import CallToAction from "@/components/sections/CallToAction";

// In render:
<Hero />
<ProblemStats />
<Approach />
<EngagementModels />
<ProofOfCapability />
<TargetMarket />
<TeamHighlight />
<CallToAction />

Phase 5: New Pages (Days 5-6) - Optional for MVP

/product Page

CREATE: /src/app/product/page.tsx

• Migrate Features.tsx content here
• Full product showcase
• Screenshots/mockups
• "Try it yourself" CTA

/services Page

CREATE: /src/app/services/page.tsx

• Expanded engagement model details
• FAQ for each tier
• Process timeline visualizations

/insights Page

CREATE: /src/app/insights/page.tsx

• Substack embed or article list
• Categories: FDE, Healthcare AI, Implementation

Phase 6: Polish (Day 7)

• Mobile responsive testing
• Animation timing adjustments
• SEO meta tags (title, description, OG image)
• Accessibility audit (ARIA labels, focus states)
• Test all links (Calendly, social, login)
• Performance check (Lighthouse)

---

Component Specifications

SocialLinks Component

File: /src/components/ui/SocialLinks.tsx

interface SocialLinksProps {
  platforms: ('twitter' | 'linkedin' | 'substack')[];
  size?: 'sm' | 'md' | 'lg';  // 16px, 20px, 24px
  variant?: 'header' | 'footer' | 'inline';
  showLabels?: boolean;
  className?: string;
}

const SOCIAL_URLS = {
  twitter: 'https://twitter.com/daisyai',      // UPDATE
  linkedin: 'https://linkedin.com/company/daisyai',  // UPDATE
  substack: 'https://substack.com/@tstartz',
};

Stat Counter Animation

For ProblemStats section:

import { useInView } from "framer-motion";
import { useSpring, animated } from "@react-spring/web";

function AnimatedStat({ value, suffix = "" }: { value: number; suffix?: string }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });

  const { number } = useSpring({
    number: isInView ? value : 0,
    delay: 200,
    config: { duration: 1500 }
  });

  return (
    <animated.span ref={ref}>
      {number.to(n => Math.floor(n) + suffix)}
    </animated.span>
  );
}

---

Content Requirements

Finalize Before Implementation

Founder Bios (For Team Section)

Thomas Startz

• Role: CEO
• Education: Columbia University, Wharton MBA
• Background: Healthcare operations and finance
• LinkedIn: [URL]
• Twitter: [URL]

Michael Yuan

• Role: CTO
• Education: Princeton University, Wharton MBA
• Background: Engineering, consulting (Bain)
• LinkedIn: [URL]
• Twitter: [URL]

---

Open Items

Blocking Questions

1. Calendly link confirmed? Currently using Google Calendar link
2. Social media URLs? Twitter, LinkedIn handles
3. Pricing ranges approved? For public display

Non-Blocking Decisions

1. Should middle pricing card be "featured" with visual emphasis?
2. Add newsletter signup to footer?
3. Include testimonials section (even without client logos)?
4. Add "As seen in" section for any press/publications?

Future Enhancements (Post-MVP)

• Case studies page (when we have client wins)
• Blog integration (beyond Substack)
• ROI calculator interactive tool
• Demo video/walkthrough
• Live chat integration

---

File Change Summary

Creates (6 files)

Modifications (6 files)

Archives (Move to /archive)

• ProblemStatement.tsx (replaced by ProblemStats)
• TheProblem.tsx (replaced by ProblemStats)
• ReasoningLayer.tsx (move to /product page)

---

Execution Prompt

When starting implementation, use this context:

I need to refactor the DaisyAI website (daisyai-www-v2) from SaaS-focused to FDE-first positioning.

Key context:
- Next.js 15 + React 19 + Tailwind v4 + Framer Motion
- Keep the dark theme and Vortex background (differentiator)
- FDE-first: lead with consulting services, SaaS product is proof of capability
- The product (daisyai-app) is a production HIPAA-compliant medical chart review app with 7 AI agents
- No client case studies yet - use product as evidence of building capability
- Need social links (Twitter, LinkedIn, Substack) in header and footer
- Show pricing publicly (transparency builds trust)

Start with Phase 1 (Foundation):
1. Create SocialLinks component
2. Update Header with nav + social
3. Update Footer with social row

Then Phase 2 (New Sections):
4. Create ProblemStats, Approach, EngagementModels, TargetMarket, TeamHighlight

Then Phase 3 (Content Updates):
5. Update Hero, rename DaisySolution to ProofOfCapability, update CallToAction

Maintain existing design system and animation patterns.

---

Document Version: 2.0 Created: January 8, 2025 Updated: January 9, 2025 Author: Claude Code (OS repo session)