Über diese Vorlage
Bevor du beim Thema Hero-Bereich für ein KI- oder SaaS-Produkt nachbaust, lies Nexora Automation: Komposition und Spezifikation stehen beide hier. Die Zeile lautet „Now with GPT-5 support ✨“, und der Rest des Eintrags Hero-Bereich ordnet sich darum. Die Palette ist weiß #FFFFFF darunter und tiefes petrol #092128 für die Schrift, gesetzt in Instrument Serif. Geliefert wird React und Tailwind CSS, erfasst bei 800x552, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung kommt über Übergänge von 0.6s nicht hinaus. Lass es beim Schreiben offen: Die 5.344 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Designer, die zuerst die Zahlen brauchen: 100vh hohe Sektionen und Abstände in 25px-Schritten, alle aus dem Briefing zitiert.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Nexora Automation.
- Behalte Instrument Serif und baue das Hero-Bereich-Design darum herum neu, statt für deine Marke eine neue Schriftgrößen-Skala aufzumachen.
Was enthalten ist
- Zurückhaltende Navigation. Eine kurze Reihe Links und eine einzelne Aktion liegen in Hero-Bereich, auf 100vh hohe Sektionen und Abstände in 25px-Schritten gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x552, damit die Medien darunter bis an den Rand durchlaufen.
- Ein Breakpoint für die Links. Eine schmale Leiste liegt über der Komposition (Hero-Bereich), die Wortmarke links, die Links in Instrument Serif gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt.
- Gemessen statt geschätzt. Die Größen sind zitiert und nicht vererbt: 100vh hohe Sektionen, Abstände in 25px-Schritten und 0.6s Übergänge. Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann.
- Eine Familie, zwei Rollen. Die Größenstufen und Laufweiten im Briefing geben den Ton vor: Instrument Serif in enger Display-Größe, danach ein klarer Absturz zum Begleittext. Ein Schrifttausch ist möglich, die Proportionen müssen ihn aber überstehen. Eine Familie mit klaren Rollen schlägt zwei, die konkurrieren.
Bewegung & Interaktion
Zeiten in Millisekunden
Die Bewegung ist hier in Millisekunden angegeben: 0.6s. Das ist das gesamte Animationsbudget, und es fließt in Zustandswechsel statt in eine Scroll-Timeline. Das Easing steht zusammen mit der Dauer im Briefing (0.6s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Rückmeldung an den Bedienelementen
Die Seite reagiert nur dort, wo man handeln kann: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Weil die Zustände einfach sind, lassen sie sich in jedes Komponentensystem übertragen. Halte die interaktive Ebene klein.
Die Reihenfolge im Eintrag Hero-Bereich
Die Reihenfolge ist hier das Design. die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster stehen so, dass das Angebot vor dem Beleg landet, und 100vh hohe Sektionen und Abstände in 25px-Schritten setzen den Abstand dazwischen. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Wie der Eintrag Hero-Bereich umbricht
Responsiv heißt hier: Die Skala ändert sich, die Abfolge nicht. der Bereich wird auf 100vh gehalten, und die Leserichtung bleibt, wo das Briefing sie hingesetzt hat. Autoplay und Bewegung sind ehrlich behandelt, die Seite kommuniziert also auch ohne sie.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Wo ein Template jede Sektion beim Eintritt animiert, ist die Liste hier kurz: Übergänge von 0.6s und Hover- und Druckzustände, und dann Ruhe. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Ist der Prompt zu Nexora Automation eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x552, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Nexora Automation 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.
Kann ich eine aus Nexora Automation nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 800x552 erfasst.
