Über diese Vorlage
TrustFlow hält den Entscheidungsweg fest: Hinter dem Eintrag Landingpage stehen 6.275 Zeichen Briefing. Das Farbschema ist weiß #FFFFFF darunter und schwarz #191919 für die Schrift, und die Seite ist in Inter gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 1462x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf Übergänge von 200ms und eine Videospur in Schleife beschränkt. Wenn du ein Briefing zum Thema Landingpage im Bereich Fintech schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Gemacht für Agenturen, die nach Runden abrechnen und eine feste Display-Größe von 15px und Abstände in 11px-Schritten vor der ersten Runde verbindlich haben wollen.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Fintech 6,3s Video in Schleife tragen kann.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von TrustFlow.
Was enthalten ist
- Obere Zeile, eine Aktion. Die Leiste ist eine Zeile aus Text und einer Aktion, auf eine feste Display-Größe von 15px und Abstände in 11px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1462x1080, damit die Medien darunter bis an den Rand durchlaufen. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen.
- Leiste im Raster der Seite. Die Aktion trägt den Akzent, die Links bleiben auf der Textfarbe, damit die Hierarchie der Leiste zur Seite darunter passt. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Nichts davon ist geerbt. Die Größen sind zitiert und nicht vererbt: eine feste Display-Größe von 15px, Abstände in 11px-Schritten und 200ms Übergänge. Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System.
- Video in der untersten Ebene. Der Clip läuft 6,3s in 1462x1080 und schleift ohne sichtbaren Schnitt, dadurch wirkt er als Fläche und nicht als Filmmaterial. Exportiere in 1462x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter. Exportiere bei 1462x1080 oder breiter, damit der Zuschnitt ehrlich bleibt.
Bewegung & Interaktion
Eine kleine interaktive Fläche
Die Zeiger-Arbeit ist klein und festgelegt: Hover-Zustände auf Buttons und Links statt auf jeder Karte, angewendet auf die Elemente, die schon interaktiv aussehen. Weil die Zustände einfach sind, lassen sie sich in jedes Komponentensystem übertragen.
Dauern aus dem Briefing
Die Bedienelemente reagieren in 200ms, schnell genug, dass die Seite beim Antippen antwortet und nicht erst danach. Jeder Zustandswechsel nennt einen Wert, der Browser-Standard kommt nie zum Einsatz.
Die Zeitwerte hinter dem Eintrag Landingpage
Wenn eine Seite unruhig wirkt, sind es meist zu viele Auftritte. Diese hält die Liste kurz: Übergänge von 200ms, eine Medienschleife von 6,3s und Hover- und Druckzustände. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
So wird der Eintrag Landingpage deiner
Ein Template verlangt, dass du sein Layout akzeptierst; diese Referenz verlangt, dass du es behältst und alles darin änderst. Der Unterschied: eine feste Display-Größe von 15px, Abstände in 11px-Schritten und 200ms Übergänge bleiben fest, während das Thema wandert. Schreib Text und Medien um, bevor du irgendetwas neu einfärbst.
Was der Eintrag Landingpage richtig macht
Ein Standard-Hero und dieser Eintrag Landingpage benutzen dieselben Teile. Hier geben die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster die Reihenfolge vor, und eine feste Display-Größe von 15px, Abstände in 11px-Schritten und 200ms Übergänge liefern die Maße, sodass der Screen als Abfolge liest und nicht als Container. Es gibt einem Leser im Bereich Fintech den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Wie lang ist der Prompt hinter TrustFlow?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1462x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um TrustFlow nachzubauen?
TrustFlow 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 gehe ich mit den Medien von TrustFlow in einem Kundenprojekt um?
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 1462x1080 erfasst.
