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
@@ -4,13 +4,11 @@ import EnterpriseSection from "@/components/EnterpriseSection.astro";
 import FeatureHighlights from "@/components/FeatureHighlights.astro";
 import Footer from "@/components/Footer.astro";
 import Hero from "@/components/Hero.astro";
-import HowItWorks from "@/components/HowItWorks.astro";
 import JsonLd from "@/components/JsonLd.astro";
 import Navbar from "@/components/Navbar.astro";
 import OpenSource from "@/components/OpenSource.astro";
 import Pricing from "@/components/Pricing.astro";
 import ToolGrid from "@/components/ToolGrid.astro";
-import TrustSignals from "@/components/TrustSignals.astro";
 import Base from "@/layouts/Base.astro";

 const toolCount = TOOLS.length;
@@ -109,11 +107,9 @@ const navSchema = {

  <main id="main">
    <Hero />
-    <TrustSignals />
    <ToolGrid />
-    <FeatureHighlights />
    <EnterpriseSection />
-    <HowItWorks />
+    <FeatureHighlights />
    <Pricing />
    <OpenSource />
  </main>
@@ -1,5 +1,6 @@
 ---
 import { CATEGORIES, PYTHON_SIDECAR_TOOLS, TOOLS } from "@snapotter/shared";
+import * as lucideIcons from "lucide";
 import Footer from "@/components/Footer.astro";
 import JsonLd from "@/components/JsonLd.astro";
 import Navbar from "@/components/Navbar.astro";
@@ -20,6 +21,20 @@ const catColor = category?.color ?? "#737373";
 const isAiTool = (PYTHON_SIDECAR_TOOLS as readonly string[]).includes(tool.id);
 const toolCount = TOOLS.length;

+function renderIcon(iconName: string): string {
+  const iconData = (lucideIcons as Record<string, unknown>)[iconName];
+  if (!iconData || !Array.isArray(iconData))
+    return '<rect width="14" height="14" x="5" y="5" rx="2" />';
+  return iconData
+    .map(([tag, attrs]: [string, Record<string, string>]) => {
+      const attrStr = Object.entries(attrs)
+        .map(([k, v]) => `${k}="${v}"`)
+        .join(" ");
+      return `<${tag} ${attrStr}/>`;
+    })
+    .join("");
+}
+
 const title = seo ? `${seo.searchTitle} | SnapOtter` : `${tool.name} | SnapOtter`;
 const description = seo?.longDescription ?? tool.description;

@@ -169,9 +184,8 @@ const allJsonLd = [
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
-            >
-              <rect width="14" height="14" x="5" y="5" rx="2" />
-            </svg>
+              set:html={renderIcon(tool.icon)}
+            />
          </div>
          <span
            class="rounded-full px-3 py-1 text-xs font-semibold"
@@ -348,9 +362,8 @@ const allJsonLd = [
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
-                    >
-                      <rect width="14" height="14" x="5" y="5" rx="2" />
-                    </svg>
+                      set:html={renderIcon(t.icon)}
+                    />
                    <span class="mt-3 text-sm font-bold">{t.name}</span>
                    <p class="mt-1.5 text-xs leading-relaxed text-muted">{t.description}</p>
                    <span class="mt-auto inline-flex items-center gap-1 pt-4 text-xs font-medium text-primary transition-all group-hover:gap-2">
@@ -27,6 +27,19 @@ const groups = CATEGORIES.map((cat) => ({

 const toolCount = TOOLS.length;

+const modalityFilters = [
+  { id: "all", label: "All", count: TOOLS.length },
+  { id: "image", label: "Image", count: TOOLS.filter((t) => t.modality === "image").length },
+  { id: "video", label: "Video", count: TOOLS.filter((t) => t.modality === "video").length },
+  { id: "audio", label: "Audio", count: TOOLS.filter((t) => t.modality === "audio").length },
+  {
+    id: "document",
+    label: "PDF & Docs",
+    count: TOOLS.filter((t) => t.modality === "document").length,
+  },
+  { id: "file", label: "Data", count: TOOLS.filter((t) => t.modality === "file").length },
+];
+
 const breadcrumbJsonLd = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
@@ -97,9 +110,40 @@ const collectionJsonLd = {
      </div>
    </section>

+    <!-- Filter bar -->
+    <section class="sticky top-16 z-30 border-y border-border bg-background/95 backdrop-blur">
+      <div class="mx-auto max-w-5xl px-6 py-4">
+        <div class="relative">
+          <svg class="pointer-events-none absolute top-1/2 left-4 h-4 w-4 -translate-y-1/2 text-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <input
+            id="tools-search"
+            type="text"
+            autocomplete="off"
+            placeholder={`Search ${toolCount} tools by name...`}
+            class="w-full rounded-xl border border-border bg-surface py-2.5 pr-4 pl-11 text-sm outline-none transition-colors placeholder:text-muted focus:border-primary"
+          />
+        </div>
+        <div class="mt-3 flex flex-wrap gap-2">
+          {modalityFilters.map((m) => (
+            <button
+              type="button"
+              data-modality={m.id}
+              class:list={[
+                "tools-mod-btn shrink-0 rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
+                m.id === "all" ? "bg-primary text-white" : "border border-border bg-surface hover:bg-background-alt",
+              ]}
+            >
+              {m.label} ({m.count})
+            </button>
+          ))}
+        </div>
+        <p id="tools-count" class="mt-3 text-sm text-muted">Showing all {toolCount} tools</p>
+      </div>
+    </section>
+
    <!-- Tool categories -->
    {groups.map((group) => (
-      <section class="border-t border-border py-12 even:bg-background-alt">
+      <section class="border-t border-border py-12 even:bg-background-alt" data-cat-section>
        <div class="mx-auto max-w-5xl px-6">
          <div class="reveal">
            <div class="mb-8 flex items-center gap-3">
@@ -142,7 +186,10 @@ const collectionJsonLd = {
              {group.tools.map((tool) => (
                <a
                  href={`/tools/${tool.id}`}
-                  class="group flex items-start gap-4 rounded-xl border border-border bg-surface p-5 transition-all hover:border-primary hover:shadow-md"
+                  class="tool-item group flex items-start gap-4 rounded-xl border border-border bg-surface p-5 transition-all hover:border-primary hover:shadow-md"
+                  data-name={tool.name.toLowerCase()}
+                  data-desc={tool.description.toLowerCase()}
+                  data-modality={tool.modality}
                >
                  <div
                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
@@ -179,6 +226,11 @@ const collectionJsonLd = {
      </section>
    ))}

+    <!-- Empty state -->
+    <p id="tools-empty" class="hidden border-t border-border py-20 text-center text-muted">
+      No tools match your search. Try a different term or modality.
+    </p>
+
    <!-- Bottom CTA -->
    <section class="border-t border-border py-20">
      <div class="mx-auto max-w-5xl px-6 text-center">
@@ -213,5 +265,65 @@ const collectionJsonLd = {
    </section>
  </main>

+  <script is:inline>
+    (function () {
+      var search = document.getElementById("tools-search");
+      var countEl = document.getElementById("tools-count");
+      var emptyEl = document.getElementById("tools-empty");
+      var items = Array.prototype.slice.call(document.querySelectorAll(".tool-item"));
+      var sections = Array.prototype.slice.call(document.querySelectorAll("[data-cat-section]"));
+      var modBtns = Array.prototype.slice.call(document.querySelectorAll(".tools-mod-btn"));
+      var total = items.length;
+      var activeMod = "all";
+
+      function setBtns() {
+        modBtns.forEach(function (b) {
+          var on = b.getAttribute("data-modality") === activeMod;
+          b.className =
+            "tools-mod-btn shrink-0 rounded-full px-4 py-1.5 text-sm font-medium transition-colors " +
+            (on ? "bg-primary text-white" : "border border-border bg-surface hover:bg-background-alt");
+        });
+      }
+
+      function filter() {
+        var q = search.value.toLowerCase().trim();
+        var visible = 0;
+        items.forEach(function (el) {
+          var matchMod = activeMod === "all" || el.getAttribute("data-modality") === activeMod;
+          var matchQ =
+            !q ||
+            el.getAttribute("data-name").indexOf(q) !== -1 ||
+            el.getAttribute("data-desc").indexOf(q) !== -1;
+          var show = matchMod && matchQ;
+          el.style.display = show ? "" : "none";
+          if (show) visible++;
+        });
+        sections.forEach(function (sec) {
+          var anyVisible = Array.prototype.some.call(
+            sec.querySelectorAll(".tool-item"),
+            function (el) {
+              return el.style.display !== "none";
+            },
+          );
+          sec.style.display = anyVisible ? "" : "none";
+        });
+        emptyEl.style.display = visible === 0 ? "block" : "none";
+        countEl.textContent =
+          q || activeMod !== "all"
+            ? "Showing " + visible + " of " + total + " tools"
+            : "Showing all " + total + " tools";
+      }
+
+      search.addEventListener("input", filter);
+      modBtns.forEach(function (b) {
+        b.addEventListener("click", function () {
+          activeMod = b.getAttribute("data-modality");
+          setBtns();
+          filter();
+        });
+      });
+    })();
+  </script>
+
  <Footer />
 </Base>