Skip to content

Commit a242be5

Browse files
drfarrellclaude
drfarrell
and
claude
authored
Website v1.5: AI-native copy revamp, new pages, and UX improvements (#3086)
* AI-native revamp, 404, more pages * Improved designs / layouts / pages * Fix sitemap.ts type import for verbatimModuleSyntax Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add mobile mockup preview to workflow solution sections Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Fix mobile mockup to match features page style Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Increase mobile mockup container height to 600px Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Increase mobile mockup height to 760px Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Increase mobile mockup height to 800px Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Adjust mobile mockup: height 860px, reduce bottom margin Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Fix mobile mockup: height 880px, remove bottom margin Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Fix mobile mockup positioning: top-aligned, 500px container Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add mobile mockup preview to workflow pages Added responsive mobile preview of the Onlook interface mockup to "The Solution" sections on both /workflows/claude-code and /workflows/vibe-coding pages. Uses absolute positioning to show a cropped view of the editor from the right side, matching the approach used on the /features page. - Container height: 880px to prevent clipping the prototype - Mockup positioned with right-10 offset for visual balance - Hidden on desktop (md:hidden), desktop version unchanged Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent ab9333d commit a242be5

50 files changed

Lines changed: 3859 additions & 334 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/web/client/public/assets/logo-claude-code.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/web/client/public/assets/logo-codex.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/web/client/public/onlook-preload-script.js‎

Lines changed: 4 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
'use client';
2+
3+
import { useRouter } from 'next/navigation';
4+
import { motion } from 'motion/react';
5+
6+
import { Button } from '@onlook/ui/button';
7+
8+
import { ExternalRoutes } from '@/utils/constants';
9+
import { useGitHubStats } from '../top-bar/github';
10+
import { UnicornBackground } from './unicorn-background';
11+
12+
export function AiFrontendHero() {
13+
const router = useRouter();
14+
const { formatted: starCount } = useGitHubStats();
15+
16+
const handleBookDemo = () => {
17+
window.open(ExternalRoutes.BOOK_DEMO, '_blank');
18+
};
19+
20+
return (
21+
<div className="relative flex h-full w-full flex-col items-center justify-center gap-12 p-8 text-center text-lg">
22+
<UnicornBackground />
23+
<div className="relative z-20 flex max-w-3xl flex-col items-center gap-6 pt-4 pb-2">
24+
<motion.h1
25+
className="text-foreground-secondary mb-4 text-sm font-medium tracking-wider uppercase"
26+
initial={{ opacity: 0, filter: 'blur(4px)' }}
27+
animate={{ opacity: 1, filter: 'blur(0px)' }}
28+
transition={{ duration: 0.6, ease: 'easeOut' }}
29+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
30+
>
31+
AI for Frontend Development
32+
</motion.h1>
33+
<motion.p
34+
className="text-center text-4xl !leading-[1.1] leading-tight font-light text-balance md:text-6xl"
35+
initial={{ opacity: 0, filter: 'blur(4px)' }}
36+
animate={{ opacity: 1, filter: 'blur(0px)' }}
37+
transition={{ duration: 0.6, delay: 0.1, ease: 'easeOut' }}
38+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
39+
>
40+
AI That Builds With Your Components, Not Around Them
41+
</motion.p>
42+
<motion.p
43+
className="text-foreground-secondary mx-auto max-w-xl text-center text-lg text-balance"
44+
initial={{ opacity: 0, filter: 'blur(4px)' }}
45+
animate={{ opacity: 1, filter: 'blur(0px)' }}
46+
transition={{ duration: 0.6, delay: 0.15, ease: 'easeOut' }}
47+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
48+
>
49+
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.
50+
</motion.p>
51+
<motion.div
52+
className="mt-8"
53+
initial={{ opacity: 0, filter: 'blur(4px)' }}
54+
animate={{ opacity: 1, filter: 'blur(0px)' }}
55+
transition={{ duration: 0.6, delay: 0.3, ease: 'easeOut' }}
56+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
57+
>
58+
<Button
59+
variant="secondary"
60+
size="lg"
61+
className="hover:bg-foreground-primary hover:text-background-primary cursor-pointer p-6 transition-all duration-300"
62+
onClick={handleBookDemo}
63+
>
64+
Book a Demo
65+
</Button>
66+
</motion.div>
67+
<motion.div
68+
className="text-foreground-secondary mt-8 flex items-center justify-center gap-6 text-sm"
69+
initial={{ opacity: 0, filter: 'blur(4px)' }}
70+
animate={{ opacity: 1, filter: 'blur(0px)' }}
71+
transition={{ duration: 0.6, delay: 0.4, ease: 'easeOut' }}
72+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
73+
>
74+
<div className="flex items-center gap-2">
75+
<span>{starCount}+ GitHub stars</span>
76+
</div>
77+
<div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
78+
<div className="flex items-center gap-2">
79+
<span>YC W25</span>
80+
</div>
81+
<div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
82+
<div className="flex items-center gap-2">
83+
<span>Open Source</span>
84+
</div>
85+
</motion.div>
86+
</div>
87+
</div>
88+
);
89+
}

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
'use client';
2+
3+
import { motion } from 'motion/react';
4+
5+
import { Button } from '@onlook/ui/button';
6+
import { Icons } from '@onlook/ui/icons';
7+
8+
import { ExternalRoutes } from '@/utils/constants';
9+
import { useGitHubStats } from '../top-bar/github';
10+
import { UnicornBackground } from './unicorn-background';
11+
12+
export function ClaudeCodeHero() {
13+
const { formatted: starCount } = useGitHubStats();
14+
15+
return (
16+
<div className="relative flex h-full w-full flex-col items-center justify-center gap-12 p-8 text-center text-lg">
17+
<UnicornBackground />
18+
<div className="relative z-20 flex max-w-3xl flex-col items-center gap-6 pt-4 pb-2">
19+
<motion.h1
20+
className="text-foreground-secondary mb-4 text-sm font-medium tracking-wider uppercase"
21+
initial={{ opacity: 0, filter: 'blur(4px)' }}
22+
animate={{ opacity: 1, filter: 'blur(0px)' }}
23+
transition={{ duration: 0.6, ease: 'easeOut' }}
24+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
25+
>
26+
Workflows
27+
</motion.h1>
28+
<motion.p
29+
className="text-center text-4xl !leading-[1.1] leading-tight font-light text-balance md:text-6xl"
30+
initial={{ opacity: 0, filter: 'blur(4px)' }}
31+
animate={{ opacity: 1, filter: 'blur(0px)' }}
32+
transition={{ duration: 0.6, delay: 0.1, ease: 'easeOut' }}
33+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
34+
>
35+
Claude Code for Designers
36+
</motion.p>
37+
<motion.h2
38+
className="text-foreground-secondary mx-auto max-w-xl text-center text-lg text-balance"
39+
initial={{ opacity: 0, filter: 'blur(4px)' }}
40+
animate={{ opacity: 1, filter: 'blur(0px)' }}
41+
transition={{ duration: 0.6, delay: 0.15, ease: 'easeOut' }}
42+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
43+
>
44+
The visual canvas your AI workflow is missing. Claude Code builds it. Onlook lets you design it.
45+
</motion.h2>
46+
<motion.div
47+
className="mt-8 flex flex-row gap-4"
48+
initial={{ opacity: 0, filter: 'blur(4px)' }}
49+
animate={{ opacity: 1, filter: 'blur(0px)' }}
50+
transition={{ duration: 0.6, delay: 0.3, ease: 'easeOut' }}
51+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
52+
>
53+
<Button
54+
asChild
55+
size="lg"
56+
className="bg-foreground-primary text-background-primary hover:bg-foreground-hover cursor-pointer p-6 transition-all duration-300"
57+
>
58+
<a href={ExternalRoutes.BOOK_DEMO} target="_blank" rel="noopener noreferrer">
59+
Book a Demo
60+
<Icons.ArrowRight className="ml-2 h-4 w-4" />
61+
</a>
62+
</Button>
63+
</motion.div>
64+
<motion.div
65+
className="text-foreground-secondary mt-8 flex items-center justify-center gap-6 text-sm"
66+
initial={{ opacity: 0, filter: 'blur(4px)' }}
67+
animate={{ opacity: 1, filter: 'blur(0px)' }}
68+
transition={{ duration: 0.6, delay: 0.4, ease: 'easeOut' }}
69+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
70+
>
71+
<div className="flex items-center gap-2">
72+
<span>{starCount}+ GitHub stars</span>
73+
</div>
74+
<div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
75+
<div className="flex items-center gap-2">
76+
<span>YC W25</span>
77+
</div>
78+
<div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
79+
<div className="flex items-center gap-2">
80+
<span>Open Source</span>
81+
</div>
82+
</motion.div>
83+
</div>
84+
</div>
85+
);
86+
}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function FeaturesHero() {
2424
transition={{ duration: 0.6, ease: 'easeOut' }}
2525
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
2626
>
27-
Visual Editor for React &amp; TailwindCSS Apps
27+
Features
2828
</motion.h1>
2929
<motion.p
3030
className="text-center text-4xl !leading-[1] leading-tight font-light text-balance md:text-6xl"
@@ -33,17 +33,16 @@ export function FeaturesHero() {
3333
transition={{ duration: 0.6, delay: 0.1, ease: 'easeOut' }}
3434
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
3535
>
36-
The React Editor You've Been Waiting For
36+
Design with Your Real Components
3737
</motion.p>
3838
<motion.h2
39-
className="text-foreground-secondary mx-auto max-w-xl text-center text-lg"
39+
className="text-foreground-secondary mx-auto max-w-xl text-center text-lg text-balance"
4040
initial={{ opacity: 0, filter: 'blur(4px)' }}
4141
animate={{ opacity: 1, filter: 'blur(0px)' }}
4242
transition={{ duration: 0.6, delay: 0.15, ease: 'easeOut' }}
4343
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
4444
>
45-
Code as you design. Build React applications visually while Onlook writes
46-
reliable code you can trust, exactly where it needs to go.
45+
Connect your codebase. Design on the canvas. Ship PRs.
4746
</motion.h2>
4847
<motion.div
4948
className="mt-8"

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,9 @@ export function Hero() {
7373
transition={{ duration: 0.6, delay: 0.15, ease: 'easeOut' }}
7474
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
7575
>
76-
Onlook is a next-generation visual code editor
76+
Design with your real components.
7777
<br />
78-
that lets designers and product managers craft
79-
<br />
80-
web experiences with AI
78+
Ship PRs, not prototypes.
8179
</motion.p>
8280
<HighDemand />
8381
<CreateError />

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ export function AiFeaturesIntroSection() {
55
<div className="w-full max-w-6xl mx-auto py-32 px-8 text-center">
66
<div className="max-w-3xl mx-auto">
77
<h2 className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-6">
8-
AI Design Tools with Visual Control
8+
Design on an Infinite Canvas
99
</h2>
1010
<p className="text-foreground-primary text-2xl md:text-5xl leading-[1.1] font-light mb-8 text-balance">
11-
Visual Design Control Supercharged with AI
11+
Point at what you want. AI knows exactly what you mean.
1212
</p>
1313
<p className="text-foreground-secondary text-lg max-w-xl mx-auto text-balance">
14-
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.
14+
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.
1515
</p>
1616
</div>
1717
</div>

0 commit comments

Comments
 (0)