Merge pull request #9 from Dvorinka/feat/vercel-landing

feat: landing page + public template catalog
2026-10-28 07:41:27 +00:00 · 2026-09-23 19:02:47 +02:00
commit ad797a49c9
@@ -123,3 +123,4 @@ bin
 ref/
 .playwright-mcp/
 canvas-*.png
+.vercel
@@ -0,0 +1,2 @@
+/*
+!/site
@@ -0,0 +1,24 @@
+// dumptemplates prints the seeded official template catalog as JSON in the same
+// shape as GET /api/v1/templates. The landing site (site/templates.json) uses it
+// as the offline fallback catalog: `go run ./cmd/dumptemplates > ../../site/templates.json`.
+package main
+
+import (
+	"containr/internal/api"
+	"encoding/json"
+	"fmt"
+	"os"
+)
+
+func main() {
+	out := struct {
+		Templates []api.ServiceTemplate `json:"templates"`
+	}{Templates: api.SeedTemplates()}
+
+	enc := json.NewEncoder(os.Stdout)
+	enc.SetIndent("", "  ")
+	if err := enc.Encode(out); err != nil {
+		fmt.Fprintln(os.Stderr, "encode:", err)
+		os.Exit(1)
+	}
+}
@@ -28,6 +28,7 @@ type ServiceTemplate struct {
 	Variables   string    `json:"variables" db:"variables"`
 	IsOfficial  bool      `json:"is_official" db:"is_official"`
 	OwnerID     string    `json:"owner_id,omitempty" db:"owner_id"`
+	IsPublic    bool      `json:"is_public" db:"is_public"`
 	CreatedAt   time.Time `json:"created_at" db:"created_at"`
 	UpdatedAt   time.Time `json:"updated_at" db:"updated_at"`
 }
@@ -383,6 +384,7 @@ type templateWriteRequest struct {
 	Logo        string          `json:"logo"`
 	Config      json.RawMessage `json:"config" binding:"required"`
 	Variables   json.RawMessage `json:"variables"`
+	IsPublic    bool            `json:"is_public"`
 }

 var templateCategories = map[string]bool{
@@ -483,6 +485,7 @@ func handleCreateTemplate(c *gin.Context) {
 		Config:      req.Config,
 		Variables:   templateVariablesParam(req.Variables),
 		OwnerID:     uuid.NullUUID{UUID: ownerUUID, Valid: true},
+		IsPublic:    req.IsPublic,
 	}); err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create template"})
 		return
@@ -529,6 +532,7 @@ func handleUpdateTemplate(c *gin.Context) {
 		Logo:        nullableText(req.Logo),
 		Config:      req.Config,
 		Variables:   templateVariablesParam(req.Variables),
+		IsPublic:    req.IsPublic,
 		ID:          templateID,
 		OwnerID:     uuid.NullUUID{UUID: ownerUUID, Valid: true},
 	})
@@ -1013,10 +1017,11 @@ func defaultTemplateResources(serviceType string) (cpu, memory string) {
 	}
 }

-// templateVisibleTo reports whether the caller may see a template: official
-// templates are public, user templates are owner/admin only.
+// templateVisibleTo reports whether the caller may see a template: official and
+// published (is_public) templates are public, other user templates are
+// owner/admin only.
 func templateVisibleTo(c *gin.Context, t ServiceTemplate) bool {
-	if t.IsOfficial {
+	if t.IsOfficial || t.IsPublic {
 		return true
 	}
 	if contextIsAdmin(c) {
@@ -1047,6 +1052,7 @@ func mapSQLCTemplate(row sqlcdb.ServiceTemplate) ServiceTemplate {
 		Variables:   variables,
 		IsOfficial:  row.IsOfficial.Valid && row.IsOfficial.Bool,
 		OwnerID:     ownerID,
+		IsPublic:    row.IsPublic,
 		CreatedAt:   templateNullTime(row.CreatedAt),
 		UpdatedAt:   templateNullTime(row.UpdatedAt),
 	}
@@ -207,6 +207,7 @@ type ServiceTemplate struct {
 	Variables   pqtype.NullRawMessage `json:"variables"`
 	IsOfficial  sql.NullBool          `json:"is_official"`
 	OwnerID     uuid.NullUUID         `json:"owner_id"`
+	IsPublic    bool                  `json:"is_public"`
 	CreatedAt   sql.NullTime          `json:"created_at"`
 	UpdatedAt   sql.NullTime          `json:"updated_at"`
 }
@@ -125,7 +125,7 @@ func (q *Queries) CreateServiceFromTemplate(ctx context.Context, arg CreateServi
 }

 const createUserTemplate = `-- name: CreateUserTemplate :exec
-INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id)
+INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id, is_public)
 VALUES (
    $1,
    $2,
@@ -135,7 +135,8 @@ VALUES (
    $6,
    $7,
    false,
-    $8
+    $8,
+    $9
 )
 `

@@ -148,6 +149,7 @@ type CreateUserTemplateParams struct {
 	Config      json.RawMessage       `json:"config"`
 	Variables   pqtype.NullRawMessage `json:"variables"`
 	OwnerID     uuid.NullUUID         `json:"owner_id"`
+	IsPublic    bool                  `json:"is_public"`
 }

 func (q *Queries) CreateUserTemplate(ctx context.Context, arg CreateUserTemplateParams) error {
@@ -160,6 +162,7 @@ func (q *Queries) CreateUserTemplate(ctx context.Context, arg CreateUserTemplate
 		arg.Config,
 		arg.Variables,
 		arg.OwnerID,
+		arg.IsPublic,
 	)
 	return err
 }
@@ -198,7 +201,7 @@ func (q *Queries) GetProjectOwnerID(ctx context.Context, id uuid.UUID) (uuid.UUI
 }

 const getServiceTemplateByID = `-- name: GetServiceTemplateByID :one
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE id = $1
 `
@@ -216,6 +219,7 @@ func (q *Queries) GetServiceTemplateByID(ctx context.Context, id string) (Servic
 		&i.Variables,
 		&i.IsOfficial,
 		&i.OwnerID,
+		&i.IsPublic,
 		&i.CreatedAt,
 		&i.UpdatedAt,
 	)
@@ -223,10 +227,10 @@ func (q *Queries) GetServiceTemplateByID(ctx context.Context, id string) (Servic
 }

 const listServiceTemplatesByCategoryForUser = `-- name: ListServiceTemplatesByCategoryForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE category = $1
-  AND (is_official = true OR owner_id = $2)
+  AND (is_official = true OR is_public = true OR owner_id = $2)
 ORDER BY is_official DESC, name ASC
 `

@@ -254,6 +258,7 @@ func (q *Queries) ListServiceTemplatesByCategoryForUser(ctx context.Context, arg
 			&i.Variables,
 			&i.IsOfficial,
 			&i.OwnerID,
+			&i.IsPublic,
 			&i.CreatedAt,
 			&i.UpdatedAt,
 		); err != nil {
@@ -271,9 +276,9 @@ func (q *Queries) ListServiceTemplatesByCategoryForUser(ctx context.Context, arg
 }

 const listServiceTemplatesForUser = `-- name: ListServiceTemplatesForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
-WHERE is_official = true OR owner_id = $1
+WHERE is_official = true OR is_public = true OR owner_id = $1
 ORDER BY is_official DESC, name ASC
 `

@@ -296,6 +301,7 @@ func (q *Queries) ListServiceTemplatesForUser(ctx context.Context, ownerID uuid.
 			&i.Variables,
 			&i.IsOfficial,
 			&i.OwnerID,
+			&i.IsPublic,
 			&i.CreatedAt,
 			&i.UpdatedAt,
 		); err != nil {
@@ -320,9 +326,10 @@ SET name = $1,
    logo = $4,
    config = $5,
    variables = $6,
+    is_public = $7,
    updated_at = NOW()
-WHERE id = $7
-  AND owner_id = $8
+WHERE id = $8
+  AND owner_id = $9
  AND is_official = false
 `

@@ -333,6 +340,7 @@ type UpdateUserTemplateParams struct {
 	Logo        sql.NullString        `json:"logo"`
 	Config      json.RawMessage       `json:"config"`
 	Variables   pqtype.NullRawMessage `json:"variables"`
+	IsPublic    bool                  `json:"is_public"`
 	ID          string                `json:"id"`
 	OwnerID     uuid.NullUUID         `json:"owner_id"`
 }
@@ -345,6 +353,7 @@ func (q *Queries) UpdateUserTemplate(ctx context.Context, arg UpdateUserTemplate
 		arg.Logo,
 		arg.Config,
 		arg.Variables,
+		arg.IsPublic,
 		arg.ID,
 		arg.OwnerID,
 	)
@@ -0,0 +1,11 @@
+-- +goose Up
+-- Railway-style template publishing: owners can mark a user template public so
+-- it appears in the anonymous catalog (GET /api/v1/templates) and on the
+-- landing page. Official templates stay official; is_public only matters for
+-- user templates.
+ALTER TABLE public.service_templates ADD COLUMN IF NOT EXISTS is_public boolean NOT NULL DEFAULT false;
+CREATE INDEX IF NOT EXISTS idx_service_templates_public ON public.service_templates(is_public) WHERE is_public;
+
+-- +goose Down
+DROP INDEX IF EXISTS public.idx_service_templates_public;
+ALTER TABLE public.service_templates DROP COLUMN IF EXISTS is_public;
@@ -1,18 +1,18 @@
 -- name: ListServiceTemplatesForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
-WHERE is_official = true OR owner_id = sqlc.narg(owner_id)
+WHERE is_official = true OR is_public = true OR owner_id = sqlc.narg(owner_id)
 ORDER BY is_official DESC, name ASC;

 -- name: ListServiceTemplatesByCategoryForUser :many
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE category = sqlc.arg(category)
-  AND (is_official = true OR owner_id = sqlc.narg(owner_id))
+  AND (is_official = true OR is_public = true OR owner_id = sqlc.narg(owner_id))
 ORDER BY is_official DESC, name ASC;

 -- name: GetServiceTemplateByID :one
-SELECT id, name, description, category, logo, config, variables, is_official, owner_id, created_at, updated_at
+SELECT id, name, description, category, logo, config, variables, is_official, owner_id, is_public, created_at, updated_at
 FROM service_templates
 WHERE id = $1;

@@ -39,7 +39,7 @@ SET name = EXCLUDED.name,
    updated_at = NOW();

 -- name: CreateUserTemplate :exec
-INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id)
+INSERT INTO service_templates (id, name, description, category, logo, config, variables, is_official, owner_id, is_public)
 VALUES (
    sqlc.arg(id),
    sqlc.arg(name),
@@ -49,7 +49,8 @@ VALUES (
    sqlc.arg(config),
    sqlc.narg(variables),
    false,
-    sqlc.arg(owner_id)
+    sqlc.arg(owner_id),
+    sqlc.arg(is_public)
 );

 -- name: UpdateUserTemplate :execrows
@@ -60,6 +61,7 @@ SET name = sqlc.arg(name),
    logo = sqlc.narg(logo),
    config = sqlc.arg(config),
    variables = sqlc.narg(variables),
+    is_public = sqlc.arg(is_public),
    updated_at = NOW()
 WHERE id = sqlc.arg(id)
  AND owner_id = sqlc.arg(owner_id)
@@ -84,6 +84,7 @@ CREATE TABLE service_templates (
    variables JSONB DEFAULT '[]',
    is_official BOOLEAN DEFAULT false,
    owner_id UUID,
+    is_public BOOLEAN NOT NULL DEFAULT false,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
 );
@@ -48,6 +48,7 @@ const demoTemplates: TemplateEntity[] = [
    variablesRaw: '[]',
    isOfficial: true,
    ownerId: null,
+    isPublic: false,
  },
  {
    id: 'tpl-go',
@@ -59,6 +60,7 @@ const demoTemplates: TemplateEntity[] = [
    variablesRaw: '[]',
    isOfficial: true,
    ownerId: null,
+    isPublic: false,
  },
  {
    id: 'tpl-postgres',
@@ -70,6 +72,7 @@ const demoTemplates: TemplateEntity[] = [
    variablesRaw: '[]',
    isOfficial: true,
    ownerId: null,
+    isPublic: false,
  },
  {
    id: 'tpl-mysql',
@@ -81,6 +84,7 @@ const demoTemplates: TemplateEntity[] = [
    variablesRaw: '[]',
    isOfficial: true,
    ownerId: null,
+    isPublic: false,
  },
  {
    id: 'tpl-mariadb',
@@ -92,6 +96,7 @@ const demoTemplates: TemplateEntity[] = [
    variablesRaw: '[]',
    isOfficial: true,
    ownerId: null,
+    isPublic: false,
  },
  {
    id: 'tpl-clickhouse',
@@ -103,6 +108,7 @@ const demoTemplates: TemplateEntity[] = [
    variablesRaw: '[]',
    isOfficial: true,
    ownerId: null,
+    isPublic: false,
  },
  {
    id: 'tpl-dragonfly',
@@ -114,6 +120,7 @@ const demoTemplates: TemplateEntity[] = [
    variablesRaw: '[]',
    isOfficial: true,
    ownerId: null,
+    isPublic: false,
  },
 ];

@@ -445,6 +452,7 @@ export function TemplatesPage() {
  const [editorOpen, setEditorOpen] = useState(false);
  const [editorJson, setEditorJson] = useState(EMPTY_TEMPLATE_JSON);
  const [editingTemplate, setEditingTemplate] = useState<TemplateEntity | null>(null);
+  const [editorIsPublic, setEditorIsPublic] = useState(false);
  const [editorError, setEditorError] = useState<string | null>(null);

  const [categoryFilter, setCategoryFilter] = useState('');
@@ -655,6 +663,7 @@ export function TemplatesPage() {
  const openCreateEditor = () => {
    setEditingTemplate(null);
    setEditorJson(EMPTY_TEMPLATE_JSON);
+    setEditorIsPublic(false);
    setEditorError(null);
    setEditorOpen(true);
  };
@@ -687,6 +696,7 @@ export function TemplatesPage() {
        2,
      ),
    );
+    setEditorIsPublic(template.isPublic);
    setEditorError(null);
    setEditorOpen(true);
  };
@@ -711,6 +721,7 @@ export function TemplatesPage() {
      logo: body.logo ?? '',
      config: body.config as Record<string, unknown>,
      variables: Array.isArray(body.variables) ? body.variables : [],
+      isPublic: editorIsPublic,
    });
  };

@@ -880,6 +891,11 @@ export function TemplatesPage() {
                                  Mine
                                </span>
                              ) : null}
+                              {!template.isOfficial && template.isPublic ? (
+                                <span className="px-1.5 py-0.5 rounded bg-[var(--info-soft)] text-[var(--info)] text-[10px] font-semibold">
+                                  Public
+                                </span>
+                              ) : null}
                            </div>
                            <div className="flex items-center gap-2 mt-1">
                              <span 
@@ -955,6 +971,11 @@ export function TemplatesPage() {
                            Official
                          </span>
                        )}
+                        {!selectedDetail.template.isOfficial && selectedDetail.template.isPublic && (
+                          <span className="px-2 py-0.5 rounded-full bg-[var(--info-soft)] text-[var(--info)] text-xs font-medium">
+                            Public
+                          </span>
+                        )}
                      </div>
                      <p className="text-sm text-[var(--text-secondary)] mt-1">{selectedDetail.template.description}</p>
                    </div>
@@ -1230,9 +1251,15 @@ export function TemplatesPage() {
              </div>
            ) : null}
            <div className="flex items-center justify-between border-t border-[var(--border-subtle)] px-5 py-3.5">
-              <p className="text-[11px] text-[var(--text-tertiary)]">
-                Saved as a user template — only you (and admins) can edit or delete it.
-              </p>
+              <label className="inline-flex cursor-pointer items-center gap-2 text-[11px] text-[var(--text-secondary)]">
+                <input
+                  type="checkbox"
+                  checked={editorIsPublic}
+                  onChange={(e) => setEditorIsPublic(e.target.checked)}
+                  className="h-3.5 w-3.5 accent-[var(--accent-primary)]"
+                />
+                List in the public catalog - anyone browsing this instance can see and deploy it.
+              </label>
              <div className="flex items-center gap-2">
                <button
                  type="button"
@@ -7806,6 +7806,8 @@ export interface components {
            is_official?: boolean;
            /** @description Owning user ID for user-created templates; null for official presets */
            owner_id?: string | null;
+            /** @description Whether a user-created template is published to the public catalog */
+            is_public?: boolean;
            /**
             * Format: date-time
             * @description Creation timestamp
@@ -7830,6 +7832,8 @@ export interface components {
            config: Record<string, never>;
            /** @description Configurable variables exposed at deploy time */
            variables?: components["schemas"]["TemplateVariable"][];
+            /** @description Publish this template to the public catalog (visible anonymously) */
+            is_public?: boolean;
        };
        TemplateConfig: {
            /** @description Service type for created service */
@@ -124,6 +124,7 @@ export type TemplateEntity = {
  variablesRaw: string;
  isOfficial: boolean;
  ownerId: string | null;
+  isPublic: boolean;
  createdAt?: string;
  updatedAt?: string;
 };
@@ -615,6 +616,7 @@ function normalizeTemplate(template: RawServiceTemplate): TemplateEntity | null
    variablesRaw: template.variables ?? '',
    isOfficial: Boolean(template.is_official),
    ownerId: template.owner_id ?? null,
+    isPublic: Boolean(template.is_public),
    createdAt: template.created_at,
    updatedAt: template.updated_at,
  };
@@ -1358,6 +1360,7 @@ export type TemplateWriteInput = {
  logo?: string;
  config: Record<string, unknown>;
  variables?: TemplateVariableEntity[];
+  isPublic?: boolean;
 };

 function templateWriteBody(input: TemplateWriteInput): string {
@@ -1368,6 +1371,7 @@ function templateWriteBody(input: TemplateWriteInput): string {
    logo: input.logo ?? '',
    config: input.config,
    variables: input.variables ?? [],
+    is_public: input.isPublic ?? false,
  });
 }

@@ -5216,6 +5216,9 @@ components:
          type: string
          nullable: true
          description: Owning user ID for user-created templates; null for official presets
+        is_public:
+          type: boolean
+          description: Whether a user-created template is published to the public catalog
        created_at:
          type: string
          format: date-time
@@ -5251,6 +5254,9 @@ components:
          items:
            $ref: '#/components/schemas/TemplateVariable'
          description: Configurable variables exposed at deploy time
+        is_public:
+          type: boolean
+          description: Publish this template to the public catalog (visible anonymously)

    TemplateConfig:
      type: object
@@ -0,0 +1,2 @@
+.vercel
+.env*
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#cdf06f"/>
+      <stop offset="1" stop-color="#7fb524"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="15" fill="url(#bg)"/>
+  <g fill="none" stroke="#131507" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="15" y="18" width="34" height="26" rx="4"/>
+    <path d="M23 18v26M31 18v26M39 18v26"/>
+    <path d="M20 51h24"/>
+  </g>
+</svg>
@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Containr - Self-hosted platform for containerized services</title>
+<meta name="description" content="Containr turns any Docker host into a full deployment platform. Visual project canvases, git-push builds, managed databases, preview environments, and HA failover on your own hardware.">
+<meta property="og:title" content="Containr">
+<meta property="og:description" content="Railway-style project canvases on your own hardware. Open source, MIT licensed.">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://containr-lyart.vercel.app/">
+<meta property="og:image" content="https://containr-lyart.vercel.app/screenshots/canvas.png">
+<link rel="canonical" href="https://containr-lyart.vercel.app/">
+<meta name="theme-color" content="#0c0d0f">
+<link rel="icon" type="image/svg+xml" href="containr.svg">
+<script>document.documentElement.classList.add('js');</script>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<nav>
+  <div class="wrap nav-inner">
+    <a href="#" class="brand">
+      <img src="containr.svg" alt="Containr logo">
+      contain<em>r</em>
+    </a>
+    <div class="nav-links">
+      <a href="#features">Features</a>
+      <a href="#product">Product</a>
+      <a href="templates.html">Templates</a>
+      <a href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Docs</a>
+    </div>
+    <div class="nav-right">
+      <a class="gh-link" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener" aria-label="Containr on GitHub">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
+      </a>
+      <a class="btn btn-primary" href="#install">Get started</a>
+    </div>
+  </div>
+</nav>
+
+<header class="hero">
+  <div class="wrap">
+    <span class="pill">
+      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><rect x="3" y="7" width="18" height="12" rx="2"/><path d="M8 7v12M13 7v12M18 7v12M6 22h12"/></svg>
+      Self-hosted PaaS · MIT license
+    </span>
+    <h1>Deploy containers on <em>your own cloud</em></h1>
+    <p class="sub">Containr turns a Docker host into a full deployment platform. Git builds, managed databases, previews, failover.</p>
+    <div class="hero-cta">
+      <a class="btn btn-primary" href="#install">
+        Get started
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+      </a>
+      <a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">View on GitHub</a>
+    </div>
+
+    <div class="shot-frame reveal">
+      <div class="shot-bar"><span class="addr">containr &#8250; core-platform &#8250; canvas</span></div>
+      <div class="cv" aria-label="Containr project canvas preview">
+        <div class="cv-top">
+          <span class="cv-back">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
+            Projects
+          </span>
+          <b>Core Platform<span class="cv-cursor">_</span></b>
+          <span class="cv-meta">5 services &#183; 4 running</span>
+          <span class="cv-tabs">
+            <i class="on">Canvas</i><i>Observability</i><i>Logs</i><i>Settings</i>
+          </span>
+          <span class="cv-active">&#9679; ACTIVE</span>
+        </div>
+        <div class="cv-stage">
+          <svg class="cv-edges" viewBox="0 0 1000 360" preserveAspectRatio="none" aria-hidden="true">
+            <path d="M 222 101 C 287 101 287 177 358 177" />
+            <path class="live" d="M 222 238 C 287 238 287 177 358 177" />
+            <path d="M 536 168 C 618 168 618 83 706 83" />
+            <path d="M 536 195 C 618 195 618 216 706 216" />
+          </svg>
+          <svg class="cv-edges-m" viewBox="0 0 1000 360" preserveAspectRatio="none" aria-hidden="true">
+            <path d="M 468 105 C 494 105 494 185 520 185" />
+            <path class="live" d="M 468 278 C 494 278 494 185 520 185" />
+            <path d="M 949 62 C 985 62 985 155 949 155" />
+            <path d="M 949 300 C 985 300 985 215 949 215" />
+          </svg>
+
+          <div class="cv-pill env"><i></i>production<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></div>
+
+          <div class="cv-node cv-n1">
+            <div class="cv-row">
+              <span class="cv-ic" style="background:rgba(97,218,251,.14);color:#61dafb"><img src="https://cdn.simpleicons.org/react/61dafb" alt="" onerror="this.replaceWith('R')"></span>
+              <div><h4>Web Frontend</h4><p>web</p></div>
+            </div>
+            <div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg><span>web.containr.local</span></div>
+            <div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>ghcr.io/web:v42</code></div>
+          </div>
+
+          <div class="cv-node cv-n2">
+            <div class="cv-row">
+              <span class="cv-ic" style="background:rgba(180,227,74,.14);color:var(--accent)"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 17 6-6-6-6M12 19h8"/></svg></span>
+              <div><h4>Queue Worker</h4><p>worker</p></div>
+            </div>
+            <div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 9 6 6M15 9l-6 6"/></svg><span>queue-worker</span></div>
+            <div class="cv-foot"><span class="cv-st dep"></span><em style="color:#f2c94c">deploying</em><code>worker:edge</code></div>
+          </div>
+
+          <div class="cv-node sel cv-n3">
+            <div class="cv-row">
+              <span class="cv-ic" style="background:rgba(0,173,216,.14);color:#00add8"><img src="https://cdn.simpleicons.org/go/00add8" alt="" onerror="this.replaceWith('G')"></span>
+              <div><h4>API Gateway</h4><p>web &#183; 2 replicas</p></div>
+            </div>
+            <div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg><span>api.containr.local</span></div>
+            <div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>api:v2.4.1</code></div>
+          </div>
+
+          <div class="cv-node cv-n4">
+            <div class="cv-row">
+              <span class="cv-ic" style="background:rgba(65,105,225,.16);color:#7ab8ff"><img src="https://cdn.simpleicons.org/postgresql/7ab8ff" alt="" onerror="this.replaceWith('P')"></span>
+              <div><h4>Postgres</h4><p>database</p></div>
+            </div>
+            <div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/></svg><span>postgres:5432</span></div>
+            <div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>postgres:16</code></div>
+          </div>
+
+          <div class="cv-node cv-n5">
+            <div class="cv-row">
+              <span class="cv-ic" style="background:rgba(255,68,68,.13);color:#ff6b6b"><img src="https://cdn.simpleicons.org/redis/ff6b6b" alt="" onerror="this.replaceWith('R')"></span>
+              <div><h4>Redis Cache</h4><p>database</p></div>
+            </div>
+            <div class="cv-addr"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/></svg><span>redis:6379</span></div>
+            <div class="cv-foot"><span class="cv-st run"></span><em>running</em><code>dragonfly:1</code></div>
+          </div>
+
+          <div class="cv-pill zoom">
+            <span>&#8722;</span><b>100%</b><span>+</span><i></i>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 15-4.5 4.5M9 15l6-6M8 4l.9 2.6L11.5 8 9 9.5 6.4 8 8 5.4zM19 13l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7zM13 3l.6 1.7L15.3 5l-1.7.6L13 7.3 12.4 5.6 10.7 5l1.7-.6z"/></svg>
+          </div>
+          <div class="cv-minimap"><i style="left:6%;top:14%"></i><i style="left:6%;top:52%"></i><i style="left:38%;top:35%"></i><i style="left:72%;top:9%"></i><i style="left:72%;top:46%"></i></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+
+<div class="install" id="install">
+  <div class="wrap">
+    <div class="install-inner reveal">
+      <div class="install-copy">
+        <h2>One command, running stack</h2>
+        <p>Requires Docker and openssl. Installs into ./containr, never overwrites your .env.</p>
+      </div>
+      <div class="cmd">
+        <code id="install-cmd">curl -fsSL https://raw.githubusercontent.com/Dvorinka/Containr/main/install.sh | bash</code>
+        <button class="copy-btn" id="copy-btn" aria-label="Copy install command">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<section id="features">
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <h2>A control plane, not a pile of YAML</h2>
+      <p>Everything a deployment platform needs, running on hardware you already own. One install, one dashboard.</p>
+    </div>
+    <div class="bento">
+      <div class="cell wide reveal">
+        <div>
+          <div class="icon">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/><path d="M10 6.5h5.5a2 2 0 0 1 2 2V14M6.5 10v5.5a2 2 0 0 0 2 2H14"/></svg>
+          </div>
+          <h3>Visual project canvas</h3>
+          <p>Services appear as nodes on a Railway-style canvas. Drag, group, and wire them together; connections and shared variables are inferred automatically. Start, stop, restart, or roll back with a right-click.</p>
+        </div>
+        <div class="cell-media"><img src="screenshots/service-detail.png" alt="Service view with metrics, logs, and configuration tabs" loading="lazy"></div>
+      </div>
+      <div class="cell tinted reveal">
+        <div class="icon">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/><path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></svg>
+        </div>
+        <h3>Managed databases</h3>
+        <p>Provision engines from the dashboard, with backups and restore built in.</p>
+        <div class="chips">
+          <span>PostgreSQL</span><span>MySQL</span><span>MariaDB</span><span>MongoDB</span><span>Redis</span><span>Dragonfly</span><span>ClickHouse</span>
+        </div>
+      </div>
+      <div class="cell reveal">
+        <div class="icon">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M8 7.5 10.5 16M16 7.5 13.5 16M8.5 6h7"/></svg>
+        </div>
+        <h3>Private networking</h3>
+        <p>Every project gets an isolated Docker network. Services reach each other by name.</p>
+        <div class="snippet">web:3000 <b>&#8594;</b> ${{service.KEY}}</div>
+      </div>
+      <div class="cell reveal">
+        <div class="icon">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v12"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="6" r="2.5"/><path d="M18 8.5a5 5 0 0 1-5 5H9"/></svg>
+        </div>
+        <h3>Git-push deploys</h3>
+        <p>Connect GitHub, GitLab, Bitbucket, or Gitea. Builds, history, and image rollback included.</p>
+      </div>
+      <div class="cell reveal">
+        <div class="icon">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>
+        </div>
+        <h3>HA and autoscaling</h3>
+        <p>Failover policies, health checks, node agents, and metric-driven replica scaling.</p>
+      </div>
+      <div class="cell reveal">
+        <div class="icon">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 6v6c0 5 3.4 8.6 8 10 4.6-1.4 8-5 8-10V6l-8-4Z"/><path d="m9 12 2 2 4-4"/></svg>
+        </div>
+        <h3>Admin and audit</h3>
+        <p>Approval console, user management, audit logs, and vulnerability scans behind sign-in.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="product">
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <h2>The whole fleet on one screen</h2>
+      <p>Logs, metrics, builds, and rollbacks without leaving the dashboard. Host telemetry included.</p>
+    </div>
+    <div class="gallery reveal">
+      <div class="shot-tabs" role="tablist" aria-label="Product screenshots">
+        <button class="shot-tab on" role="tab" aria-selected="true" data-shot="dashboard" data-cap="Projects dashboard with host CPU, memory, and disk telemetry.">Dashboard</button>
+        <button class="shot-tab" role="tab" aria-selected="false" data-shot="canvas" data-cap="Visual service canvas with auto-inferred connections.">Canvas</button>
+        <button class="shot-tab" role="tab" aria-selected="false" data-shot="service-detail" data-cap="Service detail with metrics, logs, and config tabs.">Service detail</button>
+        <button class="shot-tab" role="tab" aria-selected="false" data-shot="databases" data-cap="Managed databases with backup and restore.">Databases</button>
+      </div>
+      <img id="gallery-img" src="screenshots/dashboard.png" alt="Containr dashboard" loading="lazy">
+      <p class="cap" id="gallery-cap">Projects dashboard with host CPU, memory, and disk telemetry.</p>
+    </div>
+  </div>
+</section>
+
+<section id="templates">
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <h2>A catalog worth browsing</h2>
+      <p>Thirty official templates plus community presets. <a href="templates.html" style="color: var(--accent);">Browse the full catalog</a> or publish your own.</p>
+    </div>
+    <div class="marquee reveal" aria-label="Template catalog">
+      <div class="marquee-track" id="marquee-track">
+        <span class="tpl"><img src="https://cdn.simpleicons.org/n8n/8b919e" alt="" loading="lazy" onerror="this.remove()">n8n</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/nextcloud/8b919e" alt="" loading="lazy" onerror="this.remove()">Nextcloud</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/immich/8b919e" alt="" loading="lazy" onerror="this.remove()">Immich</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/vaultwarden/8b919e" alt="" loading="lazy" onerror="this.remove()">Vaultwarden</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/grafana/8b919e" alt="" loading="lazy" onerror="this.remove()">Grafana</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/supabase/8b919e" alt="" loading="lazy" onerror="this.remove()">Supabase</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/gitea/8b919e" alt="" loading="lazy" onerror="this.remove()">Gitea</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/uptimekuma/8b919e" alt="" loading="lazy" onerror="this.remove()">Uptime Kuma</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/pihole/8b919e" alt="" loading="lazy" onerror="this.remove()">Pi-hole</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/jellyfin/8b919e" alt="" loading="lazy" onerror="this.remove()">Jellyfin</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/meilisearch/8b919e" alt="" loading="lazy" onerror="this.remove()">Meilisearch</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/mastodon/8b919e" alt="" loading="lazy" onerror="this.remove()">Mastodon</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/homeassistant/8b919e" alt="" loading="lazy" onerror="this.remove()">Home Assistant</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/plausibleanalytics/8b919e" alt="" loading="lazy" onerror="this.remove()">Plausible</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/minio/8b919e" alt="" loading="lazy" onerror="this.remove()">MinIO</span>
+        <span class="tpl"><img src="https://cdn.simpleicons.org/appwrite/8b919e" alt="" loading="lazy" onerror="this.remove()">Appwrite</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section>
+  <div class="wrap">
+    <div class="sec-head reveal">
+      <h2>Open for visitors, locked for owners</h2>
+      <p>The platform doubles as a public showcase. Approved projects are browsable anonymously; secrets never are.</p>
+    </div>
+    <div class="access reveal">
+      <div>
+        <h3>Anonymous</h3>
+        <ul>
+          <li>Browse approved projects</li>
+          <li>Template catalog and docs</li>
+          <li>HA status overview</li>
+        </ul>
+      </div>
+      <div>
+        <h3>Signed in</h3>
+        <ul>
+          <li>Projects, services, databases</li>
+          <li>Logs, variables, builds, deploys</li>
+          <li>Custom templates</li>
+        </ul>
+      </div>
+      <div>
+        <h3>Admin</h3>
+        <ul>
+          <li>Project approval and moderation</li>
+          <li>User flags and agent tokens</li>
+          <li>Platform settings</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
+<div class="cta">
+  <div class="wrap reveal">
+    <h2>Run your own cloud.</h2>
+    <p>One Docker host is all it takes. Free, open source, and yours to keep.</p>
+    <div class="hero-cta">
+      <a class="btn btn-primary" href="#install">
+        Get started
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+      </a>
+      <a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">Star on GitHub</a>
+    </div>
+  </div>
+</div>
+
+<footer>
+  <div class="wrap foot">
+    <span class="l"><img src="containr.svg" alt="">Containr - MIT License</span>
+    <nav>
+      <a href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">GitHub</a>
+      <a href="https://github.com/Dvorinka/Containr/tree/main/docs" target="_blank" rel="noopener">Docs</a>
+      <a href="https://github.com/Dvorinka/Containr/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contribute</a>
+      <a href="https://github.com/Dvorinka/Containr/blob/main/SECURITY.md" target="_blank" rel="noopener">Security</a>
+    </nav>
+  </div>
+</footer>
+
+<script>
+  // Copy install command
+  document.getElementById('copy-btn').addEventListener('click', async (e) => {
+    const cmd = document.getElementById('install-cmd').textContent;
+    try {
+      await navigator.clipboard.writeText(cmd);
+    } catch {
+      const r = document.createRange();
+      r.selectNodeContents(document.getElementById('install-cmd'));
+      const s = getSelection();
+      s.removeAllRanges();
+      s.addRange(r);
+    }
+    const btn = e.currentTarget;
+    btn.style.color = 'var(--accent)';
+    setTimeout(() => (btn.style.color = ''), 1200);
+  });
+
+  // Screenshot gallery tabs
+  const img = document.getElementById('gallery-img');
+  const cap = document.getElementById('gallery-cap');
+  document.querySelectorAll('.shot-tab').forEach((tab) => {
+    tab.addEventListener('click', () => {
+      document.querySelectorAll('.shot-tab').forEach((t) => {
+        t.classList.remove('on');
+        t.setAttribute('aria-selected', 'false');
+      });
+      tab.classList.add('on');
+      tab.setAttribute('aria-selected', 'true');
+      img.src = 'screenshots/' + tab.dataset.shot + '.png';
+      img.alt = 'Containr ' + tab.textContent.trim() + ' screenshot';
+      cap.textContent = tab.dataset.cap;
+    });
+  });
+
+  // Duplicate marquee track for seamless loop
+  const track = document.getElementById('marquee-track');
+  track.innerHTML += track.innerHTML;
+
+  // Scroll reveal
+  const io = new IntersectionObserver(
+    (entries) => entries.forEach((en) => en.isIntersecting && en.target.classList.add('in')),
+    { threshold: 0.12 }
+  );
+  document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
+</script>
+</body>
+</html>
@@ -0,0 +1,624 @@
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('fonts/inter-latin.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('fonts/inter-latin-ext.woff2') format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  @font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400 800;
+    font-display: swap;
+    src: url('fonts/jbmono-latin.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  @font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400 800;
+    font-display: swap;
+    src: url('fonts/jbmono-latin-ext.woff2') format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+
+  :root {
+    --bg-void: #0c0d0f;
+    --bg-base: #0e0f12;
+    --surface-card: #131518;
+    --surface-card-hover: #1a1d22;
+    --surface-muted: #1a1d22;
+    --border-subtle: rgba(255, 255, 255, 0.06);
+    --border-default: rgba(255, 255, 255, 0.1);
+    --border-strong: rgba(255, 255, 255, 0.18);
+    --text-primary: #ecedf0;
+    --text-secondary: #8b919e;
+    --text-tertiary: #575d68;
+    --accent: #b4e34a;
+    --accent-dim: rgba(180, 227, 74, 0.12);
+    --accent-on: #131507;
+    --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
+    --sans: 'Inter', system-ui, -apple-system, sans-serif;
+    --radius: 14px;
+    --radius-sm: 9px;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html { scroll-behavior: smooth; }
+  body {
+    font-family: var(--sans);
+    background: var(--bg-void);
+    color: var(--text-secondary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
+  }
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: radial-gradient(1000px 480px at 50% -8%, rgba(180, 227, 74, 0.05), transparent 60%);
+    pointer-events: none;
+  }
+  ::selection { background: rgba(180, 227, 74, 0.25); color: var(--text-primary); }
+
+  a { color: inherit; text-decoration: none; }
+  img { display: block; max-width: 100%; }
+  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
+
+  /* ---------- nav ---------- */
+  nav {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    border-bottom: 1px solid var(--border-subtle);
+    background: rgba(14, 15, 18, 0.82);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+  }
+  .nav-inner {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    gap: 28px;
+  }
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    font-weight: 800;
+    font-size: 15px;
+    letter-spacing: -0.02em;
+    color: var(--text-primary);
+  }
+  .brand img { width: 26px; height: 26px; border-radius: 7px; }
+  .brand em { font-style: normal; color: var(--accent); }
+  .nav-links { display: flex; gap: 4px; margin-left: 8px; }
+  .nav-links a {
+    font-size: 13px;
+    padding: 6px 12px;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    transition: color 0.15s, background 0.15s;
+  }
+  .nav-links a:hover { color: var(--text-primary); background: var(--surface-muted); }
+  .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
+  .gh-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+    transition: color 0.15s, border-color 0.15s;
+  }
+  .gh-link:hover { color: var(--text-primary); border-color: var(--border-strong); }
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 13px;
+    font-weight: 600;
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: transform 0.15s, border-color 0.15s, background 0.15s;
+    white-space: nowrap;
+  }
+  .btn-primary { background: var(--accent); color: var(--accent-on); }
+  .btn-primary:hover { transform: translateY(-1px); }
+  .btn-ghost { border-color: var(--border-default); color: var(--text-secondary); }
+  .btn-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); }
+
+  /* ---------- hero ---------- */
+  .hero { padding: 84px 0 0; }
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-tertiary);
+    border: 1px solid var(--border-subtle);
+    background: var(--surface-card);
+    padding: 6px 14px;
+    border-radius: 999px;
+  }
+  .pill svg { color: var(--accent); }
+  .hero h1 {
+    margin-top: 22px;
+    font-size: clamp(34px, 5.4vw, 58px);
+    font-weight: 800;
+    letter-spacing: -0.035em;
+    line-height: 1.06;
+    color: var(--text-primary);
+    max-width: 22ch;
+  }
+  .hero h1 em { font-style: normal; color: var(--accent); }
+  .hero .sub {
+    margin-top: 18px;
+    font-size: 15.5px;
+    line-height: 1.65;
+    max-width: 46ch;
+  }
+  .hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
+  .hero-cta .btn { font-size: 14px; padding: 11px 22px; }
+
+  .shot-frame {
+    margin-top: 56px;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius);
+    background: var(--surface-card);
+    overflow: hidden;
+    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
+  }
+  .shot-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 9px 14px;
+    border-bottom: 1px solid var(--border-subtle);
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text-tertiary);
+  }
+  .shot-bar .addr {
+    flex: 1;
+    text-align: center;
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    padding: 3px 0;
+    max-width: 320px;
+    margin: 0 auto;
+  }
+  .shot-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
+
+  /* ---------- install ---------- */
+  .install { padding: 72px 0 0; }
+  .install-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 28px;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius);
+    background: var(--bg-base);
+    padding: 26px 30px;
+    flex-wrap: wrap;
+  }
+  .install-copy h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
+  .install-copy p { font-size: 13px; margin-top: 4px; }
+  .cmd {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    font-family: var(--mono);
+    font-size: 12.5px;
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    max-width: 100%;
+  }
+  .cmd code {
+    padding: 11px 14px;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .cmd code::-webkit-scrollbar { display: none; }
+  .cmd code::before { content: '$ '; color: var(--accent); }
+  .copy-btn {
+    border: none;
+    border-left: 1px solid var(--border-subtle);
+    background: transparent;
+    color: var(--text-tertiary);
+    padding: 11px 13px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    transition: color 0.15s, background 0.15s;
+    flex-shrink: 0;
+  }
+  .copy-btn:hover { color: var(--accent); background: var(--surface-muted); }
+
+  /* ---------- sections ---------- */
+  section { padding: 96px 0 0; }
+  .sec-head { margin-bottom: 40px; }
+  .sec-head h2 {
+    font-size: clamp(24px, 3vw, 32px);
+    font-weight: 800;
+    letter-spacing: -0.025em;
+    color: var(--text-primary);
+    max-width: 22ch;
+  }
+  .sec-head p { margin-top: 10px; font-size: 14.5px; max-width: 56ch; }
+
+  /* ---------- bento ---------- */
+  .bento {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 14px;
+  }
+  .cell {
+    grid-column: span 2;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius);
+    background: var(--surface-card);
+    padding: 22px;
+    transition: border-color 0.15s, transform 0.15s;
+    position: relative;
+    overflow: hidden;
+  }
+  .cell:hover { border-color: var(--border-default); transform: translateY(-2px); }
+  .cell.wide { grid-column: span 4; display: flex; gap: 26px; align-items: stretch; }
+  .cell h3 { font-size: 14.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
+  .cell p { font-size: 12.5px; line-height: 1.6; margin-top: 8px; color: var(--text-tertiary); }
+  .cell .icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: var(--accent-dim);
+    color: var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 14px;
+  }
+  .cell.wide .icon { margin-bottom: 12px; }
+  .cell-media {
+    flex: 0 0 46%;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 1px solid var(--border-subtle);
+    align-self: center;
+  }
+  .cell-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
+  .cell.tinted { background: linear-gradient(160deg, rgba(180, 227, 74, 0.09), rgba(180, 227, 74, 0.02) 55%), var(--surface-card); }
+  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
+  .chips span {
+    font-family: var(--mono);
+    font-size: 10.5px;
+    color: var(--text-secondary);
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    padding: 3px 8px;
+  }
+  .snippet {
+    margin-top: 14px;
+    font-family: var(--mono);
+    font-size: 11.5px;
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    padding: 10px 12px;
+    color: var(--text-secondary);
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+  }
+  .snippet b { color: var(--accent); font-weight: 500; }
+
+  /* ---------- screenshots ---------- */
+  .shot-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
+  .shot-tab {
+    font-family: var(--mono);
+    font-size: 11.5px;
+    color: var(--text-tertiary);
+    background: transparent;
+    border: 1px solid var(--border-subtle);
+    border-radius: 999px;
+    padding: 7px 15px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  .shot-tab:hover { color: var(--text-secondary); border-color: var(--border-default); }
+  .shot-tab.on { color: var(--accent); border-color: rgba(180, 227, 74, 0.4); background: var(--accent-dim); }
+  .gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border-default); }
+  .gallery .cap { font-size: 12.5px; color: var(--text-tertiary); margin-top: 12px; }
+
+  /* ---------- templates marquee ---------- */
+  .marquee {
+    overflow: hidden;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius);
+    background: var(--bg-base);
+    padding: 18px 0;
+    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+  }
+  .marquee-track {
+    display: flex;
+    gap: 10px;
+    width: max-content;
+    animation: scroll 46s linear infinite;
+  }
+  @keyframes scroll { to { transform: translateX(-50%); } }
+  .tpl {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-subtle);
+    background: var(--surface-card);
+    border-radius: 999px;
+    padding: 8px 16px;
+    white-space: nowrap;
+  }
+  .tpl img { width: 15px; height: 15px; }
+
+  /* ---------- access ---------- */
+  .access {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0;
+    border-top: 1px solid var(--border-subtle);
+  }
+  .access > div { padding: 28px 28px 4px 0; }
+  .access > div + div { padding-left: 28px; border-left: 1px solid var(--border-subtle); }
+  .access h3 {
+    font-family: var(--mono);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--accent);
+  }
+  .access ul { list-style: none; margin-top: 14px; }
+  .access li { font-size: 13px; padding: 5px 0; color: var(--text-secondary); }
+  .access li::before { content: '- '; color: var(--text-tertiary); }
+
+  /* ---------- cta ---------- */
+  .cta { text-align: center; padding: 110px 0; }
+  .cta h2 {
+    font-size: clamp(30px, 4.5vw, 46px);
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    color: var(--text-primary);
+  }
+  .cta p { margin: 14px auto 0; font-size: 14.5px; max-width: 46ch; }
+  .cta .hero-cta { justify-content: center; }
+
+  /* ---------- footer ---------- */
+  footer { border-top: 1px solid var(--border-subtle); }
+  .foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26px 0;
+    font-size: 12.5px;
+    color: var(--text-tertiary);
+    flex-wrap: wrap;
+    gap: 14px;
+  }
+  .foot .l { display: flex; align-items: center; gap: 8px; }
+  .foot img { width: 18px; height: 18px; border-radius: 5px; }
+  .foot nav { display: flex; gap: 20px; position: static; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
+  .foot nav a:hover { color: var(--text-primary); }
+
+  /* ---------- reveal (JS-gated: content stays visible without JS) ---------- */
+  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
+  .js .reveal.in { opacity: 1; transform: none; }
+
+  @media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+    .marquee-track { animation: none; }
+    .reveal { opacity: 1; transform: none; transition: none; }
+    .btn-primary:hover, .cell:hover { transform: none; }
+  }
+
+  /* ---------- responsive ---------- */
+  @media (max-width: 860px) {
+    .nav-links { display: none; }
+    .bento { grid-template-columns: repeat(2, 1fr); }
+    .cell, .cell.wide { grid-column: span 2; }
+    .cell.wide { flex-direction: column; }
+    .cell-media { flex: none; }
+    .access { grid-template-columns: 1fr; }
+    .access > div { padding: 22px 0; }
+    .access > div + div { padding-left: 0; border-left: none; border-top: 1px solid var(--border-subtle); }
+    section { padding: 72px 0 0; }
+    .hero { padding-top: 56px; }
+  }
+  @media (max-width: 520px) {
+    .bento { grid-template-columns: 1fr; }
+    .cell, .cell.wide { grid-column: span 1; }
+    .install-inner { padding: 20px; }
+  }
+
+  /* ---------- hero canvas mockup ---------- */
+  .cv { background: #0a0b0d; }
+  .cv-top {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 9px 16px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: #101216;
+  }
+  .cv-back { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-tertiary); }
+  .cv-top b { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
+  .cv-meta { font-family: var(--mono); font-size: 10.5px; color: var(--text-tertiary); }
+  .cv-tabs {
+    margin-left: auto;
+    display: inline-flex;
+    gap: 2px;
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 999px;
+    padding: 3px;
+  }
+  .cv-tabs i { font-style: normal; font-size: 10.5px; color: var(--text-tertiary); padding: 4px 11px; border-radius: 999px; }
+  .cv-tabs i.on { color: var(--text-primary); background: var(--surface-muted); }
+  .cv-active { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: #5ee6a0; }
+  .cv-cursor { font-style: normal; color: var(--accent); animation: cv-blink 1.1s steps(2, start) infinite; }
+  @keyframes cv-blink { to { visibility: hidden; } }
+
+  .cv-stage {
+    position: relative;
+    height: 380px;
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
+    background-size: 22px 22px;
+    overflow: hidden;
+  }
+  .cv-edges, .cv-edges-m { position: absolute; inset: 0; width: 100%; height: 100%; }
+  .cv-edges-m { display: none; }
+  .cv-edges path, .cv-edges-m path {
+    fill: none;
+    stroke: rgba(180, 227, 74, 0.42);
+    stroke-width: 2;
+    stroke-linecap: round;
+    filter: drop-shadow(0 0 4px rgba(180, 227, 74, 0.25));
+  }
+  .cv-edges .live, .cv-edges-m .live { stroke-dasharray: 7 9; animation: cv-dash 1.1s linear infinite; }
+  @keyframes cv-dash { to { stroke-dashoffset: -16; } }
+
+  .cv-node {
+    position: absolute;
+    width: 200px;
+    background: var(--surface-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: 14px;
+    padding: 12px 12px 10px;
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
+    transition: border-color 0.2s;
+  }
+  .cv-node:hover { border-color: var(--border-default); }
+  .cv-node.sel {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent), 0 16px 44px rgba(0, 0, 0, 0.55);
+  }
+  .cv-n1 { left: 3.2%; top: 12%; }
+  .cv-n2 { left: 3.2%; top: 50%; }
+  .cv-n3 { left: 35.2%; top: 33%; }
+  .cv-n4 { left: 70%; top: 7%; }
+  .cv-n5 { left: 70%; top: 44%; }
+  .cv-row { display: flex; align-items: center; gap: 10px; }
+  .cv-ic {
+    width: 34px; height: 34px;
+    border-radius: 9px;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    font-weight: 800; font-size: 14px;
+  }
+  .cv-ic img { width: 18px; height: 18px; }
+  .cv-node h4 { font-size: 12.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
+  .cv-row p { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }
+  .cv-addr {
+    display: flex; align-items: center; gap: 6px;
+    margin-top: 10px;
+    padding: 5px 8px;
+    background: rgba(26, 29, 34, 0.55);
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    color: var(--text-tertiary);
+  }
+  .cv-addr span {
+    font-family: var(--mono); font-size: 9.5px; color: var(--text-secondary);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .cv-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
+  .cv-st { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+  .cv-st.run { background: #5ee6a0; }
+  .cv-st.dep { background: #f2c94c; animation: cv-pulse 1.4s ease-in-out infinite; }
+  @keyframes cv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+  .cv-foot em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5ee6a0; }
+  .cv-foot code {
+    margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--text-tertiary);
+    max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+
+  .cv-pill {
+    position: absolute;
+    display: inline-flex; align-items: center; gap: 7px;
+    background: rgba(19, 21, 24, 0.85);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--border-default);
+    border-radius: 999px;
+    padding: 6px 12px;
+    font-family: var(--mono); font-size: 10px; color: var(--text-secondary);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
+  }
+  .cv-pill.env { left: 14px; top: 14px; }
+  .cv-pill.env i { width: 6px; height: 6px; border-radius: 50%; background: #5ee6a0; }
+  .cv-pill.env svg { color: var(--text-tertiary); }
+  .cv-pill.zoom { left: 14px; bottom: 14px; padding: 5px 11px; gap: 9px; }
+  .cv-pill.zoom b { font-weight: 500; font-size: 10px; }
+  .cv-pill.zoom i { width: 1px; height: 12px; background: var(--border-subtle); }
+  .cv-pill.zoom svg { color: var(--text-tertiary); }
+  .cv-chip {
+    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
+    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--accent); background: var(--accent-dim);
+    border: 1px solid rgba(180, 227, 74, 0.3);
+    border-radius: 999px; padding: 4px 10px;
+  }
+  .cv-minimap {
+    position: absolute; right: 14px; bottom: 14px;
+    width: 112px; height: 68px;
+    border: 1px solid var(--border-default); border-radius: 8px;
+    background: #0e1013; overflow: hidden;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
+  }
+  .cv-minimap i { position: absolute; width: 15px; height: 10px; border-radius: 2px; background: rgba(180, 227, 74, 0.45); }
+
+  @media (max-width: 720px) {
+    .cv-stage { height: 360px; }
+    .cv-edges { display: none; }
+    .cv-edges-m { display: block; }
+    .cv-node { width: 150px; padding: 9px 9px 8px; border-radius: 11px; }
+    .cv-node h4 { font-size: 11px; }
+    .cv-ic { width: 27px; height: 27px; border-radius: 7px; }
+    .cv-ic img { width: 14px; height: 14px; }
+    .cv-addr span { font-size: 8.5px; }
+    .cv-foot code { display: none; }
+    .cv-n1 { left: 4%; top: 14%; }
+    .cv-n2 { left: 4%; top: 62%; }
+    .cv-n3 { left: 52%; top: 36%; }
+    .cv-n4 { left: 52%; top: 2%; }
+    .cv-n5 { left: 52%; top: 68%; }
+    .cv-back, .cv-meta, .cv-minimap, .cv-pill.zoom { display: none; }
+    .cv-tabs i:not(.on) { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cv-edges .live, .cv-edges-m .live, .cv-st.dep, .cv-cursor { animation: none; }
+  }
@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Template catalog - Containr</title>
+<meta name="description" content="Deploy-ready service templates for Containr. Official presets plus community templates published from live instances.">
+<meta name="theme-color" content="#0c0d0f">
+<link rel="icon" type="image/svg+xml" href="containr.svg">
+<script>document.documentElement.classList.add('js');</script>
+<link rel="stylesheet" href="style.css">
+<style>
+  .tpl-hero { padding: 72px 0 0; }
+  .tpl-hero h1 {
+    font-size: clamp(28px, 4vw, 42px);
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    color: var(--text-primary);
+    max-width: 20ch;
+  }
+  .tpl-hero .sub { margin-top: 12px; font-size: 15px; max-width: 56ch; }
+  .source-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    margin-top: 16px;
+    font-family: var(--mono);
+    font-size: 10.5px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-tertiary);
+  }
+  .source-tag i {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--text-tertiary);
+  }
+  .source-tag.live i { background: var(--accent); }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 36px 0 22px;
+    flex-wrap: wrap;
+  }
+  .search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 220px;
+    max-width: 340px;
+    background: var(--surface-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: 9px 13px;
+    color: var(--text-tertiary);
+  }
+  .search input {
+    flex: 1;
+    background: none;
+    border: none;
+    outline: none;
+    color: var(--text-primary);
+    font-size: 13px;
+    font-family: var(--sans);
+  }
+  .search input::placeholder { color: var(--text-tertiary); }
+  .cats { display: flex; gap: 6px; flex-wrap: wrap; }
+  .cat {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text-tertiary);
+    background: transparent;
+    border: 1px solid var(--border-subtle);
+    border-radius: 999px;
+    padding: 7px 13px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  .cat:hover { color: var(--text-secondary); border-color: var(--border-default); }
+  .cat.on { color: var(--accent); border-color: rgba(180, 227, 74, 0.4); background: var(--accent-dim); }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+    padding-bottom: 96px;
+  }
+  .tcard {
+    text-align: left;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius);
+    background: var(--surface-card);
+    padding: 20px;
+    cursor: pointer;
+    transition: border-color 0.15s, transform 0.15s;
+    font-family: var(--sans);
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+  }
+  .tcard:hover { border-color: var(--border-default); transform: translateY(-2px); }
+  .tcard .top { display: flex; align-items: center; gap: 12px; }
+  .tcard .logo {
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    background: var(--surface-muted);
+    border: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    flex-shrink: 0;
+    font-weight: 800;
+    font-size: 15px;
+    color: var(--accent);
+  }
+  .tcard .logo img { width: 20px; height: 20px; }
+  .tcard h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
+  .badge {
+    font-size: 9.5px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    border-radius: 999px;
+    padding: 2px 8px;
+    flex-shrink: 0;
+  }
+  .badge-official { background: rgba(242, 201, 76, 0.12); color: #f2c94c; }
+  .badge-community { background: var(--accent-dim); color: var(--accent); }
+  .tcard .desc {
+    margin-top: 12px;
+    font-size: 12.5px;
+    line-height: 1.55;
+    color: var(--text-tertiary);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    flex: 1;
+  }
+  .tcard .meta {
+    margin-top: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--mono);
+    font-size: 10.5px;
+    color: var(--text-tertiary);
+  }
+  .tcard .meta .catname { color: var(--accent); }
+  .tcard .meta .rt { margin-left: auto; }
+
+  .grid .empty {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 60px 0;
+    color: var(--text-tertiary);
+    font-size: 13px;
+  }
+  .publish-card {
+    border: 1px dashed var(--border-default);
+    background: transparent;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 8px;
+  }
+  .publish-card:hover { border-color: rgba(180, 227, 74, 0.4); }
+  .publish-card .plus {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+    background: var(--accent-dim);
+    color: var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .publish-card h3 { color: var(--text-secondary); }
+  .publish-card p { font-size: 12px; color: var(--text-tertiary); max-width: 26ch; }
+
+  /* ---------- detail modal ---------- */
+  .modal-back {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+  }
+  .modal {
+    width: 100%;
+    max-width: 640px;
+    max-height: 86vh;
+    overflow-y: auto;
+    background: var(--bg-base);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius);
+    padding: 26px 28px;
+  }
+  .modal .mhead { display: flex; align-items: flex-start; gap: 14px; }
+  .modal .mhead .logo {
+    width: 46px;
+    height: 46px;
+    border-radius: 12px;
+    background: var(--surface-muted);
+    border: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    font-size: 18px;
+    color: var(--accent);
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .modal .mhead .logo img { width: 24px; height: 24px; }
+  .modal .mhead h2 { font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
+  .modal .mhead .badges { display: flex; gap: 6px; margin-top: 6px; }
+  .modal .x {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 6px;
+  }
+  .modal .x:hover { color: var(--text-primary); background: var(--surface-muted); }
+  .modal .mdesc { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
+  .msec { margin-top: 22px; }
+  .msec h4 {
+    font-family: var(--mono);
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-tertiary);
+    margin-bottom: 10px;
+  }
+  .kv { display: flex; flex-wrap: wrap; gap: 8px; }
+  .kv span {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text-secondary);
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    padding: 5px 10px;
+  }
+  .kv span b { color: var(--text-tertiary); font-weight: 500; }
+  .vars { display: grid; gap: 6px; }
+  .vrow {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 12px;
+    background: var(--bg-void);
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    padding: 8px 12px;
+  }
+  .vrow code { font-family: var(--mono); font-size: 11.5px; color: var(--text-primary); }
+  .vrow .lbl { color: var(--text-tertiary); font-size: 11.5px; }
+  .vrow .tags { margin-left: auto; display: flex; gap: 5px; }
+  .vrow .tags i {
+    font-style: normal;
+    font-family: var(--mono);
+    font-size: 9px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 2px 7px;
+    border-radius: 999px;
+    background: var(--surface-muted);
+    color: var(--text-tertiary);
+  }
+  .vrow .tags i.req { color: var(--accent); background: var(--accent-dim); }
+  .vrow .tags i.sec { color: #f2c94c; background: rgba(242, 201, 76, 0.1); }
+  .mfoot { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
+  .hint { margin-top: 16px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.6; }
+  .hint code { font-family: var(--mono); color: var(--text-secondary); }
+
+  [hidden] { display: none !important; }
+
+  @media (max-width: 900px) {
+    .grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 560px) {
+    .grid { grid-template-columns: 1fr; }
+    .modal { padding: 20px; }
+  }
+</style>
+</head>
+<body>
+
+<nav>
+  <div class="wrap nav-inner">
+    <a href="index.html" class="brand">
+      <img src="containr.svg" alt="Containr logo">
+      contain<em>r</em>
+    </a>
+    <div class="nav-links">
+      <a href="index.html#features">Features</a>
+      <a href="index.html#product">Product</a>
+      <a href="templates.html">Templates</a>
+      <a href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Docs</a>
+    </div>
+    <div class="nav-right">
+      <a class="gh-link" href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener" aria-label="Containr on GitHub">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
+      </a>
+      <a class="btn btn-primary" href="index.html#install">Get started</a>
+    </div>
+  </div>
+</nav>
+
+<header class="tpl-hero">
+  <div class="wrap">
+    <h1>Template catalog</h1>
+    <p class="sub">Deploy-ready service presets plus templates published by the community. Pick one, import it into your instance, deploy.</p>
+    <span class="source-tag" id="source-tag"><i></i><span id="source-label">loading catalog</span></span>
+
+    <div class="toolbar">
+      <label class="search">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
+        <input id="q" type="search" placeholder="Search templates" autocomplete="off">
+      </label>
+      <div class="cats" id="cats"></div>
+    </div>
+  </div>
+</header>
+
+<main>
+  <div class="wrap">
+    <div class="grid" id="grid"></div>
+  </div>
+</main>
+
+<div class="modal-back" id="modal-back" hidden>
+  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="m-title">
+    <div class="mhead">
+      <span class="logo" id="m-logo"></span>
+      <div>
+        <h2 id="m-title"></h2>
+        <div class="badges" id="m-badges"></div>
+      </div>
+      <button class="x" id="m-close" aria-label="Close">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      </button>
+    </div>
+    <p class="mdesc" id="m-desc"></p>
+    <div class="msec" id="m-meta-sec">
+      <h4>Runtime</h4>
+      <div class="kv" id="m-meta"></div>
+    </div>
+    <div class="msec" id="m-vars-sec" hidden>
+      <h4>Variables</h4>
+      <div class="vars" id="m-vars"></div>
+    </div>
+    <div class="mfoot">
+      <button class="btn btn-primary" id="m-copy">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+        Copy template JSON
+      </button>
+      <a class="btn btn-ghost" href="https://github.com/Dvorinka/Containr/tree/main/docs/guides" target="_blank" rel="noopener">Deploy guide</a>
+    </div>
+    <p class="hint">In your instance: <code>Templates &rarr; New template &rarr; Upload .json</code> (or paste the copied JSON). Deploy it to any project from there.</p>
+  </div>
+</div>
+
+<footer>
+  <div class="wrap foot">
+    <span class="l"><img src="containr.svg" alt="">Containr - MIT License</span>
+    <nav>
+      <a href="https://github.com/Dvorinka/Containr" target="_blank" rel="noopener">GitHub</a>
+      <a href="https://github.com/Dvorinka/Containr/tree/main/docs" target="_blank" rel="noopener">Docs</a>
+      <a href="https://github.com/Dvorinka/Containr/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contribute</a>
+      <a href="https://github.com/Dvorinka/Containr/blob/main/SECURITY.md" target="_blank" rel="noopener">Security</a>
+    </nav>
+  </div>
+</footer>
+
+<script>
+  // The catalog comes from a live Containr instance when one is configured.
+  // Point it at an instance once with ?api=https://host (persisted in
+  // localStorage); with no instance configured the bundled official
+  // snapshot renders immediately.
+  const params = new URLSearchParams(location.search);
+  const paramApi = params.get('api');
+  if (paramApi) localStorage.setItem('containr-api', paramApi.replace(/\/$/, ''));
+  const API_BASE = (localStorage.getItem('containr-api') || '').replace(/\/$/, '');
+
+  const grid = document.getElementById('grid');
+  const catsEl = document.getElementById('cats');
+  const qEl = document.getElementById('q');
+  const sourceTag = document.getElementById('source-tag');
+  const sourceLabel = document.getElementById('source-label');
+
+  let templates = [];
+  let activeCat = '';
+  let query = '';
+  let current = null;
+
+  const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+
+  async function loadTemplates() {
+    if (API_BASE) {
+      const ctrl = new AbortController();
+      const timer = setTimeout(() => ctrl.abort(), 4000);
+      try {
+        const res = await fetch(API_BASE + '/api/v1/templates', { signal: ctrl.signal });
+        if (!res.ok) throw new Error('api ' + res.status);
+        const data = await res.json();
+        const list = Array.isArray(data.templates) ? data.templates : [];
+        if (!list.length) throw new Error('empty catalog');
+        setTemplates(list, 'live: ' + API_BASE.replace(/^https?:\/\//, ''), true);
+        return;
+      } catch {
+        // fall through to the bundled snapshot
+      } finally {
+        clearTimeout(timer);
+      }
+    }
+    const res = await fetch('templates.json');
+    const data = await res.json();
+    setTemplates(data.templates || [], 'official snapshot - connect an instance with ?api=', false);
+  }
+
+  function setTemplates(list, label, live) {
+    const seen = new Set();
+    templates = list.filter((t) => t && t.id && !seen.has(t.id) && seen.add(t.id));
+    sourceLabel.textContent = label;
+    sourceTag.classList.toggle('live', live);
+    renderCats();
+    render();
+  }
+
+  function runtime(t) {
+    try { return (JSON.parse(t.config || '{}').runtime || ''); } catch { return ''; }
+  }
+  function cfg(t) {
+    try { return JSON.parse(t.config || '{}'); } catch { return {}; }
+  }
+  function vars(t) {
+    try { const v = JSON.parse(t.variables || '[]'); return Array.isArray(v) ? v : []; } catch { return []; }
+  }
+
+  const CATS = [['', 'All'], ['web', 'Web'], ['frontend', 'Frontend'], ['database', 'Databases'], ['app', 'Apps'], ['worker', 'Workers'], ['cron', 'Cron'], ['custom', 'Custom']];
+
+  function renderCats() {
+    const present = new Set(templates.map((t) => (t.category || 'custom').toLowerCase()));
+    catsEl.innerHTML = CATS.filter(([k]) => k === '' || present.has(k))
+      .map(([k, label]) => `<button class="cat${k === activeCat ? ' on' : ''}" data-cat="${k}">${label}</button>`)
+      .join('');
+    catsEl.querySelectorAll('.cat').forEach((b) =>
+      b.addEventListener('click', () => { activeCat = b.dataset.cat; renderCats(); render(); })
+    );
+  }
+
+  function logoHtml(t, size) {
+    const letter = esc((t.name || '?').trim().charAt(0).toUpperCase());
+    if (t.logo) {
+      return `<img src="${esc(t.logo)}" alt="" loading="lazy" onerror="this.outerHTML='${letter}'">`;
+    }
+    return letter;
+  }
+
+  function badge(t) {
+    if (t.is_official) return '<span class="badge badge-official">Official</span>';
+    return '<span class="badge badge-community">Community</span>';
+  }
+
+  function filtered() {
+    const q = query.toLowerCase();
+    return templates.filter((t) => {
+      if (activeCat && (t.category || '').toLowerCase() !== activeCat) return false;
+      if (!q) return true;
+      return (t.name + ' ' + (t.description || '') + ' ' + (t.category || '')).toLowerCase().includes(q);
+    });
+  }
+
+  function render() {
+    const list = filtered();
+    let html = list.map((t) => `
+      <button class="tcard" data-id="${esc(t.id)}">
+        <div class="top">
+          <span class="logo">${logoHtml(t)}</span>
+          <h3>${esc(t.name)}</h3>
+          ${badge(t)}
+        </div>
+        <p class="desc">${esc(t.description || 'No description.')}</p>
+        <div class="meta"><span class="catname">${esc(t.category || 'custom')}</span><span class="rt">${esc(runtime(t))}</span></div>
+      </button>`).join('');
+
+    html += `
+      <button class="tcard publish-card" id="publish-card">
+        <span class="plus">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+        </span>
+        <h3>Publish yours</h3>
+        <p>Any template you mark public in your instance shows up in the catalog.</p>
+      </button>`;
+
+    if (!list.length) {
+      html += '<div class="empty">Nothing matches. Try a different search or category.</div>';
+    }
+
+    grid.innerHTML = html;
+    grid.querySelectorAll('.tcard[data-id]').forEach((card) =>
+      card.addEventListener('click', () => openModal(templates.find((t) => t.id === card.dataset.id)))
+    );
+    document.getElementById('publish-card').addEventListener('click', () => {
+      document.getElementById('modal-back').hidden = false;
+      showPublish();
+    });
+  }
+
+  // ---------- modal ----------
+  const back = document.getElementById('modal-back');
+  const closeModal = () => (back.hidden = true);
+  document.getElementById('m-close').addEventListener('click', closeModal);
+  back.addEventListener('click', (e) => { if (e.target === back) closeModal(); });
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
+
+  function openModal(t) {
+    if (!t) return;
+    current = t;
+    document.getElementById('m-logo').innerHTML = logoHtml(t);
+    document.getElementById('m-title').textContent = t.name;
+    document.getElementById('m-badges').innerHTML =
+      badge(t) + `<span class="badge" style="background:var(--surface-muted);color:var(--text-tertiary)">${esc(t.category || 'custom')}</span>`;
+    document.getElementById('m-desc').textContent = t.description || 'No description.';
+
+    const c = cfg(t);
+    const meta = [];
+    if (c.type) meta.push(['type', c.type]);
+    if (c.runtime) meta.push(['runtime', c.runtime]);
+    if (c.port) meta.push(['port', c.port]);
+    if (c.build_command) meta.push(['build', c.build_command]);
+    if (c.start_command) meta.push(['start', c.start_command]);
+    if (c.health_check) meta.push(['health', c.health_check]);
+    document.getElementById('m-meta').innerHTML = meta.length
+      ? meta.map(([k, v]) => `<span><b>${esc(k)}</b> ${esc(String(v))}</span>`).join('')
+      : '<span>self-contained image</span>';
+
+    const vs = vars(t);
+    const varsSec = document.getElementById('m-vars-sec');
+    varsSec.hidden = vs.length === 0;
+    document.getElementById('m-vars').innerHTML = vs.map((v) => `
+      <div class="vrow">
+        <code>${esc(v.key)}</code>
+        <span class="lbl">${esc(v.label || '')}</span>
+        <span class="tags">
+          ${v.required ? '<i class="req">required</i>' : ''}
+          ${v.secret ? '<i class="sec">secret</i>' : ''}
+        </span>
+      </div>`).join('');
+
+    back.hidden = false;
+  }
+
+  function showPublish() {
+    document.getElementById('m-logo').innerHTML = '+';
+    document.getElementById('m-title').textContent = 'Publish a template';
+    document.getElementById('m-badges').innerHTML = '<span class="badge badge-community">Community</span>';
+    document.getElementById('m-desc').textContent =
+      'Templates are published from inside a running Containr instance. Create a template (or edit one you own), tick "List in the public catalog", and it becomes browsable and deployable by anyone who can reach that instance.';
+    document.getElementById('m-meta').innerHTML =
+      '<span><b>1</b> Templates &rarr; New template</span><span><b>2</b> paste or upload JSON</span><span><b>3</b> tick public catalog</span>';
+    document.getElementById('m-vars-sec').hidden = true;
+    current = null;
+  }
+
+  document.getElementById('m-copy').addEventListener('click', async (e) => {
+    if (!current) return;
+    const c = cfg(current);
+    const payload = JSON.stringify({
+      name: current.name,
+      description: current.description || '',
+      category: current.category || 'custom',
+      logo: current.logo || '',
+      config: c,
+      variables: vars(current),
+    }, null, 2);
+    try { await navigator.clipboard.writeText(payload); } catch {}
+    const btn = e.currentTarget;
+    btn.style.color = 'var(--accent)';
+    setTimeout(() => (btn.style.color = ''), 1200);
+  });
+
+  let debounce;
+  qEl.addEventListener('input', () => {
+    clearTimeout(debounce);
+    debounce = setTimeout(() => { query = qEl.value.trim(); render(); }, 120);
+  });
+
+  loadTemplates();
+</script>
+</body>
+</html>
@@ -0,0 +1,394 @@
+{
+  "templates": [
+    {
+      "id": "tpl-nodejs",
+      "name": "Node.js Application",
+      "description": "Generic Node.js application with automatic dependency detection",
+      "category": "web",
+      "logo": "https://cdn.simpleicons.org/node.js",
+      "config": "{\"type\":\"web\",\"runtime\":\"node\",\"build_command\":\"npm install && npm run build\",\"start_command\":\"npm start\",\"port\":3000,\"health_check\":\"/health\"}",
+      "variables": "[{\"key\":\"NODE_ENV\",\"label\":\"Node Environment\",\"default\":\"production\",\"required\":false,\"secret\":false},{\"key\":\"NPM_TOKEN\",\"label\":\"NPM Token\",\"default\":\"\",\"required\":false,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-react",
+      "name": "React Application",
+      "description": "React single-page application with Vite",
+      "category": "frontend",
+      "logo": "https://cdn.simpleicons.org/react",
+      "config": "{\"type\":\"web\",\"runtime\":\"node\",\"build_command\":\"npm install && npm run build\",\"start_command\":\"npx serve -s dist\",\"port\":3000}",
+      "variables": "[{\"key\":\"VITE_API_URL\",\"label\":\"API URL\",\"default\":\"\",\"required\":true,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-python",
+      "name": "Python Application",
+      "description": "Python application with FastAPI/Flask support",
+      "category": "web",
+      "logo": "https://cdn.simpleicons.org/python",
+      "config": "{\"type\":\"web\",\"runtime\":\"python\",\"build_command\":\"pip install -r requirements.txt\",\"start_command\":\"python main.py\",\"port\":8000}",
+      "variables": "[{\"key\":\"PYTHON_VERSION\",\"label\":\"Python Version\",\"default\":\"3.11\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-go",
+      "name": "Go Application",
+      "description": "Go backend service",
+      "category": "web",
+      "logo": "https://cdn.simpleicons.org/go",
+      "config": "{\"type\":\"web\",\"runtime\":\"go\",\"build_command\":\"go build -o app .\",\"start_command\":\"./app\",\"port\":8080}",
+      "variables": "[{\"key\":\"GO_VERSION\",\"label\":\"Go Version\",\"default\":\"1.21\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-postgres",
+      "name": "PostgreSQL Database",
+      "description": "Managed PostgreSQL database",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/postgresql",
+      "config": "{\"type\":\"database\",\"runtime\":\"postgres\",\"port\":5432}",
+      "variables": "[{\"key\":\"POSTGRES_USER\",\"label\":\"Username\",\"default\":\"postgres\",\"required\":true,\"secret\":false},{\"key\":\"POSTGRES_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"POSTGRES_DB\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":true,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-redis",
+      "name": "Redis Cache",
+      "description": "In-memory data store",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/redis",
+      "config": "{\"type\":\"database\",\"runtime\":\"redis\",\"port\":6379}",
+      "variables": "[{\"key\":\"REDIS_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":false,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-mongodb",
+      "name": "MongoDB Database",
+      "description": "NoSQL document database",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/mongodb",
+      "config": "{\"type\":\"database\",\"runtime\":\"mongodb\",\"port\":27017}",
+      "variables": "[{\"key\":\"MONGO_INITDB_ROOT_USERNAME\",\"label\":\"Root Username\",\"default\":\"admin\",\"required\":true,\"secret\":false},{\"key\":\"MONGO_INITDB_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-mysql",
+      "name": "MySQL Database",
+      "description": "Managed MySQL database service",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/mysql",
+      "config": "{\"type\":\"database\",\"runtime\":\"mysql\",\"port\":3306}",
+      "variables": "[{\"key\":\"MYSQL_DATABASE\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MYSQL_USER\",\"label\":\"Username\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MYSQL_PASSWORD\",\"label\":\"User Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"MYSQL_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-mariadb",
+      "name": "MariaDB Database",
+      "description": "Managed MariaDB database service",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/mariadb",
+      "config": "{\"type\":\"database\",\"runtime\":\"mariadb\",\"port\":3306}",
+      "variables": "[{\"key\":\"MARIADB_DATABASE\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MARIADB_USER\",\"label\":\"Username\",\"default\":\"app\",\"required\":true,\"secret\":false},{\"key\":\"MARIADB_PASSWORD\",\"label\":\"User Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"MARIADB_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-clickhouse",
+      "name": "ClickHouse Database",
+      "description": "Column-oriented analytics database",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/clickhouse",
+      "config": "{\"type\":\"database\",\"runtime\":\"clickhouse\",\"port\":8123}",
+      "variables": "[{\"key\":\"CLICKHOUSE_DB\",\"label\":\"Database Name\",\"default\":\"app\",\"required\":false,\"secret\":false},{\"key\":\"CLICKHOUSE_USER\",\"label\":\"Username\",\"default\":\"default\",\"required\":false,\"secret\":false},{\"key\":\"CLICKHOUSE_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":false,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-dragonfly",
+      "name": "Dragonfly Database",
+      "description": "Redis-compatible in-memory data store powered by Dragonfly",
+      "category": "database",
+      "logo": "https://cdn.simpleicons.org/redis",
+      "config": "{\"type\":\"database\",\"runtime\":\"dragonfly\",\"port\":6379}",
+      "variables": "[{\"key\":\"DRAGONFLY_PASSWORD\",\"label\":\"Password\",\"default\":\"\",\"required\":false,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-worker",
+      "name": "Background Worker",
+      "description": "Background job processing service",
+      "category": "worker",
+      "logo": "",
+      "config": "{\"type\":\"worker\",\"runtime\":\"node\",\"build_command\":\"npm install\",\"start_command\":\"npm run worker\"}",
+      "variables": "[{\"key\":\"WORKER_CONCURRENCY\",\"label\":\"Concurrency\",\"default\":\"4\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-cron",
+      "name": "Cron Job",
+      "description": "Scheduled task runner",
+      "category": "cron",
+      "logo": "",
+      "config": "{\"type\":\"cron\",\"runtime\":\"node\",\"build_command\":\"npm install\",\"start_command\":\"npm run cron\"}",
+      "variables": "[{\"key\":\"CRON_SCHEDULE\",\"label\":\"Schedule\",\"default\":\"0 * * * *\",\"required\":true,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-docker",
+      "name": "Docker Image",
+      "description": "Deploy from any Docker image",
+      "category": "custom",
+      "logo": "https://cdn.simpleicons.org/docker",
+      "config": "{\"type\":\"web\",\"runtime\":\"docker\",\"port\":80}",
+      "variables": "[{\"key\":\"IMAGE\",\"label\":\"Docker Image\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"TAG\",\"label\":\"Image Tag\",\"default\":\"latest\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-nextcloud",
+      "name": "Nextcloud",
+      "description": "Self-hosted file sync, share and collaboration platform",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/nextcloud",
+      "config": "{\"type\":\"web\",\"runtime\":\"nextcloud:30-apache\",\"port\":80,\"health_check\":\"/status.php\"}",
+      "variables": "[{\"key\":\"NEXTCLOUD_ADMIN_USER\",\"label\":\"Admin User\",\"default\":\"admin\",\"required\":false,\"secret\":false},{\"key\":\"NEXTCLOUD_ADMIN_PASSWORD\",\"label\":\"Admin Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"NEXTCLOUD_TRUSTED_DOMAINS\",\"label\":\"Trusted Domains\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-gitea",
+      "name": "Gitea",
+      "description": "Lightweight self-hosted Git service",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/gitea",
+      "config": "{\"type\":\"web\",\"runtime\":\"gitea/gitea:1\",\"port\":3000,\"health_check\":\"/api/healthz\"}",
+      "variables": "[{\"key\":\"GITEA__server__DOMAIN\",\"label\":\"Server Domain\",\"default\":\"localhost\",\"required\":false,\"secret\":false},{\"key\":\"GITEA__server__ROOT_URL\",\"label\":\"Root URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-ghost",
+      "name": "Ghost",
+      "description": "Independent publishing platform for blogs and newsletters",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/ghost",
+      "config": "{\"type\":\"web\",\"runtime\":\"ghost:5-alpine\",\"port\":2368,\"health_check\":\"/ghost/api/admin/site/\"}",
+      "variables": "[{\"key\":\"url\",\"label\":\"Public URL\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"database__client\",\"label\":\"Database Client\",\"default\":\"sqlite3\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-uptime-kuma",
+      "name": "Uptime Kuma",
+      "description": "Self-hosted monitoring tool for services and websites",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/uptimekuma",
+      "config": "{\"type\":\"web\",\"runtime\":\"louislam/uptime-kuma:1\",\"port\":3001,\"health_check\":\"/\"}",
+      "variables": "[]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-vaultwarden",
+      "name": "Vaultwarden",
+      "description": "Lightweight Bitwarden-compatible password manager",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/bitwarden",
+      "config": "{\"type\":\"web\",\"runtime\":\"vaultwarden/server:latest\",\"port\":80,\"health_check\":\"/alive\"}",
+      "variables": "[{\"key\":\"ADMIN_TOKEN\",\"label\":\"Admin Token\",\"default\":\"\",\"required\":false,\"secret\":true},{\"key\":\"SIGNUPS_ALLOWED\",\"label\":\"Allow Signups\",\"default\":\"false\",\"required\":false,\"secret\":false},{\"key\":\"DOMAIN\",\"label\":\"Domain URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-jellyfin",
+      "name": "Jellyfin",
+      "description": "Free software media system for movies, shows and music",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/jellyfin",
+      "config": "{\"type\":\"web\",\"runtime\":\"jellyfin/jellyfin:latest\",\"port\":8096,\"health_check\":\"/health\"}",
+      "variables": "[]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-n8n",
+      "name": "n8n",
+      "description": "Workflow automation tool with hundreds of integrations",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/n8n",
+      "config": "{\"type\":\"web\",\"runtime\":\"n8nio/n8n:latest\",\"port\":5678,\"health_check\":\"/healthz\"}",
+      "variables": "[{\"key\":\"N8N_HOST\",\"label\":\"Hostname\",\"default\":\"\",\"required\":false,\"secret\":false},{\"key\":\"N8N_ENCRYPTION_KEY\",\"label\":\"Encryption Key\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"WEBHOOK_URL\",\"label\":\"Webhook URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-grafana",
+      "name": "Grafana",
+      "description": "Observability dashboards for metrics, logs and traces",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/grafana",
+      "config": "{\"type\":\"web\",\"runtime\":\"grafana/grafana:latest\",\"port\":3000,\"health_check\":\"/api/health\"}",
+      "variables": "[{\"key\":\"GF_SECURITY_ADMIN_PASSWORD\",\"label\":\"Admin Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-immich",
+      "name": "Immich",
+      "description": "Self-hosted photo and video backup",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/immich",
+      "config": "{\"type\":\"web\",\"runtime\":\"ghcr.io/immich-app/immich-server:release\",\"port\":2283,\"health_check\":\"/api/server/ping\"}",
+      "variables": "[{\"key\":\"DB_PASSWORD\",\"label\":\"Database Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"DB_HOSTNAME\",\"label\":\"Database Host\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-meilisearch",
+      "name": "Meilisearch",
+      "description": "Fast, typo-tolerant search engine API",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/meilisearch",
+      "config": "{\"type\":\"web\",\"runtime\":\"getmeili/meilisearch:v1\",\"port\":7700,\"health_check\":\"/health\"}",
+      "variables": "[{\"key\":\"MEILI_MASTER_KEY\",\"label\":\"Master Key\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"MEILI_ENV\",\"label\":\"Environment\",\"default\":\"production\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-plausible",
+      "name": "Plausible Analytics",
+      "description": "Lightweight, privacy-friendly web analytics",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/plausibleanalytics",
+      "config": "{\"type\":\"web\",\"runtime\":\"ghcr.io/plausible/community-edition:v2\",\"port\":8000,\"health_check\":\"/api/health\"}",
+      "variables": "[{\"key\":\"BASE_URL\",\"label\":\"Base URL\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"SECRET_KEY_BASE\",\"label\":\"Secret Key Base\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-minio",
+      "name": "MinIO",
+      "description": "S3-compatible object storage",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/minio",
+      "config": "{\"type\":\"web\",\"runtime\":\"minio/minio:latest\",\"start_command\":\"server /data --console-address \\\":9001\\\"\",\"port\":9001,\"health_check\":\"/minio/health/live\"}",
+      "variables": "[{\"key\":\"MINIO_ROOT_USER\",\"label\":\"Root User\",\"default\":\"minioadmin\",\"required\":true,\"secret\":false},{\"key\":\"MINIO_ROOT_PASSWORD\",\"label\":\"Root Password\",\"default\":\"\",\"required\":true,\"secret\":true}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-appwrite",
+      "name": "Appwrite",
+      "description": "Backend-as-a-service for web and mobile apps",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/appwrite",
+      "config": "{\"type\":\"web\",\"runtime\":\"appwrite/appwrite:1.6\",\"port\":80,\"health_check\":\"/health\"}",
+      "variables": "[]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-wordpress",
+      "name": "WordPress",
+      "description": "Classic CMS powering a large share of the web",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/wordpress",
+      "config": "{\"type\":\"web\",\"runtime\":\"wordpress:6-apache\",\"port\":80,\"health_check\":\"/wp-login.php\"}",
+      "variables": "[{\"key\":\"WORDPRESS_DB_HOST\",\"label\":\"Database Host\",\"default\":\"\",\"required\":true,\"secret\":false},{\"key\":\"WORDPRESS_DB_USER\",\"label\":\"Database User\",\"default\":\"wordpress\",\"required\":true,\"secret\":false},{\"key\":\"WORDPRESS_DB_PASSWORD\",\"label\":\"Database Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"WORDPRESS_DB_NAME\",\"label\":\"Database Name\",\"default\":\"wordpress\",\"required\":true,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-paperless",
+      "name": "Paperless-ngx",
+      "description": "Document management system with OCR",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/paperlessngx",
+      "config": "{\"type\":\"web\",\"runtime\":\"ghcr.io/paperless-ngx/paperless-ngx:latest\",\"port\":8000,\"health_check\":\"/api/\"}",
+      "variables": "[{\"key\":\"PAPERLESS_ADMIN_PASSWORD\",\"label\":\"Admin Password\",\"default\":\"\",\"required\":true,\"secret\":true},{\"key\":\"PAPERLESS_URL\",\"label\":\"Public URL\",\"default\":\"\",\"required\":false,\"secret\":false}]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    },
+    {
+      "id": "tpl-ntfy",
+      "name": "ntfy",
+      "description": "Push notification service over HTTP",
+      "category": "app",
+      "logo": "https://cdn.simpleicons.org/ntfy",
+      "config": "{\"type\":\"web\",\"runtime\":\"binwiederhier/ntfy:latest\",\"start_command\":\"serve\",\"port\":80,\"health_check\":\"/v1/health\"}",
+      "variables": "[]",
+      "is_official": true,
+      "is_public": false,
+      "created_at": "0001-01-01T00:00:00Z",
+      "updated_at": "0001-01-01T00:00:00Z"
+    }
+  ]
+}