@kuckit/landing-module 3.0.2 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/client/index.js +1453 -1102
  2. package/dist/client/index.js.map +1 -1
  3. package/package.json +6 -5
package/dist/client/index.js CHANGED
@@ -1,8 +1,8 @@
1
- import { defineKuckitClientModule, useRpc } from "@kuckit/sdk-react";
1
+ import { defineKuckitClientModule } from "@kuckit/sdk-react";
2
2
  import { useEffect, useState } from "react";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
- import { ChevronDown } from "lucide-react";
5
- import { toast } from "sonner";
4
+ import { GlareCard } from "@kuckit/polar-payments-module/client";
5
+ import { Check, Zap } from "lucide-react";
6
6
 
7
7
  //#region src/client/components/hero.tsx
8
8
  function Hero() {
@@ -13,533 +13,644 @@ function Hero() {
13
13
  setTimeout(() => setCopied(false), 2e3);
14
14
  };
15
15
  return /* @__PURE__ */ jsxs("section", {
16
- className: "relative min-h-[90vh] flex flex-col items-center justify-center px-6 pt-20",
16
+ className: "relative min-h-screen",
17
17
  children: [
18
- /* @__PURE__ */ jsxs("div", {
19
- className: "absolute inset-0 overflow-hidden pointer-events-none",
20
- children: [
21
- /* @__PURE__ */ jsx(ModuleBlock, {
22
- className: "absolute top-[15%] left-[10%] animate-float",
23
- label: "auth"
24
- }),
25
- /* @__PURE__ */ jsx(ModuleBlock, {
26
- className: "absolute top-[25%] right-[15%] animate-float-delayed",
27
- label: "billing"
28
- }),
29
- /* @__PURE__ */ jsx(ModuleBlock, {
30
- className: "absolute bottom-[30%] left-[8%] animate-float-slow",
31
- label: "analytics"
32
- }),
33
- /* @__PURE__ */ jsx(ModuleBlock, {
34
- className: "absolute bottom-[20%] right-[10%] animate-float",
35
- label: "email"
36
- }),
37
- /* @__PURE__ */ jsx(ModuleBlock, {
38
- className: "absolute top-[40%] left-[20%] animate-float-delayed opacity-50",
39
- label: "storage",
40
- size: "sm"
41
- }),
42
- /* @__PURE__ */ jsx(ModuleBlock, {
43
- className: "absolute bottom-[40%] right-[20%] animate-float-slow opacity-50",
44
- label: "ai",
45
- size: "sm"
46
- })
47
- ]
18
+ /* @__PURE__ */ jsx("nav", {
19
+ className: "relative z-20 border-b border-border",
20
+ children: /* @__PURE__ */ jsxs("div", {
21
+ className: "max-w-7xl mx-auto flex items-center justify-between h-16 px-8",
22
+ children: [
23
+ /* @__PURE__ */ jsxs("div", {
24
+ className: "flex items-center gap-3",
25
+ children: [/* @__PURE__ */ jsxs("svg", {
26
+ className: "w-8 h-8",
27
+ viewBox: "0 0 512 512",
28
+ fill: "none",
29
+ xmlns: "http://www.w3.org/2000/svg",
30
+ children: [
31
+ /* @__PURE__ */ jsx("polygon", {
32
+ points: "256,64 384,144 384,304 256,224",
33
+ fill: "#3D3A39"
34
+ }),
35
+ /* @__PURE__ */ jsx("polygon", {
36
+ points: "256,64 128,144 128,304 256,224",
37
+ fill: "#5C5855"
38
+ }),
39
+ /* @__PURE__ */ jsx("polygon", {
40
+ points: "128,144 256,224 384,144 256,64",
41
+ fill: "#A49D9A"
42
+ }),
43
+ /* @__PURE__ */ jsx("polygon", {
44
+ points: "256,224 352,280 352,392 256,336",
45
+ fill: "#D15010"
46
+ }),
47
+ /* @__PURE__ */ jsx("polygon", {
48
+ points: "256,224 160,280 160,392 256,336",
49
+ fill: "#EE6018"
50
+ }),
51
+ /* @__PURE__ */ jsx("polygon", {
52
+ points: "160,280 256,336 352,280 256,224",
53
+ fill: "#EF6F2E"
54
+ })
55
+ ]
56
+ }), /* @__PURE__ */ jsx("span", {
57
+ className: "text-foreground font-medium tracking-tight",
58
+ children: "Kuckit"
59
+ })]
60
+ }),
61
+ /* @__PURE__ */ jsxs("div", {
62
+ className: "hidden md:flex items-center gap-8",
63
+ children: [
64
+ /* @__PURE__ */ jsx("a", {
65
+ href: "/docs",
66
+ className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
67
+ children: "Docs"
68
+ }),
69
+ /* @__PURE__ */ jsx("a", {
70
+ href: "#modules",
71
+ className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
72
+ children: "Modules"
73
+ }),
74
+ /* @__PURE__ */ jsx("a", {
75
+ href: "#pricing",
76
+ className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
77
+ children: "Pricing"
78
+ })
79
+ ]
80
+ }),
81
+ /* @__PURE__ */ jsxs("div", {
82
+ className: "flex items-center gap-3",
83
+ children: [/* @__PURE__ */ jsx("a", {
84
+ href: "/login",
85
+ className: "text-sm text-muted-foreground hover:text-foreground transition-colors px-4 py-2",
86
+ children: "Sign in"
87
+ }), /* @__PURE__ */ jsx("a", {
88
+ href: "/docs/getting-started",
89
+ className: "text-sm bg-primary text-primary-foreground px-4 py-2 hover:bg-primary/90 transition-colors",
90
+ children: "Get Started"
91
+ })]
92
+ })
93
+ ]
94
+ })
48
95
  }),
49
- /* @__PURE__ */ jsxs("div", {
50
- className: "relative z-10 max-w-4xl mx-auto text-center",
51
- children: [
52
- /* @__PURE__ */ jsxs("div", {
53
- className: "inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-sm text-white/70 mb-8 backdrop-blur-sm",
54
- children: [/* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-emerald-400 animate-pulse" }), /* @__PURE__ */ jsx("span", { children: "Marketplace coming soon" })]
55
- }),
56
- /* @__PURE__ */ jsxs("h1", {
57
- className: "text-5xl md:text-7xl font-bold tracking-tight mb-6",
96
+ /* @__PURE__ */ jsx("div", {
97
+ className: "relative z-10 max-w-7xl mx-auto px-8 pt-24 pb-32",
98
+ children: /* @__PURE__ */ jsxs("div", {
99
+ className: "grid lg:grid-cols-12 gap-16 items-start",
100
+ children: [/* @__PURE__ */ jsxs("div", {
101
+ className: "lg:col-span-7",
58
102
  children: [
59
- /* @__PURE__ */ jsx("span", {
60
- className: "block text-white",
61
- children: "Build Modules."
103
+ /* @__PURE__ */ jsxs("div", {
104
+ className: "flex items-center gap-4 mb-8",
105
+ children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
106
+ className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
107
+ children: "Vibe coding ain't fun when you're stuck"
108
+ })]
62
109
  }),
63
- /* @__PURE__ */ jsx("span", {
64
- className: "block bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400 bg-clip-text text-transparent",
65
- children: "Earn Revenue."
110
+ /* @__PURE__ */ jsxs("h1", {
111
+ className: "mb-8",
112
+ children: [/* @__PURE__ */ jsx("span", {
113
+ className: "block text-4xl md:text-5xl lg:text-6xl font-light text-foreground tracking-[-0.03em] leading-[1.1]",
114
+ children: "You don't need more prompts."
115
+ }), /* @__PURE__ */ jsx("span", {
116
+ className: "block text-4xl md:text-5xl lg:text-6xl font-light text-primary tracking-[-0.03em] leading-[1.1] mt-2",
117
+ children: "You need a foundation."
118
+ })]
66
119
  }),
67
- /* @__PURE__ */ jsx("span", {
68
- className: "block text-white",
69
- children: "Ship Faster."
70
- })
71
- ]
72
- }),
73
- /* @__PURE__ */ jsx("p", {
74
- className: "text-xl md:text-2xl text-white/60 max-w-2xl mx-auto mb-12 leading-relaxed",
75
- children: "The TypeScript ecosystem where developers build once and sell forever, while builders ship in hours instead of months."
76
- }),
77
- /* @__PURE__ */ jsxs("div", {
78
- className: "flex flex-col sm:flex-row items-center justify-center gap-4 mb-12",
79
- children: [/* @__PURE__ */ jsxs("button", {
80
- className: "group relative px-8 py-4 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-xl font-semibold text-black transition-all hover:scale-105 hover:shadow-lg hover:shadow-emerald-500/25",
81
- children: ["Get Started", /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-xl bg-gradient-to-r from-emerald-400 to-teal-400 opacity-0 group-hover:opacity-100 transition-opacity blur-xl -z-10" })]
82
- }), /* @__PURE__ */ jsx("button", {
83
- className: "px-8 py-4 rounded-xl font-semibold text-white border border-white/20 bg-white/5 backdrop-blur-sm hover:bg-white/10 hover:border-white/30 transition-all",
84
- children: "Join Marketplace Waitlist"
85
- })]
86
- }),
87
- /* @__PURE__ */ jsxs("div", {
88
- onClick: copyCommand,
89
- className: "inline-flex items-center gap-3 px-5 py-3 rounded-xl bg-black/50 border border-white/10 cursor-pointer hover:border-emerald-500/50 transition-colors group",
90
- children: [
91
- /* @__PURE__ */ jsx("span", {
92
- className: "text-emerald-400 font-mono",
93
- children: "$"
94
- }),
95
- /* @__PURE__ */ jsx("code", {
96
- className: "text-white/80 font-mono text-sm",
97
- children: "bunx create-kuckit-app my-app"
120
+ /* @__PURE__ */ jsx("p", {
121
+ className: "text-lg md:text-xl text-muted-foreground max-w-xl leading-relaxed mb-12",
122
+ children: "Vibe coding builds fast. We build right. Ship in hours."
98
123
  }),
99
- /* @__PURE__ */ jsx("span", {
100
- className: "text-white/40 group-hover:text-emerald-400 transition-colors",
101
- children: copied ? /* @__PURE__ */ jsx("svg", {
102
- className: "w-4 h-4",
103
- fill: "none",
104
- stroke: "currentColor",
105
- viewBox: "0 0 24 24",
106
- children: /* @__PURE__ */ jsx("path", {
107
- strokeLinecap: "round",
108
- strokeLinejoin: "round",
109
- strokeWidth: 2,
110
- d: "M5 13l4 4L19 7"
111
- })
112
- }) : /* @__PURE__ */ jsx("svg", {
113
- className: "w-4 h-4",
114
- fill: "none",
115
- stroke: "currentColor",
116
- viewBox: "0 0 24 24",
117
- children: /* @__PURE__ */ jsx("path", {
118
- strokeLinecap: "round",
119
- strokeLinejoin: "round",
120
- strokeWidth: 2,
121
- d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
122
- })
124
+ /* @__PURE__ */ jsx("div", {
125
+ className: "flex flex-col sm:flex-row items-start gap-4 mb-16",
126
+ children: /* @__PURE__ */ jsxs("a", {
127
+ href: "/docs/getting-started",
128
+ className: "group inline-flex items-center gap-3 px-6 py-4 bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-all",
129
+ children: [/* @__PURE__ */ jsx("span", { children: "Get Unstuck" }), /* @__PURE__ */ jsx("svg", {
130
+ className: "w-4 h-4 group-hover:translate-x-1 transition-transform",
131
+ fill: "none",
132
+ stroke: "currentColor",
133
+ viewBox: "0 0 24 24",
134
+ children: /* @__PURE__ */ jsx("path", {
135
+ strokeLinecap: "round",
136
+ strokeLinejoin: "round",
137
+ strokeWidth: 2,
138
+ d: "M17 8l4 4m0 0l-4 4m4-4H3"
139
+ })
140
+ })]
123
141
  })
142
+ }),
143
+ /* @__PURE__ */ jsxs("div", {
144
+ className: "inline-block",
145
+ children: [/* @__PURE__ */ jsx("div", {
146
+ className: "text-xs text-muted-foreground tracking-[0.15em] uppercase mb-3",
147
+ children: "Quick Start"
148
+ }), /* @__PURE__ */ jsxs("button", {
149
+ onClick: copyCommand,
150
+ className: "group flex items-center gap-4 px-5 py-4 bg-card border border-border hover:border-primary/50 transition-colors font-mono text-sm",
151
+ children: [
152
+ /* @__PURE__ */ jsx("span", {
153
+ className: "text-primary",
154
+ children: "$"
155
+ }),
156
+ /* @__PURE__ */ jsx("code", {
157
+ className: "text-foreground",
158
+ children: "bunx create-kuckit-app my-app"
159
+ }),
160
+ /* @__PURE__ */ jsx("span", {
161
+ className: "text-muted-foreground group-hover:text-primary transition-colors ml-4",
162
+ children: copied ? /* @__PURE__ */ jsx("svg", {
163
+ className: "w-4 h-4",
164
+ fill: "none",
165
+ stroke: "currentColor",
166
+ viewBox: "0 0 24 24",
167
+ children: /* @__PURE__ */ jsx("path", {
168
+ strokeLinecap: "round",
169
+ strokeLinejoin: "round",
170
+ strokeWidth: 2,
171
+ d: "M5 13l4 4L19 7"
172
+ })
173
+ }) : /* @__PURE__ */ jsx("svg", {
174
+ className: "w-4 h-4",
175
+ fill: "none",
176
+ stroke: "currentColor",
177
+ viewBox: "0 0 24 24",
178
+ children: /* @__PURE__ */ jsx("path", {
179
+ strokeLinecap: "round",
180
+ strokeLinejoin: "round",
181
+ strokeWidth: 2,
182
+ d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
183
+ })
184
+ })
185
+ })
186
+ ]
187
+ })]
124
188
  })
125
189
  ]
126
- })
127
- ]
190
+ }), /* @__PURE__ */ jsx("div", {
191
+ className: "lg:col-span-5 relative",
192
+ children: /* @__PURE__ */ jsx("div", {
193
+ className: "sticky top-24",
194
+ children: /* @__PURE__ */ jsxs("div", {
195
+ className: "relative",
196
+ children: [
197
+ /* @__PURE__ */ jsx("div", { className: "absolute -top-3 -left-3 w-6 h-6 border-l-2 border-t-2 border-primary/50" }),
198
+ /* @__PURE__ */ jsx("div", { className: "absolute -top-3 -right-3 w-6 h-6 border-r-2 border-t-2 border-primary/50" }),
199
+ /* @__PURE__ */ jsx("div", { className: "absolute -bottom-3 -left-3 w-6 h-6 border-l-2 border-b-2 border-primary/50" }),
200
+ /* @__PURE__ */ jsx("div", { className: "absolute -bottom-3 -right-3 w-6 h-6 border-r-2 border-b-2 border-primary/50" }),
201
+ /* @__PURE__ */ jsxs("div", {
202
+ className: "border border-border bg-card/50 backdrop-blur-sm p-8",
203
+ children: [
204
+ /* @__PURE__ */ jsxs("div", {
205
+ className: "text-xs text-muted-foreground tracking-[0.2em] uppercase mb-6 flex items-center gap-3",
206
+ children: [/* @__PURE__ */ jsx("span", { className: "w-2 h-2 bg-primary" }), "Available Modules"]
207
+ }),
208
+ /* @__PURE__ */ jsx("div", {
209
+ className: "grid grid-cols-2 gap-3",
210
+ children: [
211
+ {
212
+ name: "Payments",
213
+ status: "stable",
214
+ desc: "Subscriptions & checkout"
215
+ },
216
+ {
217
+ name: "Users",
218
+ status: "stable",
219
+ desc: "Accounts & profiles"
220
+ },
221
+ {
222
+ name: "Docs",
223
+ status: "stable",
224
+ desc: "Beautiful documentation"
225
+ },
226
+ {
227
+ name: "AI Chat",
228
+ status: "stable",
229
+ desc: "LLM integration"
230
+ },
231
+ {
232
+ name: "CLI Auth",
233
+ status: "stable",
234
+ desc: "Device login flow"
235
+ },
236
+ {
237
+ name: "More...",
238
+ status: "soon",
239
+ desc: "Coming soon"
240
+ }
241
+ ].map((mod) => /* @__PURE__ */ jsxs("div", {
242
+ className: "group p-4 border border-border hover:border-primary/50 bg-background hover:bg-card transition-all cursor-pointer",
243
+ children: [/* @__PURE__ */ jsxs("div", {
244
+ className: "flex items-start justify-between mb-2",
245
+ children: [/* @__PURE__ */ jsx("code", {
246
+ className: "text-foreground text-sm font-medium",
247
+ children: mod.name
248
+ }), /* @__PURE__ */ jsx("span", {
249
+ className: `text-[10px] tracking-wider uppercase px-1.5 py-0.5 ${mod.status === "new" ? "bg-primary/20 text-primary" : mod.status === "beta" ? "bg-muted text-muted-foreground" : "bg-[hsl(var(--status-success)/0.15)] text-[hsl(var(--status-success))]"}`,
250
+ children: mod.status
251
+ })]
252
+ }), /* @__PURE__ */ jsx("div", {
253
+ className: "text-xs text-muted-foreground",
254
+ children: mod.desc
255
+ })]
256
+ }, mod.name))
257
+ }),
258
+ /* @__PURE__ */ jsxs("div", {
259
+ className: "mt-6 pt-6 border-t border-border flex items-center justify-between",
260
+ children: [/* @__PURE__ */ jsx("span", {
261
+ className: "text-xs text-muted-foreground",
262
+ children: "5 modules ready to use"
263
+ }), /* @__PURE__ */ jsx("a", {
264
+ href: "/docs",
265
+ className: "text-xs text-primary hover:underline",
266
+ children: "View all →"
267
+ })]
268
+ })
269
+ ]
270
+ })
271
+ ]
272
+ })
273
+ })
274
+ })]
275
+ })
128
276
  }),
129
277
  /* @__PURE__ */ jsx("div", {
130
- className: "absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce",
131
- children: /* @__PURE__ */ jsx("svg", {
132
- className: "w-6 h-6 text-white/30",
133
- fill: "none",
134
- stroke: "currentColor",
135
- viewBox: "0 0 24 24",
136
- children: /* @__PURE__ */ jsx("path", {
137
- strokeLinecap: "round",
138
- strokeLinejoin: "round",
139
- strokeWidth: 2,
140
- d: "M19 14l-7 7m0 0l-7-7m7 7V3"
278
+ className: "relative z-10 border-t border-border",
279
+ children: /* @__PURE__ */ jsx("div", {
280
+ className: "max-w-7xl mx-auto",
281
+ children: /* @__PURE__ */ jsx("div", {
282
+ className: "grid grid-cols-2 md:grid-cols-4",
283
+ children: [
284
+ {
285
+ value: "100%",
286
+ label: "TypeScript"
287
+ },
288
+ {
289
+ value: "<5min",
290
+ label: "To first module"
291
+ },
292
+ {
293
+ value: "50+",
294
+ label: "Components included"
295
+ },
296
+ {
297
+ value: "MIT",
298
+ label: "Licensed"
299
+ }
300
+ ].map((stat, i) => /* @__PURE__ */ jsxs("div", {
301
+ className: `p-8 ${i < 3 ? "border-r border-border" : ""} ${i < 2 ? "border-b md:border-b-0 border-border" : ""}`,
302
+ children: [/* @__PURE__ */ jsx("div", {
303
+ className: "text-3xl md:text-4xl font-light text-foreground tracking-tight mb-1",
304
+ children: stat.value
305
+ }), /* @__PURE__ */ jsx("div", {
306
+ className: "text-xs text-muted-foreground tracking-[0.15em] uppercase",
307
+ children: stat.label
308
+ })]
309
+ }, stat.label))
141
310
  })
142
311
  })
143
- }),
144
- /* @__PURE__ */ jsx("style", { children: `
145
- @keyframes float {
146
- 0%, 100% { transform: translateY(0px) rotate(0deg); }
147
- 50% { transform: translateY(-20px) rotate(3deg); }
148
- }
149
- @keyframes float-delayed {
150
- 0%, 100% { transform: translateY(0px) rotate(0deg); }
151
- 50% { transform: translateY(-15px) rotate(-2deg); }
152
- }
153
- @keyframes float-slow {
154
- 0%, 100% { transform: translateY(0px) rotate(0deg); }
155
- 50% { transform: translateY(-10px) rotate(1deg); }
156
- }
157
- .animate-float { animation: float 6s ease-in-out infinite; }
158
- .animate-float-delayed { animation: float-delayed 7s ease-in-out infinite; animation-delay: 1s; }
159
- .animate-float-slow { animation: float-slow 8s ease-in-out infinite; animation-delay: 2s; }
160
- ` })
161
- ]
162
- });
163
- }
164
- function ModuleBlock({ className = "", label, size = "md" }) {
165
- return /* @__PURE__ */ jsx("div", {
166
- className: `${size === "sm" ? "w-16 h-16 text-[10px]" : "w-24 h-24 text-xs"} ${className}`,
167
- children: /* @__PURE__ */ jsx("div", {
168
- className: "w-full h-full rounded-2xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 backdrop-blur-sm flex items-center justify-center",
169
- children: /* @__PURE__ */ jsx("span", {
170
- className: "font-mono text-white/50",
171
- children: label
172
312
  })
173
- })
313
+ ]
174
314
  });
175
315
  }
176
316
 
177
317
  //#endregion
178
318
  //#region src/client/components/value-props.tsx
179
319
  function ValueProps() {
180
- const columns = [
181
- {
182
- title: "For Builders",
183
- icon: /* @__PURE__ */ jsx("svg", {
184
- className: "w-6 h-6",
185
- fill: "none",
186
- stroke: "currentColor",
187
- viewBox: "0 0 24 24",
188
- children: /* @__PURE__ */ jsx("path", {
189
- strokeLinecap: "round",
190
- strokeLinejoin: "round",
191
- strokeWidth: 1.5,
192
- d: "M13 10V3L4 14h7v7l9-11h-7z"
193
- })
194
- }),
195
- color: "emerald",
196
- items: [
197
- {
198
- label: "Ship in hours",
199
- desc: "Not weeks or months"
200
- },
201
- {
202
- label: "One command install",
203
- desc: "kuckit add @vendor/module"
204
- },
205
- {
206
- label: "Focus on your product",
207
- desc: "Not boilerplate"
208
- }
209
- ]
210
- },
211
- {
212
- title: "For Sellers",
213
- icon: /* @__PURE__ */ jsx("svg", {
214
- className: "w-6 h-6",
215
- fill: "none",
216
- stroke: "currentColor",
217
- viewBox: "0 0 24 24",
218
- children: /* @__PURE__ */ jsx("path", {
219
- strokeLinecap: "round",
220
- strokeLinejoin: "round",
221
- strokeWidth: 1.5,
222
- d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
223
- })
224
- }),
225
- color: "teal",
226
- items: [
227
- {
228
- label: "Build once, sell forever",
229
- desc: "Passive revenue stream"
230
- },
231
- {
232
- label: "Growing marketplace",
233
- desc: "Reach thousands of builders"
234
- },
235
- {
236
- label: "Your code, your pricing",
237
- desc: "Set your own terms"
238
- }
239
- ]
240
- },
241
- {
242
- title: "For Everyone",
243
- icon: /* @__PURE__ */ jsx("svg", {
244
- className: "w-6 h-6",
245
- fill: "none",
246
- stroke: "currentColor",
247
- viewBox: "0 0 24 24",
248
- children: /* @__PURE__ */ jsx("path", {
249
- strokeLinecap: "round",
250
- strokeLinejoin: "round",
251
- strokeWidth: 1.5,
252
- d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
253
- })
254
- }),
255
- color: "cyan",
256
- items: [
257
- {
258
- label: "Battle-tested code",
259
- desc: "Community validated"
260
- },
261
- {
262
- label: "Guardrailed quality",
263
- desc: "Enforced standards"
264
- },
265
- {
266
- label: "Type-safe modules",
267
- desc: "End-to-end TypeScript"
268
- }
269
- ]
270
- }
271
- ];
272
- const colorMap = {
273
- emerald: {
274
- bg: "bg-emerald-500/10",
275
- border: "border-emerald-500/20",
276
- text: "text-emerald-400",
277
- glow: "group-hover:shadow-emerald-500/10"
278
- },
279
- teal: {
280
- bg: "bg-teal-500/10",
281
- border: "border-teal-500/20",
282
- text: "text-teal-400",
283
- glow: "group-hover:shadow-teal-500/10"
284
- },
285
- cyan: {
286
- bg: "bg-cyan-500/10",
287
- border: "border-cyan-500/20",
288
- text: "text-cyan-400",
289
- glow: "group-hover:shadow-cyan-500/10"
290
- }
291
- };
292
- return /* @__PURE__ */ jsx("section", {
293
- className: "py-24 px-6",
294
- children: /* @__PURE__ */ jsx("div", {
295
- className: "max-w-6xl mx-auto",
320
+ return /* @__PURE__ */ jsxs("section", {
321
+ className: "relative border-t border-border",
322
+ children: [/* @__PURE__ */ jsxs("div", {
323
+ className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
324
+ children: [/* @__PURE__ */ jsxs("div", {
325
+ className: "flex items-center gap-4 mb-4",
326
+ children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
327
+ className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
328
+ children: "Why you're stuck"
329
+ })]
330
+ }), /* @__PURE__ */ jsx("h2", {
331
+ className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em]",
332
+ children: "The vibe coding trap"
333
+ })]
334
+ }), /* @__PURE__ */ jsx("div", {
335
+ className: "max-w-7xl mx-auto",
296
336
  children: /* @__PURE__ */ jsx("div", {
297
- className: "grid md:grid-cols-3 gap-6",
298
- children: columns.map((col) => {
299
- const colors = colorMap[col.color];
300
- return /* @__PURE__ */ jsxs("div", {
301
- className: `group relative rounded-2xl border ${colors.border} bg-white/[0.02] p-8 hover:bg-white/[0.04] transition-all hover:shadow-xl ${colors.glow}`,
337
+ className: "grid md:grid-cols-3",
338
+ children: [
339
+ {
340
+ title: "The Problem",
341
+ tag: "01",
342
+ items: [
343
+ {
344
+ label: "Stuck in AI loops",
345
+ desc: "The more you prompt, the more it breaks"
346
+ },
347
+ {
348
+ label: "Code you can't understand",
349
+ desc: "10,000 lines nobody can debug"
350
+ },
351
+ {
352
+ label: "Works locally, won't deploy",
353
+ desc: "The last 20% takes 80% of the time"
354
+ }
355
+ ]
356
+ },
357
+ {
358
+ title: "The Foundation",
359
+ tag: "02",
360
+ featured: true,
361
+ items: [
362
+ {
363
+ label: "Production-ready structure",
364
+ desc: "Architecture that actually scales"
365
+ },
366
+ {
367
+ label: "Pre-built features that work",
368
+ desc: "Auth, payments, dashboards—done"
369
+ },
370
+ {
371
+ label: "Code you can grow with",
372
+ desc: "Not spaghetti you're scared to touch"
373
+ }
374
+ ]
375
+ },
376
+ {
377
+ title: "The Outcome",
378
+ tag: "03",
379
+ items: [
380
+ {
381
+ label: "Ship in hours",
382
+ desc: "Not weeks of debugging"
383
+ },
384
+ {
385
+ label: "Launch with confidence",
386
+ desc: "Real software, not a fragile prototype"
387
+ },
388
+ {
389
+ label: "Focus on your idea",
390
+ desc: "Not fighting your codebase"
391
+ }
392
+ ]
393
+ }
394
+ ].map((col, colIndex) => /* @__PURE__ */ jsxs("div", {
395
+ className: `relative border-b md:border-b-0 ${colIndex < 2 ? "md:border-r" : ""} border-border`,
396
+ children: [col.featured && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-[2px] bg-primary" }), /* @__PURE__ */ jsxs("div", {
397
+ className: "p-8 md:p-10",
302
398
  children: [/* @__PURE__ */ jsxs("div", {
303
- className: "flex items-center gap-3 mb-8",
304
- children: [/* @__PURE__ */ jsx("div", {
305
- className: `w-12 h-12 rounded-xl ${colors.bg} ${colors.text} flex items-center justify-center`,
306
- children: col.icon
399
+ className: "flex items-start justify-between mb-10",
400
+ children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
401
+ className: "text-xs text-muted-foreground tracking-[0.2em] uppercase block mb-2",
402
+ children: col.tag
307
403
  }), /* @__PURE__ */ jsx("h3", {
308
- className: "text-xl font-semibold text-white",
404
+ className: "text-xl font-medium text-foreground tracking-tight",
309
405
  children: col.title
406
+ })] }), col.featured && /* @__PURE__ */ jsx("span", {
407
+ className: "px-2 py-1 text-[10px] tracking-[0.15em] uppercase bg-primary/10 text-primary border border-primary/20",
408
+ children: "Popular"
310
409
  })]
311
410
  }), /* @__PURE__ */ jsx("div", {
312
- className: "space-y-6",
313
- children: col.items.map((item) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
314
- className: "text-white font-medium mb-1",
315
- children: item.label
316
- }), /* @__PURE__ */ jsx("div", {
317
- className: "text-white/50 text-sm",
318
- children: item.desc
319
- })] }, item.label))
411
+ className: "space-y-8",
412
+ children: col.items.map((item, i) => /* @__PURE__ */ jsx("div", {
413
+ className: "group",
414
+ children: /* @__PURE__ */ jsxs("div", {
415
+ className: "flex items-start gap-4",
416
+ children: [/* @__PURE__ */ jsx("div", {
417
+ className: `w-6 h-6 flex items-center justify-center border ${col.featured ? "border-primary/50 text-primary" : "border-border text-muted-foreground"} text-xs font-mono`,
418
+ children: i + 1
419
+ }), /* @__PURE__ */ jsxs("div", {
420
+ className: "flex-1",
421
+ children: [/* @__PURE__ */ jsx("div", {
422
+ className: "text-foreground font-medium mb-1 group-hover:text-primary transition-colors",
423
+ children: item.label
424
+ }), /* @__PURE__ */ jsx("div", {
425
+ className: "text-muted-foreground text-sm",
426
+ children: item.desc
427
+ })]
428
+ })]
429
+ })
430
+ }, item.label))
320
431
  })]
321
- }, col.title);
322
- })
432
+ })]
433
+ }, col.title))
323
434
  })
324
- })
435
+ })]
325
436
  });
326
437
  }
327
438
 
328
439
  //#endregion
329
- //#region src/client/components/code-quality.tsx
330
- function CodeQuality() {
440
+ //#region src/client/components/ai-superpowers.tsx
441
+ function AiSuperpowers() {
442
+ const features = [
443
+ {
444
+ num: "01",
445
+ title: "Context Engineering Built-In",
446
+ desc: "Your AI already knows your codebase. AGENTS.md files in every folder teach Cursor, Claude, and Copilot exactly how your app works.",
447
+ tag: "Hot"
448
+ },
449
+ {
450
+ num: "02",
451
+ title: "Skills Your AI Can Use",
452
+ desc: "Pre-built skills for common tasks. Your AI assistant loads them automatically and just knows what to do.",
453
+ tag: null
454
+ },
455
+ {
456
+ num: "03",
457
+ title: "Curated MCP Tools",
458
+ desc: "Hand-picked Model Context Protocol tools, configured for maximum impact. Web search, code editing, UI components—all pre-tuned to work together.",
459
+ tag: "New"
460
+ },
461
+ {
462
+ num: "04",
463
+ title: "Multi-Agent Workflows",
464
+ desc: "Run multiple AI agents on different parts of your app. They coordinate automatically without stepping on each other.",
465
+ tag: null
466
+ }
467
+ ];
331
468
  return /* @__PURE__ */ jsxs("section", {
332
- className: "py-24 px-6 relative overflow-hidden",
333
- children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-emerald-500/5 via-transparent to-transparent pointer-events-none" }), /* @__PURE__ */ jsxs("div", {
334
- className: "max-w-6xl mx-auto relative",
335
- children: [/* @__PURE__ */ jsxs("div", {
336
- className: "max-w-2xl mb-16",
337
- children: [
338
- /* @__PURE__ */ jsxs("div", {
339
- className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-xs text-emerald-400 font-medium mb-6",
340
- children: [/* @__PURE__ */ jsx("svg", {
341
- className: "w-3.5 h-3.5",
342
- fill: "none",
343
- stroke: "currentColor",
344
- viewBox: "0 0 24 24",
345
- children: /* @__PURE__ */ jsx("path", {
346
- strokeLinecap: "round",
347
- strokeLinejoin: "round",
348
- strokeWidth: 2,
349
- d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
350
- })
351
- }), "Quality Guaranteed"]
352
- }),
353
- /* @__PURE__ */ jsx("h2", {
354
- className: "text-4xl md:text-5xl font-bold text-white mb-6",
355
- children: "Code That Stays Clean"
356
- }),
357
- /* @__PURE__ */ jsxs("p", {
358
- className: "text-xl text-white/60 leading-relaxed",
359
- children: ["Codebases rot. AI generates spaghetti. Developers cut corners.", /* @__PURE__ */ jsx("span", {
360
- className: "text-white",
361
- children: " Kuckit enforces structure automatically."
362
- })]
363
- })
364
- ]
365
- }), /* @__PURE__ */ jsxs("div", {
366
- className: "grid lg:grid-cols-2 gap-12 items-center",
367
- children: [/* @__PURE__ */ jsx("div", {
368
- className: "space-y-6",
469
+ className: "relative border-t border-border",
470
+ children: [/* @__PURE__ */ jsxs("div", {
471
+ className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
472
+ children: [
473
+ /* @__PURE__ */ jsxs("div", {
474
+ className: "flex items-center gap-4 mb-4",
475
+ children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
476
+ className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
477
+ children: "AI-Native Framework"
478
+ })]
479
+ }),
480
+ /* @__PURE__ */ jsx("h2", {
481
+ className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em] mb-4",
482
+ children: "Your AI Gets Superpowers"
483
+ }),
484
+ /* @__PURE__ */ jsxs("p", {
485
+ className: "text-lg text-muted-foreground max-w-2xl",
369
486
  children: [
370
- {
371
- icon: /* @__PURE__ */ jsx("svg", {
372
- className: "w-5 h-5",
373
- fill: "none",
374
- stroke: "currentColor",
375
- viewBox: "0 0 24 24",
376
- children: /* @__PURE__ */ jsx("path", {
377
- strokeLinecap: "round",
378
- strokeLinejoin: "round",
379
- strokeWidth: 1.5,
380
- d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
381
- })
382
- }),
383
- title: "AGENTS.md in Every Package",
384
- desc: "AI and humans follow the same rules. Clear instructions ensure consistent, maintainable code."
385
- },
386
- {
387
- icon: /* @__PURE__ */ jsx("svg", {
388
- className: "w-5 h-5",
389
- fill: "none",
390
- stroke: "currentColor",
391
- viewBox: "0 0 24 24",
392
- children: /* @__PURE__ */ jsx("path", {
393
- strokeLinecap: "round",
394
- strokeLinejoin: "round",
395
- strokeWidth: 1.5,
396
- d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
397
- })
398
- }),
399
- title: "Pre-commit Hooks",
400
- desc: "Bad code can't even be committed. Husky runs checks before every commit."
401
- },
402
- {
403
- icon: /* @__PURE__ */ jsx("svg", {
404
- className: "w-5 h-5",
405
- fill: "none",
406
- stroke: "currentColor",
407
- viewBox: "0 0 24 24",
408
- children: /* @__PURE__ */ jsx("path", {
409
- strokeLinecap: "round",
410
- strokeLinejoin: "round",
411
- strokeWidth: 1.5,
412
- d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
413
- })
414
- }),
415
- title: "CI/CD Validation",
416
- desc: "Nothing merges without passing architecture checks. Every PR is verified."
417
- },
418
- {
419
- icon: /* @__PURE__ */ jsx("svg", {
420
- className: "w-5 h-5",
421
- fill: "none",
422
- stroke: "currentColor",
423
- viewBox: "0 0 24 24",
424
- children: /* @__PURE__ */ jsx("path", {
425
- strokeLinecap: "round",
426
- strokeLinejoin: "round",
427
- strokeWidth: 1.5,
428
- d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
429
- })
430
- }),
431
- title: "Clean Architecture Layers",
432
- desc: "Domain, Application, Infrastructure stay separated. Always."
433
- }
434
- ].map((feature) => /* @__PURE__ */ jsxs("div", {
435
- className: "group flex gap-4 p-4 rounded-xl hover:bg-white/[0.03] transition-colors",
436
- children: [/* @__PURE__ */ jsx("div", {
437
- className: "w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 shrink-0 group-hover:scale-110 transition-transform",
438
- children: feature.icon
439
- }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
440
- className: "text-white font-semibold mb-1",
441
- children: feature.title
442
- }), /* @__PURE__ */ jsx("p", {
443
- className: "text-white/50 text-sm leading-relaxed",
444
- children: feature.desc
445
- })] })]
487
+ "Cursor, Claude, Copilot—they all work better with Kuckit.",
488
+ " ",
489
+ /* @__PURE__ */ jsx("span", {
490
+ className: "text-foreground",
491
+ children: "Because we built the framework for AI-first development."
492
+ })
493
+ ]
494
+ })
495
+ ]
496
+ }), /* @__PURE__ */ jsx("div", {
497
+ className: "max-w-7xl mx-auto",
498
+ children: /* @__PURE__ */ jsxs("div", {
499
+ className: "grid lg:grid-cols-12",
500
+ children: [/* @__PURE__ */ jsx("div", {
501
+ className: "lg:col-span-7 border-b lg:border-b-0 lg:border-r border-border",
502
+ children: features.map((feature, index) => /* @__PURE__ */ jsx("div", {
503
+ className: `p-8 ${index < features.length - 1 ? "border-b border-border" : ""}`,
504
+ children: /* @__PURE__ */ jsxs("div", {
505
+ className: "flex items-start gap-6",
506
+ children: [/* @__PURE__ */ jsx("div", {
507
+ className: "w-12 h-12 flex items-center justify-center border border-primary/30 bg-primary/5 text-primary font-mono text-sm shrink-0",
508
+ children: feature.num
509
+ }), /* @__PURE__ */ jsxs("div", {
510
+ className: "flex-1 pt-1",
511
+ children: [/* @__PURE__ */ jsxs("div", {
512
+ className: "flex items-center gap-3 mb-2",
513
+ children: [/* @__PURE__ */ jsx("h3", {
514
+ className: "text-lg font-medium text-foreground tracking-tight",
515
+ children: feature.title
516
+ }), feature.tag && /* @__PURE__ */ jsx("span", {
517
+ className: "px-2 py-0.5 text-[10px] tracking-[0.1em] uppercase bg-primary/10 text-primary border border-primary/20",
518
+ children: feature.tag
519
+ })]
520
+ }), /* @__PURE__ */ jsx("p", {
521
+ className: "text-muted-foreground text-sm leading-relaxed",
522
+ children: feature.desc
523
+ })]
524
+ })]
525
+ })
446
526
  }, feature.title))
447
527
  }), /* @__PURE__ */ jsx("div", {
448
- className: "relative",
528
+ className: "lg:col-span-5 p-8 lg:p-12 bg-card",
449
529
  children: /* @__PURE__ */ jsxs("div", {
450
- className: "relative aspect-square max-w-md mx-auto",
451
- children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-teal-500/20 rounded-3xl blur-2xl" }), /* @__PURE__ */ jsxs("div", {
452
- className: "relative h-full rounded-3xl border border-white/10 bg-black/50 backdrop-blur-sm p-8 flex flex-col items-center justify-center",
453
- children: [
454
- /* @__PURE__ */ jsxs("div", {
455
- className: "w-24 h-24 mb-6 relative",
456
- children: [/* @__PURE__ */ jsx("svg", {
457
- className: "w-full h-full text-emerald-400",
458
- fill: "none",
459
- stroke: "currentColor",
460
- viewBox: "0 0 24 24",
461
- children: /* @__PURE__ */ jsx("path", {
462
- strokeLinecap: "round",
463
- strokeLinejoin: "round",
464
- strokeWidth: 1,
465
- d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
466
- })
467
- }), /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-emerald-400/20 rounded-full blur-xl" })]
468
- }),
469
- /* @__PURE__ */ jsxs("div", {
470
- className: "text-center mb-6",
471
- children: [/* @__PURE__ */ jsx("div", {
472
- className: "text-3xl font-bold text-white mb-1",
473
- children: "100%"
474
- }), /* @__PURE__ */ jsx("div", {
475
- className: "text-white/50 text-sm",
476
- children: "Architecture Compliance"
477
- })]
478
- }),
479
- /* @__PURE__ */ jsxs("div", {
480
- className: "w-full space-y-2",
530
+ className: "h-full flex flex-col",
531
+ children: [
532
+ /* @__PURE__ */ jsxs("div", {
533
+ className: "flex items-center gap-3 mb-8",
534
+ children: [/* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-primary animate-pulse" }), /* @__PURE__ */ jsx("span", {
535
+ className: "text-xs text-muted-foreground tracking-[0.2em] uppercase",
536
+ children: "AI Enhancement Active"
537
+ })]
538
+ }),
539
+ /* @__PURE__ */ jsxs("div", {
540
+ className: "mb-10",
541
+ children: [/* @__PURE__ */ jsx("div", {
542
+ className: "text-6xl font-light text-foreground tracking-tighter mb-2",
543
+ children: "10x"
544
+ }), /* @__PURE__ */ jsx("div", {
545
+ className: "text-sm text-muted-foreground tracking-wide",
546
+ children: "Faster AI responses with context"
547
+ })]
548
+ }),
549
+ /* @__PURE__ */ jsx("div", { className: "h-px bg-border mb-8" }),
550
+ /* @__PURE__ */ jsxs("div", {
551
+ className: "flex-1",
552
+ children: [/* @__PURE__ */ jsx("div", {
553
+ className: "text-xs text-muted-foreground tracking-[0.15em] uppercase mb-4",
554
+ children: "What Your AI Gets"
555
+ }), /* @__PURE__ */ jsx("div", {
556
+ className: "space-y-4",
481
557
  children: [
482
- /* @__PURE__ */ jsxs("div", {
483
- className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-red-500/10 border border-red-500/20",
484
- children: [/* @__PURE__ */ jsx("svg", {
485
- className: "w-4 h-4 text-red-400",
486
- fill: "none",
487
- stroke: "currentColor",
488
- viewBox: "0 0 24 24",
489
- children: /* @__PURE__ */ jsx("path", {
490
- strokeLinecap: "round",
491
- strokeLinejoin: "round",
492
- strokeWidth: 2,
493
- d: "M6 18L18 6M6 6l12 12"
558
+ {
559
+ icon: "brain",
560
+ label: "Smart Context",
561
+ desc: "AI understands your whole project"
562
+ },
563
+ {
564
+ icon: "zap",
565
+ label: "Auto-Complete",
566
+ desc: "Better suggestions, fewer errors"
567
+ },
568
+ {
569
+ icon: "users",
570
+ label: "Team of AIs",
571
+ desc: "Parallel agents, zero conflicts"
572
+ }
573
+ ].map((cap) => /* @__PURE__ */ jsxs("div", {
574
+ className: "flex items-center gap-4 px-4 py-3 bg-primary/5 border-l-2 border-primary",
575
+ children: [/* @__PURE__ */ jsxs("div", {
576
+ className: "w-8 h-8 flex items-center justify-center bg-primary/10 text-primary",
577
+ children: [
578
+ cap.icon === "brain" && /* @__PURE__ */ jsx("svg", {
579
+ className: "w-4 h-4",
580
+ fill: "none",
581
+ stroke: "currentColor",
582
+ viewBox: "0 0 24 24",
583
+ children: /* @__PURE__ */ jsx("path", {
584
+ strokeLinecap: "round",
585
+ strokeLinejoin: "round",
586
+ strokeWidth: 2,
587
+ d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
588
+ })
589
+ }),
590
+ cap.icon === "zap" && /* @__PURE__ */ jsx("svg", {
591
+ className: "w-4 h-4",
592
+ fill: "none",
593
+ stroke: "currentColor",
594
+ viewBox: "0 0 24 24",
595
+ children: /* @__PURE__ */ jsx("path", {
596
+ strokeLinecap: "round",
597
+ strokeLinejoin: "round",
598
+ strokeWidth: 2,
599
+ d: "M13 10V3L4 14h7v7l9-11h-7z"
600
+ })
601
+ }),
602
+ cap.icon === "users" && /* @__PURE__ */ jsx("svg", {
603
+ className: "w-4 h-4",
604
+ fill: "none",
605
+ stroke: "currentColor",
606
+ viewBox: "0 0 24 24",
607
+ children: /* @__PURE__ */ jsx("path", {
608
+ strokeLinecap: "round",
609
+ strokeLinejoin: "round",
610
+ strokeWidth: 2,
611
+ d: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
612
+ })
494
613
  })
495
- }), /* @__PURE__ */ jsx("span", {
496
- className: "text-sm text-red-400/80 font-mono",
497
- children: "Circular dependencies"
614
+ ]
615
+ }), /* @__PURE__ */ jsxs("div", {
616
+ className: "flex-1",
617
+ children: [/* @__PURE__ */ jsx("div", {
618
+ className: "text-sm font-medium text-foreground",
619
+ children: cap.label
620
+ }), /* @__PURE__ */ jsx("div", {
621
+ className: "text-xs text-muted-foreground",
622
+ children: cap.desc
498
623
  })]
624
+ })]
625
+ }, cap.label))
626
+ })]
627
+ }),
628
+ /* @__PURE__ */ jsxs("div", {
629
+ className: "mt-8 pt-6 border-t border-border flex items-center justify-between",
630
+ children: [/* @__PURE__ */ jsx("span", {
631
+ className: "text-xs text-muted-foreground",
632
+ children: "Works with any AI tool"
633
+ }), /* @__PURE__ */ jsxs("div", {
634
+ className: "flex items-center gap-3 text-xs text-muted-foreground",
635
+ children: [
636
+ /* @__PURE__ */ jsx("span", { children: "Cursor" }),
637
+ /* @__PURE__ */ jsx("span", {
638
+ className: "text-border",
639
+ children: "•"
499
640
  }),
500
- /* @__PURE__ */ jsxs("div", {
501
- className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-red-500/10 border border-red-500/20",
502
- children: [/* @__PURE__ */ jsx("svg", {
503
- className: "w-4 h-4 text-red-400",
504
- fill: "none",
505
- stroke: "currentColor",
506
- viewBox: "0 0 24 24",
507
- children: /* @__PURE__ */ jsx("path", {
508
- strokeLinecap: "round",
509
- strokeLinejoin: "round",
510
- strokeWidth: 2,
511
- d: "M6 18L18 6M6 6l12 12"
512
- })
513
- }), /* @__PURE__ */ jsx("span", {
514
- className: "text-sm text-red-400/80 font-mono",
515
- children: "Layer violations"
516
- })]
641
+ /* @__PURE__ */ jsx("span", { children: "Claude" }),
642
+ /* @__PURE__ */ jsx("span", {
643
+ className: "text-border",
644
+ children: "•"
517
645
  }),
518
- /* @__PURE__ */ jsxs("div", {
519
- className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-red-500/10 border border-red-500/20",
520
- children: [/* @__PURE__ */ jsx("svg", {
521
- className: "w-4 h-4 text-red-400",
522
- fill: "none",
523
- stroke: "currentColor",
524
- viewBox: "0 0 24 24",
525
- children: /* @__PURE__ */ jsx("path", {
526
- strokeLinecap: "round",
527
- strokeLinejoin: "round",
528
- strokeWidth: 2,
529
- d: "M6 18L18 6M6 6l12 12"
530
- })
531
- }), /* @__PURE__ */ jsx("span", {
532
- className: "text-sm text-red-400/80 font-mono",
533
- children: "Untyped exports"
534
- })]
535
- })
646
+ /* @__PURE__ */ jsx("span", { children: "Copilot" })
536
647
  ]
537
- })
538
- ]
539
- })]
648
+ })]
649
+ })
650
+ ]
540
651
  })
541
652
  })]
542
- })]
653
+ })
543
654
  })]
544
655
  });
545
656
  }
@@ -549,188 +660,128 @@ function CodeQuality() {
549
660
  function ModuleShowcase() {
550
661
  const modules = [
551
662
  {
552
- name: "Auth",
553
- icon: /* @__PURE__ */ jsx("svg", {
554
- className: "w-6 h-6",
555
- fill: "none",
556
- stroke: "currentColor",
557
- viewBox: "0 0 24 24",
558
- children: /* @__PURE__ */ jsx("path", {
559
- strokeLinecap: "round",
560
- strokeLinejoin: "round",
561
- strokeWidth: 1.5,
562
- d: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
563
- })
564
- }),
565
- desc: "OAuth, MFA, sessions",
566
- color: "emerald"
663
+ name: "Payments",
664
+ package: "Subscriptions & checkout",
665
+ desc: "Accept payments in minutes. Subscriptions, one-time purchases, customer portal.",
666
+ status: "stable"
567
667
  },
568
668
  {
569
- name: "Billing",
570
- icon: /* @__PURE__ */ jsx("svg", {
571
- className: "w-6 h-6",
572
- fill: "none",
573
- stroke: "currentColor",
574
- viewBox: "0 0 24 24",
575
- children: /* @__PURE__ */ jsx("path", {
576
- strokeLinecap: "round",
577
- strokeLinejoin: "round",
578
- strokeWidth: 1.5,
579
- d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
580
- })
581
- }),
582
- desc: "Stripe, subscriptions",
583
- color: "teal"
669
+ name: "User Accounts",
670
+ package: "Profiles & settings",
671
+ desc: "User registration, profiles, and account management ready to go.",
672
+ status: "stable"
584
673
  },
585
674
  {
586
- name: "Analytics",
587
- icon: /* @__PURE__ */ jsx("svg", {
588
- className: "w-6 h-6",
589
- fill: "none",
590
- stroke: "currentColor",
591
- viewBox: "0 0 24 24",
592
- children: /* @__PURE__ */ jsx("path", {
593
- strokeLinecap: "round",
594
- strokeLinejoin: "round",
595
- strokeWidth: 1.5,
596
- d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
597
- })
598
- }),
599
- desc: "Events, dashboards",
600
- color: "cyan"
675
+ name: "Documentation",
676
+ package: "Help & guides",
677
+ desc: "Beautiful docs for your users. Write in plain text, get a polished help center.",
678
+ status: "stable"
601
679
  },
602
680
  {
603
- name: "Email",
604
- icon: /* @__PURE__ */ jsx("svg", {
605
- className: "w-6 h-6",
606
- fill: "none",
607
- stroke: "currentColor",
608
- viewBox: "0 0 24 24",
609
- children: /* @__PURE__ */ jsx("path", {
610
- strokeLinecap: "round",
611
- strokeLinejoin: "round",
612
- strokeWidth: 1.5,
613
- d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
614
- })
615
- }),
616
- desc: "Transactional, templates",
617
- color: "violet"
681
+ name: "AI Chat",
682
+ package: "Smart assistants",
683
+ desc: "Add AI chat to your app. Streaming responses, conversation history included.",
684
+ status: "stable"
618
685
  },
619
686
  {
620
- name: "Storage",
621
- icon: /* @__PURE__ */ jsx("svg", {
622
- className: "w-6 h-6",
623
- fill: "none",
624
- stroke: "currentColor",
625
- viewBox: "0 0 24 24",
626
- children: /* @__PURE__ */ jsx("path", {
627
- strokeLinecap: "round",
628
- strokeLinejoin: "round",
629
- strokeWidth: 1.5,
630
- d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
631
- })
632
- }),
633
- desc: "S3, uploads, CDN",
634
- color: "amber"
687
+ name: "CLI Login",
688
+ package: "Developer tools",
689
+ desc: "Let users log in from command line tools with a simple device code.",
690
+ status: "stable"
635
691
  },
636
692
  {
637
- name: "AI",
638
- icon: /* @__PURE__ */ jsx("svg", {
639
- className: "w-6 h-6",
640
- fill: "none",
641
- stroke: "currentColor",
642
- viewBox: "0 0 24 24",
643
- children: /* @__PURE__ */ jsx("path", {
644
- strokeLinecap: "round",
645
- strokeLinejoin: "round",
646
- strokeWidth: 1.5,
647
- d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
648
- })
649
- }),
650
- desc: "Chat, embeddings",
651
- color: "pink"
693
+ name: "More Coming",
694
+ package: "Email, storage, analytics",
695
+ desc: "We're building more modules every week. Tell us what you need.",
696
+ status: "soon"
652
697
  }
653
698
  ];
654
- const colorMap = {
655
- emerald: {
656
- bg: "bg-emerald-500/10",
657
- border: "border-emerald-500/30",
658
- text: "text-emerald-400"
659
- },
660
- teal: {
661
- bg: "bg-teal-500/10",
662
- border: "border-teal-500/30",
663
- text: "text-teal-400"
664
- },
665
- cyan: {
666
- bg: "bg-cyan-500/10",
667
- border: "border-cyan-500/30",
668
- text: "text-cyan-400"
669
- },
670
- violet: {
671
- bg: "bg-violet-500/10",
672
- border: "border-violet-500/30",
673
- text: "text-violet-400"
674
- },
675
- amber: {
676
- bg: "bg-amber-500/10",
677
- border: "border-amber-500/30",
678
- text: "text-amber-400"
679
- },
680
- pink: {
681
- bg: "bg-pink-500/10",
682
- border: "border-pink-500/30",
683
- text: "text-pink-400"
684
- }
685
- };
686
- return /* @__PURE__ */ jsx("section", {
687
- className: "py-24 px-6",
688
- children: /* @__PURE__ */ jsxs("div", {
689
- className: "max-w-6xl mx-auto",
699
+ return /* @__PURE__ */ jsxs("section", {
700
+ id: "modules",
701
+ className: "relative border-t border-border",
702
+ children: [/* @__PURE__ */ jsxs("div", {
703
+ className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
690
704
  children: [
691
705
  /* @__PURE__ */ jsxs("div", {
692
- className: "text-center mb-16",
693
- children: [/* @__PURE__ */ jsx("h2", {
694
- className: "text-4xl md:text-5xl font-bold text-white mb-6",
695
- children: "Modules for Everything"
696
- }), /* @__PURE__ */ jsx("p", {
697
- className: "text-xl text-white/60 max-w-2xl mx-auto",
698
- children: "Skip weeks of development. Install battle-tested modules and focus on what makes your product unique."
706
+ className: "flex items-center gap-4 mb-4",
707
+ children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
708
+ className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
709
+ children: "Module Ecosystem"
699
710
  })]
700
711
  }),
701
- /* @__PURE__ */ jsx("div", {
702
- className: "grid grid-cols-2 md:grid-cols-3 gap-4",
703
- children: modules.map((mod) => {
704
- const colors = colorMap[mod.color];
705
- return /* @__PURE__ */ jsxs("div", {
706
- className: "group relative rounded-2xl border border-white/10 bg-white/[0.02] p-6 hover:border-white/20 hover:bg-white/[0.04] transition-all cursor-pointer",
707
- children: [
708
- /* @__PURE__ */ jsx("div", {
709
- className: "absolute top-3 right-3 px-2 py-0.5 rounded text-[10px] font-medium bg-white/10 text-white/50",
710
- children: "Soon"
711
- }),
712
- /* @__PURE__ */ jsx("div", {
713
- className: `w-12 h-12 rounded-xl ${colors.bg} ${colors.text} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`,
714
- children: mod.icon
715
- }),
716
- /* @__PURE__ */ jsx("h3", {
717
- className: "text-lg font-semibold text-white mb-1",
718
- children: mod.name
719
- }),
720
- /* @__PURE__ */ jsx("p", {
721
- className: "text-sm text-white/50",
722
- children: mod.desc
723
- })
724
- ]
725
- }, mod.name);
726
- })
712
+ /* @__PURE__ */ jsx("h2", {
713
+ className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em] mb-4",
714
+ children: "Modules for Everything"
727
715
  }),
728
- /* @__PURE__ */ jsx("div", {
729
- className: "mt-12 text-center",
730
- children: /* @__PURE__ */ jsxs("button", {
731
- className: "inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-white/20 text-white/80 hover:bg-white/5 hover:border-white/30 transition-all",
732
- children: [/* @__PURE__ */ jsx("span", { children: "Join waitlist for marketplace access" }), /* @__PURE__ */ jsx("svg", {
733
- className: "w-4 h-4",
716
+ /* @__PURE__ */ jsx("p", {
717
+ className: "text-lg text-muted-foreground max-w-2xl",
718
+ children: "Skip weeks of development. Install battle-tested modules and focus on what makes your product unique."
719
+ })
720
+ ]
721
+ }), /* @__PURE__ */ jsxs("div", {
722
+ className: "max-w-7xl mx-auto",
723
+ children: [/* @__PURE__ */ jsx("div", {
724
+ className: "grid md:grid-cols-2 lg:grid-cols-3",
725
+ children: modules.map((mod, index) => {
726
+ const isLastRow = index >= modules.length - (modules.length % 3 || 3);
727
+ const isLastCol = (index + 1) % 3 === 0;
728
+ return /* @__PURE__ */ jsxs("div", {
729
+ className: `group relative p-8 transition-colors hover:bg-card ${!isLastRow ? "border-b border-border" : ""} ${!isLastCol ? "lg:border-r border-border" : ""} ${index % 2 === 0 && index < modules.length - 1 ? "md:border-r" : ""} ${index < modules.length - 2 ? "md:border-b" : ""} lg:border-b-0 ${index < modules.length - 3 ? "lg:border-b lg:border-border" : ""}`,
730
+ children: [
731
+ /* @__PURE__ */ jsx("div", {
732
+ className: "absolute top-6 right-6",
733
+ children: /* @__PURE__ */ jsx("span", {
734
+ className: `px-2 py-1 text-[10px] tracking-[0.15em] uppercase ${mod.status === "stable" ? "bg-[hsl(var(--status-success)/0.1)] text-[hsl(var(--status-success))] border border-[hsl(var(--status-success)/0.2)]" : mod.status === "beta" ? "bg-primary/10 text-primary border border-primary/20" : "bg-muted text-muted-foreground border border-border"}`,
735
+ children: mod.status
736
+ })
737
+ }),
738
+ /* @__PURE__ */ jsxs("div", {
739
+ className: "pr-16",
740
+ children: [
741
+ /* @__PURE__ */ jsx("span", {
742
+ className: "text-sm text-primary block mb-3",
743
+ children: mod.package
744
+ }),
745
+ /* @__PURE__ */ jsx("h3", {
746
+ className: "text-xl font-medium text-foreground mb-2 tracking-tight group-hover:text-primary transition-colors",
747
+ children: mod.name
748
+ }),
749
+ /* @__PURE__ */ jsx("p", {
750
+ className: "text-sm text-muted-foreground",
751
+ children: mod.desc
752
+ })
753
+ ]
754
+ }),
755
+ /* @__PURE__ */ jsx("div", {
756
+ className: "absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity",
757
+ children: /* @__PURE__ */ jsx("svg", {
758
+ className: "w-5 h-5 text-primary",
759
+ fill: "none",
760
+ stroke: "currentColor",
761
+ viewBox: "0 0 24 24",
762
+ children: /* @__PURE__ */ jsx("path", {
763
+ strokeLinecap: "round",
764
+ strokeLinejoin: "round",
765
+ strokeWidth: 1.5,
766
+ d: "M17 8l4 4m0 0l-4 4m4-4H3"
767
+ })
768
+ })
769
+ })
770
+ ]
771
+ }, mod.name);
772
+ })
773
+ }), /* @__PURE__ */ jsx("div", {
774
+ className: "border-t border-border",
775
+ children: /* @__PURE__ */ jsxs("div", {
776
+ className: "px-8 py-8 flex flex-col md:flex-row md:items-center justify-between gap-6",
777
+ children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", {
778
+ className: "text-sm text-muted-foreground",
779
+ children: "More modules coming soon. Explore the documentation to get started."
780
+ }) }), /* @__PURE__ */ jsxs("a", {
781
+ href: "/docs",
782
+ className: "group inline-flex items-center gap-3 px-6 py-3 border border-border text-foreground hover:border-primary/50 hover:bg-card transition-all",
783
+ children: [/* @__PURE__ */ jsx("span", { children: "View Documentation" }), /* @__PURE__ */ jsx("svg", {
784
+ className: "w-4 h-4 group-hover:translate-x-1 transition-transform",
734
785
  fill: "none",
735
786
  stroke: "currentColor",
736
787
  viewBox: "0 0 24 24",
@@ -741,10 +792,10 @@ function ModuleShowcase() {
741
792
  d: "M17 8l4 4m0 0l-4 4m4-4H3"
742
793
  })
743
794
  })]
744
- })
795
+ })]
745
796
  })
746
- ]
747
- })
797
+ })]
798
+ })]
748
799
  });
749
800
  }
750
801
 
@@ -754,113 +805,129 @@ function HowItWorks() {
754
805
  const [activeTab, setActiveTab] = useState("builders");
755
806
  const steps = activeTab === "builders" ? [
756
807
  {
757
- step: "01",
808
+ num: "01",
758
809
  command: "bunx create-kuckit-app my-app",
759
810
  title: "Scaffold your app",
760
811
  desc: "Get a production-ready TypeScript app with Clean Architecture baked in."
761
812
  },
762
813
  {
763
- step: "02",
814
+ num: "02",
764
815
  command: "kuckit add @vendor/billing",
765
816
  title: "Install modules",
766
817
  desc: "One command adds both server and client code, wired and ready."
767
818
  },
768
819
  {
769
- step: "03",
820
+ num: "03",
770
821
  command: "bun run dev",
771
822
  title: "Ship it",
772
823
  desc: "Your app is ready. Maintainable, type-safe, and battle-tested."
773
824
  }
774
825
  ] : [
775
826
  {
776
- step: "01",
827
+ num: "01",
777
828
  command: "kuckit generate module billing",
778
829
  title: "Scaffold with AGENTS.md",
779
830
  desc: "Generated structure includes documentation for AI and human developers."
780
831
  },
781
832
  {
782
- step: "02",
833
+ num: "02",
783
834
  command: "git commit && git push",
784
835
  title: "Build & test",
785
836
  desc: "Guardrails ensure your module meets quality standards before it ships."
786
837
  },
787
838
  {
788
- step: "03",
839
+ num: "03",
789
840
  command: "kuckit publish",
790
841
  title: "Earn revenue",
791
842
  desc: "Set your price, publish to the marketplace, and start earning."
792
843
  }
793
844
  ];
794
845
  return /* @__PURE__ */ jsxs("section", {
795
- className: "py-24 px-6 relative",
796
- children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-teal-500/5 to-transparent pointer-events-none" }), /* @__PURE__ */ jsxs("div", {
797
- className: "max-w-5xl mx-auto relative",
798
- children: [
799
- /* @__PURE__ */ jsxs("div", {
800
- className: "text-center mb-12",
801
- children: [/* @__PURE__ */ jsx("h2", {
802
- className: "text-4xl md:text-5xl font-bold text-white mb-6",
846
+ className: "relative border-t border-border",
847
+ children: [
848
+ /* @__PURE__ */ jsxs("div", {
849
+ className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
850
+ children: [
851
+ /* @__PURE__ */ jsxs("div", {
852
+ className: "flex items-center gap-4 mb-4",
853
+ children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
854
+ className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
855
+ children: "Getting Started"
856
+ })]
857
+ }),
858
+ /* @__PURE__ */ jsx("h2", {
859
+ className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em] mb-4",
803
860
  children: "How It Works"
804
- }), /* @__PURE__ */ jsx("p", {
805
- className: "text-xl text-white/60",
861
+ }),
862
+ /* @__PURE__ */ jsx("p", {
863
+ className: "text-lg text-muted-foreground",
806
864
  children: "Three steps to shipping or selling."
807
- })]
808
- }),
809
- /* @__PURE__ */ jsx("div", {
810
- className: "flex justify-center mb-12",
811
- children: /* @__PURE__ */ jsxs("div", {
812
- className: "inline-flex rounded-xl bg-white/5 p-1",
813
- children: [/* @__PURE__ */ jsx("button", {
814
- onClick: () => setActiveTab("builders"),
815
- className: `px-6 py-2.5 rounded-lg text-sm font-medium transition-all ${activeTab === "builders" ? "bg-white/10 text-white" : "text-white/50 hover:text-white/80"}`,
816
- children: "For Builders"
817
- }), /* @__PURE__ */ jsx("button", {
818
- onClick: () => setActiveTab("sellers"),
819
- className: `px-6 py-2.5 rounded-lg text-sm font-medium transition-all ${activeTab === "sellers" ? "bg-white/10 text-white" : "text-white/50 hover:text-white/80"}`,
820
- children: "For Sellers"
821
- })]
822
865
  })
823
- }),
824
- /* @__PURE__ */ jsx("div", {
825
- className: "space-y-6",
866
+ ]
867
+ }),
868
+ /* @__PURE__ */ jsx("div", {
869
+ className: "max-w-7xl mx-auto border-b border-border",
870
+ children: /* @__PURE__ */ jsxs("div", {
871
+ className: "flex",
872
+ children: [/* @__PURE__ */ jsxs("button", {
873
+ onClick: () => setActiveTab("builders"),
874
+ className: `relative px-8 py-5 text-sm font-medium transition-colors ${activeTab === "builders" ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
875
+ children: ["For Builders", activeTab === "builders" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] bg-primary" })]
876
+ }), /* @__PURE__ */ jsxs("button", {
877
+ onClick: () => setActiveTab("sellers"),
878
+ className: `relative px-8 py-5 text-sm font-medium transition-colors ${activeTab === "sellers" ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
879
+ children: ["For Sellers", activeTab === "sellers" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] bg-primary" })]
880
+ })]
881
+ })
882
+ }),
883
+ /* @__PURE__ */ jsx("div", {
884
+ className: "max-w-7xl mx-auto",
885
+ children: /* @__PURE__ */ jsx("div", {
886
+ className: "grid lg:grid-cols-3",
826
887
  children: steps.map((step, index) => /* @__PURE__ */ jsxs("div", {
827
- className: "group relative flex gap-6 md:gap-10 items-start p-6 rounded-2xl hover:bg-white/[0.02] transition-colors",
828
- children: [/* @__PURE__ */ jsxs("div", {
829
- className: "shrink-0",
830
- children: [/* @__PURE__ */ jsx("div", {
831
- className: "w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 border border-emerald-500/20 flex items-center justify-center",
832
- children: /* @__PURE__ */ jsx("span", {
833
- className: "text-emerald-400 font-bold text-lg",
834
- children: step.step
835
- })
836
- }), index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: "w-px h-12 bg-gradient-to-b from-emerald-500/30 to-transparent mx-auto mt-4" })]
837
- }), /* @__PURE__ */ jsxs("div", {
838
- className: "flex-1 pt-1",
839
- children: [
840
- /* @__PURE__ */ jsx("h3", {
841
- className: "text-xl font-semibold text-white mb-2",
842
- children: step.title
843
- }),
844
- /* @__PURE__ */ jsx("p", {
845
- className: "text-white/50 mb-4",
846
- children: step.desc
847
- }),
848
- /* @__PURE__ */ jsxs("div", {
849
- className: "inline-flex items-center gap-3 px-4 py-2.5 rounded-xl bg-black/50 border border-white/10 font-mono text-sm",
850
- children: [/* @__PURE__ */ jsx("span", {
851
- className: "text-emerald-400",
852
- children: "$"
853
- }), /* @__PURE__ */ jsx("span", {
854
- className: "text-white/80",
855
- children: step.command
856
- })]
857
- })
858
- ]
859
- })]
860
- }, step.step))
888
+ className: `relative p-8 lg:p-10 ${index < steps.length - 1 ? "border-b lg:border-b-0 lg:border-r border-border" : ""}`,
889
+ children: [
890
+ /* @__PURE__ */ jsxs("div", {
891
+ className: "flex items-start justify-between mb-8",
892
+ children: [/* @__PURE__ */ jsx("span", {
893
+ className: "text-4xl font-light text-primary tracking-tighter",
894
+ children: step.num
895
+ }), index < steps.length - 1 && /* @__PURE__ */ jsx("svg", {
896
+ className: "w-5 h-5 text-muted-foreground hidden lg:block mt-2",
897
+ fill: "none",
898
+ stroke: "currentColor",
899
+ viewBox: "0 0 24 24",
900
+ children: /* @__PURE__ */ jsx("path", {
901
+ strokeLinecap: "round",
902
+ strokeLinejoin: "round",
903
+ strokeWidth: 1.5,
904
+ d: "M17 8l4 4m0 0l-4 4m4-4H3"
905
+ })
906
+ })]
907
+ }),
908
+ /* @__PURE__ */ jsx("h3", {
909
+ className: "text-xl font-medium text-foreground mb-3 tracking-tight",
910
+ children: step.title
911
+ }),
912
+ /* @__PURE__ */ jsx("p", {
913
+ className: "text-muted-foreground text-sm mb-6 leading-relaxed",
914
+ children: step.desc
915
+ }),
916
+ /* @__PURE__ */ jsxs("div", {
917
+ className: "flex items-center gap-3 px-4 py-3 bg-background border border-border font-mono text-sm",
918
+ children: [/* @__PURE__ */ jsx("span", {
919
+ className: "text-primary",
920
+ children: "$"
921
+ }), /* @__PURE__ */ jsx("code", {
922
+ className: "text-foreground/80",
923
+ children: step.command
924
+ })]
925
+ })
926
+ ]
927
+ }, step.num))
861
928
  })
862
- ]
863
- })]
929
+ })
930
+ ]
864
931
  });
865
932
  }
866
933
 
@@ -869,140 +936,95 @@ function HowItWorks() {
869
936
  function ArchitecturePreview() {
870
937
  const layers = [
871
938
  {
872
- name: "Interface Layer",
939
+ name: "Interface",
873
940
  items: ["apps/web", "apps/server"],
874
- color: "emerald",
875
941
  desc: "React UI + Express API"
876
942
  },
877
943
  {
878
- name: "SDK Layer",
944
+ name: "SDK",
879
945
  items: ["sdk", "sdk-react"],
880
- color: "teal",
881
946
  desc: "Module system + DI container"
882
947
  },
883
948
  {
884
- name: "Application Layer",
949
+ name: "Application",
885
950
  items: ["application", "api"],
886
- color: "cyan",
887
951
  desc: "Use cases + oRPC procedures"
888
952
  },
889
953
  {
890
- name: "Domain Layer",
954
+ name: "Domain",
891
955
  items: ["domain", "contracts"],
892
- color: "violet",
893
956
  desc: "Entities + Zod schemas"
894
957
  },
895
958
  {
896
- name: "Infrastructure Layer",
959
+ name: "Infrastructure",
897
960
  items: [
898
961
  "infrastructure",
899
962
  "db",
900
963
  "auth"
901
964
  ],
902
- color: "pink",
903
965
  desc: "Repositories + Drizzle ORM"
904
966
  }
905
- ];
906
- const colorMap = {
907
- emerald: {
908
- bg: "bg-emerald-500/10",
909
- border: "border-emerald-500/30",
910
- text: "text-emerald-400",
911
- glow: "shadow-emerald-500/20"
912
- },
913
- teal: {
914
- bg: "bg-teal-500/10",
915
- border: "border-teal-500/30",
916
- text: "text-teal-400",
917
- glow: "shadow-teal-500/20"
918
- },
919
- cyan: {
920
- bg: "bg-cyan-500/10",
921
- border: "border-cyan-500/30",
922
- text: "text-cyan-400",
923
- glow: "shadow-cyan-500/20"
924
- },
925
- violet: {
926
- bg: "bg-violet-500/10",
927
- border: "border-violet-500/30",
928
- text: "text-violet-400",
929
- glow: "shadow-violet-500/20"
930
- },
931
- pink: {
932
- bg: "bg-pink-500/10",
933
- border: "border-pink-500/30",
934
- text: "text-pink-400",
935
- glow: "shadow-pink-500/20"
936
- }
937
- };
938
- return /* @__PURE__ */ jsx("section", {
939
- className: "py-24 px-6",
940
- children: /* @__PURE__ */ jsxs("div", {
941
- className: "max-w-6xl mx-auto",
967
+ ];
968
+ return /* @__PURE__ */ jsxs("section", {
969
+ className: "relative border-t border-border",
970
+ children: [/* @__PURE__ */ jsxs("div", {
971
+ className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
942
972
  children: [
943
973
  /* @__PURE__ */ jsxs("div", {
944
- className: "text-center mb-16",
945
- children: [
946
- /* @__PURE__ */ jsxs("div", {
947
- className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-violet-500/10 border border-violet-500/20 text-xs text-violet-400 font-medium mb-6",
948
- children: [/* @__PURE__ */ jsx("svg", {
949
- className: "w-3.5 h-3.5",
950
- fill: "none",
951
- stroke: "currentColor",
952
- viewBox: "0 0 24 24",
953
- children: /* @__PURE__ */ jsx("path", {
954
- strokeLinecap: "round",
955
- strokeLinejoin: "round",
956
- strokeWidth: 2,
957
- d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
958
- })
959
- }), "Clean Architecture"]
960
- }),
961
- /* @__PURE__ */ jsx("h2", {
962
- className: "text-4xl md:text-5xl font-bold text-white mb-6",
963
- children: "Every Module, Same Structure"
964
- }),
965
- /* @__PURE__ */ jsx("p", {
966
- className: "text-xl text-white/60 max-w-2xl mx-auto",
967
- children: "Clear boundaries between layers. AGENTS.md in every package ensures AI and humans build consistently."
968
- })
969
- ]
974
+ className: "flex items-center gap-4 mb-4",
975
+ children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
976
+ className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
977
+ children: "Clean Architecture"
978
+ })]
970
979
  }),
971
- /* @__PURE__ */ jsx("div", {
972
- className: "max-w-3xl mx-auto space-y-3",
973
- children: layers.map((layer, index) => {
974
- const colors = colorMap[layer.color];
975
- return /* @__PURE__ */ jsxs("div", {
976
- className: "relative group",
977
- children: [index < layers.length - 1 && /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 -bottom-3 w-px h-3 bg-white/10" }), /* @__PURE__ */ jsx("div", {
978
- className: `relative rounded-xl border ${colors.border} ${colors.bg} p-5 hover:shadow-lg ${colors.glow} transition-all`,
979
- children: /* @__PURE__ */ jsxs("div", {
980
- className: "flex flex-col md:flex-row md:items-center gap-4",
981
- children: [
982
- /* @__PURE__ */ jsxs("div", {
983
- className: "md:w-48 shrink-0",
984
- children: [/* @__PURE__ */ jsx("h3", {
985
- className: `font-semibold ${colors.text}`,
986
- children: layer.name
987
- }), /* @__PURE__ */ jsx("p", {
988
- className: "text-white/40 text-sm",
989
- children: layer.desc
980
+ /* @__PURE__ */ jsx("h2", {
981
+ className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em] mb-4",
982
+ children: "Every Module, Same Structure"
983
+ }),
984
+ /* @__PURE__ */ jsx("p", {
985
+ className: "text-lg text-muted-foreground max-w-2xl",
986
+ children: "Clear boundaries between layers. AGENTS.md in every package ensures AI and humans build consistently."
987
+ })
988
+ ]
989
+ }), /* @__PURE__ */ jsx("div", {
990
+ className: "max-w-7xl mx-auto",
991
+ children: /* @__PURE__ */ jsxs("div", {
992
+ className: "grid lg:grid-cols-12",
993
+ children: [/* @__PURE__ */ jsxs("div", {
994
+ className: "lg:col-span-8 border-b lg:border-b-0 lg:border-r border-border p-8 lg:p-12",
995
+ children: [/* @__PURE__ */ jsx("div", {
996
+ className: "space-y-1",
997
+ children: layers.map((layer, index) => /* @__PURE__ */ jsxs("div", {
998
+ className: "group relative",
999
+ children: [/* @__PURE__ */ jsxs("div", {
1000
+ className: "flex items-stretch border border-border hover:border-primary/30 transition-colors",
1001
+ children: [
1002
+ /* @__PURE__ */ jsxs("div", {
1003
+ className: "w-40 shrink-0 p-4 bg-card border-r border-border flex flex-col justify-center",
1004
+ children: [/* @__PURE__ */ jsxs("span", {
1005
+ className: "text-xs text-muted-foreground tracking-[0.1em] uppercase mb-1",
1006
+ children: ["Layer ", String(index + 1).padStart(2, "0")]
1007
+ }), /* @__PURE__ */ jsx("span", {
1008
+ className: "font-medium text-foreground",
1009
+ children: layer.name
1010
+ })]
1011
+ }),
1012
+ /* @__PURE__ */ jsx("div", {
1013
+ className: "flex-1 p-4 flex items-center gap-3 flex-wrap",
1014
+ children: layer.items.map((item) => /* @__PURE__ */ jsxs("div", {
1015
+ className: "inline-flex items-center gap-2 px-3 py-1.5 bg-background border border-border",
1016
+ children: [/* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 bg-primary" }), /* @__PURE__ */ jsx("code", {
1017
+ className: "text-sm font-mono text-foreground/80",
1018
+ children: item
990
1019
  })]
991
- }),
992
- /* @__PURE__ */ jsx("div", {
993
- className: "flex flex-wrap gap-2 flex-1",
994
- children: layer.items.map((item) => /* @__PURE__ */ jsxs("div", {
995
- className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-black/30 border border-white/10",
996
- children: [/* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-white/30" }), /* @__PURE__ */ jsx("span", {
997
- className: "text-sm font-mono text-white/70",
998
- children: item
999
- })]
1000
- }, item))
1001
- }),
1002
- /* @__PURE__ */ jsxs("div", {
1003
- className: "shrink-0 flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-emerald-500/10 border border-emerald-500/20",
1020
+ }, item))
1021
+ }),
1022
+ /* @__PURE__ */ jsx("div", {
1023
+ className: "hidden md:flex w-28 shrink-0 items-center justify-center border-l border-border bg-primary/5",
1024
+ children: /* @__PURE__ */ jsxs("div", {
1025
+ className: "flex items-center gap-1.5 text-primary",
1004
1026
  children: [/* @__PURE__ */ jsx("svg", {
1005
- className: "w-3.5 h-3.5 text-emerald-400",
1027
+ className: "w-3.5 h-3.5",
1006
1028
  fill: "none",
1007
1029
  stroke: "currentColor",
1008
1030
  viewBox: "0 0 24 24",
@@ -1013,20 +1035,30 @@ function ArchitecturePreview() {
1013
1035
  d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
1014
1036
  })
1015
1037
  }), /* @__PURE__ */ jsx("span", {
1016
- className: "text-xs font-mono text-emerald-400",
1017
- children: "AGENTS.md"
1038
+ className: "text-xs font-mono",
1039
+ children: ".md"
1018
1040
  })]
1019
1041
  })
1020
- ]
1042
+ })
1043
+ ]
1044
+ }), index < layers.length - 1 && /* @__PURE__ */ jsx("div", {
1045
+ className: "flex justify-center py-1",
1046
+ children: /* @__PURE__ */ jsx("svg", {
1047
+ className: "w-4 h-4 text-muted-foreground",
1048
+ fill: "none",
1049
+ stroke: "currentColor",
1050
+ viewBox: "0 0 24 24",
1051
+ children: /* @__PURE__ */ jsx("path", {
1052
+ strokeLinecap: "round",
1053
+ strokeLinejoin: "round",
1054
+ strokeWidth: 1.5,
1055
+ d: "M19 14l-7 7m0 0l-7-7m7 7V3"
1056
+ })
1021
1057
  })
1022
1058
  })]
1023
- }, layer.name);
1024
- })
1025
- }),
1026
- /* @__PURE__ */ jsx("div", {
1027
- className: "mt-8 flex justify-center",
1028
- children: /* @__PURE__ */ jsxs("div", {
1029
- className: "flex items-center gap-2 text-sm text-white/40",
1059
+ }, layer.name))
1060
+ }), /* @__PURE__ */ jsxs("div", {
1061
+ className: "mt-8 flex items-center gap-2 text-sm text-muted-foreground",
1030
1062
  children: [/* @__PURE__ */ jsx("svg", {
1031
1063
  className: "w-4 h-4",
1032
1064
  fill: "none",
@@ -1035,14 +1067,41 @@ function ArchitecturePreview() {
1035
1067
  children: /* @__PURE__ */ jsx("path", {
1036
1068
  strokeLinecap: "round",
1037
1069
  strokeLinejoin: "round",
1038
- strokeWidth: 2,
1070
+ strokeWidth: 1.5,
1039
1071
  d: "M19 14l-7 7m0 0l-7-7m7 7V3"
1040
1072
  })
1041
1073
  }), /* @__PURE__ */ jsx("span", { children: "Dependencies flow down only" })]
1042
- })
1043
- })
1044
- ]
1045
- })
1074
+ })]
1075
+ }), /* @__PURE__ */ jsxs("div", {
1076
+ className: "lg:col-span-4 p-8 lg:p-12 bg-card",
1077
+ children: [/* @__PURE__ */ jsxs("div", {
1078
+ className: "flex items-center gap-3 mb-8",
1079
+ children: [/* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-primary" }), /* @__PURE__ */ jsx("span", {
1080
+ className: "text-xs text-muted-foreground tracking-[0.2em] uppercase",
1081
+ children: "Layer Details"
1082
+ })]
1083
+ }), /* @__PURE__ */ jsx("div", {
1084
+ className: "space-y-6",
1085
+ children: layers.map((layer, index) => /* @__PURE__ */ jsx("div", {
1086
+ className: "group",
1087
+ children: /* @__PURE__ */ jsxs("div", {
1088
+ className: "flex items-start gap-4",
1089
+ children: [/* @__PURE__ */ jsx("div", {
1090
+ className: "w-6 h-6 flex items-center justify-center border border-border text-xs font-mono text-muted-foreground shrink-0",
1091
+ children: index + 1
1092
+ }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
1093
+ className: "text-foreground font-medium mb-1 group-hover:text-primary transition-colors",
1094
+ children: layer.name
1095
+ }), /* @__PURE__ */ jsx("div", {
1096
+ className: "text-muted-foreground text-sm",
1097
+ children: layer.desc
1098
+ })] })]
1099
+ })
1100
+ }, layer.name))
1101
+ })]
1102
+ })]
1103
+ })
1104
+ })]
1046
1105
  });
1047
1106
  }
1048
1107
 
@@ -1130,67 +1189,237 @@ function CliDemo() {
1130
1189
  };
1131
1190
  }, [activeCommand]);
1132
1191
  return /* @__PURE__ */ jsxs("section", {
1133
- className: "py-24 px-6 relative",
1134
- children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-emerald-500/5 to-transparent pointer-events-none" }), /* @__PURE__ */ jsxs("div", {
1135
- className: "max-w-4xl mx-auto relative",
1192
+ className: "relative border-t border-border",
1193
+ children: [/* @__PURE__ */ jsxs("div", {
1194
+ className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
1136
1195
  children: [
1137
1196
  /* @__PURE__ */ jsxs("div", {
1138
- className: "text-center mb-12",
1139
- children: [/* @__PURE__ */ jsx("h2", {
1140
- className: "text-4xl md:text-5xl font-bold text-white mb-6",
1141
- children: "Powerful CLI"
1142
- }), /* @__PURE__ */ jsx("p", {
1143
- className: "text-xl text-white/60",
1144
- children: "Generate, add, search, and validate modules from the command line."
1197
+ className: "flex items-center gap-4 mb-4",
1198
+ children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
1199
+ className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
1200
+ children: "Developer Experience"
1145
1201
  })]
1146
1202
  }),
1147
- /* @__PURE__ */ jsxs("div", {
1148
- className: "rounded-2xl border border-white/10 bg-black/80 backdrop-blur-sm overflow-hidden shadow-2xl",
1149
- children: [/* @__PURE__ */ jsxs("div", {
1150
- className: "flex items-center gap-2 px-4 py-3 bg-white/5 border-b border-white/10",
1151
- children: [/* @__PURE__ */ jsxs("div", {
1152
- className: "flex gap-1.5",
1153
- children: [
1154
- /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-red-500/80" }),
1155
- /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-yellow-500/80" }),
1156
- /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-green-500/80" })
1157
- ]
1158
- }), /* @__PURE__ */ jsx("span", {
1159
- className: "text-white/40 text-sm font-mono ml-2",
1160
- children: "terminal"
1161
- })]
1162
- }), /* @__PURE__ */ jsxs("div", {
1163
- className: "p-6 font-mono text-sm min-h-[320px]",
1203
+ /* @__PURE__ */ jsx("h2", {
1204
+ className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em] mb-4",
1205
+ children: "Powerful CLI"
1206
+ }),
1207
+ /* @__PURE__ */ jsx("p", {
1208
+ className: "text-lg text-muted-foreground",
1209
+ children: "Generate, add, search, and validate modules from the command line."
1210
+ })
1211
+ ]
1212
+ }), /* @__PURE__ */ jsx("div", {
1213
+ className: "max-w-7xl mx-auto",
1214
+ children: /* @__PURE__ */ jsxs("div", {
1215
+ className: "grid lg:grid-cols-12",
1216
+ children: [/* @__PURE__ */ jsx("div", {
1217
+ className: "lg:col-span-8 border-b lg:border-b-0 lg:border-r border-border",
1218
+ children: /* @__PURE__ */ jsxs("div", {
1219
+ className: "p-8 lg:p-12",
1164
1220
  children: [/* @__PURE__ */ jsxs("div", {
1165
- className: "flex items-center gap-2 mb-4",
1166
- children: [
1167
- /* @__PURE__ */ jsx("span", {
1168
- className: "text-emerald-400",
1169
- children: "$"
1170
- }),
1171
- /* @__PURE__ */ jsx("span", {
1172
- className: "text-white",
1173
- children: typedInput
1174
- }),
1175
- isTyping && /* @__PURE__ */ jsx("span", { className: "w-2 h-5 bg-white/80 animate-pulse" })
1176
- ]
1221
+ className: "border border-border bg-background",
1222
+ children: [/* @__PURE__ */ jsxs("div", {
1223
+ className: "flex items-center justify-between px-4 py-3 border-b border-border bg-card",
1224
+ children: [
1225
+ /* @__PURE__ */ jsxs("div", {
1226
+ className: "flex items-center gap-2",
1227
+ children: [
1228
+ /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-[hsl(var(--status-error)/0.8)]" }),
1229
+ /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-[hsl(var(--status-warning)/0.8)]" }),
1230
+ /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-[hsl(var(--status-success)/0.8)]" })
1231
+ ]
1232
+ }),
1233
+ /* @__PURE__ */ jsx("span", {
1234
+ className: "text-xs text-muted-foreground font-mono",
1235
+ children: "terminal"
1236
+ }),
1237
+ /* @__PURE__ */ jsx("div", { className: "w-16" })
1238
+ ]
1239
+ }), /* @__PURE__ */ jsxs("div", {
1240
+ className: "p-6 font-mono text-sm min-h-[320px]",
1241
+ children: [/* @__PURE__ */ jsxs("div", {
1242
+ className: "flex items-center gap-2 mb-4",
1243
+ children: [
1244
+ /* @__PURE__ */ jsx("span", {
1245
+ className: "text-primary",
1246
+ children: "$"
1247
+ }),
1248
+ /* @__PURE__ */ jsx("span", {
1249
+ className: "text-foreground",
1250
+ children: typedInput
1251
+ }),
1252
+ isTyping && /* @__PURE__ */ jsx("span", { className: "w-2 h-5 bg-primary animate-pulse" })
1253
+ ]
1254
+ }), /* @__PURE__ */ jsx("div", {
1255
+ className: "space-y-0.5",
1256
+ children: displayedLines.map((line, index) => /* @__PURE__ */ jsx("div", {
1257
+ className: `${line?.startsWith("✓") ? "text-[hsl(var(--status-success))]" : line?.includes("!") ? "text-foreground" : "text-muted-foreground"}`,
1258
+ children: line || "\xA0"
1259
+ }, index))
1260
+ })]
1261
+ })]
1177
1262
  }), /* @__PURE__ */ jsx("div", {
1178
- className: "space-y-0.5",
1179
- children: displayedLines.map((line, index) => /* @__PURE__ */ jsx("div", {
1180
- className: `${line?.startsWith("✓") ? "text-emerald-400" : line?.includes("!") ? "text-white" : "text-white/60"}`,
1181
- children: line || "\xA0"
1263
+ className: "flex justify-center gap-2 mt-6",
1264
+ children: commands.map((_, index) => /* @__PURE__ */ jsx("button", {
1265
+ onClick: () => setActiveCommand(index),
1266
+ className: `h-1.5 transition-all ${index === activeCommand ? "bg-primary w-8" : "bg-muted hover:bg-muted-foreground/30 w-1.5"}`
1182
1267
  }, index))
1183
1268
  })]
1269
+ })
1270
+ }), /* @__PURE__ */ jsxs("div", {
1271
+ className: "lg:col-span-4 p-8 lg:p-12 bg-card",
1272
+ children: [/* @__PURE__ */ jsxs("div", {
1273
+ className: "flex items-center gap-3 mb-8",
1274
+ children: [/* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-primary" }), /* @__PURE__ */ jsx("span", {
1275
+ className: "text-xs text-muted-foreground tracking-[0.2em] uppercase",
1276
+ children: "Commands"
1277
+ })]
1278
+ }), /* @__PURE__ */ jsx("div", {
1279
+ className: "space-y-4",
1280
+ children: [
1281
+ {
1282
+ cmd: "generate",
1283
+ desc: "Scaffold new modules"
1284
+ },
1285
+ {
1286
+ cmd: "add",
1287
+ desc: "Install from marketplace"
1288
+ },
1289
+ {
1290
+ cmd: "doctor",
1291
+ desc: "Validate project setup"
1292
+ },
1293
+ {
1294
+ cmd: "deploy",
1295
+ desc: "Ship to production"
1296
+ },
1297
+ {
1298
+ cmd: "publish",
1299
+ desc: "Publish to marketplace"
1300
+ }
1301
+ ].map((item, index) => /* @__PURE__ */ jsxs("div", {
1302
+ className: "group flex items-start gap-4",
1303
+ children: [/* @__PURE__ */ jsx("div", {
1304
+ className: "w-6 h-6 flex items-center justify-center border border-border text-xs font-mono text-muted-foreground shrink-0",
1305
+ children: index + 1
1306
+ }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("code", {
1307
+ className: "text-foreground font-medium group-hover:text-primary transition-colors",
1308
+ children: ["kuckit ", item.cmd]
1309
+ }), /* @__PURE__ */ jsx("div", {
1310
+ className: "text-muted-foreground text-sm mt-0.5",
1311
+ children: item.desc
1312
+ })] })]
1313
+ }, item.cmd))
1314
+ })]
1315
+ })]
1316
+ })
1317
+ })]
1318
+ });
1319
+ }
1320
+
1321
+ //#endregion
1322
+ //#region src/client/components/pricing.tsx
1323
+ const product = {
1324
+ name: "Kuckit",
1325
+ price: "249",
1326
+ description: "Stop debugging. Start launching. Everything you need to escape the vibe coding trap.",
1327
+ features: [
1328
+ "Production-ready architecture",
1329
+ "Auth, payments, dashboards included",
1330
+ "Code you can actually understand",
1331
+ "Deploy in hours, not weeks",
1332
+ "Support when you get stuck"
1333
+ ]
1334
+ };
1335
+ function Pricing() {
1336
+ return /* @__PURE__ */ jsxs("section", {
1337
+ id: "pricing",
1338
+ className: "relative border-t border-border scroll-mt-16",
1339
+ children: [/* @__PURE__ */ jsxs("div", {
1340
+ className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
1341
+ children: [
1342
+ /* @__PURE__ */ jsxs("div", {
1343
+ className: "flex items-center gap-4 mb-4",
1344
+ children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
1345
+ className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
1346
+ children: "One-time investment"
1184
1347
  })]
1185
1348
  }),
1186
- /* @__PURE__ */ jsx("div", {
1187
- className: "flex justify-center gap-2 mt-6",
1188
- children: commands.map((_, index) => /* @__PURE__ */ jsx("button", {
1189
- onClick: () => setActiveCommand(index),
1190
- className: `w-2 h-2 rounded-full transition-all ${index === activeCommand ? "bg-emerald-400 w-6" : "bg-white/20 hover:bg-white/40"}`
1191
- }, index))
1349
+ /* @__PURE__ */ jsx("h2", {
1350
+ className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em]",
1351
+ children: "Skip months of debugging"
1352
+ }),
1353
+ /* @__PURE__ */ jsx("p", {
1354
+ className: "mt-4 text-lg text-muted-foreground max-w-2xl",
1355
+ children: "Pay once. Ship forever. No subscriptions, no surprises."
1192
1356
  })
1193
1357
  ]
1358
+ }), /* @__PURE__ */ jsx("div", {
1359
+ className: "max-w-7xl mx-auto px-8 py-16",
1360
+ children: /* @__PURE__ */ jsx("div", {
1361
+ className: "flex justify-center",
1362
+ children: /* @__PURE__ */ jsxs(GlareCard, {
1363
+ className: "flex flex-col p-8 min-h-[520px]",
1364
+ children: [
1365
+ /* @__PURE__ */ jsxs("div", {
1366
+ className: "flex items-start justify-between mb-8",
1367
+ children: [/* @__PURE__ */ jsxs("div", {
1368
+ className: "space-y-3",
1369
+ children: [/* @__PURE__ */ jsx("div", {
1370
+ className: "inline-flex items-center justify-center size-12 rounded-sm bg-primary/10 border border-primary/20",
1371
+ children: /* @__PURE__ */ jsx(Zap, { className: "size-6 text-primary" })
1372
+ }), /* @__PURE__ */ jsx("h3", {
1373
+ className: "text-2xl font-normal text-foreground tracking-tight",
1374
+ children: product.name
1375
+ })]
1376
+ }), /* @__PURE__ */ jsx("span", {
1377
+ className: "px-3 py-1.5 text-xs uppercase tracking-[0.15em] bg-primary/10 text-primary border border-primary/20",
1378
+ children: "Popular"
1379
+ })]
1380
+ }),
1381
+ /* @__PURE__ */ jsxs("div", {
1382
+ className: "mb-8",
1383
+ children: [/* @__PURE__ */ jsxs("div", {
1384
+ className: "flex items-baseline gap-1",
1385
+ children: [/* @__PURE__ */ jsx("span", {
1386
+ className: "text-sm text-muted-foreground",
1387
+ children: "$"
1388
+ }), /* @__PURE__ */ jsx("span", {
1389
+ className: "text-6xl font-light text-foreground tabular-nums tracking-tighter",
1390
+ children: product.price
1391
+ })]
1392
+ }), /* @__PURE__ */ jsx("p", {
1393
+ className: "text-muted-foreground text-sm mt-3 tracking-wide",
1394
+ children: "one-time payment"
1395
+ })]
1396
+ }),
1397
+ /* @__PURE__ */ jsx("div", { className: "h-px bg-gradient-to-r from-transparent via-border to-transparent mb-8" }),
1398
+ /* @__PURE__ */ jsx("p", {
1399
+ className: "text-muted-foreground text-sm leading-relaxed mb-8",
1400
+ children: product.description
1401
+ }),
1402
+ /* @__PURE__ */ jsx("div", {
1403
+ className: "space-y-3 mb-10 flex-grow",
1404
+ children: product.features.map((feature) => /* @__PURE__ */ jsxs("div", {
1405
+ className: "flex items-center gap-3",
1406
+ children: [/* @__PURE__ */ jsx("div", {
1407
+ className: "w-4 h-4 flex items-center justify-center",
1408
+ children: /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-primary" })
1409
+ }), /* @__PURE__ */ jsx("span", {
1410
+ className: "text-sm text-foreground",
1411
+ children: feature
1412
+ })]
1413
+ }, feature))
1414
+ }),
1415
+ /* @__PURE__ */ jsx("a", {
1416
+ href: "/billing",
1417
+ className: "w-full py-4 text-sm font-medium tracking-wide transition-all duration-300 flex items-center justify-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90",
1418
+ children: "Get Started"
1419
+ })
1420
+ ]
1421
+ })
1422
+ })
1194
1423
  })]
1195
1424
  });
1196
1425
  }
@@ -1251,112 +1480,113 @@ function FAQ() {
1251
1480
  const [expandedId, setExpandedId] = useState(null);
1252
1481
  const sellerFaqs = faqItems.filter((item) => item.category === "seller");
1253
1482
  const generalFaqs = faqItems.filter((item) => item.category === "general");
1254
- return /* @__PURE__ */ jsx("section", {
1255
- className: "relative py-20 px-6",
1256
- children: /* @__PURE__ */ jsxs("div", {
1257
- className: "max-w-4xl mx-auto",
1483
+ return /* @__PURE__ */ jsxs("section", {
1484
+ className: "relative border-t border-border",
1485
+ children: [/* @__PURE__ */ jsxs("div", {
1486
+ className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
1258
1487
  children: [
1259
1488
  /* @__PURE__ */ jsxs("div", {
1260
- className: "text-center mb-16",
1261
- children: [/* @__PURE__ */ jsx("h2", {
1262
- className: "text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400 bg-clip-text text-transparent",
1263
- children: "Frequently Asked Questions"
1264
- }), /* @__PURE__ */ jsx("p", {
1265
- className: "text-white/60 text-lg",
1266
- children: "Everything you need to know about developing, selling, and partnering with Kuckit"
1489
+ className: "flex items-center gap-4 mb-4",
1490
+ children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
1491
+ className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
1492
+ children: "FAQ"
1267
1493
  })]
1268
1494
  }),
1269
- /* @__PURE__ */ jsxs("div", {
1270
- className: "mb-16",
1271
- children: [/* @__PURE__ */ jsxs("h3", {
1272
- className: "text-2xl font-bold text-emerald-400 mb-8 flex items-center gap-2",
1273
- children: [/* @__PURE__ */ jsx("div", { className: "w-1 h-8 bg-gradient-to-b from-emerald-400 to-teal-500 rounded-full" }), "For Module Sellers"]
1495
+ /* @__PURE__ */ jsx("h2", {
1496
+ className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em] mb-4",
1497
+ children: "Frequently Asked Questions"
1498
+ }),
1499
+ /* @__PURE__ */ jsx("p", {
1500
+ className: "text-lg text-muted-foreground max-w-2xl",
1501
+ children: "Everything you need to know about developing, selling, and partnering with Kuckit"
1502
+ })
1503
+ ]
1504
+ }), /* @__PURE__ */ jsx("div", {
1505
+ className: "max-w-7xl mx-auto",
1506
+ children: /* @__PURE__ */ jsxs("div", {
1507
+ className: "grid lg:grid-cols-2",
1508
+ children: [/* @__PURE__ */ jsxs("div", {
1509
+ className: "border-b lg:border-b-0 lg:border-r border-border",
1510
+ children: [/* @__PURE__ */ jsx("div", {
1511
+ className: "px-8 py-6 border-b border-border bg-card",
1512
+ children: /* @__PURE__ */ jsxs("div", {
1513
+ className: "flex items-center gap-3",
1514
+ children: [/* @__PURE__ */ jsx("span", {
1515
+ className: "text-xs text-muted-foreground tracking-[0.15em] uppercase",
1516
+ children: "01"
1517
+ }), /* @__PURE__ */ jsx("span", {
1518
+ className: "font-medium text-foreground",
1519
+ children: "For Module Sellers"
1520
+ })]
1521
+ })
1274
1522
  }), /* @__PURE__ */ jsx("div", {
1275
- className: "space-y-3",
1276
- children: sellerFaqs.map((item) => /* @__PURE__ */ jsx(FAQItem, {
1523
+ className: "divide-y divide-border",
1524
+ children: sellerFaqs.map((item, index) => /* @__PURE__ */ jsx(FAQItemComponent, {
1277
1525
  item,
1526
+ index,
1278
1527
  isExpanded: expandedId === item.id,
1279
1528
  onToggle: () => setExpandedId(expandedId === item.id ? null : item.id)
1280
1529
  }, item.id))
1281
1530
  })]
1282
- }),
1283
- /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h3", {
1284
- className: "text-2xl font-bold text-teal-400 mb-8 flex items-center gap-2",
1285
- children: [/* @__PURE__ */ jsx("div", { className: "w-1 h-8 bg-gradient-to-b from-teal-400 to-cyan-500 rounded-full" }), "General"]
1531
+ }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
1532
+ className: "px-8 py-6 border-b border-border bg-card",
1533
+ children: /* @__PURE__ */ jsxs("div", {
1534
+ className: "flex items-center gap-3",
1535
+ children: [/* @__PURE__ */ jsx("span", {
1536
+ className: "text-xs text-muted-foreground tracking-[0.15em] uppercase",
1537
+ children: "02"
1538
+ }), /* @__PURE__ */ jsx("span", {
1539
+ className: "font-medium text-foreground",
1540
+ children: "General"
1541
+ })]
1542
+ })
1286
1543
  }), /* @__PURE__ */ jsx("div", {
1287
- className: "space-y-3",
1288
- children: generalFaqs.map((item) => /* @__PURE__ */ jsx(FAQItem, {
1544
+ className: "divide-y divide-border",
1545
+ children: generalFaqs.map((item, index) => /* @__PURE__ */ jsx(FAQItemComponent, {
1289
1546
  item,
1547
+ index,
1290
1548
  isExpanded: expandedId === item.id,
1291
1549
  onToggle: () => setExpandedId(expandedId === item.id ? null : item.id)
1292
1550
  }, item.id))
1293
- })] })
1294
- ]
1295
- })
1551
+ })] })]
1552
+ })
1553
+ })]
1296
1554
  });
1297
1555
  }
1298
- function FAQItem({ item, isExpanded, onToggle }) {
1299
- return /* @__PURE__ */ jsxs("button", {
1556
+ function FAQItemComponent({ item, index, isExpanded, onToggle }) {
1557
+ return /* @__PURE__ */ jsx("button", {
1300
1558
  onClick: onToggle,
1301
- className: "w-full text-left bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg p-5 transition-all duration-200",
1302
- children: [/* @__PURE__ */ jsxs("div", {
1303
- className: "flex items-start justify-between gap-4",
1559
+ className: "w-full text-left p-6 hover:bg-card/50 transition-colors",
1560
+ children: /* @__PURE__ */ jsxs("div", {
1561
+ className: "flex items-start gap-4",
1304
1562
  children: [/* @__PURE__ */ jsx("span", {
1305
- className: "text-base md:text-lg font-semibold text-white pr-4",
1306
- children: item.question
1307
- }), /* @__PURE__ */ jsx(ChevronDown, {
1308
- size: 20,
1309
- className: `flex-shrink-0 text-emerald-400 transition-transform duration-300 ${isExpanded ? "rotate-180" : ""}`
1563
+ className: "text-xs text-muted-foreground font-mono shrink-0 pt-1",
1564
+ children: String(index + 1).padStart(2, "0")
1565
+ }), /* @__PURE__ */ jsxs("div", {
1566
+ className: "flex-1",
1567
+ children: [/* @__PURE__ */ jsxs("div", {
1568
+ className: "flex items-start justify-between gap-4",
1569
+ children: [/* @__PURE__ */ jsx("span", {
1570
+ className: "text-foreground font-medium leading-relaxed",
1571
+ children: item.question
1572
+ }), /* @__PURE__ */ jsx("svg", {
1573
+ className: `w-4 h-4 text-muted-foreground shrink-0 mt-1 transition-transform duration-200 ${isExpanded ? "rotate-45" : ""}`,
1574
+ fill: "none",
1575
+ stroke: "currentColor",
1576
+ viewBox: "0 0 24 24",
1577
+ children: /* @__PURE__ */ jsx("path", {
1578
+ strokeLinecap: "round",
1579
+ strokeLinejoin: "round",
1580
+ strokeWidth: 2,
1581
+ d: "M12 4v16m8-8H4"
1582
+ })
1583
+ })]
1584
+ }), isExpanded && /* @__PURE__ */ jsx("p", {
1585
+ className: "text-muted-foreground text-sm leading-relaxed mt-4 pr-8",
1586
+ children: item.answer
1587
+ })]
1310
1588
  })]
1311
- }), isExpanded && /* @__PURE__ */ jsx("p", {
1312
- className: "text-white/70 mt-4 text-sm md:text-base leading-relaxed",
1313
- children: item.answer
1314
- })]
1315
- });
1316
- }
1317
-
1318
- //#endregion
1319
- //#region src/client/components/WaitlistForm.tsx
1320
- function WaitlistForm({ source = "landing", className }) {
1321
- const rpc = useRpc();
1322
- const [email, setEmail] = useState("");
1323
- const [state, setState] = useState("idle");
1324
- const handleSubmit = async (e) => {
1325
- e.preventDefault();
1326
- setState("loading");
1327
- try {
1328
- const result = await rpc.waitlist.join({
1329
- email,
1330
- source
1331
- });
1332
- if (result.success) {
1333
- toast.success(result.message);
1334
- setEmail("");
1335
- } else toast.error(result.message || "Something went wrong. Please try again.");
1336
- } catch (error) {
1337
- console.error("Waitlist submission error:", error);
1338
- toast.error("Network error. Please try again.");
1339
- } finally {
1340
- setState("idle");
1341
- }
1342
- };
1343
- return /* @__PURE__ */ jsxs("form", {
1344
- onSubmit: handleSubmit,
1345
- className: `flex flex-col sm:flex-row gap-3 ${className}`,
1346
- children: [/* @__PURE__ */ jsx("input", {
1347
- type: "email",
1348
- value: email,
1349
- onChange: (e) => setEmail(e.target.value),
1350
- placeholder: "Enter your email",
1351
- required: true,
1352
- disabled: state === "loading",
1353
- className: "flex-1 px-5 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder:text-white/40 focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all disabled:opacity-50"
1354
- }), /* @__PURE__ */ jsx("button", {
1355
- type: "submit",
1356
- disabled: state === "loading",
1357
- className: "px-6 py-3 rounded-xl bg-white/10 border border-white/20 font-medium text-white hover:bg-white/15 transition-colors shrink-0 disabled:opacity-50 disabled:cursor-not-allowed",
1358
- children: state === "loading" ? "Joining..." : "Join Waitlist"
1359
- })]
1589
+ })
1360
1590
  });
1361
1591
  }
1362
1592
 
@@ -1364,97 +1594,79 @@ function WaitlistForm({ source = "landing", className }) {
1364
1594
  //#region src/client/components/cta-section.tsx
1365
1595
  function CtaSection() {
1366
1596
  return /* @__PURE__ */ jsxs("section", {
1367
- className: "py-32 px-6 relative overflow-hidden",
1368
- children: [/* @__PURE__ */ jsx("div", {
1369
- className: "absolute inset-0 pointer-events-none",
1370
- children: /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-emerald-500/20 via-teal-500/10 to-transparent rounded-full blur-3xl" })
1371
- }), /* @__PURE__ */ jsxs("div", {
1372
- className: "max-w-4xl mx-auto relative",
1597
+ className: "relative border-t border-border",
1598
+ children: [/* @__PURE__ */ jsxs("div", {
1599
+ className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
1373
1600
  children: [/* @__PURE__ */ jsxs("div", {
1374
- className: "relative rounded-3xl border border-white/10 bg-white/[0.02] backdrop-blur-sm p-12 md:p-16 text-center",
1375
- children: [
1376
- /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 w-24 h-24 border-l-2 border-t-2 border-emerald-500/30 rounded-tl-3xl" }),
1377
- /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 w-24 h-24 border-r-2 border-b-2 border-teal-500/30 rounded-br-3xl" }),
1378
- /* @__PURE__ */ jsx("h2", {
1379
- className: "text-4xl md:text-5xl font-bold text-white mb-6",
1380
- children: "Ready to Build?"
1381
- }),
1382
- /* @__PURE__ */ jsx("p", {
1383
- className: "text-xl text-white/60 mb-10 max-w-xl mx-auto",
1384
- children: "Join thousands of developers building modular TypeScript applications."
1385
- }),
1386
- /* @__PURE__ */ jsxs("div", {
1387
- className: "flex flex-col sm:flex-row items-center justify-center gap-4 mb-12",
1388
- children: [/* @__PURE__ */ jsxs("a", {
1389
- href: "/docs",
1390
- className: "group relative px-8 py-4 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-xl font-semibold text-black transition-all hover:scale-105 hover:shadow-lg hover:shadow-emerald-500/25",
1391
- children: ["Read the Docs", /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-xl bg-gradient-to-r from-emerald-400 to-teal-400 opacity-0 group-hover:opacity-100 transition-opacity blur-xl -z-10" })]
1392
- }), /* @__PURE__ */ jsxs("a", {
1393
- href: "https://github.com/kuckit",
1394
- className: "px-8 py-4 rounded-xl font-semibold text-white border border-white/20 bg-white/5 hover:bg-white/10 hover:border-white/30 transition-all flex items-center gap-2",
1395
- children: [/* @__PURE__ */ jsx("svg", {
1396
- className: "w-5 h-5",
1397
- fill: "currentColor",
1398
- viewBox: "0 0 24 24",
1399
- children: /* @__PURE__ */ jsx("path", {
1400
- fillRule: "evenodd",
1401
- clipRule: "evenodd",
1402
- d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
1403
- })
1404
- }), "View on GitHub"]
1405
- })]
1406
- }),
1407
- /* @__PURE__ */ jsxs("div", {
1408
- className: "flex items-center gap-4 mb-10",
1409
- children: [
1410
- /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-white/10" }),
1411
- /* @__PURE__ */ jsx("span", {
1412
- className: "text-white/40 text-sm",
1413
- children: "or join the marketplace waitlist"
1414
- }),
1415
- /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-white/10" })
1416
- ]
1417
- }),
1418
- /* @__PURE__ */ jsx(WaitlistForm, {
1419
- source: "cta-section",
1420
- className: "max-w-md mx-auto"
1421
- })
1422
- ]
1423
- }), /* @__PURE__ */ jsxs("div", {
1424
- className: "grid grid-cols-3 gap-6 mt-12",
1425
- children: [
1426
- /* @__PURE__ */ jsxs("div", {
1427
- className: "text-center",
1428
- children: [/* @__PURE__ */ jsx("div", {
1429
- className: "text-3xl md:text-4xl font-bold text-white mb-1",
1430
- children: "100%"
1431
- }), /* @__PURE__ */ jsx("div", {
1432
- className: "text-white/50 text-sm",
1433
- children: "TypeScript"
1434
- })]
1435
- }),
1436
- /* @__PURE__ */ jsxs("div", {
1437
- className: "text-center",
1438
- children: [/* @__PURE__ */ jsx("div", {
1439
- className: "text-3xl md:text-4xl font-bold text-white mb-1",
1440
- children: "5 min"
1441
- }), /* @__PURE__ */ jsx("div", {
1442
- className: "text-white/50 text-sm",
1443
- children: "To first module"
1444
- })]
1445
- }),
1446
- /* @__PURE__ */ jsxs("div", {
1447
- className: "text-center",
1448
- children: [/* @__PURE__ */ jsx("div", {
1449
- className: "text-3xl md:text-4xl font-bold text-white mb-1",
1450
- children: "∞"
1451
- }), /* @__PURE__ */ jsx("div", {
1452
- className: "text-white/50 text-sm",
1453
- children: "Modules possible"
1454
- })]
1455
- })
1456
- ]
1601
+ className: "flex items-center gap-4 mb-4",
1602
+ children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
1603
+ className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
1604
+ children: "The loop ends here"
1605
+ })]
1606
+ }), /* @__PURE__ */ jsx("h2", {
1607
+ className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em]",
1608
+ children: "Ready to ship?"
1457
1609
  })]
1610
+ }), /* @__PURE__ */ jsx("div", {
1611
+ className: "max-w-7xl mx-auto",
1612
+ children: /* @__PURE__ */ jsx("div", {
1613
+ className: "border-b border-border",
1614
+ children: /* @__PURE__ */ jsxs("div", {
1615
+ className: "p-8 md:p-12",
1616
+ children: [
1617
+ /* @__PURE__ */ jsx("p", {
1618
+ className: "text-lg text-muted-foreground mb-10 max-w-lg leading-relaxed",
1619
+ children: "You've built something. Now let's make it launchable. Get the foundation you need to go from stuck to shipped."
1620
+ }),
1621
+ /* @__PURE__ */ jsxs("div", {
1622
+ className: "flex flex-col sm:flex-row items-start gap-4 mb-12",
1623
+ children: [/* @__PURE__ */ jsxs("a", {
1624
+ href: "/docs/getting-started",
1625
+ className: "group inline-flex items-center gap-3 px-6 py-4 bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-all",
1626
+ children: [/* @__PURE__ */ jsx("span", { children: "Get Unstuck" }), /* @__PURE__ */ jsx("svg", {
1627
+ className: "w-4 h-4 group-hover:translate-x-1 transition-transform",
1628
+ fill: "none",
1629
+ stroke: "currentColor",
1630
+ viewBox: "0 0 24 24",
1631
+ children: /* @__PURE__ */ jsx("path", {
1632
+ strokeLinecap: "round",
1633
+ strokeLinejoin: "round",
1634
+ strokeWidth: 2,
1635
+ d: "M17 8l4 4m0 0l-4 4m4-4H3"
1636
+ })
1637
+ })]
1638
+ }), /* @__PURE__ */ jsx("a", {
1639
+ href: "/docs",
1640
+ className: "inline-flex items-center gap-3 px-6 py-4 border border-border text-foreground hover:border-primary/50 hover:bg-card transition-all",
1641
+ children: /* @__PURE__ */ jsx("span", { children: "See How It Works" })
1642
+ })]
1643
+ }),
1644
+ /* @__PURE__ */ jsx("div", {
1645
+ className: "grid grid-cols-3 gap-6 pt-8 border-t border-border max-w-xl",
1646
+ children: [
1647
+ {
1648
+ value: "Hours",
1649
+ label: "To launch"
1650
+ },
1651
+ {
1652
+ value: "0",
1653
+ label: "AI loops"
1654
+ },
1655
+ {
1656
+ value: "100%",
1657
+ label: "Yours to own"
1658
+ }
1659
+ ].map((stat) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
1660
+ className: "text-2xl md:text-3xl font-light text-foreground tracking-tight mb-1",
1661
+ children: stat.value
1662
+ }), /* @__PURE__ */ jsx("div", {
1663
+ className: "text-xs text-muted-foreground tracking-wide",
1664
+ children: stat.label
1665
+ })] }, stat.label))
1666
+ })
1667
+ ]
1668
+ })
1669
+ })
1458
1670
  })]
1459
1671
  });
1460
1672
  }
@@ -1463,61 +1675,200 @@ function CtaSection() {
1463
1675
  //#region src/client/components/LandingPage.tsx
1464
1676
  function LandingPage() {
1465
1677
  return /* @__PURE__ */ jsxs("div", {
1466
- className: "min-h-screen bg-[#0a0a0b] text-white overflow-x-hidden",
1678
+ className: "min-h-screen bg-background text-foreground overflow-x-hidden",
1467
1679
  children: [
1468
- /* @__PURE__ */ jsxs("div", {
1680
+ /* @__PURE__ */ jsx("div", {
1469
1681
  className: "fixed inset-0 pointer-events-none",
1470
- children: [/* @__PURE__ */ jsx("div", { className: "absolute top-0 left-1/4 w-[600px] h-[600px] bg-emerald-500/10 rounded-full blur-[120px] animate-pulse" }), /* @__PURE__ */ jsx("div", { className: "absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-teal-500/8 rounded-full blur-[100px] animate-pulse delay-1000" })]
1682
+ style: {
1683
+ backgroundImage: `
1684
+ linear-gradient(to right, hsl(var(--border) / 0.15) 1px, transparent 1px),
1685
+ linear-gradient(to bottom, hsl(var(--border) / 0.15) 1px, transparent 1px)
1686
+ `,
1687
+ backgroundSize: "60px 60px"
1688
+ }
1689
+ }),
1690
+ /* @__PURE__ */ jsx("div", {
1691
+ className: "fixed top-0 right-0 w-[1px] h-[200vh] bg-gradient-to-b from-primary via-primary/50 to-transparent pointer-events-none origin-top-right",
1692
+ style: { transform: "rotate(-35deg) translateX(300px)" }
1693
+ }),
1694
+ /* @__PURE__ */ jsx("div", {
1695
+ className: "fixed top-0 right-0 w-[500px] h-[500px] pointer-events-none",
1696
+ children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-primary/8 blur-[100px] rounded-full -translate-y-1/2 translate-x-1/2" })
1471
1697
  }),
1472
1698
  /* @__PURE__ */ jsxs("div", {
1473
1699
  className: "relative z-10",
1474
1700
  children: [
1475
1701
  /* @__PURE__ */ jsx(Hero, {}),
1476
1702
  /* @__PURE__ */ jsx(ValueProps, {}),
1477
- /* @__PURE__ */ jsx(CodeQuality, {}),
1703
+ /* @__PURE__ */ jsx(AiSuperpowers, {}),
1478
1704
  /* @__PURE__ */ jsx(ModuleShowcase, {}),
1479
1705
  /* @__PURE__ */ jsx(HowItWorks, {}),
1480
1706
  /* @__PURE__ */ jsx(ArchitecturePreview, {}),
1481
1707
  /* @__PURE__ */ jsx(CliDemo, {}),
1708
+ /* @__PURE__ */ jsx(Pricing, {}),
1482
1709
  /* @__PURE__ */ jsx(FAQ, {}),
1483
1710
  /* @__PURE__ */ jsx(CtaSection, {})
1484
1711
  ]
1485
1712
  }),
1486
1713
  /* @__PURE__ */ jsx("footer", {
1487
- className: "relative z-10 border-t border-white/5 py-12",
1714
+ className: "relative z-10 border-t border-border",
1488
1715
  children: /* @__PURE__ */ jsxs("div", {
1489
- className: "max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6",
1716
+ className: "max-w-7xl mx-auto",
1490
1717
  children: [/* @__PURE__ */ jsxs("div", {
1491
- className: "flex items-center gap-3",
1492
- children: [/* @__PURE__ */ jsx("div", {
1493
- className: "w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center",
1494
- children: /* @__PURE__ */ jsx("span", {
1495
- className: "text-black font-bold text-sm",
1496
- children: "K"
1497
- })
1498
- }), /* @__PURE__ */ jsxs("span", {
1499
- className: "text-white/60 text-sm",
1500
- children: ["Kuckit © ", (/* @__PURE__ */ new Date()).getFullYear()]
1718
+ className: "grid grid-cols-1 md:grid-cols-12 border-b border-border",
1719
+ children: [/* @__PURE__ */ jsxs("div", {
1720
+ className: "md:col-span-4 p-8 md:p-12 border-b md:border-b-0 md:border-r border-border",
1721
+ children: [/* @__PURE__ */ jsxs("div", {
1722
+ className: "flex items-center gap-4 mb-6",
1723
+ children: [/* @__PURE__ */ jsxs("svg", {
1724
+ className: "w-10 h-10",
1725
+ viewBox: "0 0 512 512",
1726
+ fill: "none",
1727
+ xmlns: "http://www.w3.org/2000/svg",
1728
+ children: [
1729
+ /* @__PURE__ */ jsx("polygon", {
1730
+ points: "256,64 384,144 384,304 256,224",
1731
+ fill: "#3D3A39"
1732
+ }),
1733
+ /* @__PURE__ */ jsx("polygon", {
1734
+ points: "256,64 128,144 128,304 256,224",
1735
+ fill: "#5C5855"
1736
+ }),
1737
+ /* @__PURE__ */ jsx("polygon", {
1738
+ points: "128,144 256,224 384,144 256,64",
1739
+ fill: "#A49D9A"
1740
+ }),
1741
+ /* @__PURE__ */ jsx("polygon", {
1742
+ points: "256,224 352,280 352,392 256,336",
1743
+ fill: "#D15010"
1744
+ }),
1745
+ /* @__PURE__ */ jsx("polygon", {
1746
+ points: "256,224 160,280 160,392 256,336",
1747
+ fill: "#EE6018"
1748
+ }),
1749
+ /* @__PURE__ */ jsx("polygon", {
1750
+ points: "160,280 256,336 352,280 256,224",
1751
+ fill: "#EF6F2E"
1752
+ })
1753
+ ]
1754
+ }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
1755
+ className: "text-foreground font-medium tracking-tight",
1756
+ children: "Kuckit"
1757
+ }), /* @__PURE__ */ jsx("div", {
1758
+ className: "text-muted-foreground text-xs tracking-[0.15em] uppercase",
1759
+ children: "Framework"
1760
+ })] })]
1761
+ }), /* @__PURE__ */ jsx("p", {
1762
+ className: "text-muted-foreground text-sm leading-relaxed max-w-xs",
1763
+ children: "The TypeScript module ecosystem where developers build once and sell forever."
1764
+ })]
1765
+ }), /* @__PURE__ */ jsxs("div", {
1766
+ className: "md:col-span-8 grid grid-cols-3",
1767
+ children: [
1768
+ /* @__PURE__ */ jsxs("div", {
1769
+ className: "p-8 border-r border-border",
1770
+ children: [/* @__PURE__ */ jsx("div", {
1771
+ className: "text-xs text-muted-foreground tracking-[0.2em] uppercase mb-6",
1772
+ children: "Resources"
1773
+ }), /* @__PURE__ */ jsxs("div", {
1774
+ className: "space-y-4",
1775
+ children: [
1776
+ /* @__PURE__ */ jsx("a", {
1777
+ href: "/docs",
1778
+ className: "block text-foreground hover:text-primary transition-colors text-sm",
1779
+ children: "Documentation"
1780
+ }),
1781
+ /* @__PURE__ */ jsx("a", {
1782
+ href: "/docs/getting-started",
1783
+ className: "block text-foreground hover:text-primary transition-colors text-sm",
1784
+ children: "Quick Start"
1785
+ }),
1786
+ /* @__PURE__ */ jsx("a", {
1787
+ href: "/docs/api",
1788
+ className: "block text-foreground hover:text-primary transition-colors text-sm",
1789
+ children: "API Reference"
1790
+ })
1791
+ ]
1792
+ })]
1793
+ }),
1794
+ /* @__PURE__ */ jsxs("div", {
1795
+ className: "p-8 border-r border-border",
1796
+ children: [/* @__PURE__ */ jsx("div", {
1797
+ className: "text-xs text-muted-foreground tracking-[0.2em] uppercase mb-6",
1798
+ children: "Community"
1799
+ }), /* @__PURE__ */ jsxs("div", {
1800
+ className: "space-y-4",
1801
+ children: [/* @__PURE__ */ jsx("a", {
1802
+ href: "/discord",
1803
+ className: "block text-foreground hover:text-primary transition-colors text-sm",
1804
+ children: "Discord"
1805
+ }), /* @__PURE__ */ jsx("a", {
1806
+ href: "https://twitter.com/kuckit",
1807
+ className: "block text-foreground hover:text-primary transition-colors text-sm",
1808
+ children: "Twitter"
1809
+ })]
1810
+ })]
1811
+ }),
1812
+ /* @__PURE__ */ jsxs("div", {
1813
+ className: "p-8",
1814
+ children: [/* @__PURE__ */ jsx("div", {
1815
+ className: "text-xs text-muted-foreground tracking-[0.2em] uppercase mb-6",
1816
+ children: "Legal"
1817
+ }), /* @__PURE__ */ jsxs("div", {
1818
+ className: "space-y-4",
1819
+ children: [
1820
+ /* @__PURE__ */ jsx("a", {
1821
+ href: "/privacy",
1822
+ className: "block text-foreground hover:text-primary transition-colors text-sm",
1823
+ children: "Privacy"
1824
+ }),
1825
+ /* @__PURE__ */ jsx("a", {
1826
+ href: "/terms",
1827
+ className: "block text-foreground hover:text-primary transition-colors text-sm",
1828
+ children: "Terms"
1829
+ }),
1830
+ /* @__PURE__ */ jsx("a", {
1831
+ href: "/license",
1832
+ className: "block text-foreground hover:text-primary transition-colors text-sm",
1833
+ children: "License"
1834
+ })
1835
+ ]
1836
+ })]
1837
+ })
1838
+ ]
1501
1839
  })]
1502
1840
  }), /* @__PURE__ */ jsxs("div", {
1503
- className: "flex gap-8 text-sm text-white/40",
1504
- children: [
1505
- /* @__PURE__ */ jsx("a", {
1506
- href: "/docs",
1507
- className: "hover:text-white transition-colors",
1508
- children: "Docs"
1509
- }),
1510
- /* @__PURE__ */ jsx("a", {
1511
- href: "https://github.com/kuckit",
1512
- className: "hover:text-white transition-colors",
1513
- children: "GitHub"
1514
- }),
1515
- /* @__PURE__ */ jsx("a", {
1516
- href: "/discord",
1517
- className: "hover:text-white transition-colors",
1518
- children: "Discord"
1519
- })
1520
- ]
1841
+ className: "flex flex-col md:flex-row items-center justify-between gap-4 px-8 md:px-12 py-6",
1842
+ children: [/* @__PURE__ */ jsxs("div", {
1843
+ className: "flex items-center gap-6 text-xs text-muted-foreground",
1844
+ children: [
1845
+ /* @__PURE__ */ jsxs("span", { children: [
1846
+ "© ",
1847
+ (/* @__PURE__ */ new Date()).getFullYear(),
1848
+ " Kuckit"
1849
+ ] }),
1850
+ /* @__PURE__ */ jsx("span", {
1851
+ className: "hidden md:inline text-border",
1852
+ children: "|"
1853
+ }),
1854
+ /* @__PURE__ */ jsx("span", {
1855
+ className: "hidden md:inline",
1856
+ children: "MIT License"
1857
+ })
1858
+ ]
1859
+ }), /* @__PURE__ */ jsxs("div", {
1860
+ className: "flex items-center gap-3",
1861
+ children: [/* @__PURE__ */ jsxs("div", {
1862
+ className: "flex items-center gap-2 px-3 py-1.5 bg-muted border border-border",
1863
+ children: [/* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-[hsl(var(--status-success))] animate-pulse" }), /* @__PURE__ */ jsx("span", {
1864
+ className: "text-xs text-muted-foreground tracking-wide",
1865
+ children: "All systems operational"
1866
+ })]
1867
+ }), /* @__PURE__ */ jsx("div", {
1868
+ className: "text-xs text-muted-foreground font-mono",
1869
+ children: "v1.0.0"
1870
+ })]
1871
+ })]
1521
1872
  })]
1522
1873
  })
1523
1874
  })