Skip to content

Commit 1459ed8

Browse files
KiteniteKitenite
authored
fix: unicorn studio positioning (#2878)
1 parent 55e0fb9 commit 1459ed8

File tree

10 files changed

+355
-263
lines changed

10 files changed

+355
-263
lines changed

‎apps/web/client/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
"tailwind-merge": "^3.2.0",
106106
"tldts": "^7.0.12",
107107
"tw-animate-css": "^1.2.5",
108-
"unicornstudio-react": "^1.4.29-1",
108+
"unicornstudio-react": "^1.4.31",
109109
"use-resize-observer": "^9.1.0",
110110
"uuid": "^11.1.0",
111111
"webfontloader": "^1.6.28",

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

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
'use client';
22

3-
import { Routes } from '@/utils/constants';
4-
import { Button } from '@onlook/ui/button';
5-
import { motion } from 'motion/react';
63
import { useRouter } from 'next/navigation';
4+
import { motion } from 'motion/react';
5+
6+
import { Button } from '@onlook/ui/button';
7+
8+
import { Routes } from '@/utils/constants';
79
import { useGitHubStats } from '../top-bar/github';
810
import { UnicornBackground } from './unicorn-background';
911

@@ -16,67 +18,69 @@ export function AiFeaturesHero() {
1618
};
1719

1820
return (
19-
<div className="w-full h-full flex flex-col items-center justify-center gap-12 p-8 text-lg text-center relative">
21+
<div className="relative flex h-full w-full flex-col items-center justify-center gap-12 p-8 text-center text-lg">
2022
<UnicornBackground />
21-
<div className="flex flex-col gap-6 items-center relative z-20 pt-4 pb-2 max-w-3xl">
23+
<div className="relative z-20 flex max-w-3xl flex-col items-center gap-6 pt-4 pb-2">
2224
<motion.h1
23-
className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-4"
24-
initial={{ opacity: 0, filter: "blur(4px)" }}
25-
animate={{ opacity: 1, filter: "blur(0px)" }}
26-
transition={{ duration: 0.6, ease: "easeOut" }}
27-
style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
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)' }}
2830
>
2931
AI Design Tools for React Development
3032
</motion.h1>
3133
<motion.p
32-
className="text-4xl md:text-6xl font-light leading-tight text-center !leading-[1] text-balance"
33-
initial={{ opacity: 0, filter: "blur(4px)" }}
34-
animate={{ opacity: 1, filter: "blur(0px)" }}
35-
transition={{ duration: 0.6, delay: 0.1, ease: "easeOut" }}
36-
style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
34+
className="text-center text-4xl !leading-[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)' }}
3739
>
3840
Build React Apps with AI That Understands Your Code
3941
</motion.p>
4042
<motion.p
41-
className="text-lg text-foreground-secondary mx-auto max-w-xl text-center"
42-
initial={{ opacity: 0, filter: "blur(4px)" }}
43-
animate={{ opacity: 1, filter: "blur(0px)" }}
44-
transition={{ duration: 0.6, delay: 0.15, ease: "easeOut" }}
45-
style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
43+
className="text-foreground-secondary mx-auto max-w-xl text-center text-lg"
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)' }}
4648
>
47-
Onlook's AI doesn't just generate code—it understands your React components, Tailwind patterns, and project architecture to create production-ready components that fit seamlessly into your existing codebase.
49+
Onlook's AI doesn't just generate code—it understands your React components,
50+
Tailwind patterns, and project architecture to create production-ready
51+
components that fit seamlessly into your existing codebase.
4852
</motion.p>
4953
<motion.div
5054
className="mt-8"
51-
initial={{ opacity: 0, filter: "blur(4px)" }}
52-
animate={{ opacity: 1, filter: "blur(0px)" }}
53-
transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
54-
style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
55+
initial={{ opacity: 0, filter: 'blur(4px)' }}
56+
animate={{ opacity: 1, filter: 'blur(0px)' }}
57+
transition={{ duration: 0.6, delay: 0.3, ease: 'easeOut' }}
58+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
5559
>
5660
<Button
5761
variant="secondary"
5862
size="lg"
59-
className="p-6 cursor-pointer hover:bg-foreground-primary hover:text-background-primary transition-all duration-300"
63+
className="hover:bg-foreground-primary hover:text-background-primary cursor-pointer p-6 transition-all duration-300"
6064
onClick={handleStartBuilding}
6165
>
6266
Start Building with AI
6367
</Button>
6468
</motion.div>
6569
<motion.div
66-
className="mt-8 flex items-center justify-center gap-6 text-sm text-foreground-secondary"
67-
initial={{ opacity: 0, filter: "blur(4px)" }}
68-
animate={{ opacity: 1, filter: "blur(0px)" }}
69-
transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
70-
style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
70+
className="text-foreground-secondary mt-8 flex items-center justify-center gap-6 text-sm"
71+
initial={{ opacity: 0, filter: 'blur(4px)' }}
72+
animate={{ opacity: 1, filter: 'blur(0px)' }}
73+
transition={{ duration: 0.6, delay: 0.4, ease: 'easeOut' }}
74+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
7175
>
7276
<div className="flex items-center gap-2">
7377
<span>{starCount}+ GitHub stars</span>
7478
</div>
75-
<div className="w-1 h-1 bg-foreground-secondary rounded-full"></div>
79+
<div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
7680
<div className="flex items-center gap-2">
7781
<span>YC W25</span>
7882
</div>
79-
<div className="w-1 h-1 bg-foreground-secondary rounded-full"></div>
83+
<div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
8084
<div className="flex items-center gap-2">
8185
<span>Open Source</span>
8286
</div>

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

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
'use client';
22

3-
import { Routes } from '@/utils/constants';
4-
import { Button } from '@onlook/ui/button';
5-
import { motion } from 'motion/react';
63
import { useRouter } from 'next/navigation';
4+
import { motion } from 'motion/react';
5+
6+
import { Button } from '@onlook/ui/button';
7+
8+
import { Routes } from '@/utils/constants';
79
import { useGitHubStats } from '../top-bar/github';
810
import { UnicornBackground } from './unicorn-background';
911

@@ -16,67 +18,69 @@ export function BuilderFeaturesHero() {
1618
};
1719

1820
return (
19-
<div className="w-full h-full flex flex-col items-center justify-center gap-12 p-8 text-lg text-center relative">
21+
<div className="relative flex h-full w-full flex-col items-center justify-center gap-12 p-8 text-center text-lg">
2022
<UnicornBackground />
21-
<div className="flex flex-col gap-6 items-center relative z-20 pt-4 pb-2 max-w-3xl">
23+
<div className="relative z-20 flex max-w-3xl flex-col items-center gap-6 pt-4 pb-2">
2224
<motion.h1
23-
className="text-foreground-secondary text-sm font-medium uppercase tracking-wider mb-4"
24-
initial={{ opacity: 0, filter: "blur(4px)" }}
25-
animate={{ opacity: 1, filter: "blur(0px)" }}
26-
transition={{ duration: 0.6, ease: "easeOut" }}
27-
style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
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)' }}
2830
>
2931
React Visual Builder
3032
</motion.h1>
3133
<motion.p
32-
className="text-4xl md:text-6xl font-light leading-tight text-center !leading-[1] text-balance"
33-
initial={{ opacity: 0, filter: "blur(4px)" }}
34-
animate={{ opacity: 1, filter: "blur(0px)" }}
35-
transition={{ duration: 0.6, delay: 0.1, ease: "easeOut" }}
36-
style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
34+
className="text-center text-4xl !leading-[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)' }}
3739
>
3840
Build and Edit Apps Visually
3941
</motion.p>
4042
<motion.p
41-
className="text-lg text-foreground-secondary mx-auto max-w-xl text-center"
42-
initial={{ opacity: 0, filter: "blur(4px)" }}
43-
animate={{ opacity: 1, filter: "blur(0px)" }}
44-
transition={{ duration: 0.6, delay: 0.15, ease: "easeOut" }}
45-
style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
43+
className="text-foreground-secondary mx-auto max-w-xl text-center text-lg"
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)' }}
4648
>
47-
Onlook's visual builder lets you drag, drop, and edit webapps directly in your browser while maintaining full code access. Perfect for builders who want visual speed without no-code limitations.
49+
Onlook's visual builder lets you drag, drop, and edit webapps directly in your
50+
browser while maintaining full code access. Perfect for builders who want visual
51+
speed without no-code limitations.
4852
</motion.p>
4953
<motion.div
5054
className="mt-8"
51-
initial={{ opacity: 0, filter: "blur(4px)" }}
52-
animate={{ opacity: 1, filter: "blur(0px)" }}
53-
transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
54-
style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
55+
initial={{ opacity: 0, filter: 'blur(4px)' }}
56+
animate={{ opacity: 1, filter: 'blur(0px)' }}
57+
transition={{ duration: 0.6, delay: 0.3, ease: 'easeOut' }}
58+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
5559
>
5660
<Button
5761
variant="secondary"
5862
size="lg"
59-
className="p-6 cursor-pointer hover:bg-foreground-primary hover:text-background-primary transition-all duration-300"
63+
className="hover:bg-foreground-primary hover:text-background-primary cursor-pointer p-6 transition-all duration-300"
6064
onClick={handleStartBuilding}
6165
>
6266
Start Building React Apps
6367
</Button>
6468
</motion.div>
6569
<motion.div
66-
className="mt-8 flex items-center justify-center gap-6 text-sm text-foreground-secondary"
67-
initial={{ opacity: 0, filter: "blur(4px)" }}
68-
animate={{ opacity: 1, filter: "blur(0px)" }}
69-
transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
70-
style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
70+
className="text-foreground-secondary mt-8 flex items-center justify-center gap-6 text-sm"
71+
initial={{ opacity: 0, filter: 'blur(4px)' }}
72+
animate={{ opacity: 1, filter: 'blur(0px)' }}
73+
transition={{ duration: 0.6, delay: 0.4, ease: 'easeOut' }}
74+
style={{ willChange: 'opacity, filter', transform: 'translateZ(0)' }}
7175
>
7276
<div className="flex items-center gap-2">
7377
<span>{starCount}+ GitHub stars</span>
7478
</div>
75-
<div className="w-1 h-1 bg-foreground-secondary rounded-full"></div>
79+
<div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
7680
<div className="flex items-center gap-2">
7781
<span>YC W25</span>
7882
</div>
79-
<div className="w-1 h-1 bg-foreground-secondary rounded-full"></div>
83+
<div className="bg-foreground-secondary h-1 w-1 rounded-full"></div>
8084
<div className="flex items-center gap-2">
8185
<span>Open Source</span>
8286
</div>

0 commit comments

Comments
 (0)