4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Pick subscription working

Browse Source
This commit is contained in:
Maxime Lalo 2024-03-28 16:37:06 +01:00
parent 138954a2f8
commit 39d7ec6421
7 changed files with 182 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/front/Components/DesignSystem/Typography/classes.module.scss
View File

@ -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 {

4
src/front/Components/DesignSystem/Typography/index.tsx
View File

@ -46,7 +46,7 @@ export enum ITypoColor {
export default class Typography extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<div
<span
className={classNames(
classes["root"],
classes[this.props.typo],
@ -55,7 +55,7 @@ export default class Typography extends React.Component<IProps, IState> {
)}
title={this.props.title}>
{this.props.children}
</div>
</span>
);
}
}

2
src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx
View File

@ -8,7 +8,7 @@ import Button from "@Front/Components/DesignSystem/Button";
export default function SubscriptionError() {
return (
<DefaultTemplate title="Title" hasHeaderLinks={false}>
<DefaultTemplate title="Erreur à la souscription" hasHeaderLinks={false}>
<div className={classes["root"]}>
<div className={classes["left"]}>
<div className={classes["title"]}>

63
src/front/Components/Layouts/Subscription/SubscriptionNew/classes.module.scss Normal file
View File

@ -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;
}
}
}

103
src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx Normal file
View File

@ -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 (
<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
<div className={classes["root"]}>
<div className={classes["top-container"]}>
<div className={classes["top-container-title"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
Tarifs
</Typography>
</div>
<div className={classes["sub-title"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
Nos forfaits sont adaptés à la taille de votre office
</Typography>
</div>
</div>
<div className={classes["forfeits-container"]}>
<div className={classes["forfeit-block"]}>
<div className={classes["forfeit-header"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
Forfait standard
</Typography>
<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
Plan par utilisateur
</Typography>
</div>
<div className={classes["separator"]} />
<div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
99€
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
&nbsp;HT&nbsp;
</Typography>
/ mois
</Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+ 6,99€ / collaborateur / mois
</Typography>
</div>
<div className={classes["button-container"]}>
<Button fullwidth>S'abonner</Button>
</div>
</div>
<div className={classes["forfeit-block"]}>
<div className={classes["forfeit-header"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
Forfait illimité
</Typography>
<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
Plan par office
</Typography>
</div>
<div className={classes["separator"]} />
<div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
249€
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
&nbsp;HT&nbsp;
</Typography>
/ mois
</Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
Sans limite de collaborateurs
</Typography>
</div>
<div className={classes["button-container"]}>
<Button fullwidth>S'abonner</Button>
</div>
</div>
</div>
<div className={classes["infos-container"]}>
<div className={classes["line"]}>
<Image src={CheckIcon} alt="Check icon" />
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en main
optimale de l'application
</Typography>
</div>
<div className={classes["line"]}>
<Image src={CheckIcon} alt="Check icon" />
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
Support technique : notre équipe support est disponible pour vous assister en cas d’incident
</Typography>
</div>
<div className={classes["line"]}>
<Image src={CheckIcon} alt="Check icon" />
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
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
</Typography>
</div>
</div>
</div>
</DefaultTemplate>
);
}

2
src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx
View File

@ -8,7 +8,7 @@ import Button from "@Front/Components/DesignSystem/Button";
export default function SubscriptionSuccess() {
return (
<DefaultTemplate title="Title" hasHeaderLinks={false}>
<DefaultTemplate title="Abonnement réussi" hasHeaderLinks={false}>
<div className={classes["root"]}>
<div className={classes["left"]}>
<div className={classes["title"]}>

5
src/pages/subscription/new/index.tsx Normal file
View File

@ -0,0 +1,5 @@
import SubscriptionNew from "@Front/Components/Layouts/Subscription/SubscriptionNew";
export default function Route() {
return <SubscriptionNew />;
}