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

added Doing label

assigned to @cchaudier

assigned to @julie_thezenas and unassigned @cchaudier

mentioned in merge request !52 (merged)

changed the description

changed the description

changed the description

changed the description

marked the checklist item Remettre les éléments dans le bon ordre (Grenouille) as completed

marked the checklist item Griser / modifier les boutons de ce qui n'est pas dans le plan mensuel as completed

changed the description

changed the description

marked the checklist item Styliser les boutons as completed

marked the checklist item Mettre les plans Mensuel / Annuel au centre de la page as completed

changed the description

À TESTER :

• passer les textes en blanc sur fond vert (survol Grenouille)
• tester les boutons en border et texte vert light, et en :hover en background vert
• coller une balise div près du forfait annuel (le -20%)

changed the description

marked the checklist item Remettre le bouton vert du bouton d'achat as completed

marked the checklist item Dans le bouton annuel, ajouter info 2 mois offerts => "Bénéficiez de 2 mois offerts en choisissant l'abonnement annuel" as completed