Reconstruire le héros en tant qu'éditorial scindé avec la bobine comme ouverture

Featurekamo-marketing
Expédié
19 août 2026 à 02:57 UTC
Auteur
Kamo
Commite
e6e05db

La bobine était un rectangle arrondi centré avec une ombre à largage - un objet placé sur la conception plutôt que sur une partie de celui-ci - et c'était la seule chose dans le héros: ff04781 supprimé l'insigne, le titre, la description, les CTA et les statistiques lorsqu'il a atterri la vidéo, qui a laissé HeroHeadline.tsx orpheline et dix clés de copie inutilisées. Donc la section n'avait pas de thèse et pas d'appel à l'action, ce qui est la plupart des raisons pour lesquelles elle lit comme un carré au milieu de l'écran. Maintenant une composition de deux colonnes: sourcil, titre, lede, CTA et le note libre pour toujours sur la gauche; la bobine à droite, en courant PAST la droite bord de la fenêtre. Trois choses font l'intégration: - les coins du cadre sont chanfreinés à 45 degrés, la même géométrie que l'hexagone; le champ déjà derrière lui, au lieu du rayonnement de bordure que chaque héros SaaS utilise; - un métro léger en bas de son bord gauche porte l'olive du titre passage en voyage, liant les deux moitiés de la division; - il saigne hors écran plutôt que s'arrêter court, donc il n'y a pas de quatrième bord pour le faire lire comme une carte. Le débordement de la section est ce qui la déchire. La jante est un gradient de 1px montrant à travers la boîte de rembourrage du parent, parce que Le chemin de clip coupe les bordures au chanfrein. Les deux cases répètent le polygone clip-path n'hérite pas, et une boîte intérieure carrée pille ses coins à travers. Travail de détail: le contrôle du son s'est déplacé vers le bas de la gauche, puisque le cadre est le bord droit est délibérément hors écran et un contrôle ancré là-bas serait inatteignable. Un rail de progression le long du bas montre la position dans la boucle le seul indice que la bobine est fini plutôt qu'un fond animé. Les statistiques sont une règle de la ligne de cheveux sous la composition, sans compter: quatre chiffres en course à la charge concurrencent la bobine au moment où elle devrait être J'ai regardé. "Watch Demo" est parti comme un CTA parce que la bobine à côté du bouton est la démo; la liaison secondaire réutilise l'étiquette "View Pricing" de la bande CTA et ciblez-les afin que la page nomme l'action d'une manière. Pas de nouvelle copie: chaque chaîne existait déjà en en.json. i18n/request.ts déjà deep fusionne chaque local avec l'anglais, donc les étiquettes de stat sont absentes de 21 les locaux rendent en anglais jusqu'à ce que le dictionnaire CI rattrape. Code mort enlevé en cours de route: une division accent-glow a mis en désuuage un 'groupe-hover' sans ancêtre de groupe, une vidéo inutiliséeContainerRef, et un objet-contenance sur un 16:9 source à l'intérieur d'un cadre 16:9.

Tous les changements

Comme ce que tu vois expédier ?

Chacune de ces mises à jour atterrit automatiquement dans votre espace de travail. Commencez gratuitement et regardez-le grandir semaine après semaine.

Commencez gratuitement pour toujoursPrix de visualisation