# App Landing Page Template: QR-Code und Store-Links
> Bau ein App Landing Page Template in React: Store-Buttons im ersten Screen, ein QR-Code für Desktop-Besucher und ein Link, der den passenden Store öffnet.
- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 6. Nov. 2026
- Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/mobile-app-landing-page-template
- Englische Fassung: https://wingo-ui.com/blog/mobile-app-landing-page-template
## Kurz gesagt
Eine App Landing Page hat genau eine Aufgabe: Besucher mit so wenigen Taps wie möglich in den richtigen Store zu bringen. Dafür brauchst du Store-Buttons im ersten Screen auf dem Smartphone, einen QR-Code für Desktop-Besucher (die auf dem Laptop keine App installieren können) und einen kurzen Link, der iPhones in den App Store und Android-Geräte zu Google Play schickt. In Next.js bauen die App Download Section und die Vorlage Download Page von Wingo UI diese Seite aus Props, mit einem in Code gezeichneten Smartphone, das Light und Dark Mode folgt.
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](https://pro.magicui.design/docs/templates/mobile) auf Next.js 14, React 18.3 und Tailwind 3.4 und bringt Store-Badges mit, [TailGrids AppSpace](https://tailgrids.com/templates/app-space) ist ein kostenpflichtiges React- und Tailwind-Template mit Download-Buttons im Hero, und ein kostenloses [Astro-Theme](https://astro.build/themes/details/mobile-app-landing-page/) 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](https://wingo-ui.com/components/app-download-section) und die [Vorlage Download Page](https://wingo-ui.com/templates/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:
| Aufgabe | Auf dem Smartphone | Auf dem Desktop |
|---|---|---|
| Die App zeigen | Ein gezeichnetes Smartphone oder ein Screenshot, unter dem Text | Das Smartphone neben dem Text, mit einer schwebenden Benachrichtigung daneben |
| Zur Installation bringen | Store-Buttons im ersten Screen, mindestens 44px hoch | Store-Buttons plus ein QR-Code zum Scannen mit dem Smartphone |
| Belegen, dass sie gut ist | Bewertung und Anzahl der Rezensionen unter den Buttons | Dasselbe, plus Features neben dem Smartphone |
| Zweifel ausräumen | FAQ: Preis, Geräte, Offline-Nutzung, Datenschutz | Dasselbe |
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](https://wingo-ui.com/components/qr-code) und die schreibgeschützte Bewertung:
```bash
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:
```tsx
// 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 (
},
{ caption: "Jetzt bei", label: "Google Play", href: "https://play.google.com/store/apps/details?id=com.acme.list", icon: },
]}
features={[
{ icon: , title: "Funktioniert offline", description: "Änderungen werden synchronisiert, sobald du wieder online bist." },
{ icon: , 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.
> Live-Demo (App Download Section): Wechsel das Layout zwischen split, centered und card und mach das Fenster dann schmaler als 1024px: Der QR-Code verschwindet, die Store-Buttons bleiben, groß genug für den Daumen. Probier sie unter [App Download Section](https://wingo-ui.com/components/app-download-section) aus und installier sie mit `npx wingo-ui@latest add app-download-section`.
### 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:
```tsx
import Image from "next/image";
import { AppDownloadSection } from "@/components/blocks/app-download-section";
}
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:
```ts
// 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](https://wingo-ui.com/de/blog/react-qr-code-with-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:
```tsx
// 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 ;
}
```
## 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](https://developer.apple.com/app-store/marketing/guidelines/) 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](https://partnermarketinghub.withgoogle.com/brands/google-play/google-play/lockups-icons-badges/) 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`:
```tsx
}
/>
```
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](https://wingo-ui.com/templates/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.
> Live-Demo (Download Page): Diese Version ist auf iPhone festgelegt: Der Hero-Button bietet den App Store an, und der iPhone-Tab in der Auswahl zeigt einen QR-Code und drei Installationsschritte. Drück den Download-Button, um den Danke-Zustand zu sehen. Probier sie unter [Download Page](https://wingo-ui.com/templates/download-page) aus und installier sie mit `npx wingo-ui@latest add download-page`.
Die Vorlage navigiert nicht von selbst. Sie ruft `onDownload(platform, variant, channel)` auf, und du entscheidest, wohin es geht:
```tsx
// app/(marketing)/download/download-route.tsx
"use client";
import Link from "next/link";
import { DownloadPage } from "@/components/templates/download-page";
const STORES: Record = {
"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 (
{
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](https://wingo-ui.com/components/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`:
```tsx
import Image from "next/image";
import Link from "next/link";
import { HeroSection } from "@/components/blocks/hero-section";
}
/>
```
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](https://wingo-ui.com/de/blog/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](https://wingo-ui.com/de/blog/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](https://wingo-ui.com/components/faq-section) nimmt die Fragen als `items` und gibt mit `jsonLd` auf Wunsch FAQ-JSON-LD aus. Die kostenlose [CTA Section](https://wingo-ui.com/components/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](https://wingo-ui.com/templates/landing-page) dieselben Marketing-Sections. Weitere komplette Seiten findest du in der Kategorie [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build), angefangen beim Pillar-Beitrag, dem [Tutorial zum Next.js Admin Dashboard](https://wingo-ui.com/de/blog/nextjs-admin-dashboard-tutorial).
## Nächster Schritt
App Download Section, die Vorlage Download Page und Hero Section gehören zu [Pro](https://wingo-ui.com/de/pricing) ($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.
## Komponenten in diesem Artikel
- [App Download Section](https://wingo-ui.com/components/app-download-section) (Pro): A mobile app promo: a drawn phone with a mini app, store buttons, a QR code to the download page, the rating and feature bullets. Installation: `npx wingo-ui@latest add app-download-section`
- [Download Page](https://wingo-ui.com/templates/download-page) (Pro): A React app download page template: an OS-aware download hero, drawn desktop and phone apps, a platform picker with checksums, and FAQ. Installation: `npx wingo-ui@latest add download-page`
- [Hero Section](https://wingo-ui.com/components/hero-section) (Pro): A React hero section for a landing or product page: an announcement pill, a big title, two actions, social proof and a product shot drawn in code. Installation: `npx wingo-ui@latest add hero-section`
- [QR Code](https://wingo-ui.com/components/qr-code) (Pro): A React QR code generator with rounded or dotted modules, soft eyes, a center logo, any colors, a caption and one-tap PNG or SVG export. Installation: `npx wingo-ui@latest add qr-code`
- [FAQ Section](https://wingo-ui.com/components/faq-section) (Free): A React FAQ section for marketing pages: an accordion, a split layout, an open grid or expandable cards, with topics and live search. Installation: `npx wingo-ui@latest add faq-section`
## 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.
---
Quelle: https://wingo-ui.com/de/blog/mobile-app-landing-page-template