Create new price pages

Create a better price page.

Doc

• https://infima.dev/docs/components/card#photo-centric
• https://github.com/carlosqdev/react-pricing-component
• https://docusaurus.io/fr/docs/markdown-features/tabs#displaying-a-default-tab

Inspiration

• https://schoolmaker.com/pricing

Step

• Remettre les éléments dans le bon ordre (Grenouille)
• Griser / modifier les boutons de ce qui n'est pas dans le plan mensuel
• Styliser les boutons
• Mettre les plans Mensuel / Annuel au centre de la page
• Cacher les premières options nombre dans plan annuel étang
• À VALIDER => Mettre sur une ligne la section 10/50/100 (mensuel Etang)
• Remettre le bouton vert du bouton d'achat
• Dans le bouton annuel, ajouter info 2 mois offerts => "Bénéficiez de 2 mois offerts en choisissant l'abonnement annuel"
• Griser légèrement le texte des sections plans non cliquables
• Mettre dans l'offre mensuel => "Bénéficiez de 2 mois offerts en choisissant l'abonnement annuel"
• Enlever le "(facturé annuellement)"
• Dans le plan grenouille mensuel, mettre "soit XX/mois" en bas
• Réduire la taille du texte "soit XX"
• Enlever "plan annuel" du bouton grenouille
• Mettre la ligne barrée en blanc
• Revoir la forme des boutons Mensuel / Annuel mettre les boutons dans une seule div
• Mettre à jour les noms des classes buttons

Prochains tests

• Organiser le css de cette catégorie bouton dans un autre css dédié / et importer dans main css
• Coller une balise div près du forfait annuel (le -20%) / Ou tester avec la création d'une variable (voir personnalisation des onglets (en-tête) dans docusaurus) / (voir propriété ::after)
  • customiser un onglet : https://docusaurus.io/fr/docs/markdown-features/tabs#customizing-tab-headings
  • https://developer.mozilla.org/en-US/docs/Web/CSS/::after
  • inspiration : https://schoolmaker.com/pricing

Tests de fin

• Les boutons inverser les couleurs comme sur le site d'inspi