Über diese Vorlage
SkyElite Private Jets liefert für eine Reise- oder Tourismusmarke einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Sie beginnt mit „Your dedication deserves recognition“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette umfasst tiefes blau #1A2229 darunter, die Schrift ist Inter. Geliefert wird React und Tailwind CSS, erfasst bei 1920x1455, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Es ist die richtige Referenz für eine Hero-Bereich, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an eine Reise- oder Tourismusmarke.
Gemacht für
- Inhouse-Teams, die ein Hero-Bereich-Design erweitern und 100vh hohe Sektionen und Abstände in 12px-Schritten unverändert in die neuen Blöcke übernehmen müssen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von SkyElite Private Jets.
- Gemacht für einen Solo-Gründer, der ein Hero-Bereich-Design für eine Reise- oder Tourismusmarke ausliefert und kein Designsystem im Rücken hat.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Inter gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1920x1455, damit die Medien darunter bis an den Rand durchlaufen.
- Eine Skala für Schrift und Rahmen. Das Briefing nennt die Zahlen: 100vh hohe Sektionen und Abstände in 12px-Schritten. Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
- Navigation in einer Zeile. Die Labels sind kurz genug, um bei jeder im Briefing genannten Breite in einer Zeile zu bleiben. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Am Viewport gemessen. Die Abstände sind genauso zitiert (100vh hohe Sektionen und Abstände in 12px-Schritten) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Die Bedienelemente sind die interaktive Schicht
Nur die Bedienelemente reagieren auf den Zeiger (Hover-Zustände auf Buttons und Links statt auf jeder Karte), die Seite wirkt also reaktionsschnell, ohne jedes Element zur Zielscheibe zu machen. Druck-Zustände sind ebenso festgelegt wie Hover, ein Tippen bestätigt also genauso wie ein Klick. Halte die interaktive Ebene klein.
Fast keine Bewegung
Diese Seite kommt als stehende Komposition in 1920x1455, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es. Bewegung ist hier Rückmeldung und nicht Dekoration. Keine Scroll-Timelines nötig.
Wie der Eintrag Hero-Bereich umbricht
Test den Eintrag Hero-Bereich bei 1920x1455 und dann in Telefonbreite: Dieselbe Reihenfolge hält; der Bereich wird auf 100vh gehalten und die Navigation klappt zu einem mobilen Menü zusammen. Der Umbruch hält die Handlung in jeder Breite erreichbar.
So wird der Eintrag Hero-Bereich deiner
Das Briefing nennt Inter und die Skala daneben. Ersetz die Schrift durch eine mit denselben Proportionen, und die Komposition überlebt. Rahmen und Skala sind das, was unangetastet bleibt.
SkyElite Private Jets als Spezifikation lesen
Die Seite enthält mehr Zahlen, als es den Anschein hat. 100vh hohe Sektionen und Abstände in 12px-Schritten sind die, die ein Nachbau behalten muss; der Rest darf wandern. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Was kann ich mit dem Briefing zu SkyElite Private Jets machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 2.285 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie lang ist der Prompt hinter SkyElite Private Jets?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1455, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich Hero-Bereich von SkyElite Private Jets in einem anderen Stack nachbauen?
SkyElite Private Jets wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
