@roboticela/devkit 3.0.0 → 4.1.0

package/registry/components/auth/nextjs-compact/v1/files/components/auth/LoginForm.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "./AuthProvider";
+
+export function LoginForm() {
+  const { login } = useAuth();
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await login(email, password);
+      router.push("/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
+      {error && (
+        <div
+          role="alert"
+          style={{
+            padding: "var(--space-3) var(--space-4)",
+            borderRadius: "var(--radius-md)",
+            background: "var(--color-error-subtle)",
+            color: "var(--color-error-text)",
+            fontSize: "var(--text-sm)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
+        <label htmlFor="email" style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--color-text)" }}>
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          required
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          style={{
+            padding: "var(--space-3) var(--space-4)",
+            borderRadius: "var(--radius-md)",
+            border: "1px solid var(--color-border)",
+            background: "var(--color-bg)",
+            color: "var(--color-text)",
+            fontSize: "var(--text-base)",
+            outline: "none",
+          }}
+        />
+      </div>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <label htmlFor="password" style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--color-text)" }}>
+            Password
+          </label>
+          <a href="/auth/forgot-password" style={{ fontSize: "var(--text-sm)", color: "var(--color-primary)" }}>
+            Forgot password?
+          </a>
+        </div>
+        <input
+          id="password"
+          type="password"
+          required
+          autoComplete="current-password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          style={{
+            padding: "var(--space-3) var(--space-4)",
+            borderRadius: "var(--radius-md)",
+            border: "1px solid var(--color-border)",
+            background: "var(--color-bg)",
+            color: "var(--color-text)",
+            fontSize: "var(--text-base)",
+            outline: "none",
+          }}
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={loading}
+        style={{
+          padding: "var(--space-3) var(--space-4)",
+          borderRadius: "var(--radius-md)",
+          background: loading ? "var(--color-bg-muted)" : "var(--color-primary)",
+          color: "var(--color-primary-text)",
+          fontSize: "var(--text-base)",
+          fontWeight: "var(--weight-semibold)",
+          border: "none",
+          cursor: loading ? "not-allowed" : "pointer",
+          transition: "background var(--transition-fast)",
+        }}
+      >
+        {loading ? "Signing in…" : "Sign in"}
+      </button>
+
+      <p style={{ textAlign: "center", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}>
+        No account?{" "}
+        <a href="/auth/register" style={{ color: "var(--color-primary)", fontWeight: "var(--weight-medium)" }}>
+          Create one
+        </a>
+      </p>
+    </form>
+  );
+}

package/registry/components/auth/nextjs-compact/v1/files/components/auth/RegisterForm.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "./AuthProvider";
+
+export function RegisterForm() {
+  const { register } = useAuth();
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await register(name, email, password);
+      router.push("/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const inputStyle: React.CSSProperties = {
+    padding: "var(--space-3) var(--space-4)",
+    borderRadius: "var(--radius-md)",
+    border: "1px solid var(--color-border)",
+    background: "var(--color-bg)",
+    color: "var(--color-text)",
+    fontSize: "var(--text-base)",
+    outline: "none",
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
+      {error && (
+        <div
+          role="alert"
+          style={{
+            padding: "var(--space-3) var(--space-4)",
+            borderRadius: "var(--radius-md)",
+            background: "var(--color-error-subtle)",
+            color: "var(--color-error-text)",
+            fontSize: "var(--text-sm)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {(["Name", "Email", "Password"] as const).map((field) => (
+        <div key={field} style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
+          <label
+            htmlFor={field.toLowerCase()}
+            style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--color-text)" }}
+          >
+            {field}
+          </label>
+          <input
+            id={field.toLowerCase()}
+            type={field === "Password" ? "password" : field === "Email" ? "email" : "text"}
+            required
+            value={field === "Name" ? name : field === "Email" ? email : password}
+            onChange={(e) => {
+              if (field === "Name") setName(e.target.value);
+              else if (field === "Email") setEmail(e.target.value);
+              else setPassword(e.target.value);
+            }}
+            style={inputStyle}
+          />
+        </div>
+      ))}
+
+      <button
+        type="submit"
+        disabled={loading}
+        style={{
+          padding: "var(--space-3) var(--space-4)",
+          borderRadius: "var(--radius-md)",
+          background: loading ? "var(--color-bg-muted)" : "var(--color-primary)",
+          color: "var(--color-primary-text)",
+          fontSize: "var(--text-base)",
+          fontWeight: "var(--weight-semibold)",
+          border: "none",
+          cursor: loading ? "not-allowed" : "pointer",
+          transition: "background var(--transition-fast)",
+        }}
+      >
+        {loading ? "Creating account…" : "Create account"}
+      </button>
+
+      <p style={{ textAlign: "center", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}>
+        Already have an account?{" "}
+        <a href="/auth/login" style={{ color: "var(--color-primary)", fontWeight: "var(--weight-medium)" }}>
+          Sign in
+        </a>
+      </p>
+    </form>
+  );
+}

package/registry/components/auth/nextjs-compact/v1/files/lib/auth/authService.ts

@@ -0,0 +1,43 @@
+import { SignJWT, jwtVerify } from "jose";
+
+const ACCESS_SECRET = new TextEncoder().encode(
+  process.env.JWT_ACCESS_SECRET ?? "change-me-in-production-min-32-chars!!"
+);
+const REFRESH_SECRET = new TextEncoder().encode(
+  process.env.JWT_REFRESH_SECRET ?? "change-me-refresh-in-production-32chars"
+);
+
+export interface TokenPayload {
+  sub: string;
+  email: string;
+  iat?: number;
+  exp?: number;
+}
+
+export async function signToken(
+  payload: { sub: string; email: string },
+  type: "access" | "refresh" = "access"
+): Promise<string> {
+  const secret = type === "access" ? ACCESS_SECRET : REFRESH_SECRET;
+  const expiresIn = type === "access" ? "15m" : "30d";
+  return new SignJWT({ email: payload.email })
+    .setProtectedHeader({ alg: "HS256" })
+    .setSubject(payload.sub)
+    .setIssuedAt()
+    .setExpirationTime(expiresIn)
+    .sign(secret);
+}
+
+export async function verifyToken(
+  token: string,
+  type: "access" | "refresh" = "access"
+): Promise<TokenPayload> {
+  const secret = type === "access" ? ACCESS_SECRET : REFRESH_SECRET;
+  const { payload } = await jwtVerify(token, secret);
+  return {
+    sub: payload.sub as string,
+    email: payload["email"] as string,
+    iat: payload.iat,
+    exp: payload.exp,
+  };
+}

package/registry/components/auth/nextjs-compact/v1/manifest.json

@@ -0,0 +1,37 @@
+{
+  "version": "1.0.0",
+  "template": "nextjs-compact",
+  "files": [
+    { "source": "files/app/auth/login/page.tsx",              "destination": "app/auth/login/page.tsx" },
+    { "source": "files/app/auth/register/page.tsx",           "destination": "app/auth/register/page.tsx" },
+    { "source": "files/app/auth/forgot-password/page.tsx",    "destination": "app/auth/forgot-password/page.tsx" },
+    { "source": "files/app/auth/reset-password/page.tsx",     "destination": "app/auth/reset-password/page.tsx" },
+    { "source": "files/app/api/auth/[...route]/route.ts",     "destination": "app/api/auth/[...route]/route.ts" },
+    { "source": "files/components/auth/LoginForm.tsx",        "destination": "components/auth/LoginForm.tsx" },
+    { "source": "files/components/auth/RegisterForm.tsx",     "destination": "components/auth/RegisterForm.tsx" },
+    { "source": "files/components/auth/AuthProvider.tsx",     "destination": "components/auth/AuthProvider.tsx" },
+    { "source": "files/lib/auth/authService.ts",              "destination": "lib/auth/authService.ts" }
+  ],
+  "injections": [
+    {
+      "file": "app/layout.tsx",
+      "marker": "{/* devkit:auth:provider */}",
+      "wrap": { "open": "<AuthProvider>", "close": "</AuthProvider>" },
+      "importLine": "import { AuthProvider } from '@/components/auth/AuthProvider';"
+    }
+  ],
+  "dependencies": {
+    "frontend": ["jsonwebtoken", "js-cookie"],
+    "devFrontend": ["@types/js-cookie"]
+  },
+  "envVars": [
+    "JWT_ACCESS_SECRET",
+    "JWT_REFRESH_SECRET",
+    "GOOGLE_CLIENT_ID",
+    "GOOGLE_CLIENT_SECRET",
+    "SMTP_HOST",
+    "SMTP_PORT",
+    "SMTP_USER",
+    "SMTP_PASSWORD"
+  ]
+}

package/registry/components/auth/vite-express-tauri/v1/files/server/middleware/requireAuth.ts

@@ -0,0 +1,14 @@
+import { Request, Response, NextFunction } from "express";
+import { verifyToken } from "../services/jwtService.js";
+
+export function requireAuth(req: Request, res: Response, next: NextFunction) {
+  const token = req.headers.authorization?.replace("Bearer ", "");
+  if (!token) { res.status(401).json({ message: "Unauthorized" }); return; }
+  try {
+    const payload = verifyToken(token);
+    (req as Request & { user: { id: string; email: string } }).user = { id: payload.sub, email: payload.email };
+    next();
+  } catch {
+    res.status(401).json({ message: "Invalid or expired token" });
+  }
+}

package/registry/components/auth/vite-express-tauri/v1/files/server/routes/auth.ts

@@ -0,0 +1,83 @@
+import { Router, Request, Response } from "express";
+import { signToken, verifyToken } from "../services/jwtService.js";
+
+const router = Router();
+
+router.post("/login", async (req: Request, res: Response) => {
+  const { email, password } = req.body;
+  if (!email || !password) { res.status(400).json({ message: "Email and password required" }); return; }
+
+  // TODO: replace with real DB lookup + bcrypt.compare
+  const user = await findUserByCredentials(email, password);
+  if (!user) { res.status(401).json({ message: "Invalid email or password" }); return; }
+
+  const token = await signToken({ sub: user.id, email: user.email });
+  res.json({ user, token });
+});
+
+router.post("/register", async (req: Request, res: Response) => {
+  const { name, email, password } = req.body;
+  if (!name || !email || !password) { res.status(400).json({ message: "Name, email, and password required" }); return; }
+  if (password.length < 8) { res.status(400).json({ message: "Password must be at least 8 characters" }); return; }
+
+  // TODO: replace with real user creation
+  const user = await createUser(name, email, password);
+  const token = await signToken({ sub: user.id, email: user.email });
+  res.status(201).json({ user, token });
+});
+
+router.get("/me", async (req: Request, res: Response) => {
+  const authHeader = req.headers.authorization;
+  const token = authHeader?.replace("Bearer ", "");
+  if (!token) { res.status(401).json({ message: "Unauthorized" }); return; }
+  try {
+    const payload = await verifyToken(token);
+    const user = await findUserById(payload.sub);
+    if (!user) { res.status(404).json({ message: "User not found" }); return; }
+    res.json({ user });
+  } catch {
+    res.status(401).json({ message: "Invalid token" });
+  }
+});
+
+router.post("/forgot-password", async (req: Request, res: Response) => {
+  const { email } = req.body;
+  if (!email) { res.status(400).json({ message: "Email required" }); return; }
+  // TODO: generate reset token, store in DB, send email
+  await sendPasswordResetEmail(email);
+  res.json({ ok: true });
+});
+
+router.post("/reset-password", async (req: Request, res: Response) => {
+  const { token, password } = req.body;
+  if (!token || !password) { res.status(400).json({ message: "Token and password required" }); return; }
+  // TODO: verify token, update password in DB
+  await resetUserPassword(token, password);
+  res.json({ ok: true });
+});
+
+router.post("/logout", (_req: Request, res: Response) => {
+  res.clearCookie("refresh_token");
+  res.json({ ok: true });
+});
+
+// ── Stubs (replace with real DB calls) ───────────────────────────────────────
+
+async function findUserByCredentials(email: string, _password: string) {
+  void email;
+  return null as { id: string; name: string; email: string } | null;
+}
+
+async function createUser(name: string, email: string, _password: string) {
+  return { id: crypto.randomUUID(), name, email };
+}
+
+async function findUserById(id: string) {
+  void id;
+  return null as { id: string; name: string; email: string } | null;
+}
+
+async function sendPasswordResetEmail(email: string) { void email; }
+async function resetUserPassword(token: string, password: string) { void token; void password; }
+
+export default router;

package/registry/components/auth/vite-express-tauri/v1/files/server/services/jwtService.ts

@@ -0,0 +1,19 @@
+import jwt from "jsonwebtoken";
+
+const ACCESS_SECRET = process.env.JWT_ACCESS_SECRET ?? "change-me-min-32-chars-access!!";
+const REFRESH_SECRET = process.env.JWT_REFRESH_SECRET ?? "change-me-min-32-chars-refresh!";
+
+export interface TokenPayload { sub: string; email: string; iat?: number; exp?: number }
+
+export function signToken(payload: { sub: string; email: string }, type: "access" | "refresh" = "access"): string {
+  return jwt.sign(
+    { email: payload.email },
+    type === "access" ? ACCESS_SECRET : REFRESH_SECRET,
+    { subject: payload.sub, expiresIn: type === "access" ? "15m" : "30d" }
+  );
+}
+
+export function verifyToken(token: string, type: "access" | "refresh" = "access"): TokenPayload {
+  const decoded = jwt.verify(token, type === "access" ? ACCESS_SECRET : REFRESH_SECRET) as jwt.JwtPayload;
+  return { sub: decoded.sub as string, email: decoded["email"] as string, iat: decoded.iat, exp: decoded.exp };
+}

package/registry/components/auth/vite-express-tauri/v1/files/src/contexts/AuthContext.tsx

@@ -0,0 +1,72 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+interface User { id: string; email: string; name: string; avatar?: string }
+
+interface AuthContextValue {
+  user: User | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (name: string, email: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+const API = import.meta.env.VITE_API_URL ?? "http://localhost:3000";
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem("access_token");
+    if (!token) { setLoading(false); return; }
+    fetch(`${API}/api/auth/me`, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => setUser(d?.user ?? null))
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function login(email: string, password: string) {
+    const res = await fetch(`${API}/api/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+    if (!res.ok) { const d = await res.json(); throw new Error(d.message || "Login failed"); }
+    const { user, token } = await res.json();
+    localStorage.setItem("access_token", token);
+    setUser(user);
+  }
+
+  async function register(name: string, email: string, password: string) {
+    const res = await fetch(`${API}/api/auth/register`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, email, password }),
+    });
+    if (!res.ok) { const d = await res.json(); throw new Error(d.message || "Registration failed"); }
+    const { user, token } = await res.json();
+    localStorage.setItem("access_token", token);
+    setUser(user);
+  }
+
+  async function logout() {
+    localStorage.removeItem("access_token");
+    setUser(null);
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used inside <AuthProvider>");
+  return ctx;
+}

package/registry/components/auth/vite-express-tauri/v1/manifest.json

@@ -0,0 +1,47 @@
+{
+  "version": "1.0.0",
+  "template": "vite-express-tauri",
+  "files": [
+    { "source": "files/src/pages/auth/LoginPage.tsx",       "destination": "src/pages/auth/LoginPage.tsx" },
+    { "source": "files/src/pages/auth/RegisterPage.tsx",    "destination": "src/pages/auth/RegisterPage.tsx" },
+    { "source": "files/src/pages/auth/ForgotPasswordPage.tsx", "destination": "src/pages/auth/ForgotPasswordPage.tsx" },
+    { "source": "files/src/pages/auth/ResetPasswordPage.tsx",  "destination": "src/pages/auth/ResetPasswordPage.tsx" },
+    { "source": "files/src/components/auth/LoginForm.tsx",  "destination": "src/components/auth/LoginForm.tsx" },
+    { "source": "files/src/components/auth/RegisterForm.tsx","destination": "src/components/auth/RegisterForm.tsx" },
+    { "source": "files/src/contexts/AuthContext.tsx",       "destination": "src/contexts/AuthContext.tsx" },
+    { "source": "files/src/lib/authService.ts",             "destination": "src/lib/authService.ts" },
+    { "source": "files/server/routes/auth.ts",              "destination": "server/src/routes/auth.ts" },
+    { "source": "files/server/middleware/requireAuth.ts",   "destination": "server/src/middleware/requireAuth.ts" },
+    { "source": "files/server/services/jwtService.ts",      "destination": "server/src/services/jwtService.ts" }
+  ],
+  "injections": [
+    {
+      "file": "src/main.tsx",
+      "marker": "/* devkit:auth:routes */",
+      "importLine": "import { LoginPage } from './pages/auth/LoginPage';",
+      "routeLine": "<Route path=\"/auth/login\" element={<LoginPage />} />"
+    },
+    {
+      "file": "server/src/index.ts",
+      "marker": "/* devkit:auth:api */",
+      "importLine": "import authRouter from './routes/auth';",
+      "routeLine": "app.use('/api/auth', authRouter);"
+    }
+  ],
+  "dependencies": {
+    "frontend": ["js-cookie"],
+    "devFrontend": ["@types/js-cookie"],
+    "backend": ["jsonwebtoken", "bcryptjs", "nodemailer"],
+    "devBackend": ["@types/jsonwebtoken", "@types/bcryptjs", "@types/nodemailer"]
+  },
+  "envVars": [
+    "JWT_ACCESS_SECRET",
+    "JWT_REFRESH_SECRET",
+    "GOOGLE_CLIENT_ID",
+    "GOOGLE_CLIENT_SECRET",
+    "SMTP_HOST",
+    "SMTP_PORT",
+    "SMTP_USER",
+    "SMTP_PASSWORD"
+  ]
+}

package/registry/components/hero-section/component.json

@@ -0,0 +1,28 @@
+{
+  "name": "hero-section",
+  "displayName": "Hero Section",
+  "description": "Landing page hero banner with multiple design variants. Only the chosen variant is downloaded.",
+  "category": "marketing",
+  "icon": "layout",
+  "author": "Roboticela",
+  "license": "MIT",
+  "tags": ["hero", "landing", "marketing", "banner"],
+  "templates": ["nextjs-compact", "vite-express-tauri"],
+  "platforms": ["web"],
+  "hasVariants": true,
+  "variants": [
+    { "id": "centered",      "label": "Centered",       "description": "Classic centered heading + subheading + CTA buttons" },
+    { "id": "split-image",   "label": "Split Image",    "description": "Text on left, product screenshot on right" },
+    { "id": "gradient-mesh", "label": "Gradient Mesh",  "description": "Animated CSS gradient mesh background" },
+    { "id": "minimal",       "label": "Minimal",        "description": "Typography-only, no background decorations" }
+  ],
+  "versions": {
+    "latest": "1.0.0",
+    "stable": "1.0.0",
+    "history": [
+      { "version": "1.0.0", "releaseDate": "2026-04-05", "breaking": false }
+    ]
+  },
+  "requiredConfig": ["site.name", "site.description"],
+  "optionalConfig": []
+}

package/registry/components/hero-section/nextjs-compact/v1/variants/centered/files/components/hero/HeroSection.tsx

@@ -0,0 +1,97 @@
+export function HeroSection({
+  headline = "Build faster. Ship smarter.",
+  subheadline = "The DevKit that turns your ideas into production-ready apps in minutes.",
+  primaryCta = { label: "Get started", href: "/auth/register" },
+  secondaryCta = { label: "View docs", href: "/docs" },
+}: {
+  headline?: string;
+  subheadline?: string;
+  primaryCta?: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+}) {
+  return (
+    <section
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center",
+        padding: "var(--space-24) var(--space-4)",
+        gap: "var(--space-6)",
+        background: "var(--color-bg)",
+      }}
+    >
+      <span
+        style={{
+          display: "inline-block",
+          padding: "var(--space-1) var(--space-3)",
+          borderRadius: "var(--radius-full)",
+          background: "var(--color-primary-subtle)",
+          color: "var(--color-primary)",
+          fontSize: "var(--text-sm)",
+          fontWeight: "var(--weight-medium)",
+        }}
+      >
+        Now in public beta
+      </span>
+
+      <h1
+        style={{
+          fontSize: "clamp(var(--text-4xl), 6vw, var(--text-6xl))",
+          fontWeight: "var(--weight-extrabold)",
+          fontFamily: "var(--font-display)",
+          color: "var(--color-text)",
+          lineHeight: "var(--leading-tight)",
+          maxWidth: "720px",
+        }}
+      >
+        {headline}
+      </h1>
+
+      <p
+        style={{
+          fontSize: "var(--text-xl)",
+          color: "var(--color-text-muted)",
+          maxWidth: "560px",
+          lineHeight: "var(--leading-relaxed)",
+        }}
+      >
+        {subheadline}
+      </p>
+
+      <div style={{ display: "flex", gap: "var(--space-4)", flexWrap: "wrap", justifyContent: "center" }}>
+        <a
+          href={primaryCta.href}
+          style={{
+            padding: "var(--space-3) var(--space-8)",
+            borderRadius: "var(--radius-md)",
+            background: "var(--color-primary)",
+            color: "var(--color-primary-text)",
+            fontSize: "var(--text-base)",
+            fontWeight: "var(--weight-semibold)",
+            textDecoration: "none",
+            transition: "background var(--transition-fast)",
+          }}
+        >
+          {primaryCta.label}
+        </a>
+        <a
+          href={secondaryCta.href}
+          style={{
+            padding: "var(--space-3) var(--space-8)",
+            borderRadius: "var(--radius-md)",
+            background: "transparent",
+            color: "var(--color-text)",
+            fontSize: "var(--text-base)",
+            fontWeight: "var(--weight-semibold)",
+            textDecoration: "none",
+            border: "1px solid var(--color-border)",
+            transition: "border-color var(--transition-fast)",
+          }}
+        >
+          {secondaryCta.label}
+        </a>
+      </div>
+    </section>
+  );
+}