Website v1.5: AI-native copy revamp, new pages, and UX improvements

apps/web/client/src/app/_components/hero/ai-frontend-hero.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { motion } from 'motion/react';
+
+import { Button } from '@onlook/ui/button';
+
+import { ExternalRoutes } from '@/utils/constants';
+import { useGitHubStats } from '../top-bar/github';
+import { UnicornBackground } from './unicorn-background';
+
+export function AiFrontendHero() {
+    const router = useRouter();
+    const { formatted: starCount } = useGitHubStats();
+
+    const handleBookDemo = () => {
+        window.open(ExternalRoutes.BOOK_DEMO, '_blank');
+    };
+
+    return (
+        <div className="relative flex h-full w-full flex-col items-center justify-center gap-12 p-8 text-center text-lg">
+            <UnicornBackground />
+            <div className="relative z-20 flex max-w-3xl flex-col items-center gap-6 pt-4 pb-2">
+                <motion.h1
+                    className="text-foreground-secondary mb-4 text-sm font-medium tracking-wider uppercase"
+                    initial={{ opacity: 0, filter: 'blur(4px)' }}
+                    animate={{ opacity: 1, filter: 'blur(0px)' }}
+                    transition={{ duration: 0.6, ease: 'easeOut' }}
+                    style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
+                >
+                    AI for Frontend Development
+                </motion.h1>
+                <motion.p
+                    className="text-center text-4xl !leading-[1.1] leading-tight font-light text-balance md:text-6xl"
+                    initial={{ opacity: 0, filter: 'blur(4px)' }}
+                    animate={{ opacity: 1, filter: 'blur(0px)' }}
+                    transition={{ duration: 0.6, delay: 0.1, ease: 'easeOut' }}
+                    style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
+                >
+                    AI That Builds With Your Components, Not Around Them
+                </motion.p>
+                <motion.p
+                    className="text-foreground-secondary mx-auto max-w-xl text-center text-lg text-balance"
+                    initial={{ opacity: 0, filter: 'blur(4px)' }}
+                    animate={{ opacity: 1, filter: 'blur(0px)' }}
+                    transition={{ duration: 0.6, delay: 0.15, ease: 'easeOut' }}
+                    style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
+                >
+                    Stop generating throwaway code. Onlook's AI is constrained to your design system — your buttons, your cards, your layouts. What you create is a PR your engineers can merge.
+                </motion.p>
+                <motion.div
+                    className="mt-8"
+                    initial={{ opacity: 0, filter: 'blur(4px)' }}
+                    animate={{ opacity: 1, filter: 'blur(0px)' }}
+                    transition={{ duration: 0.6, delay: 0.3, ease: 'easeOut' }}
+                    style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
+                >
+                    <Button
+                        variant="secondary"
+                        size="lg"
+                        className="hover:bg-foreground-primary hover:text-background-primary cursor-pointer p-6 transition-all duration-300"
+                        onClick={handleBookDemo}
+                    >
+                        Book a Demo
+                    </Button>
+                </motion.div>
+                <motion.div
+                    className="text-foreground-secondary mt-8 flex items-center justify-center gap-6 text-sm"
+                    initial={{ opacity: 0, filter: 'blur(4px)' }}
+                    animate={{ opacity: 1, filter: 'blur(0px)' }}
+                    transition={{ duration: 0.6, delay: 0.4, ease: 'easeOut' }}
+                    style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
+                >
+                    <div className="flex items-center gap-2">
+                        <span>{starCount}+ GitHub stars</span>
+                    </div>
+                    <div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
+                    <div className="flex items-center gap-2">
+                        <span>YC W25</span>
+                    </div>
+                    <div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
+                    <div className="flex items-center gap-2">
+                        <span>Open Source</span>
+                    </div>
+                </motion.div>
+            </div>
+        </div>
+    );
+}

apps/web/client/src/app/_components/hero/claude-code-hero.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { motion } from 'motion/react';
+
+import { Button } from '@onlook/ui/button';
+import { Icons } from '@onlook/ui/icons';
+
+import { ExternalRoutes } from '@/utils/constants';
+import { useGitHubStats } from '../top-bar/github';
+import { UnicornBackground } from './unicorn-background';
+
+export function ClaudeCodeHero() {
+    const { formatted: starCount } = useGitHubStats();
+
+    return (
+        <div className="relative flex h-full w-full flex-col items-center justify-center gap-12 p-8 text-center text-lg">
+            <UnicornBackground />
+            <div className="relative z-20 flex max-w-3xl flex-col items-center gap-6 pt-4 pb-2">
+                <motion.h1
+                    className="text-foreground-secondary mb-4 text-sm font-medium tracking-wider uppercase"
+                    initial={{ opacity: 0, filter: 'blur(4px)' }}
+                    animate={{ opacity: 1, filter: 'blur(0px)' }}
+                    transition={{ duration: 0.6, ease: 'easeOut' }}
+                    style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
+                >
+                    Workflows
+                </motion.h1>
+                <motion.p
+                    className="text-center text-4xl !leading-[1.1] leading-tight font-light text-balance md:text-6xl"
+                    initial={{ opacity: 0, filter: 'blur(4px)' }}
+                    animate={{ opacity: 1, filter: 'blur(0px)' }}
+                    transition={{ duration: 0.6, delay: 0.1, ease: 'easeOut' }}
+                    style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
+                >
+                    Claude Code for Designers
+                </motion.p>
+                <motion.h2
+                    className="text-foreground-secondary mx-auto max-w-xl text-center text-lg text-balance"
+                    initial={{ opacity: 0, filter: 'blur(4px)' }}
+                    animate={{ opacity: 1, filter: 'blur(0px)' }}
+                    transition={{ duration: 0.6, delay: 0.15, ease: 'easeOut' }}
+                    style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
+                >
+                    The visual canvas your AI workflow is missing. Claude Code builds it. Onlook lets you design it.
+                </motion.h2>
+                <motion.div
+                    className="mt-8 flex flex-row gap-4"
+                    initial={{ opacity: 0, filter: 'blur(4px)' }}
+                    animate={{ opacity: 1, filter: 'blur(0px)' }}
+                    transition={{ duration: 0.6, delay: 0.3, ease: 'easeOut' }}
+                    style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
+                >
+                    <Button
+                        asChild
+                        size="lg"
+                        className="bg-foreground-primary text-background-primary hover:bg-foreground-hover cursor-pointer p-6 transition-all duration-300"
+                    >
+                        <a href={ExternalRoutes.BOOK_DEMO} target="_blank" rel="noopener noreferrer">
+                            Book a Demo
+                            <Icons.ArrowRight className="ml-2 h-4 w-4" />
+                        </a>
+                    </Button>
+                </motion.div>
+                <motion.div
+                    className="text-foreground-secondary mt-8 flex items-center justify-center gap-6 text-sm"
+                    initial={{ opacity: 0, filter: 'blur(4px)' }}
+                    animate={{ opacity: 1, filter: 'blur(0px)' }}
+                    transition={{ duration: 0.6, delay: 0.4, ease: 'easeOut' }}
+                    style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
+                >
+                    <div className="flex items-center gap-2">
+                        <span>{starCount}+ GitHub stars</span>
+                    </div>
+                    <div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
+                    <div className="flex items-center gap-2">
+                        <span>YC W25</span>
+                    </div>
+                    <div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
+                    <div className="flex items-center gap-2">
+                        <span>Open Source</span>
+                    </div>
+                </motion.div>
+            </div>
+        </div>
+    );
+}

apps/web/client/src/app/_components/hero/features-hero.tsx

@@ -24,7 +24,7 @@ export function FeaturesHero() {
                     transition={{ duration: 0.6, ease: 'easeOut' }}
                     style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
                 >
-                    Visual Editor for React & TailwindCSS Apps
+                    Features
                 </motion.h1>
                 <motion.p
                     className="text-center text-4xl !leading-[1] leading-tight font-light text-balance md:text-6xl"
@@ -33,17 +33,16 @@ export function FeaturesHero() {
                     transition={{ duration: 0.6, delay: 0.1, ease: 'easeOut' }}
                     style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
                 >
-                    The React Editor You've Been Waiting For
+                    Design with Your Real Components
                 </motion.p>
                 <motion.h2
-                    className="text-foreground-secondary mx-auto max-w-xl text-center text-lg"
+                    className="text-foreground-secondary mx-auto max-w-xl text-center text-lg text-balance"
                     initial={{ opacity: 0, filter: 'blur(4px)' }}
                     animate={{ opacity: 1, filter: 'blur(0px)' }}
                     transition={{ duration: 0.6, delay: 0.15, ease: 'easeOut' }}
                     style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
                 >
-                    Code as you design. Build React applications visually while Onlook writes
-                    reliable code you can trust, exactly where it needs to go.
+                    Connect your codebase. Design on the canvas. Ship PRs.
                 </motion.h2>
                 <motion.div
                     className="mt-8"

apps/web/client/src/app/_components/hero/index.tsx

@@ -73,11 +73,9 @@ export function Hero() {
                         transition={{ duration: 0.6, delay: 0.15, ease: 'easeOut' }}
                         style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
                     >
-                        Onlook is a next-generation visual code editor
+                        Design with your real components.
                         <br />
-                        that lets designers and product managers craft
-                        <br />
-                        web experiences with AI
+                        Ship PRs, not prototypes.
                     </motion.p>
                     <HighDemand />
                     <CreateError />

apps/web/client/src/app/_components/landing-page/ai-features-intro-section.tsx

@@ -5,13 +5,13 @@ export function AiFeaturesIntroSection() {
         <div className="w-full max-w-6xl mx-auto py-32 px-8 text-center">
             <div className="max-w-3xl mx-auto">
                 <h2 className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-6">
-                    AI Design Tools with Visual Control
+                    Design on an Infinite Canvas
                 </h2>
                 <p className="text-foreground-primary text-2xl md:text-5xl leading-[1.1] font-light mb-8 text-balance">
-                    Visual Design Control Supercharged with AI
+                    Point at what you want. AI knows exactly what you mean.
                 </p>
                 <p className="text-foreground-secondary text-lg max-w-xl mx-auto text-balance">
-                    Get the precision of visual editing with the speed of AI generation. Design with complete creative control while AI handles the heavy lifting - from maintaining brand consistency to generating responsive layouts that match your exact vision.
+                    No more describing "the button in the top right" — just click it. AI is constrained to your design system, so outputs stay on-brand every time.
                 </p>
             </div>
         </div>