@kuckit/landing-module 4.0.5 → 5.0.0

package/dist/client/components/hero.js

@@ -0,0 +1,239 @@
+import { TerminalAnimation } from "./terminal-animation.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/hero.tsx
+const heroCommands = [{
+	input: "bunx create-kuckit-app my-saas",
+	output: [
+		"Creating new Kuckit project...",
+		"",
+		"✓ Cloned template",
+		"✓ Installed dependencies",
+		"✓ Set up database",
+		"",
+		"Run: cd my-saas && bun run dev"
+	]
+}, {
+	input: "kuckit add @kuckit/payments-module",
+	output: [
+		"Installing @kuckit/payments-module...",
+		"",
+		"✓ Package installed",
+		"✓ Server module wired",
+		"✓ Client routes added",
+		"",
+		"Stripe + Polar ready!"
+	]
+}];
+function Hero() {
+	const [copied, setCopied] = useState(false);
+	const copyCommand = () => {
+		navigator.clipboard.writeText("bunx create-kuckit-app my-app");
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: "relative min-h-screen",
+		children: [/* @__PURE__ */ jsx("nav", {
+			className: "relative z-20 border-b border-border",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "max-w-7xl mx-auto flex items-center justify-between h-16 px-8",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsxs("svg", {
+							className: "w-8 h-8",
+							viewBox: "0 0 512 512",
+							fill: "none",
+							xmlns: "http://www.w3.org/2000/svg",
+							children: [
+								/* @__PURE__ */ jsx("polygon", {
+									points: "256,64 384,144 384,304 256,224",
+									fill: "#3D3A39"
+								}),
+								/* @__PURE__ */ jsx("polygon", {
+									points: "256,64 128,144 128,304 256,224",
+									fill: "#5C5855"
+								}),
+								/* @__PURE__ */ jsx("polygon", {
+									points: "128,144 256,224 384,144 256,64",
+									fill: "#A49D9A"
+								}),
+								/* @__PURE__ */ jsx("polygon", {
+									points: "256,224 352,280 352,392 256,336",
+									fill: "#D15010"
+								}),
+								/* @__PURE__ */ jsx("polygon", {
+									points: "256,224 160,280 160,392 256,336",
+									fill: "#EE6018"
+								}),
+								/* @__PURE__ */ jsx("polygon", {
+									points: "160,280 256,336 352,280 256,224",
+									fill: "#EF6F2E"
+								})
+							]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-foreground font-medium tracking-tight",
+							children: "Kuckit"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "hidden md:flex items-center gap-8",
+						children: [
+							/* @__PURE__ */ jsx("a", {
+								href: "/docs",
+								className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+								children: "Docs"
+							}),
+							/* @__PURE__ */ jsx("a", {
+								href: "/modules",
+								className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+								children: "Modules"
+							}),
+							/* @__PURE__ */ jsx("a", {
+								href: "#pricing",
+								className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+								children: "Pricing"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsx("a", {
+							href: "/login",
+							className: "text-sm text-muted-foreground hover:text-foreground transition-colors px-4 py-2",
+							children: "Sign in"
+						}), /* @__PURE__ */ jsx("a", {
+							href: "/docs/getting-started",
+							className: "text-sm bg-primary text-primary-foreground px-4 py-2 hover:bg-primary/90 transition-colors",
+							children: "Get Started"
+						})]
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative z-10 max-w-7xl mx-auto px-8 pt-24 pb-32",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "grid lg:grid-cols-12 gap-12 lg:gap-16 items-center",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "lg:col-span-7",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-4 mb-8",
+							children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
+								className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
+								children: "Vibe coding ain't fun when you're stuck"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("h1", {
+							className: "mb-8",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "block text-4xl md:text-5xl lg:text-6xl font-light text-foreground tracking-[-0.03em] leading-[1.1]",
+								children: "You don't need more prompts."
+							}), /* @__PURE__ */ jsx("span", {
+								className: "block text-4xl md:text-5xl lg:text-6xl font-light text-primary tracking-[-0.03em] leading-[1.1] mt-2",
+								children: "You need a foundation."
+							})]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-lg md:text-xl text-muted-foreground max-w-xl leading-relaxed mb-12",
+							children: "Vibe coding builds fast. We build right. Ship in hours."
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex flex-col sm:flex-row items-start gap-4 mb-16",
+							children: /* @__PURE__ */ jsxs("a", {
+								href: "/docs/getting-started",
+								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",
+								children: [/* @__PURE__ */ jsx("span", { children: "Get Unstuck" }), /* @__PURE__ */ jsx("svg", {
+									className: "w-4 h-4 group-hover:translate-x-1 transition-transform",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ jsx("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M17 8l4 4m0 0l-4 4m4-4H3"
+									})
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "inline-block",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "text-xs text-muted-foreground tracking-[0.15em] uppercase mb-3",
+								children: "Quick Start"
+							}), /* @__PURE__ */ jsxs("button", {
+								onClick: copyCommand,
+								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",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "text-primary",
+										children: "$"
+									}),
+									/* @__PURE__ */ jsx("code", {
+										className: "text-foreground",
+										children: "bunx create-kuckit-app my-app"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground group-hover:text-primary transition-colors ml-4",
+										children: copied ? /* @__PURE__ */ jsx("svg", {
+											className: "w-4 h-4",
+											fill: "none",
+											stroke: "currentColor",
+											viewBox: "0 0 24 24",
+											children: /* @__PURE__ */ jsx("path", {
+												strokeLinecap: "round",
+												strokeLinejoin: "round",
+												strokeWidth: 2,
+												d: "M5 13l4 4L19 7"
+											})
+										}) : /* @__PURE__ */ jsx("svg", {
+											className: "w-4 h-4",
+											fill: "none",
+											stroke: "currentColor",
+											viewBox: "0 0 24 24",
+											children: /* @__PURE__ */ jsx("path", {
+												strokeLinecap: "round",
+												strokeLinejoin: "round",
+												strokeWidth: 2,
+												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"
+											})
+										})
+									})
+								]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "lg:col-span-5 relative",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [
+							/* @__PURE__ */ jsx("div", { className: "absolute -inset-4 bg-primary/5 blur-2xl rounded-lg" }),
+							/* @__PURE__ */ jsx("div", { className: "absolute -top-4 -left-4 w-8 h-8 border-l-2 border-t-2 border-primary/60" }),
+							/* @__PURE__ */ jsx("div", { className: "absolute -top-4 -right-4 w-8 h-8 border-r-2 border-t-2 border-primary/60" }),
+							/* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 w-8 h-8 border-l-2 border-b-2 border-primary/60" }),
+							/* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -right-4 w-8 h-8 border-r-2 border-b-2 border-primary/60" }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "absolute -top-8 left-0 flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-primary" }), /* @__PURE__ */ jsx("span", {
+									className: "text-[10px] text-muted-foreground tracking-[0.2em] uppercase",
+									children: "Live Demo"
+								})]
+							}),
+							/* @__PURE__ */ jsx(TerminalAnimation, {
+								commands: heroCommands,
+								minHeight: "min-h-[320px]"
+							})
+						]
+					})
+				})]
+			})
+		})]
+	});
+}
+
+//#endregion
+export { Hero };

package/dist/client/components/pricing.js

@@ -0,0 +1,111 @@
+import { GlareCard } from "./ui/glare-card.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Zap } from "lucide-react";
+
+//#region src/client/components/pricing.tsx
+const product = {
+	name: "Kuckit",
+	price: "249",
+	description: "Stop debugging. Start launching. Everything you need to escape the vibe coding trap.",
+	features: [
+		"Production-ready architecture",
+		"Auth, payments, dashboards included",
+		"Code you can actually understand",
+		"Deploy in hours, not weeks",
+		"Support when you get stuck"
+	]
+};
+function Pricing() {
+	return /* @__PURE__ */ jsxs("section", {
+		id: "pricing",
+		className: "relative border-t border-border scroll-mt-16",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "max-w-7xl mx-auto px-8 py-16 border-b border-border",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-4 mb-4",
+					children: [/* @__PURE__ */ jsx("div", { className: "h-px w-12 bg-primary" }), /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-primary tracking-[0.25em] uppercase font-medium",
+						children: "One-time investment"
+					})]
+				}),
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-4xl md:text-5xl font-light text-foreground tracking-[-0.03em]",
+					children: "Skip months of debugging"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-4 text-lg text-muted-foreground max-w-2xl",
+					children: "Pay once. Ship forever. No subscriptions, no surprises."
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "max-w-7xl mx-auto px-8 py-16",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex justify-center",
+				children: /* @__PURE__ */ jsxs(GlareCard, {
+					className: "flex flex-col p-8 min-h-[520px]",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-start justify-between mb-8",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "space-y-3",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "inline-flex items-center justify-center size-12 rounded-sm bg-primary/10 border border-primary/20",
+									children: /* @__PURE__ */ jsx(Zap, { className: "size-6 text-primary" })
+								}), /* @__PURE__ */ jsx("h3", {
+									className: "text-2xl font-normal text-foreground tracking-tight",
+									children: product.name
+								})]
+							}), /* @__PURE__ */ jsx("span", {
+								className: "px-3 py-1.5 text-xs uppercase tracking-[0.15em] bg-primary/10 text-primary border border-primary/20",
+								children: "Popular"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "mb-8",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-baseline gap-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-sm text-muted-foreground",
+									children: "$"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-6xl font-light text-foreground tabular-nums tracking-tighter",
+									children: product.price
+								})]
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground text-sm mt-3 tracking-wide",
+								children: "one-time payment"
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", { className: "h-px bg-gradient-to-r from-transparent via-border to-transparent mb-8" }),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm leading-relaxed mb-8",
+							children: product.description
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "space-y-3 mb-10 flex-grow",
+							children: product.features.map((feature) => /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "w-4 h-4 flex items-center justify-center",
+									children: /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-primary" })
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-sm text-foreground",
+									children: feature
+								})]
+							}, feature))
+						}),
+						/* @__PURE__ */ jsx("a", {
+							href: "/billing",
+							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",
+							children: "Get Started"
+						})
+					]
+				})
+			})
+		})]
+	});
+}
+
+//#endregion
+export { Pricing };

package/dist/client/components/terminal-animation.js

@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/terminal-animation.tsx
+function TerminalAnimation({ commands, className = "", minHeight = "min-h-[280px]" }) {
+	const [activeCommand, setActiveCommand] = useState(0);
+	const [displayedLines, setDisplayedLines] = useState([]);
+	const [isTyping, setIsTyping] = useState(true);
+	const [typedInput, setTypedInput] = useState("");
+	useEffect(() => {
+		const command = commands[activeCommand];
+		if (!command) return;
+		let inputIndex = 0;
+		let outputIndex = 0;
+		let outputInterval = null;
+		setDisplayedLines([]);
+		setTypedInput("");
+		setIsTyping(true);
+		const inputInterval = setInterval(() => {
+			if (inputIndex <= command.input.length) {
+				setTypedInput(command.input.slice(0, inputIndex));
+				inputIndex++;
+			} else {
+				clearInterval(inputInterval);
+				setIsTyping(false);
+				outputInterval = setInterval(() => {
+					if (outputIndex < command.output.length) {
+						const line = command.output[outputIndex];
+						if (line !== void 0) setDisplayedLines((prev) => [...prev, line]);
+						outputIndex++;
+					} else {
+						if (outputInterval) clearInterval(outputInterval);
+						setTimeout(() => {
+							setActiveCommand((prev) => (prev + 1) % commands.length);
+						}, 3e3);
+					}
+				}, 100);
+			}
+		}, 50);
+		return () => {
+			clearInterval(inputInterval);
+			if (outputInterval) clearInterval(outputInterval);
+		};
+	}, [activeCommand, commands]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "border border-border bg-background",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-4 py-3 border-b border-border bg-card",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-[hsl(var(--status-error)/0.8)]" }),
+							/* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-[hsl(var(--status-warning)/0.8)]" }),
+							/* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-[hsl(var(--status-success)/0.8)]" })
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground font-mono",
+						children: "terminal"
+					}),
+					/* @__PURE__ */ jsx("div", { className: "w-16" })
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: `p-6 font-mono text-sm ${minHeight}`,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 mb-4",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-primary",
+							children: "$"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-foreground",
+							children: typedInput
+						}),
+						isTyping && /* @__PURE__ */ jsx("span", { className: "w-2 h-5 bg-primary animate-pulse" })
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "space-y-0.5",
+					children: displayedLines.map((line, index) => /* @__PURE__ */ jsx("div", {
+						className: `${line?.startsWith("✓") ? "text-[hsl(var(--status-success))]" : line?.includes("!") ? "text-foreground" : "text-muted-foreground"}`,
+						children: line || "\xA0"
+					}, index))
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center gap-2 mt-6",
+			children: commands.map((_, index) => /* @__PURE__ */ jsx("button", {
+				onClick: () => setActiveCommand(index),
+				className: `h-1.5 transition-all ${index === activeCommand ? "bg-primary w-8" : "bg-muted hover:bg-muted-foreground/30 w-1.5"}`
+			}, index))
+		})]
+	});
+}
+
+//#endregion
+export { TerminalAnimation };