From 39d7ec6421d1569bce3f7b464caa6d86a19b2e58 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Thu, 28 Mar 2024 16:37:06 +0100 Subject: [PATCH] :sparkles: Pick subscription working --- .../Typography/classes.module.scss | 9 +- .../DesignSystem/Typography/index.tsx | 4 +- .../Subscription/SubscriptionError/index.tsx | 2 +- .../SubscriptionNew/classes.module.scss | 63 +++++++++++ .../Subscription/SubscriptionNew/index.tsx | 103 ++++++++++++++++++ .../SubscriptionSuccess/index.tsx | 2 +- src/pages/subscription/new/index.tsx | 5 + 7 files changed, 182 insertions(+), 6 deletions(-) create mode 100644 src/front/Components/Layouts/Subscription/SubscriptionNew/classes.module.scss create mode 100644 src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx create mode 100644 src/pages/subscription/new/index.tsx diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss index 6a68d909..35ad1b15 100644 --- a/src/front/Components/DesignSystem/Typography/classes.module.scss +++ b/src/front/Components/DesignSystem/Typography/classes.module.scss @@ -8,8 +8,13 @@ &.H1-60 { font-style: normal; font-weight: 500; - font-size: 50px; - line-height: 61px; + font-size: 56px; + line-height: 67.2px; + + @media (max-width: $screen-m) { + font-size: 48px; + line-height: 56.7px; + } } &.H1-bis-40 { diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx index 0e812ac4..54ecb5cb 100644 --- a/src/front/Components/DesignSystem/Typography/index.tsx +++ b/src/front/Components/DesignSystem/Typography/index.tsx @@ -46,7 +46,7 @@ export enum ITypoColor { export default class Typography extends React.Component { public override render(): JSX.Element { return ( -
{ )} title={this.props.title}> {this.props.children} -
+ ); } } diff --git a/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx index 721e2bd1..5bb0f6a5 100644 --- a/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx +++ b/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx @@ -8,7 +8,7 @@ import Button from "@Front/Components/DesignSystem/Button"; export default function SubscriptionError() { return ( - +
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionNew/classes.module.scss b/src/front/Components/Layouts/Subscription/SubscriptionNew/classes.module.scss new file mode 100644 index 00000000..aba08aec --- /dev/null +++ b/src/front/Components/Layouts/Subscription/SubscriptionNew/classes.module.scss @@ -0,0 +1,63 @@ +@import "@Themes/constants.scss"; + +.root { + display: flex; + justify-content: baseline; + align-items: center; + flex-direction: column; + gap: 64px; + max-width: 1000px; + margin: auto; + .top-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + } + + .forfeits-container { + display: flex; + gap: 32px; + + width: 100%; + + @media (max-width: $screen-s) { + flex-direction: column; + } + + .forfeit-block { + flex: 1; + padding: 32px; + border: 1px solid black; + + display: flex; + flex-direction: column; + gap: 32px; + + .forfeit-header { + display: flex; + flex-direction: column; + } + + .separator { + border-bottom: 1px solid black; + } + + .price-container { + display: flex; + flex-direction: column; + gap: 8px; + } + } + } + + .infos-container { + display: flex; + flex-direction: column; + gap: 16px; + .line { + display: flex; + gap: 16px; + } + } +} diff --git a/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx new file mode 100644 index 00000000..25c11914 --- /dev/null +++ b/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx @@ -0,0 +1,103 @@ +import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; +import classes from "./classes.module.scss"; +import CheckIcon from "@Assets/Icons/check.svg"; +import Image from "next/image"; +import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; +import Button from "@Front/Components/DesignSystem/Button"; + +export default function SubscriptionNew() { + return ( + +
+
+
+ + Tarifs + +
+
+ + Nos forfaits sont adaptés à la taille de votre office + +
+
+
+
+
+ + Forfait standard + + + Plan par utilisateur + +
+
+
+ + 99€ + +  HT  + + / mois + + + + 6,99€ / collaborateur / mois + +
+
+ +
+
+
+
+ + Forfait illimité + + + Plan par office + +
+
+
+ + 249€ + +  HT  + + / mois + + + Sans limite de collaborateurs + +
+
+ +
+
+
+
+
+ Check icon + + Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en main + optimale de l'application + +
+
+ Check icon + + Support technique : notre équipe support est disponible pour vous assister en cas d’incident + +
+
+ Check icon + + Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières fonctionnalités, + améliorations de sécurité et performances optimisées + +
+
+
+ + ); +} diff --git a/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx index 295de436..9516b3de 100644 --- a/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx +++ b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx @@ -8,7 +8,7 @@ import Button from "@Front/Components/DesignSystem/Button"; export default function SubscriptionSuccess() { return ( - +
diff --git a/src/pages/subscription/new/index.tsx b/src/pages/subscription/new/index.tsx new file mode 100644 index 00000000..87144c2b --- /dev/null +++ b/src/pages/subscription/new/index.tsx @@ -0,0 +1,5 @@ +import SubscriptionNew from "@Front/Components/Layouts/Subscription/SubscriptionNew"; + +export default function Route() { + return ; +}