Hero

Apercu

Le composant Hero est la premiere chose que les visiteurs voient. Il contient un badge de preuve sociale, un titre accrocheur, un sous-titre, un bouton CTA principal et un espace reserve pour une capture d'ecran dans une maquette de navigateur.

Fichier : src/components/Hero.tsx

Animation

Le composant utilise framer-motion pour animer chaque element en cascade au chargement de la page :

Tous les elements s'animent depuis opacity: 0, y: 20 (ou y: 40 pour la maquette navigateur) vers leur position finale.

Personnalisation

Badge

Mettez a jour le texte du badge pour refleter votre propre preuve sociale :

<span className="inline-block rounded-full bg-indigo-50 px-4 py-1.5 text-sm font-medium text-indigo-700">
  Trusted by 500+ teams
</span>

Titre

Le titre utilise un motif bicolore. La phrase mise en valeur est enveloppee dans un <span> avec text-indigo-600 :

<motion.h1 className="... text-5xl font-extrabold tracking-tight text-gray-900 md:text-6xl lg:text-7xl">
  Ship your SaaS in days,{" "}
  <span className="text-indigo-600">not months</span>
</motion.h1>

Modifiez le texte et la couleur d'accentuation pour correspondre a votre marque.

Sous-titre

Modifiez le <motion.p> sous le titre. Gardez-le a deux phrases maximum pour un impact optimal.

Bouton CTA

Le CTA principal pointe vers #pricing. Mettez a jour le texte et la destination :

<a href="#pricing" className="inline-block rounded-lg bg-indigo-600 px-8 py-4 text-lg font-medium text-white ...">
  Get Started Free
</a>
<p className="mt-4 text-sm text-gray-400">
  No credit card required.
</p>

Maquette navigateur

La section inferieure affiche une fausse fenetre de navigateur avec des points tricolores et une barre d'adresse. Remplacez le contenu de l'espace reserve dans la div aspect-video par une vraie capture d'ecran :

<div className="flex aspect-video items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
  <img src="/images/dashboard-preview.png" alt="Dashboard" className="h-full w-full object-cover" />
</div>

Classes Tailwind principales

Conseils

• Supprimez les wrappers motion si vous ne souhaitez pas d'animations d'entree (cela supprime egalement la dependance framer-motion pour ce composant).
• Ajoutez un CTA secondaire (par ex. "Voir la demo") a cote du bouton principal pour augmenter l'engagement.