Über diese Vorlage
Cybersecurity Hero: Hero-Bereich für SaaS, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Das Farbschema ist #0A0A0F darunter und aufhellung #B04090 für die Akzente, und die Seite ist in Inter gesetzt. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Bewegung bleibt auf Übergänge von 300ms und cubic-bezier(0.4, 0, 0.2, 1) beschränkt. Lass es beim Schreiben offen: Die 11.920 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Halte ein Breakpoint bei 440px in der Übergabe-Notiz fest, damit der nächste Build die Angabe nicht aus der Seite herauslesen muss.
- Dieses Hero-Bereich-Design ist für Agenturen gebaut, die den 640x472-Rahmen durch drei Runden Kundenkorrekturen bringen müssen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Cybersecurity Hero.
Was enthalten ist
- Navigation in einer Zeile. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #B04090, knapp genug, um neben dem Rest der Seite leise zu bleiben. Unter 440px klappen die Links zu einem bildschirmfüllenden Overlay zusammen. Die Labels passen bei 440px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Schriften mit je einer Aufgabe. Die Schrift ist hier das Styling-System: Inter in der Display-Größe, dieselbe Schrift durch die ganze Oberfläche, und keine zweite Akzentfarbe, die die Arbeit übernimmt. Die Display-Schrift kommt nur in einer Größe vor, deshalb konkurriert sie nie mit sich selbst.
- Logostreifen auf der Grundlinie. Die Kundenmarken laufen mit niedrigem Kontrast und auf der kleinsten Stufe des Briefings an der Unterkante entlang, damit der Beleg als Textur auf der Komposition (Hero-Bereich) wirkt und nie mit der Headline konkurriert. Die Reihe ist auf dieselbe Grundlinie ausgerichtet wie der Rest der Komposition. Niedriger Kontrast, kleine Größe, keine Überschrift. Die Referenz wurde mit 640x472 erfasst.
- Navigation ohne Hintergrund. Unter 440px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
Bewegung & Interaktion
Zustandswechsel mit Zeitwert
Eine Dauer deckt alle Interaktionen ab (300ms mit cubic-bezier(0.4, 0, 0.2, 1)); so wirken Hover und Druck als ein System. Dieselbe Dauer wird für alle Bedienelemente wiederverwendet, deshalb wirken die Interaktionen wie ein System.
Hover, aber sparsam
Die Rückmeldung beschränkt sich auf Hover-Zustände auf Buttons und Links statt auf jeder Karte, der Rest des Layouts ist eine feste Komposition. Die interaktiven Ziele sind groß genug zum Tippen, und die Zeiger-Behandlung ist über alle hinweg einheitlich.
Was ein KI- oder SaaS-Produkt hier gewinnt
Eine Tönung über den Medien wäre die billige Lösung gewesen. Das Briefing lässt sie weg. Das Medium ist ein Standbild in 640x472. Der Text hält trotzdem, weil Radius 20px und Abstände in 12px-Schritten den Rahmen ruhig halten. Cybersecurity Hero nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie Cybersecurity Hero den ersten Blick ordnet
Der Eintrag Hero-Bereich hat einen festgelegten Lesepfad. die Navigation etabliert das Produkt und gibt Rückkehrenden einen vertrauten Weg. Danach folgen die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, die Kundenzeile und das Kartenraster der Reihe nach, und genau das verhindert, dass ein einzelner Screen als Liste liest. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Was sich in Cybersecurity Hero bewegt
Übernimm das Muster und nicht die Werte: Behalte die Art der Bewegung, die hier genannt wird (Übergänge von 300ms und Hover- und Druckzustände), und lass deine Marke die Dauern setzen. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Wie lang ist der Prompt hinter Cybersecurity Hero?
Das erfasste Briefing umfasst 11.920 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Wie viel von Cybersecurity Hero hängt von React und Tailwind CSS ab?
Cybersecurity Hero 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.
Wie verhalten sich die 300ms Übergänge in Cybersecurity Hero?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 300ms mit cubic-bezier(0.4, 0, 0.2, 1) abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
