feat(landing): enterprise-focused hero redesign and section polish (#239)

Reframe the landing page around the self-hosted enterprise buyer. Hero - Rotating-modality headline with a fixed "Nothing leaves your network" promise (pure CSS, no client JS) and an enterprise subtitle - Instant, modality-aware tool search (multi-word) linking to per-tool pages - Modality cards with live counts; stat strip (150+ tools, GitHub stars, 100K+ image pulls, 20+ languages); 7 enterprise trust badges - Removed the Docker terminal and the hero CTAs Sections - "Built for enterprise deployment" redesigned as a security control plane (category-tagged 4-up grid, audit-ready frameworks row) - "Built for regulated environments" polished with numbered kickers and an accurate Docker Compose deployment description - ToolGrid is browse-only now (dropped its redundant search) with a clearer heading Fixes and infra - Per-tool pages render the real tool icon instead of a placeholder square - Navbar GitHub stars fetch live client-side with a 1-hour localStorage cache - Stats auto-update from the GitHub and Docker Hub APIs at build time - Enterprise tab title and meta description
2026-08-03 07:46:42 +02:00 · 2026-06-15 21:55:00 +08:00
parent b76dc68682
commit f622a4f691
12 changed files with 663 additions and 258 deletions
@@ -1,79 +1,133 @@
 ---
 const features = [
  {
+    tag: "Identity",
    title: "SAML SSO",
    description: "Okta, Azure AD, Google Workspace, or any SAML 2.0 / OIDC identity provider.",
    icon: '<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/>',
  },
  {
+    tag: "Identity",
    title: "SCIM Provisioning",
    description:
      "Automated user provisioning and deprovisioning synced from your identity provider.",
    icon: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
  },
  {
+    tag: "Access",
    title: "Multi-Factor Auth",
    description: "Enforce TOTP-based MFA across your organization. Protect every account.",
    icon: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
  },
  {
-    title: "Multi-Tenancy",
-    description: "Isolated workspaces per team or department with separate configurations.",
-    icon: '<rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01"/><path d="M16 6h.01"/><path d="M8 10h.01"/><path d="M16 10h.01"/><path d="M8 14h.01"/><path d="M16 14h.01"/>',
-  },
-  {
+    tag: "Access",
    title: "Per-Tool Permissions",
    description: "Granular role-based access control. Admin, editor, user, and custom roles.",
    icon: '<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>',
  },
  {
+    tag: "Isolation",
+    title: "Multi-Tenancy",
+    description: "Isolated workspaces per team or department with separate configurations.",
+    icon: '<rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01"/><path d="M16 6h.01"/><path d="M8 10h.01"/><path d="M16 10h.01"/><path d="M8 14h.01"/><path d="M16 14h.01"/>',
+  },
+  {
+    tag: "Compliance",
    title: "Audit Export",
    description:
-      "Every action logged. Export audit trails for SOC 2, ISO 27001, and compliance reporting.",
+      "Every action logged. Export immutable audit trails for SOC 2, ISO 27001, and compliance reporting.",
    icon: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>',
  },
  {
+    tag: "Infrastructure",
    title: "S3-Compatible Storage",
-    description: "AWS S3, MinIO, Cloudflare R2 for persistent, scalable file storage.",
+    description: "AWS S3, MinIO, or Cloudflare R2 for persistent, scalable file storage.",
    icon: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>',
  },
  {
+    tag: "Integration",
    title: "Webhooks",
-    description: "Real-time notifications when processing completes. Integrate with any workflow.",
+    description:
+      "Real-time notifications when processing completes. Integrate with any internal workflow.",
    icon: '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
  },
 ];
+
+const frameworks = ["SOC 2", "ISO 27001", "HIPAA", "GDPR"];
 ---

-<section class="section-dark bg-noise relative px-6 py-24 md:py-32" id="enterprise">
-  <div class="reveal mx-auto max-w-3xl text-center">
-    <h2 class="font-display text-3xl font-bold tracking-tight text-dark-fg sm:text-4xl md:text-5xl">
-      Built for enterprise deployment.
-    </h2>
-    <p class="mt-4 text-lg text-dark-muted md:text-xl">
-      Every security and compliance feature your team needs, running on your infrastructure.
-    </p>
+<section class="section-dark bg-noise relative overflow-hidden px-6 py-24 md:py-32" id="enterprise">
+  <!-- Atmosphere: warm security glow -->
+  <div
+    class="pointer-events-none absolute inset-x-0 top-0 mx-auto h-96 max-w-3xl rounded-full bg-primary/10 blur-[120px]"
+    aria-hidden="true"
+  >
  </div>

-  <div class="mx-auto mt-14 grid max-w-5xl gap-4 sm:grid-cols-2">
-    {features.map((feature, i) => (
-      <div class:list={["reveal card-dark border border-dark-border rounded-xl p-6", `reveal-delay-${Math.min(i + 1, 4)}`]}>
-        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/20">
-          <svg class="h-5 w-5 text-primary-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={feature.icon} />
+  <div class="relative mx-auto max-w-6xl">
+    <!-- Header -->
+    <div class="reveal mx-auto max-w-3xl text-center">
+      <span class="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-primary-light">
+        <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
+        Enterprise-grade security
+      </span>
+      <h2 class="mt-6 font-display text-3xl font-bold tracking-tight text-dark-fg sm:text-4xl md:text-5xl">
+        Built for enterprise deployment.
+      </h2>
+      <p class="mt-4 text-lg leading-relaxed text-dark-muted md:text-xl">
+        Every identity, access, and compliance control your security team expects, running entirely on infrastructure you own.
+      </p>
+    </div>
+
+    <!-- Control grid -->
+    <div class="mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {features.map((feature, i) => (
+        <div
+          class:list={[
+            "reveal card-dark group relative flex flex-col rounded-xl border border-dark-border p-5 transition-all duration-300 hover:-translate-y-1 hover:border-primary/40",
+            `reveal-delay-${Math.min(i + 1, 4)}`,
+          ]}
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/15 ring-1 ring-inset ring-primary/20 transition-colors group-hover:bg-primary/25">
+              <svg
+                class="h-5 w-5 text-primary-light"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                set:html={feature.icon}
+              />
+            </div>
+            <span class="font-mono text-[10px] uppercase tracking-[0.15em] text-primary/60">{feature.tag}</span>
+          </div>
+          <h3 class="mt-4 font-display text-base font-bold text-dark-fg">{feature.title}</h3>
+          <p class="mt-2 text-sm leading-relaxed text-dark-muted">{feature.description}</p>
        </div>
-        <h3 class="mt-4 font-display text-base font-bold text-dark-fg">{feature.title}</h3>
-        <p class="mt-2 text-sm leading-relaxed text-dark-muted">{feature.description}</p>
-      </div>
-    ))}
-  </div>
+      ))}
+    </div>

-  <div class="reveal mt-14 text-center">
-    <a
-      href="/contact"
-      class="btn-primary inline-block rounded-xl px-8 py-3 text-base font-semibold"
-    >
-      Book a Demo
-    </a>
-    <p class="mt-4 text-sm text-dark-muted">Talk to our team about enterprise licensing and deployment.</p>
+    <!-- Compliance frameworks -->
+    <div class="reveal mt-12 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+      <span class="text-xs font-medium uppercase tracking-[0.15em] text-dark-muted">Audit-ready for</span>
+      <div class="flex flex-wrap items-center justify-center gap-2.5">
+        {frameworks.map((fw) => (
+          <span class="inline-flex items-center gap-1.5 rounded-md border border-dark-border bg-dark-surface px-3 py-1.5 text-xs font-semibold text-dark-fg">
+            <svg class="h-3.5 w-3.5 text-primary-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+            {fw}
+          </span>
+        ))}
+      </div>
+    </div>
+
+    <!-- CTA -->
+    <div class="reveal mt-14 text-center">
+      <a href="/contact" class="btn-primary inline-block rounded-xl px-8 py-3 text-base font-semibold">
+        Book a Demo
+      </a>
+      <p class="mt-4 text-sm text-dark-muted">Talk to our team about enterprise licensing and deployment.</p>
+    </div>
  </div>
 </section>