Next.js 15-Landingpage für Startups: So baute ich ein wartelistenoptimiertes Template

Ein überzeugendes Landingpage-Template für Startups muss nicht nur modern aussehen, sondern auch technisch sauber umgesetzt sein. In den letzten Tagen entwickelte ich ein solches Template mit Next.js 15 und setzte dabei auf bewusste Entscheidungen, die sowohl Entwicklern als auch Gründern zugutekommen.

Warum Next.js 15 und CSS Modules statt Tailwind

Viele vorgefertigte Landingpage-Templates setzen auf Tailwind CSS, was zwar Flexibilität bietet, aber für Käufer oft eine Hürde darstellt. Tailwind erfordert das Erlernen von Utility-Klassen und führt zu einer zusätzlichen Kompilierung beim Aufbau des Projekts. Für ein Template, das direkt einsatzbereit sein soll, ist das nicht immer ideal.

Stattdessen entschied ich mich für CSS Modules, die folgende Vorteile bieten:

• Lokal begrenzte Klassennamen: Keine Konflikte zwischen verschiedenen Komponenten.
• Standard-CSS-Syntax: Kein Auswendiglernen von Utility-Klassen nötig.
• Keine Laufzeitkosten: Alles wird zur Build-Zeit verarbeitet.
• Nahtlose Integration in Next.js: Keine zusätzlichen Konfigurationen erforderlich.

Der einzige Nachteil: Wiederholte Utility-Klassen wie padding oder margin sind etwas umständlicher als in Tailwind. Doch für ein Template, das verkauft werden soll, überwiegen die Vorteile deutlich. Käufer können das CSS problemlos lesen und anpassen, ohne sich in eine neue Syntax einarbeiten zu müssen.

Das Bento-Grid: Elegante Lösung mit 1px-Lücken

Das Features-Bereich des Templates nutzt ein CSS Grid mit drei gleich großen Spalten. Die erste Karte erstreckt sich jedoch über zwei Spalten, was dem Design einen modernen, asymmetrischen Look verleiht.

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bento .card:first-child {
  grid-column: span 2;
}

Anstatt jeder Karte einzeln einen Rahmen zuzuweisen, nutze ich die Hintergrundfarbe des Gitters als Rahmen. Die 1px-Lücken zwischen den Karten übernehmen diese Funktion – das Ergebnis ist ein sauberes, konsistentes Design ohne zusätzlichen Markup. Diese Technik spart nicht nur Code, sondern sorgt auch für eine perfekt gleichmäßige Linienführung.

Count-up-Animationen mit IntersectionObserver

Im Metriken-Bereich des Templates werden Zahlen animiert, sobald der Abschnitt im Viewport erscheint. Diese sanfte Count-up-Animation wird ohne externe Bibliotheken umgesetzt und erreicht eine natürliche Wirkung durch eine kubische Easing-Funktion.

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting && !started.current) {
    started.current = true;
    const startTime = performance.now();

    const tick = (now: number) => {
      const progress = Math.min((now - startTime) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3); // kubische Easing-Out-Funktion
      setCount(Math.round(eased * end));
      if (progress < 1) requestAnimationFrame(tick);
    };

    requestAnimationFrame(tick);
  }
}, { threshold: 0.4 });

Ein entscheidender Punkt ist die Nutzung eines Flags (`started`) mit useRef, das verhindert, dass die Animation bei erneutem Scrollen zurück in den Viewport erneut ausgelöst wird. Die kubische Easing-Funktion sorgt dafür, dass die Zahlen nicht linear, sondern beschleunigt hochzählen – was sich deutlich natürlicher anfühlt. Der gesamte Code umfasst nur etwa 30 Zeilen TypeScript und kommt ohne Abhängigkeiten aus.

Endlos-Marquee für Logos – rein mit CSS

Das Template integriert einen horizontalen Endlos-Marquee für Logos, der ohne JavaScript auskommt. Die Technik basiert auf einer einfachen CSS-Animation, die die Logos kontinuierlich von rechts nach links bewegt.

.row {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee 24s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

Der Trick liegt darin, die Logos doppelt anzuordnen und die Animation genau um -50% zu verschieben – das entspricht der halben Gesamtbreite. Dadurch entsteht ein nahtloser Loop. Für einen weichen Übergang am Rand nutze ich eine Maskierung mit einem linearen Verlauf:

.track {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}

Diese Lösung ist nicht nur performant, sondern auch extrem wartbar, da sie ohne zusätzliche Skripte auskommt.

Ein zentrales Inhaltsfile für alle Anpassungen

Ein häufiges Problem bei Templates ist die verstreute Inhaltsverwaltung. Viele Projekte erfordern das Durchsuchen verschiedener Komponenten, um Texte oder Bilder auszutauschen. Um das zu vermeiden, sammelte ich alle editierbaren Inhalte in einer einzigen Datei: src/lib/constants.ts.

Darin sind enthalten:

• Startup-Name und Slogan
• Navigationseinträge
• Logos und Features
• Metriken und Testimonials
• FAQ-Einträge

Durch diese zentrale Steuerung reicht ein einziger Dateizugriff, um das gesamte Template anzupassen. Käufer müssen nicht in unterschiedlichen Komponenten nach Änderungen suchen – ein klarer Vorteil gegenüber vielen Konkurrenzprodukten.

Design-Tokens: Einfache Rebranding-Möglichkeit

Mit acht Variablen in der globals.css lässt sich das gesamte Template in wenigen Sekunden neu gestalten. Die Tokens umfassen:

:root {
  --color-accent: #f59e0b; /* Akzentfarbe – ändern → vollständiges Rebranding */
  --color-bg: #09090b;
  --font-display: 'Sora', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --radius-lg: 16px;
}

Änderungen an diesen Variablen wirken sich sofort auf das gesamte Design aus. So können Gründer das Template an ihr Corporate Design anpassen, ohne tief in den Code einsteigen zu müssen.

Integration der Wartelisten-Formulare

Das Template enthält bereits ein simuliertes Formular, das durch echte Backend-Integrationen ersetzt werden kann. Hier zwei Beispiele:

ConvertKit

await fetch(` {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    api_key: KEY,
    email,
  }),
});

Loops

await fetch(' {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email,
  }),
});

Die Implementierung ist bewusst einfach gehalten, um Entwicklern maximale Flexibilität zu bieten. Sie können die Formulare leicht an ihre bevorzugten E-Mail-Marketing-Tools anpassen.

Fazit: Ein Template für schnelle Markteinführung

Mit Next.js 15 und gezielten CSS-Techniken entstand ein wartelistenoptimiertes Landingpage-Template, das sich durch Performance, Wartbarkeit und Design auszeichnet. Die Entscheidung für CSS Modules statt Tailwind, die zentrale Inhaltsverwaltung und die rein CSS-basierten Animationen machen das Template besonders für Gründer und Entwickler attraktiv, die schnell ein professionelles Ergebnis benötigen.

Das Template ist ab sofort auf Gumroad erhältlich und richtet sich an alle, die ein modernes, anpassbares und performantes Landingpage-Template für ihre Startup-Ideen suchen.