Skip to content

Commit c3c0a36

Browse files
ctatectate
authored
better visual (#206)
1 parent 9bb8260 commit c3c0a36

File tree

1 file changed

+218
-61
lines changed

1 file changed

+218
-61
lines changed

‎apps/web/components/generation-modes-diagram.tsx‎

Lines changed: 218 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,189 @@
11
"use client";
22

3-
function Skeleton({ className = "" }: { className?: string }) {
4-
return <div className={`rounded bg-muted-foreground/10 ${className}`} />;
5-
}
6-
7-
/** Simple form wireframe reused in both diagrams */
8-
function FormUI() {
3+
function ScheduleItem({
4+
time,
5+
label,
6+
color,
7+
}: {
8+
time: string;
9+
label: string;
10+
color: string;
11+
}) {
912
return (
10-
<div className="border border-border rounded-lg p-2.5 space-y-1.5 bg-muted/30">
11-
{/* Title */}
12-
<Skeleton className="h-2.5 w-14 mb-1" />
13-
{/* Input fields */}
14-
<Skeleton className="h-4 w-full rounded-sm" />
15-
<Skeleton className="h-4 w-full rounded-sm" />
16-
{/* Submit button */}
17-
<Skeleton className="h-4 w-16 rounded-sm bg-muted-foreground/20 mt-1" />
13+
<div className="flex items-center gap-2 py-1.5 border-t border-border/50 first:border-t-0">
14+
<span className="text-[10px] text-muted-foreground/60 w-12 shrink-0 tabular-nums">
15+
{time}
16+
</span>
17+
<span
18+
className="w-1.5 h-1.5 rounded-full shrink-0"
19+
style={{ background: color }}
20+
/>
21+
<span className="text-[11px] text-muted-foreground">{label}</span>
1822
</div>
1923
);
2024
}
2125

2226
function InlineModeDiagram() {
2327
return (
2428
<div className="flex flex-col h-full">
25-
<div className="text-xs font-medium text-muted-foreground mb-3 text-center">
29+
<div className="text-sm font-medium text-foreground text-center mb-3">
2630
Inline Mode
2731
</div>
28-
<div className="flex-1 border border-border rounded-lg bg-background overflow-hidden flex flex-col">
29-
{/* Chat area */}
30-
<div className="flex-1 p-3 overflow-hidden flex justify-center">
31-
<div className="w-1/3 min-w-[120px] space-y-3">
32-
{/* User message */}
33-
<div className="flex justify-end">
34-
<div className="bg-muted rounded-xl px-3 py-2">
35-
<Skeleton className="h-2 w-14" />
36-
</div>
32+
<div className="flex-1 border border-border rounded-2xl bg-background overflow-hidden flex flex-col">
33+
<div className="flex-1 p-4 space-y-3 overflow-hidden">
34+
{/* User message */}
35+
<div className="flex justify-end">
36+
<div className="bg-muted-foreground/20 rounded-2xl rounded-br px-3.5 py-2 max-w-[85%]">
37+
<span className="text-[11px] text-foreground/80">
38+
I have back-to-back meetings today
39+
</span>
3740
</div>
41+
</div>
3842

39-
{/* Assistant text */}
40-
<div className="space-y-2">
41-
<div className="space-y-1.5">
42-
<Skeleton className="h-2 w-full" />
43-
<Skeleton className="h-2 w-3/4" />
44-
</div>
45-
46-
{/* Inline UI */}
47-
<FormUI />
48-
49-
{/* More text after UI */}
50-
<div className="space-y-1.5">
51-
<Skeleton className="h-2 w-4/5" />
43+
{/* AI response */}
44+
<div className="space-y-2">
45+
<p className="text-[11px] text-muted-foreground/70">
46+
Packed day! Here&apos;s what you&apos;ve got:
47+
</p>
48+
<div className="bg-muted/40 border border-border rounded-xl p-3 w-[92%]">
49+
<div className="text-[11px] font-semibold text-foreground/80 mb-2">
50+
Today&apos;s Schedule
5251
</div>
52+
<ScheduleItem
53+
time="10:00 AM"
54+
label="Design Review"
55+
color="#7aa2f7"
56+
/>
57+
<ScheduleItem
58+
time="1:00 PM"
59+
label="Sprint Planning"
60+
color="#bb9af7"
61+
/>
62+
<ScheduleItem
63+
time="3:30 PM"
64+
label="Team Standup"
65+
color="#9ece6a"
66+
/>
67+
<ScheduleItem
68+
time="4:30 PM"
69+
label="Eng All-Hands"
70+
color="#e0af68"
71+
/>
5372
</div>
5473
</div>
5574
</div>
5675

57-
{/* Input bar */}
58-
<div className="p-2 flex justify-center">
59-
<div className="w-1/3 min-w-[120px] flex items-center gap-2">
60-
<Skeleton className="h-7 flex-1 rounded-md" />
61-
<Skeleton className="h-7 w-7 rounded-md" />
76+
{/* Prompt input */}
77+
<div className="p-2.5">
78+
<div className="bg-muted/50 border border-border rounded-xl px-2.5 py-1.5 flex items-center gap-1.5">
79+
<span className="text-[10px] text-muted-foreground/40 flex-1">
80+
Message...
81+
</span>
82+
<div className="w-5 h-5 rounded-md bg-muted-foreground/20 flex items-center justify-center">
83+
<svg
84+
className="w-2.5 h-2.5 text-muted-foreground/50"
85+
viewBox="0 0 24 24"
86+
fill="currentColor"
87+
>
88+
<path
89+
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
90+
transform="rotate(-90 12 12)"
91+
/>
92+
</svg>
93+
</div>
6294
</div>
6395
</div>
6496
</div>
65-
<div className="text-[10px] text-muted-foreground/60 mt-2 text-center">
66-
Text + UI interleaved in messages
97+
<div className="mt-3 flex flex-col items-center gap-2">
98+
<div className="text-xs font-medium text-muted-foreground">
99+
AI decides when UI beats text
100+
</div>
101+
<div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/50">
102+
<span>AI chatbots</span>
103+
<span className="text-muted-foreground/30">/</span>
104+
<span>Copilots</span>
105+
<span className="text-muted-foreground/30">/</span>
106+
<span>Assistants</span>
107+
</div>
108+
</div>
109+
</div>
110+
);
111+
}
112+
113+
function LandingPage() {
114+
return (
115+
<div className="w-full h-full flex flex-col bg-muted/20">
116+
{/* Nav */}
117+
<div className="flex items-center justify-between px-3 py-2 border-b border-border/50">
118+
<svg
119+
width="12"
120+
height="12"
121+
viewBox="0 0 24 24"
122+
fill="none"
123+
className="shrink-0"
124+
>
125+
<rect
126+
x="2"
127+
y="14"
128+
width="5"
129+
height="8"
130+
rx="1"
131+
className="fill-muted-foreground/60"
132+
/>
133+
<rect
134+
x="9.5"
135+
y="8"
136+
width="5"
137+
height="14"
138+
rx="1"
139+
className="fill-muted-foreground/60"
140+
/>
141+
<rect
142+
x="17"
143+
y="2"
144+
width="5"
145+
height="20"
146+
rx="1"
147+
className="fill-muted-foreground/60"
148+
/>
149+
</svg>
150+
<div className="flex items-center gap-2">
151+
<span className="text-[9px] text-muted-foreground/50">Pricing</span>
152+
<span className="text-[9px] text-muted-foreground/50">Blog</span>
153+
<span className="text-[8px] font-semibold bg-foreground text-background rounded-md px-1.5 py-0.5 whitespace-nowrap">
154+
Get Started
155+
</span>
156+
</div>
157+
</div>
158+
159+
{/* Hero */}
160+
<div className="flex-1 flex flex-col items-center justify-center gap-2.5 text-center px-4">
161+
<span className="text-[8px] font-medium text-green-400 bg-green-400/10 border border-green-400/15 rounded-full px-2 py-0.5">
162+
Trusted by 2,000+ teams
163+
</span>
164+
<div className="text-sm font-bold text-foreground leading-tight">
165+
Analytics that
166+
<br />
167+
move the needle
168+
</div>
169+
<div className="text-[10px] text-muted-foreground/50 leading-relaxed">
170+
Ship what matters. No setup required.
171+
</div>
172+
<div className="flex gap-1.5 mt-1">
173+
<button className="bg-foreground text-background text-[9px] font-semibold rounded-lg px-3 py-1.5 whitespace-nowrap">
174+
Start Free
175+
</button>
176+
<button className="border border-border text-muted-foreground text-[9px] font-medium rounded-lg px-3 py-1.5 whitespace-nowrap">
177+
Book Demo
178+
</button>
179+
</div>
180+
</div>
181+
182+
{/* Footer */}
183+
<div className="flex justify-center gap-3 py-2 border-t border-border/50">
184+
<span className="text-[8px] text-muted-foreground/30">Privacy</span>
185+
<span className="text-[8px] text-muted-foreground/30">Terms</span>
186+
<span className="text-[8px] text-muted-foreground/30">Status</span>
67187
</div>
68188
</div>
69189
);
@@ -72,28 +192,65 @@ function InlineModeDiagram() {
72192
function StandaloneModeDiagram() {
73193
return (
74194
<div className="flex flex-col h-full">
75-
<div className="text-xs font-medium text-muted-foreground mb-3 text-center">
195+
<div className="text-sm font-medium text-foreground text-center mb-3">
76196
Standalone Mode
77197
</div>
78-
<div className="flex-1 border border-border rounded-lg bg-background overflow-hidden flex flex-row">
79-
{/* Left panel - prompt */}
80-
<div className="w-[38%] border-r border-border flex flex-col">
81-
<div className="flex-1" />
82-
<div className="p-3 space-y-2">
83-
<Skeleton className="h-7 w-full rounded-md" />
84-
<Skeleton className="h-5 w-16 rounded-md" />
198+
<div className="flex-1 border border-border rounded-2xl bg-background overflow-hidden flex flex-row">
199+
{/* Left panel - conversation */}
200+
<div className="w-[38%] border-r border-border/50 flex flex-col">
201+
<div className="flex-1 p-3 space-y-2.5">
202+
{/* User message */}
203+
<div className="flex justify-end">
204+
<div className="bg-muted-foreground/20 rounded-2xl rounded-br px-2.5 py-1.5">
205+
<span className="text-[10px] text-foreground/80 block leading-relaxed">
206+
A landing page for my analytics startup
207+
</span>
208+
</div>
209+
</div>
210+
{/* AI text */}
211+
<p className="text-[10px] text-muted-foreground/60 leading-relaxed">
212+
Here&apos;s a clean landing page with a hero, nav, and CTAs.
213+
</p>
85214
</div>
86-
</div>
87215

88-
{/* Right panel - UI preview */}
89-
<div className="flex-1 p-3 flex items-center justify-center">
90-
<div className="w-3/4">
91-
<FormUI />
216+
{/* Prompt input */}
217+
<div className="p-2.5">
218+
<div className="bg-muted/50 border border-border rounded-xl px-2.5 py-1.5 flex items-center gap-1.5">
219+
<span className="text-[10px] text-muted-foreground/40 flex-1">
220+
Message...
221+
</span>
222+
<div className="w-5 h-5 rounded-md bg-muted-foreground/20 flex items-center justify-center">
223+
<svg
224+
className="w-2.5 h-2.5 text-muted-foreground/50"
225+
viewBox="0 0 24 24"
226+
fill="currentColor"
227+
>
228+
<path
229+
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
230+
transform="rotate(-90 12 12)"
231+
/>
232+
</svg>
233+
</div>
234+
</div>
92235
</div>
93236
</div>
237+
238+
{/* Right panel - landing page */}
239+
<div className="flex-1">
240+
<LandingPage />
241+
</div>
94242
</div>
95-
<div className="text-[10px] text-muted-foreground/60 mt-2 text-center">
96-
Prompt separate from UI preview
243+
<div className="mt-3 flex flex-col items-center gap-2">
244+
<div className="text-xs font-medium text-muted-foreground">
245+
Prompt in, UI out
246+
</div>
247+
<div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/50">
248+
<span>Website builders</span>
249+
<span className="text-muted-foreground/30">/</span>
250+
<span>Text-to-widget</span>
251+
<span className="text-muted-foreground/30">/</span>
252+
<span>Dashboards</span>
253+
</div>
97254
</div>
98255
</div>
99256
);
@@ -103,10 +260,10 @@ export function GenerationModesDiagram() {
103260
return (
104261
<div className="not-prose my-8">
105262
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
106-
<div className="h-[280px]">
263+
<div className="h-[420px]">
107264
<InlineModeDiagram />
108265
</div>
109-
<div className="h-[280px]">
266+
<div className="h-[420px]">
110267
<StandaloneModeDiagram />
111268
</div>
112269
</div>

0 commit comments

Comments
 (0)