[V0_FILE]png:file="public/expanding-usage-diagram.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-18%20at%2011.54.16%E2%80%AFAM-3GxoGJcXCCxxrm9WuNtRZcppeJWdaf.png" [V0_FILE]typescriptreact:file="components/interactive-timeline.tsx" "use client" import { motion } from "framer-motion" import { ShieldCheck, ArrowRight, User, CheckCircle, KeyRound, Layers, Package } from "lucide-react" import type React from "react" const timelineData = [ { id: "stage1", period: "Months 1-6", userCount: 50, userLabel: "v0 Users", priceInfo: "Small price per User", poolInfo: "Large Usage Pool", activities: ["Enablement + Coaching", "Live Troubleshooting"], numV0UserIcons: 4, platformFeatures: [ { name: "SOC2", category: "Security", icon: }, { name: "GDPR", category: "Security", icon: }, { name: "ISO27001", category: "Security", icon: }, { name: "SSO", category: "Controls", icon: }, { name: "RBAC", category: "Controls", icon: }, { name: "CI/CD", category: "Infra", icon: }, { name: "Build Slots", category: "Infra", icon: }, { name: "DB Integrations", category: "Ecosystem", icon: }, { name: "IDEs", category: "Ecosystem", icon: }, { name: "Env. Vars", category: "Ecosystem", icon: }, ], }, { id: "stage2", period: "Months 7-12", userCount: 150, userLabel: "v0 Users", priceInfo: "More usage per user", poolInfo: "Bigger Usage Pool", activities: ["Additional Use Cases (MCP)", "Proven Success Over Time"], numV0UserIcons: 8, platformFeatures: [ { name: "SOC2", category: "Security", icon: }, { name: "GDPR", category: "Security", icon: }, { name: "ISO27001", category: "Security", icon: }, { name: "SSO", category: "Controls", icon: }, { name: "RBAC", category: "Controls", icon: }, { name: "CI/CD", category: "Infra", icon: }, { name: "Build Slots", category: "Infra", icon: }, { name: "DB Integrations", category: "Ecosystem", icon: }, { name: "IDEs", category: "Ecosystem", icon: }, { name: "Env. Vars", category: "Ecosystem", icon: }, ], }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.5, }, }, } const stageVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, x: -10 }, visible: { opacity: 1, x: 0 }, } const platformContainerVariants = { hidden: { opacity: 0, scale: 0.95 }, visible: { opacity: 1, scale: 1, transition: { duration: 0.4, staggerChildren: 0.2, }, }, } const platformCategoryVariants = { hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0, transition: { staggerChildren: 0.1, }, }, } const TimelineStage: React.FC<{ stage: (typeof timelineData)[0] }> = ({ stage }) => { const groupedFeatures = stage.platformFeatures.reduce( (acc, feature) => { const category = feature.category if (!acc[category]) { acc[category] = [] } acc[category].push(feature) return acc }, {} as Record, ) return ( {stage.period} {stage.userCount} Users

Usage & Support

{stage.priceInfo}

{stage.poolInfo}

{activity}

{stage.userLabel} contributing to Usage Pool

{Array.from({ length: stage.numV0UserIcons }).map((_, i) => (

User ))}

Usage Pool

Vercel Platform Foundation

{Object.entries(groupedFeatures).map(([category, features]) => (

{features[0].icon} {category}

{features.map((feature) => ( {/* Spacer for alignment */} {feature.name} ))}

))}

) } const InteractiveTimeline: React.FC = () => { return ( ) } export default InteractiveTimeline [V0_FILE]png:file="public/v0-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot_2025-06-18_at_11.48.18_AM-removebg-preview-etGv1oWOdWsUkyA97rHKlDBNZEExeD.png" [V0_FILE]png:file="public/c3-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-7jimbyca06TRcwgW4lRHkVPIQyYdAQ.png" [V0_FILE]png:file="public/bolt-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot_2025-06-18_at_12.32.58_PM-removebg-preview-SulnEG1zCMdulZq5R9oIrtZ0yToYBh.png" [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import Image from "next/image" import { Clock, Users, Zap, ArrowRight, TrendingUp, Target, Brain, Code, Cpu, BarChart3, GitCompare, Server, } from "lucide-react" import Link from "next/link" import InteractiveTimeline from "@/components/interactive-timeline" import ComparisonSection from "@/components/comparison-section" import VercelPlatformSection from "@/components/vercel-platform-section" export default function C3AiV0Landing() { const [isVisible, setIsVisible] = useState(false) useEffect(() => { setIsVisible(true) }, []) return (

{/* Header */}

C3 AI ×

Enterprise AI Ready

{/* Hero Section */}

Accelerate Enterprise AI Development,
Build AI Applications Faster

v0 will transform C3 AI's product development velocity — reducing AI application prototyping cycles from weeks to days while enabling rapid validation of enterprise AI solutions and user experiences.

{/* Success Metrics */}

Proven Success Criteria

Directly addressing your enterprise AI development bottlenecks

Faster Handoffs

4-6 Hours Saved in 24 hours

"We couldn't have built this so quickly without v0"

Skip Static Mocks

Interactive

Jump straight to functional AI interfaces for faster feedback

Risk Reduction

Early

Validate AI solutions before production code is written

Team Independence

No Code

Product managers & designers build AI flows independently

{/* Top Use Cases */}

Top Use Cases for v0 at C3 AI

Proven applications across product, sales, marketing, and AI innovation teams

AI Interface Prototyping

2-3 weeks → 1 day

Enable PMs to build functional AI application interfaces without waiting on design or engineering.

• Cut AI solution ideation-to-prototype cycles dramatically
• Support experimentation and faster customer feedback
• Remove cross-team dependencies

Enterprise Demo Assets

Interactive AI Demos

Create interactive, AI-powered experiences for enterprise demos and value propositions.

• Replace static slides with live AI microsites
• Personalized enterprise prospect experiences
• Accelerate enterprise sales team alignment

AI Solution Microsites

Enterprise Ready

Build and test AI solution microsites and campaign assets quickly.

• Prototype without Figma or engineering bottlenecks
• Connect analytics for engagement tracking
• Rapid AI solution iteration

AI ROI Calculators

Value Demonstration

Build internal and external apps to communicate AI business value.

• AI ROI calculators and value drivers
• Lightweight web apps with enterprise design systems
• Backend AI API integration capabilities


                  AI Workflow Integration & Internal Tools


                
                  Enterprise AI Ready


              
                
                  Leverage v0 to integrate with existing AI tools and workflows inside C3 AI.
                
                
                  
                    • Demo new internal AI tooling for innovation teams
                    • Prototype AI-powered enterprise interfaces
                  
                  
                    • v0-generated UIs for AI workflow automation
                    • Rapid internal AI tool development



      {/* Why Now Section */}
      
        
          
          Why Now? Enterprise AI Innovation is Competitive Advantage
          
            AI-native tools are fundamentally shifting how fast enterprise AI companies innovate and iterate on AI
            solutions. In a world where AI experience matters, C3 AI can't afford to move slowly on product innovation.
          
          
            
              Reduce Development Friction
              Eliminate communication gaps between AI product teams
            
            
              Test AI Solutions
              Validate enterprise AI flows with customers faster
            
            
              Better Decisions Earlier
              Make informed choices before heavy AI platform investment
            
          
        
      

      {/* Expanding Usage Section */}
      
        
          
          Expanding Usage - Unlocking Value
          
        
      

      {/* Vercel Platform Foundation Section */}
      
        
          
          Vercel Platform Foundation
          
            The complete platform for developing, previewing, and shipping exceptional web experiences.
          
          
        
      

      {/* Comparison Section */}
      
        
          
          v0 vs. The Competition
          
        
      

      {/* Footer */}
      
        
          C3 AI × v0 Partnership Proposal | Confidential


  )
}
[V0_FILE]typescriptreact:file="components/vercel-platform-section.tsx"
"use client"

import type React from "react"
import { Code2, GitCommit, Package, CheckCircle, Laptop, ThumbsUp, Globe, BarChart3, Shield } from "lucide-react"
import { motion } from "framer-motion"

const platformSteps = [
  {
    icon: Code2,
    title: "Code",
    description: "v0, Next.js, Edge Functions",
    color: "text-blue-400",
    category: "ci",
  },
  {
    icon: GitCommit,
    title: "Commit",
    description: "Git Integration, Vercel CLI",
    color: "text-orange-400",
    category: "ci",
  },
  {
    icon: Package,
    title: "Build",
    description: "Turborepo, File System API",
    color: "text-purple-400",
    category: "ci",
  },
  {
    icon: CheckCircle,
    title: "Test",
    description: "Deploy Checks w/ Checks API",
    color: "text-green-400",
    category: "ci",
  },
  {
    icon: Laptop,
    title: "Preview",
    description: "Per-Branch Deployments",
    color: "text-cyan-400",
    category: "cd",
  },
  {
    icon: ThumbsUp,
    title: "Review",
    description: "Next.js Live",
    color: "text-indigo-400",
    category: "cd",
  },
  {
    icon: Globe,
    title: "Deploy",
    description: "Global Edge Network",
    color: "text-sky-400",
    category: "cd",
  },
  {
    icon: BarChart3,
    title: "Measure",
    description: "Analytics & Usage (98)",
    color: "text-lime-400",
    category: "cd",
  },
  {
    icon: Shield,
    title: "Protect",
    description: "WAF & DDoS Protection",
    color: "text-red-400",
    category: "cd",
  },
]

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    },
  },
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
}

const VercelPlatformSection: React.FC = () => {
  return (
    
      
        
          CONTINUOUS INTEGRATION
        
        
          CONTINUOUS EDGE DEPLOYMENT
        
      

      
        {/* Connecting line */}
        

        
          {platformSteps.map((step, index) => (
            
              
                
                  
                
                
              
              {step.title}
              {step.description}
            
          ))}
        
      
    
  )
}

export default VercelPlatformSection
[V0_FILE]typescriptreact:file="components/comparison-section.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import Image from "next/image"
import { CheckCircle2, XCircle, Gem } from "lucide-react"
import { motion } from "framer-motion"

const functionalityData = {
  v0: [
    {
      text: "Most up to date React Prompting?",
      icon: ,
      subtext: null,
    },
    { text: "Built-in AI SDK?", icon: , subtext: null },
    {
      text: "Established Financial Services success stories in Frontend ecosystem",
      icon: ,
      subtext: "(Trusted by well known brands like Stripe, Nerd Wallet, Paypal and more...)",
    },
    {
      text: "Pre-production resources beyond prompting?",
      icon: ,
      subtext:
        "v0 offers instant connection to the entire Vercel preview and post hosting tooling include, staging, and production pipelines. Well established Existing Global Edge Network",
    },
  ],
  bolt: [
    { text: "Most up to date React Prompting?", icon: , subtext: null },
    { text: "Built in AI SDK?", icon: , subtext: null },
    {
      text: "Established Financial Services success stories in Frontend ecosystem",
      icon: , // Using Gem for diamond
      subtext: null,
    },
    {
      text: "Pre-production resources beyond prompting?",
      icon: ,
      subtext: null,
    },
  ],
}

const companyDirectionData = {
  v0: [
    "Series E - $250M",
    "$3.25B Valuation",
    "700 Employees",
    "Creators and maintainers of Next.js",
    "Deep integration with React ecosystem (Creators of React now work at Vercel)",
    "The first Enterprise ready full stack UI/UX webapp generator",
  ],
  bolt: [
    "Series B - $83M",
    "33 Employees",
    "Stand alone tooling",
    "A ton of excitement in the dev community for another way to create IDE projects on demand",
  ],
}

const cardVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
}

const listItemVariants = {
  hidden: { opacity: 0, x: -10 },
  visible: { opacity: 1, x: 0 },
}

const ComparisonCard: React.FC<{
  logoSrc: string
  logoAlt: string
  items: Array<{ text: string; icon?: React.ReactNode; subtext?: string | null } | string>
  isFunctionality?: boolean
}> = ({ logoSrc, logoAlt, items, isFunctionality }) => {
  return (
    
      
        {" "}
        {/* Added h-10 and items-center for consistent height */}
        
      
      
        {items.map((item, index) => {
          if (isFunctionality && typeof item === "object") {
            return (
              
                {item.icon}
                
                  {item.text}
                  {item.subtext && {item.subtext}}
                
              
            )
          } else if (!isFunctionality && typeof item === "string") {
            return (
              
                •
                {item}
              
            )
          }
          return null
        })}
      
    
  )
}

const ComparisonSection: React.FC = () => {
  return (
    
      
        Functionality
        
          
          
        
      

      
        Company Direction
        
          
          
        
      
    
  )
}

export default ComparisonSection

Usage & Support

Vercel Platform Foundation

{features[0].icon} {category}

Accelerate Enterprise AI Development, Build AI Applications Faster

Proven Success Criteria

Top Use Cases for v0 at C3 AI

Why Now? Enterprise AI Innovation is Competitive Advantage

Reduce Development Friction

Test AI Solutions

Better Decisions Earlier

Expanding Usage - Unlocking Value

Vercel Platform Foundation

v0 vs. The Competition

{step.title}

Functionality

Company Direction

Accelerate Enterprise AI Development,
Build AI Applications Faster