@roboticela/devkit 3.0.0 → 4.1.0

package/registry/components/hero-section/nextjs-compact/v1/variants/centered/manifest.json

@@ -0,0 +1,17 @@
+{
+  "version": "1.0.0",
+  "template": "nextjs-compact",
+  "variant": "centered",
+  "files": [
+    { "source": "files/components/hero/HeroSection.tsx", "destination": "components/hero/HeroSection.tsx" }
+  ],
+  "injections": [
+    {
+      "file": "app/page.tsx",
+      "marker": "/* devkit:hero-section */",
+      "importLine": "import { HeroSection } from '@/components/hero/HeroSection';",
+      "componentLine": "<HeroSection />"
+    }
+  ],
+  "dependencies": { "frontend": [], "devFrontend": [] }
+}

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

@@ -0,0 +1,146 @@
+"use client";
+
+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={{
+        position: "relative",
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        padding: "var(--space-20) var(--space-4)",
+        gap: "var(--space-6)",
+        overflow: "hidden",
+        background: "var(--color-bg)",
+      }}
+    >
+      {/* Animated gradient blobs */}
+      <div aria-hidden style={{ position: "absolute", inset: 0, zIndex: 0, overflow: "hidden" }}>
+        <div
+          style={{
+            position: "absolute",
+            top: "-20%",
+            left: "-10%",
+            width: "60%",
+            height: "60%",
+            borderRadius: "var(--radius-full)",
+            background: "var(--color-primary)",
+            opacity: 0.15,
+            filter: "blur(80px)",
+            animation: "drift1 12s ease-in-out infinite alternate",
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            bottom: "-20%",
+            right: "-10%",
+            width: "60%",
+            height: "60%",
+            borderRadius: "var(--radius-full)",
+            background: "var(--color-secondary)",
+            opacity: 0.12,
+            filter: "blur(80px)",
+            animation: "drift2 15s ease-in-out infinite alternate",
+          }}
+        />
+      </div>
+
+      <style>{`
+        @keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(5%,8%) scale(1.1); } }
+        @keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-5%,-8%) scale(1.15); } }
+      `}</style>
+
+      {/* Content */}
+      <span
+        style={{
+          position: "relative",
+          zIndex: 1,
+          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={{
+          position: "relative",
+          zIndex: 1,
+          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={{
+          position: "relative",
+          zIndex: 1,
+          fontSize: "var(--text-xl)",
+          color: "var(--color-text-muted)",
+          maxWidth: "560px",
+          lineHeight: "var(--leading-relaxed)",
+        }}
+      >
+        {subheadline}
+      </p>
+
+      <div style={{ position: "relative", zIndex: 1, 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)",
+            fontWeight: "var(--weight-semibold)",
+            textDecoration: "none",
+            fontSize: "var(--text-base)",
+          }}
+        >
+          {primaryCta.label}
+        </a>
+        <a
+          href={secondaryCta.href}
+          style={{
+            padding: "var(--space-3) var(--space-8)",
+            borderRadius: "var(--radius-md)",
+            background: "rgba(255,255,255,0.1)",
+            backdropFilter: "blur(8px)",
+            color: "var(--color-text)",
+            fontWeight: "var(--weight-semibold)",
+            textDecoration: "none",
+            border: "1px solid var(--color-border)",
+            fontSize: "var(--text-base)",
+          }}
+        >
+          {secondaryCta.label}
+        </a>
+      </div>
+    </section>
+  );
+}

package/registry/components/hero-section/nextjs-compact/v1/variants/gradient-mesh/manifest.json

@@ -0,0 +1,17 @@
+{
+  "version": "1.0.0",
+  "template": "nextjs-compact",
+  "variant": "gradient-mesh",
+  "files": [
+    { "source": "files/components/hero/HeroSection.tsx", "destination": "components/hero/HeroSection.tsx" }
+  ],
+  "injections": [
+    {
+      "file": "app/page.tsx",
+      "marker": "/* devkit:hero-section */",
+      "importLine": "import { HeroSection } from '@/components/hero/HeroSection';",
+      "componentLine": "<HeroSection />"
+    }
+  ],
+  "dependencies": { "frontend": [], "devFrontend": [] }
+}

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

@@ -0,0 +1,110 @@
+import Image from "next/image";
+
+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" },
+  imageSrc = "/hero-screenshot.png",
+  imageAlt = "App screenshot",
+}: {
+  headline?: string;
+  subheadline?: string;
+  primaryCta?: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+  imageSrc?: string;
+  imageAlt?: string;
+}) {
+  return (
+    <section
+      style={{
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: "var(--space-16)",
+        alignItems: "center",
+        padding: "var(--space-20) var(--space-8)",
+        maxWidth: "1280px",
+        margin: "0 auto",
+        background: "var(--color-bg)",
+      }}
+    >
+      {/* Left — Text */}
+      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
+        <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)",
+            width: "fit-content",
+          }}
+        >
+          Now in public beta
+        </span>
+
+        <h1
+          style={{
+            fontSize: "clamp(var(--text-3xl), 4vw, var(--text-5xl))",
+            fontWeight: "var(--weight-extrabold)",
+            fontFamily: "var(--font-display)",
+            color: "var(--color-text)",
+            lineHeight: "var(--leading-tight)",
+          }}
+        >
+          {headline}
+        </h1>
+
+        <p style={{ fontSize: "var(--text-lg)", color: "var(--color-text-muted)", lineHeight: "var(--leading-relaxed)" }}>
+          {subheadline}
+        </p>
+
+        <div style={{ display: "flex", gap: "var(--space-4)" }}>
+          <a
+            href={primaryCta.href}
+            style={{
+              padding: "var(--space-3) var(--space-6)",
+              borderRadius: "var(--radius-md)",
+              background: "var(--color-primary)",
+              color: "var(--color-primary-text)",
+              fontWeight: "var(--weight-semibold)",
+              textDecoration: "none",
+              fontSize: "var(--text-base)",
+            }}
+          >
+            {primaryCta.label}
+          </a>
+          <a
+            href={secondaryCta.href}
+            style={{
+              padding: "var(--space-3) var(--space-6)",
+              borderRadius: "var(--radius-md)",
+              background: "transparent",
+              color: "var(--color-text)",
+              fontWeight: "var(--weight-semibold)",
+              textDecoration: "none",
+              border: "1px solid var(--color-border)",
+              fontSize: "var(--text-base)",
+            }}
+          >
+            {secondaryCta.label}
+          </a>
+        </div>
+      </div>
+
+      {/* Right — Image */}
+      <div
+        style={{
+          borderRadius: "var(--radius-xl)",
+          overflow: "hidden",
+          border: "1px solid var(--color-border)",
+          boxShadow: "var(--shadow-xl)",
+        }}
+      >
+        <Image src={imageSrc} alt={imageAlt} width={720} height={480} style={{ width: "100%", height: "auto", display: "block" }} />
+      </div>
+    </section>
+  );
+}

package/registry/components/hero-section/nextjs-compact/v1/variants/split-image/manifest.json

@@ -0,0 +1,17 @@
+{
+  "version": "1.0.0",
+  "template": "nextjs-compact",
+  "variant": "split-image",
+  "files": [
+    { "source": "files/components/hero/HeroSection.tsx", "destination": "components/hero/HeroSection.tsx" }
+  ],
+  "injections": [
+    {
+      "file": "app/page.tsx",
+      "marker": "/* devkit:hero-section */",
+      "importLine": "import { HeroSection } from '@/components/hero/HeroSection';",
+      "componentLine": "<HeroSection />"
+    }
+  ],
+  "dependencies": { "frontend": [], "devFrontend": [] }
+}

package/registry/components/registry.json

@@ -0,0 +1,31 @@
+{
+  "version": "1",
+  "updatedAt": "2026-04-05T00:00:00Z",
+  "components": [
+    {
+      "name": "auth",
+      "displayName": "Authentication",
+      "description": "Complete authentication system: email/password login, registration, email verification, forgot/reset password, and Google OAuth.",
+      "category": "authentication",
+      "icon": "lock",
+      "templates": ["nextjs-compact", "vite-express-tauri"],
+      "platforms": ["web", "desktop"],
+      "hasVariants": false,
+      "latestVersion": "1.0.0",
+      "tags": ["auth", "login", "register", "oauth", "jwt", "email"]
+    },
+    {
+      "name": "hero-section",
+      "displayName": "Hero Section",
+      "description": "Landing page hero banner with 4 design variants: centered, split-image, gradient-mesh, and minimal.",
+      "category": "marketing",
+      "icon": "layout",
+      "templates": ["nextjs-compact", "vite-express-tauri"],
+      "platforms": ["web"],
+      "hasVariants": true,
+      "variants": ["centered", "split-image", "gradient-mesh", "minimal"],
+      "latestVersion": "1.0.0",
+      "tags": ["hero", "landing", "marketing", "banner"]
+    }
+  ]
+}

package/schemas/devkit-config.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://raw.githubusercontent.com/Roboticela/DevKit/main/cli/schemas/devkit-config.json",
+  "title": "DevKit project configuration",
+  "type": "object",
+  "required": ["devkit", "template", "site"],
+  "additionalProperties": true,
+  "properties": {
+    "$schema": { "type": "string", "format": "uri" },
+    "devkit": { "type": "string", "description": "DevKit config format version" },
+    "template": {
+      "type": "string",
+      "enum": ["nextjs-compact", "vite-express-tauri"],
+      "description": "Project template this repo was scaffolded from"
+    },
+    "site": {
+      "type": "object",
+      "required": ["name", "url"],
+      "properties": {
+        "name": { "type": "string" },
+        "url": { "type": "string", "format": "uri" },
+        "icon": { "type": "string" },
+        "description": { "type": "string" }
+      },
+      "additionalProperties": true
+    },
+    "theme": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "preset": { "type": "string" },
+        "colors": {
+          "type": "object",
+          "properties": {
+            "primary": { "type": "string" },
+            "secondary": { "type": "string" }
+          },
+          "additionalProperties": true
+        },
+        "fonts": {
+          "type": "object",
+          "properties": {
+            "sans": { "type": "string" },
+            "mono": { "type": "string" },
+            "display": { "type": "string" }
+          },
+          "additionalProperties": true
+        },
+        "radius": { "type": "string" },
+        "darkMode": { "type": "boolean" },
+        "darkModeStrategy": { "type": "string", "enum": ["class", "media"] }
+      }
+    },
+    "auth": { "type": "object", "additionalProperties": true },
+    "subscriptions": { "type": "object", "additionalProperties": true },
+    "storage": { "type": "object", "additionalProperties": true },
+    "database": {
+      "type": "object",
+      "properties": { "url": { "type": "string" } },
+      "additionalProperties": true
+    }
+  }
+}