Merge pull request #2 from libredb/feat/deploy-homepage-prominence

feat: surface deploy story in hero + 'runs anywhere' logo strip

Author: cevheri

package.json

@@ -1,7 +1,7 @@
 {
   "name": "libredb-studio-website",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "scripts": {
     "dev": "astro dev",
     "build": "node scripts/sync-docker-compose.mjs && astro build",

src/components/DeployStrip.astro

@@ -0,0 +1,54 @@
+---
+import { deployTargets } from '../data/deploy-targets';
+
+// Curated, widely-recognized brands (must have a vendored logo) for the trust
+// strip directly under the hero. Order = recognition, not category.
+const STRIP_SLUGS = [
+  'docker', 'kubernetes', 'helm', 'railway', 'caprover', 'render',
+  'koyeb', 'netlify', 'fly', 'digitalocean', 'gcp', 'coolify',
+];
+
+const bySlug = new Map(deployTargets.map((t) => [t.slug, t]));
+const logos = STRIP_SLUGS
+  .map((slug) => bySlug.get(slug))
+  .filter((t) => t?.logo)
+  .map((t) => ({ name: t!.name, logo: t!.logo! }));
+
+const moreCount = Math.max(0, deployTargets.length - logos.length);
+---
+
+<section aria-label="Deploy anywhere" class="relative border-y border-slate-800/60 bg-slate-950/40">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5 md:py-7">
+    <div class="flex flex-col lg:flex-row items-center justify-center gap-4 lg:gap-10">
+      <a href="/deploy" class="group shrink-0 inline-flex items-center gap-2 text-sm md:text-base font-semibold">
+        <span class="gradient-text">Deploy anywhere</span>
+        <span class="text-primary-300 group-hover:translate-x-0.5 transition-transform" aria-hidden="true">&rarr;</span>
+      </a>
+
+      <ul class="flex flex-wrap items-center justify-center gap-x-6 md:gap-x-8 gap-y-3" role="list">
+        {logos.map((logo) => (
+          <li>
+            <a href="/deploy" aria-label={`Deploy LibreDB Studio — see all options including ${logo.name}`} class="block">
+              <img
+                src={logo.logo}
+                alt={logo.name}
+                title={logo.name}
+                width="28"
+                height="28"
+                loading="lazy"
+                class="h-6 md:h-7 w-auto object-contain opacity-60 hover:opacity-100 transition-opacity duration-200"
+              />
+            </a>
+          </li>
+        ))}
+        {moreCount > 0 && (
+          <li>
+            <a href="/deploy" class="text-xs md:text-sm font-medium text-slate-400 hover:text-white transition-colors whitespace-nowrap">
+              +{moreCount} more
+            </a>
+          </li>
+        )}
+      </ul>
+    </div>
+  </div>
+</section>

src/components/Hero.astro

@@ -58,13 +58,14 @@
         Try Live Demo
       </a>
       <a
-        href="#get-started"
+        href="/deploy"
         class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 md:px-8 py-3 md:py-4 bg-slate-800 hover:bg-slate-700 text-white font-semibold rounded-xl transition-all border border-slate-700"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
         </svg>
-        Documentation
+        Deploy in one click
+        <span aria-hidden="true">&rarr;</span>
       </a>
     </div>
 

src/pages/index.astro

@@ -2,6 +2,7 @@
 import Layout from '../layouts/Layout.astro';
 import Header from '../components/Header.astro';
 import Hero from '../components/Hero.astro';
+import DeployStrip from '../components/DeployStrip.astro';
 import Features from '../components/Features.astro';
 import WhyLibreDB from '../components/WhyLibreDB.astro';
 import Databases from '../components/Databases.astro';
@@ -18,6 +19,7 @@ import BottomNav from '../components/BottomNav.astro';
   <Header />
   <main>
     <Hero />
+    <DeployStrip />
     <Features />
     <WhyLibreDB />
     <Databases />