mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
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
This commit is contained in:
@@ -34,26 +34,13 @@ function renderIcon(iconName: string): string {
|
||||
|
||||
<section class="bg-background-alt px-6 py-20 md:py-28" id="features">
|
||||
<SectionHeading
|
||||
title={`${toolCount} tools. One platform.`}
|
||||
subtitle="Replace dozens of cloud subscriptions with a single deployment your team controls."
|
||||
title="One platform. Every file tool."
|
||||
subtitle="Browse 150+ self-hosted tools across image, video, audio, documents, and data."
|
||||
/>
|
||||
|
||||
<div class="mx-auto max-w-6xl">
|
||||
<!-- Search bar -->
|
||||
<div class="mx-auto max-w-md">
|
||||
<div class="relative">
|
||||
<svg class="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
|
||||
type="text"
|
||||
id="tool-search"
|
||||
placeholder="Search tools..."
|
||||
class="w-full rounded-xl border border-border bg-surface py-3 pr-4 pl-11 text-sm outline-none transition-colors placeholder:text-muted focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modality pills -->
|
||||
<div class="mt-6 flex flex-wrap items-center justify-center gap-2" id="modality-pills">
|
||||
<div class="flex flex-wrap items-center justify-center gap-2" id="modality-pills">
|
||||
{modalities.map((m) => (
|
||||
<button
|
||||
type="button"
|
||||
@@ -125,7 +112,7 @@ function renderIcon(iconName: string): string {
|
||||
|
||||
<!-- Empty state -->
|
||||
<p class="mt-8 hidden text-center text-muted" id="tool-empty">
|
||||
No tools found. Try a different search.
|
||||
No tools match these filters.
|
||||
</p>
|
||||
|
||||
<!-- Browse all link -->
|
||||
@@ -140,7 +127,6 @@ function renderIcon(iconName: string): string {
|
||||
|
||||
<script is:inline>
|
||||
(function () {
|
||||
var search = document.getElementById("tool-search");
|
||||
var grid = document.getElementById("tool-grid");
|
||||
var countEl = document.getElementById("tool-count");
|
||||
var emptyEl = document.getElementById("tool-empty");
|
||||
@@ -169,17 +155,13 @@ function renderIcon(iconName: string): string {
|
||||
}
|
||||
|
||||
function filter() {
|
||||
var q = search.value.toLowerCase().trim();
|
||||
var visible = 0;
|
||||
cards.forEach(function (card) {
|
||||
var name = card.getAttribute("data-name") || "";
|
||||
var desc = card.getAttribute("data-desc") || "";
|
||||
var mod = card.getAttribute("data-modality") || "";
|
||||
var cat = card.getAttribute("data-category") || "";
|
||||
var matchSearch = !q || name.indexOf(q) !== -1 || desc.indexOf(q) !== -1;
|
||||
var matchMod = activeModality === "all" || activeModality.split(",").indexOf(mod) !== -1;
|
||||
var matchCat = !activeCategory || cat === activeCategory;
|
||||
if (matchSearch && matchMod && matchCat) {
|
||||
if (matchMod && matchCat) {
|
||||
card.style.display = "";
|
||||
visible++;
|
||||
} else {
|
||||
@@ -191,8 +173,6 @@ function renderIcon(iconName: string): string {
|
||||
grid.style.display = visible === 0 ? "none" : "";
|
||||
}
|
||||
|
||||
search.addEventListener("input", filter);
|
||||
|
||||
document.querySelectorAll("#modality-pills .tool-pill").forEach(function (btn) {
|
||||
btn.addEventListener("click", function () {
|
||||
activeModality = btn.getAttribute("data-modality");
|
||||
|
||||
Reference in New Issue
Block a user