App Landing Page Template: QR-Code und Store-Links

Die App ist fertig, die Store-Einträge sind freigegeben, jetzt fehlt eine Seite, die sie verkauft. Wer nach einem App Landing Page Template sucht, findet HTML-Themes, Figma-Kits und ein paar React-Optionen. Stand 6. November 2026 läuft das Magic UI Pro Mobile Template (opens in a new tab) auf Next.js 14, React 18.3 und Tailwind 3.4 und bringt Store-Badges mit, TailGrids AppSpace (opens in a new tab) ist ein kostenpflichtiges React- und Tailwind-Template mit Download-Buttons im Hero, und ein kostenloses Astro-Theme (opens in a new tab) holt Bewertung, Version und Beschreibung aus dem App Store. Keine ihrer Feature-Seiten erwähnt zwei Dinge, die eine App-Seite braucht: einen QR-Code für Desktop-Besucher und einen Link, der auf jedem Smartphone den passenden Store öffnet.

Dieser Guide zeigt, was eine App-Download-Seite leisten muss, wie zwei Bausteine von Wingo UI (der Bibliothek, die wir bauen) das lösen und was du bei 390px prüfen solltest. Die Bausteine sind die App Download Section und die Vorlage Download Page. Der Code zielt auf den App Router von Next.js 16, React 19 und Tailwind v4.

Was muss eine App Landing Page leisten?

Sie bringt Besucher in den Store. Alles andere dient diesem einen Tap. Gutes Design für eine App-Download-Seite läuft auf vier Aufgaben hinaus, und jede sieht je nach Gerät anders aus:

Die Desktop-Spalte vergessen die meisten Templates. Wer deine App auf dem Laptop entdeckt, kann sie dort nicht installieren. Ohne QR-Code muss die Person auf dem Smartphone im Store suchen und hoffen, dass sie deine App erwischt und keinen Klon mit ähnlichem Icon.

Wie baust du die App Download Section in React?

Installier den Block. Die CLI bringt auch seine Abhängigkeiten mit, darunter die Komponente QR Code und die schreibgeschützte Bewertung:

npx wingo-ui@latest add app-download-section

Der Block kommt mit "use client". Leg deine Instanz wie unten in eine eigene Client-Datei, dann bleibt die Seite, die sie rendert, eine Server-Komponente und kann metadata exportieren. Übergib deine echten Store-Links, die URL hinter dem QR-Code und deine Features:

// app/(marketing)/app-landing.tsx
"use client";

import Link from "next/link";
import { Bell, Play, Smartphone, WifiOff } from "lucide-react";
import { AppDownloadSection } from "@/components/blocks/app-download-section";

export function AppLanding() {
  return (
    <AppDownloadSection
      headingAs="h1"
      linkComponent={Link}
      eyebrow="iOS und Android"
      title="Deine Einkaufsliste, geteilt mit allen zu Hause"
      description="Trag im Bus etwas ein, und es steht schon auf dem Handy deines Partners, bevor er im Laden ist."
      qrValue="https://acme.com/get"
      rating={4.7}
      reviewCount={3200}
      radius="full"
      stores={[
        { caption: "Laden im", label: "App Store", href: "https://apps.apple.com/app/id000000000", icon: <Smartphone /> },
        { caption: "Jetzt bei", label: "Google Play", href: "https://play.google.com/store/apps/details?id=com.acme.list", icon: <Play /> },
      ]}
      features={[
        { icon: <WifiOff />, title: "Funktioniert offline", description: "Änderungen werden synchronisiert, sobald du wieder online bist." },
        { icon: <Bell />, title: "Dezente Benachrichtigungen", description: "Nur wenn jemand etwas zu einer Liste hinzufügt, der du folgst." },
      ]}
    />
  );
}

Mit headingAs="h1" wird der Titel zur ersten Überschrift der Seite, so kann die Section den ganzen ersten Screen füllen. Im Layout split steht die Feature-Liste zwischen Beschreibung und Store-Buttons. Beschränk sie also auf zwei kurze Einträge (oder übergib features={[]}), wenn die Buttons auf dem Smartphone ohne Scrollen sichtbar sein müssen. Nimm deine echte Bewertung und Rezensionszahl aus der Store-Konsole oder setz showRating={false}, bis du sie hast. Eine erfundene 4,9 ist genau die Art Behauptung, die Besucher mit einem Tap nachprüfen.

Welches Layout passt zu deiner App?

layout kennt drei Werte. split stellt Text, Features und Downloads neben das Smartphone und funktioniert als Hero. centered setzt Überschrift und Buttons nach oben und das Smartphone zwischen zwei Feature-Spalten, das passt zu einer Section weiter unten auf einer längeren Seite. card packt alles auf ein farbiges Panel, aus dessen unterer Kante das Smartphone ragt, gut als Abschluss der Seite. reverse schiebt das Smartphone in split ab 1024px nach links.

Wie zeichnest du Geräte-Mockups in Code statt mit Screenshots?

Die Section zeichnet das Smartphone mit CSS und Design-Tokens: Rahmen, Kamera-Pille, Statusleiste und eine Mini-App mit Fortschrittskarte und Aufgabenliste. Weil es gezeichnet ist, folgt es Light und Dark Mode, bleibt auf jedem Display scharf und zeigt nie die UI vom letzten Quartal. Den Text änderst du über den Prop phone (Uhrzeit, Überschrift, Nutzer, Aufgaben, Benachrichtigung), die Farbe des Rahmens über phoneColor.

Sieht deine echte App anders aus, und das wird sie, übergib einen Screenshot über screen. Er ersetzt nur das Innere des Smartphones, Rahmen und schwebende Benachrichtigung bleiben:

import Image from "next/image";
import { AppDownloadSection } from "@/components/blocks/app-download-section";

<AppDownloadSection
  screen={<Image src="/shots/list-home.png" alt="" width={390} height={844} className="size-full object-cover" />}
  phoneColor="#1F2937"
/>

Das alt bleibt leer, weil Screenreader das Smartphone als ein einziges Bild vorlesen und seinen Bildschirm überspringen. Die Standardbeschreibung spricht von der gezeichneten Aufgabenliste, beschreib also stattdessen deinen Screenshot mit labels={{ phone: "..." }}. Exportier den Screenshot im Seitenverhältnis des Smartphones, damit object-cover nichts Wichtiges abschneidet.

Wie baust du einen Link, der den passenden Store öffnet?

QR-Code, Anzeigen und E-Mails sollten alle auf dieselbe URL zeigen. Leg einen Route Handler an, der den User Agent liest und weiterleitet:

// app/get/route.ts
const APP_STORE = "https://apps.apple.com/app/id000000000";
const GOOGLE_PLAY = "https://play.google.com/store/apps/details?id=com.acme.list";

export function GET(request: Request) {
  const ua = request.headers.get("user-agent") ?? "";
  if (/iphone|ipod/i.test(ua)) return Response.redirect(APP_STORE, 302);
  if (/android/i.test(ua)) return Response.redirect(GOOGLE_PLAY, 302);
  // ipads melden standardmäßig einen mac-user-agent und landen deshalb auf der download-seite
  return Response.redirect(new URL("/download", request.url), 302);
}

Ein 302 hält das Ziel später leicht änderbar. Wer jetzt den QR-Code auf der Landing Page scannt, landet auf dem Smartphone direkt im Store-Eintrag, ohne zweite Suche. Zum Styling des QR-Codes, etwa mit einem Logo in der Mitte, das trotzdem scannbar bleibt, lies unseren Guide zum React QR Code mit Logo.

Auf dem iPhone kannst du zusätzlich Safaris Smart App Banner einbauen. In Next.js ist das ein einziges Metadata-Feld, das den Meta-Tag apple-itunes-app rendert:

// app/(marketing)/page.tsx
import type { Metadata } from "next";
import { AppLanding } from "./app-landing";

export const metadata: Metadata = {
  title: "Acme List für iPhone und Android",
  itunes: { appId: "000000000" },
};

export default function Page() {
  return <AppLanding />;
}

Darfst du die offiziellen Badges von App Store und Google Play nutzen?

Ja, wenn du die Regeln des jeweiligen Stores einhältst. Stand 6. November 2026 schreiben Apples Marketing-Richtlinien (opens in a new tab) für das App Store Badge vor: nur die Grafik verwenden, die Apple bereitstellt, sie nicht verändern, schräg stellen oder animieren, rundherum einen Freiraum von einem Viertel der Badge-Höhe lassen, sie auf dem Bildschirm mindestens 40px hoch zeigen und sie an erster Stelle platzieren, wenn weitere Store-Badges auftauchen. Googles Badge-Richtlinien für Google Play (opens in a new tab) verlangen denselben Freiraum von einem Viertel der Höhe, eine Mindesthöhe von 28px und ein Google-Play-Badge, das mindestens so groß ist wie die anderen Badges daneben.

Die App Download Section liefert diese Logos nicht mit. Ihre Store-Buttons sind neutrale Links mit einer Lucide-Glyphe und dem Store-Namen, auf dem Smartphone 56px hoch und ab 640px 52px. Für die offizielle Grafik blendest du die eingebauten Buttons aus und übergibst deine Badges als actions:

<AppDownloadSection
  stores={[]}
  actions={
    <div className="flex flex-wrap items-center gap-3">
      <a href="https://apps.apple.com/app/id000000000">
        <img src="/badges/app-store.svg" alt="Laden im App Store" className="h-12 w-auto" />
      </a>
      <a href="https://play.google.com/store/apps/details?id=com.acme.list">
        <img src="/badges/google-play.svg" alt="Jetzt bei Google Play" className="h-12 w-auto" />
      </a>
    </div>
  }
/>

Beide Bilder bekommen dieselbe Höhe, das App-Store-Badge steht vorn, und gap-3 (12px) Abstand deckt ein Viertel eines 48px hohen Badges ab. Hat deine Google-Play-Datei einen transparenten Rand, schneid ihn weg oder erhöh die Höhe, damit das Badge nicht kleiner erscheint als das von Apple.

Wann brauchst du die komplette Vorlage Download Page?

Wenn die App auch für Mac, Windows, Linux, den Browser oder die Kommandozeile erscheint. Die Vorlage Download Page kombiniert die App Download Section mit einem Hero, der das Betriebssystem erkennt, einer Plattformauswahl, Installationsbefehlen, Prüfsummen, Release Notes und Systemanforderungen. Nach der Hydration folgt ihr Hauptbutton dem Gerät des Besuchers: Ein iPhone sieht „Download on the App Store“, ein Android-Smartphone „Get it on Google Play“, statt eines Mac-Downloads. Der Server rendert immer macOS, so gibt es nie einen Hydration-Mismatch, und der Client erkennt iPads (die einen Mac-User-Agent melden) über eine Touch-Prüfung, die der Server nicht machen kann.

Die Vorlage navigiert nicht von selbst. Sie ruft onDownload(platform, variant, channel) auf, und du entscheidest, wohin es geht:

// app/(marketing)/download/download-route.tsx
"use client";

import Link from "next/link";
import { DownloadPage } from "@/components/templates/download-page";

const STORES: Record<string, string> = {
  "ios:app-store": "https://apps.apple.com/app/id000000000",
  "android:play": "https://play.google.com/store/apps/details?id=com.acme.list",
};

export function DownloadRoute() {
  return (
    <DownloadPage
      header={false}
      footer={false}
      linkComponent={Link}
      ctaTone="brand"
      mobileProps={{ qrValue: "https://acme.com/get" }}
      onDownload={(platform, variant) => {
        const url = STORES[`${platform}:${variant}`];
        if (url) window.open(url, "_blank", "noopener");
      }}
    />
  );
}

Übergib ein eigenes platforms-Array, damit nur erscheint, was du wirklich auslieferst, und schalte die Sections ab, für die du keinen Inhalt hast: showRequirements, showEnterprise und showFeatures (die Desktop-Features) nehmen alle false.

Wo passt die Hero Section hin?

Nimm oben die Hero Section statt der App Download Section, wenn die App nur ein Teil eines Produkts ist, das auch im Web läuft. Dann verkauft der erste Screen das Produkt, und die App kommt weiter unten. Lass ihre Hauptaktion auf den Store-Link zeigen und leg einen Smartphone-Screenshot in media:

import Image from "next/image";
import Link from "next/link";
import { HeroSection } from "@/components/blocks/hero-section";

<HeroSection
  layout="split"
  linkComponent={Link}
  title="Plant eure Woche gemeinsam, auf jedem Gerät"
  labels={{ primary: "App laden", secondary: "Im Browser öffnen" }}
  hrefs={{ primary: "/get", secondary: "/sign-in" }}
  media={<Image src="/shots/list-home.png" alt="Die App Acme List auf einem Smartphone" width={780} height={1688} className="mx-auto h-auto w-64" />}
/>

Eine App Download Section mit layout="centered" weiter unten wiederholt dann die Stores und ergänzt den QR-Code. Die anderen Hero-Layouts zeigt unser Guide zur Shadcn Hero Section.

Was geht auf einem 390px-Smartphone kaputt?

Meist der erste Screen: Zu viel Text über den Store-Buttons schiebt sie aus dem sichtbaren Bereich. Prüf vor dem Launch auf einem echten Smartphone:

• Der erste Screen. Titel, eine Zeile Beschreibung und beide Store-Buttons sichtbar, ohne zu scrollen. Wenn nicht, kürz die Beschreibung.
• Die Buttons. Mindestens 44px hoch und weit genug auseinander, dass ein Daumen nicht beide trifft. Die Buttons der Section sind auf dem Smartphone 56px hoch, teilen sich die Zeile und brechen in zwei Zeilen um, wenn es zu eng wird.
• Der QR-Code. Ausgeblendet. Die Section zeigt ihn erst ab 1024px, und das ist richtig: Ein Smartphone kann sich nicht selbst scannen.
• Das Bild. Das gezeichnete Smartphone rutscht unter den Text, und die schwebende Benachrichtigung verschwindet bei schmalen Breiten, so erzwingt nichts horizontales Scrollen.
• Besucher der Web-App. Ist dein Produkt auch eine PWA, leg keinen Installationsdialog über die Store-Buttons. Wann was sinnvoll ist, erklärt unser Guide zum React PWA Install Prompt.

Wie sollte die Seite enden?

Mit den Fragen, die Leute vor der Installation stellen, und danach einem letzten Download-Button. Räum zuerst die Zweifel aus: Ist sie kostenlos, auf welchen Geräten läuft sie, funktioniert sie offline, was passiert mit meinen Daten? Die kostenlose FAQ Section nimmt die Fragen als items und gibt mit jsonLd auf Wunsch FAQ-JSON-LD aus. Die kostenlose CTA Section schließt die Seite mit einem vollflächigen Band ab (variant="inverted", der Standard); lass ihr hrefs.primary auf /get zeigen.

Für eine ganze Marketing-Website rund um die App kombiniert die Vorlage Landing Page dieselben Marketing-Sections. Weitere komplette Seiten findest du in der Kategorie Praxis: Screens und Apps, angefangen beim Pillar-Beitrag, dem Tutorial zum Next.js Admin Dashboard.

Nächster Schritt

App Download Section, die Vorlage Download Page und Hero Section gehören zu Pro ($8 im Monat, $80 im Jahr oder einmalig $150); FAQ und CTA Section sind mit einem kostenlosen Konto frei. Fang mit npx wingo-ui@latest add app-download-section an, übergib deine Store-Links und die URL /get, und scann den QR-Code mit deinem eigenen Smartphone, bevor es jemand anders tut.

Häufige Fragen

Was gehört auf eine App Landing Page?

Eine Überschrift mit Store-Buttons im ersten Screen, ein Bild der App, drei oder vier Features, ein Beleg wie die Bewertung im Store, ein FAQ zu Preis, Geräten und Datenschutz und ein abschließender Call to Action. Desktop-Besucher brauchen zusätzlich einen QR-Code, weil sie eine Smartphone-App nicht auf dem Laptop installieren können.

Wie schicke ich iPhone-Nutzer mit einem einzigen Link in den App Store und Android-Nutzer zu Google Play?

Leg einen Route Handler wie /get an, der den User Agent liest und mit einem 302 weiterleitet: iPhone und iPod in den App Store, Android zu Google Play, alles andere auf deine Download-Seite. Diese eine URL nutzt du im QR-Code, in Anzeigen und in E-Mails.

Darf ich statt des offiziellen App-Store-Badges einen eigenen Button verwenden?

Beim App Store nicht: Laut Apples Marketing-Richtlinien darfst du nur die Badge-Grafik verwenden, die Apple bereitstellt, und sie nicht verändern. Die App Download Section zeichnet neutrale Store-Buttons mit Glyphe und Store-Namen. Für die offiziellen Badges übergibst du ein leeres stores-Array und legst die Badge-Bilder in den Prop actions.

Gibt es ein kostenloses App Landing Page Template für Next.js?

In Wingo UI sind App Download Section, die Vorlage Download Page und Hero Section Pro, FAQ Section, CTA Section und Marketing Header dagegen mit einem kostenlosen Konto frei. Außerhalb von Next.js listet astro.build ein kostenloses Mobile App Landing Page Theme mit Astro und React (Stand 6. November 2026).

Soll der QR-Code auf dem Smartphone erscheinen?

Nein. Wer auf dem Smartphone surft, kann den eigenen Bildschirm nicht scannen, der Code kostet also nur Platz. Die App Download Section zeigt ihn ab 1024px und gibt Smartphones nur die Store-Buttons.