Landing Page

A complete dark-mode landing page for a multi-app or SaaS product. Includes a hero, feature grid, stats bar, app cards, and a CTA section.

Hero Section

Preview

New — YouTube Stats App launched →

A suite of free
developer tools

Free online tools for creators and developers. Download YouTube thumbnails, analyse channels, and more — no account required.

Browse tools →View docs

<section class="px-6 py-16 text-center">
  <span class="inline-flex items-center gap-1.5 rounded-full bg-[#D40C37]/10 px-3 py-1 text-xs font-medium text-[#D40C37] ring-1 ring-inset ring-[#D40C37]/20">
    New — YouTube Stats App launched →
  </span>

  <h1 class="mt-6 text-4xl font-extrabold tracking-tight text-zinc-100 leading-tight">
    A suite of free <span class="text-[#D40C37]">developer tools</span>
  </h1>

  <p class="mt-4 text-lg text-zinc-400 max-w-xl mx-auto leading-relaxed">
    Free online tools for creators and developers. Download YouTube thumbnails, analyse channels, and more — no account required.
  </p>

  <div class="mt-8 flex items-center justify-center gap-3 flex-wrap">
    <a href="#apps" class="inline-flex items-center gap-2 rounded-md bg-[#D40C37] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#b50a2f] transition-all hover:-translate-y-0.5 hover:shadow-lg hover:shadow-[#D40C37]/20">
      Browse tools →
    </a>
    <a href="/docs" class="inline-flex items-center gap-2 rounded-md border border-zinc-700 px-5 py-2.5 text-sm font-medium text-zinc-300 hover:bg-zinc-800 transition-colors">
      View docs
    </a>
  </div>
</section>

Stats Bar

Preview

2M+

Tools used

12

Free apps

0

Account required

99.9%

Uptime

<div class="flex flex-wrap justify-center gap-8 py-8 border-y border-zinc-800">
  <div class="text-center">
    <p class="text-2xl font-bold text-zinc-100 tabular-nums">2M+</p>
    <p class="mt-0.5 text-xs text-zinc-500">Tools used</p>
  </div>
  <!-- repeat for each stat -->
</div>

App Cards Grid

Preview

🎞

Thumbnail Downloader

Free

Download any YouTube video thumbnail in full HD instantly.

Try it →

📊

Channel Stats

Free

View subscriber counts, banner, profile picture and channel data.

Try it →

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <a href="/tools/thumbnail" class="group block rounded-xl border border-zinc-800 bg-zinc-900/50 p-5 transition-all hover:border-zinc-700 hover:-translate-y-0.5 hover:shadow-xl">
    <div class="flex items-start gap-4">
      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-red-950/60 ring-1 ring-inset ring-red-800/40 text-lg">
        🎞
      </div>
      <div>
        <h3 class="text-sm font-semibold text-zinc-100">Thumbnail Downloader</h3>
        <p class="mt-1 text-xs text-zinc-500 leading-relaxed">Download any YouTube video thumbnail in full HD.</p>
        <p class="mt-2 text-xs font-medium text-[#D40C37] group-hover:underline">Try it →</p>
      </div>
    </div>
  </a>
  <!-- repeat for each app -->
</div>

CTA Section

Preview

More tools coming soon

Get notified when new tools drop. No spam, unsubscribe any time.

<section class="rounded-2xl border border-[#D40C37]/20 bg-gradient-to-br from-[#D40C37]/8 to-transparent p-10 text-center">
  <h2 class="text-2xl font-bold text-zinc-100">More tools coming soon</h2>
  <p class="mt-2 text-sm text-zinc-400">Get notified when new tools drop.</p>
  <div class="mt-6 flex justify-center gap-2">
    <input type="email" placeholder="your@email.com" class="w-56 rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 outline-none focus:border-[#D40C37] focus:ring-2 focus:ring-[#D40C37]/15" />
    <button class="rounded-md bg-[#D40C37] px-4 py-2 text-sm font-medium text-white hover:bg-[#b50a2f]">
      Notify me
    </button>
  </div>
</section>