✨ Pick subscription working

src/front/Components/DesignSystem/Typography/classes.module.scss

@@ -8,8 +8,13 @@
 	&.H1-60 {
 		font-style: normal;
 		font-weight: 500;
-		font-size: 50px;
+		font-size: 56px;
-		line-height: 61px;
+		line-height: 67.2px;
+
+		@media (max-width: $screen-m) {
+			font-size: 48px;
+			line-height: 56.7px;
+		}
 	}
 
 	&.H1-bis-40 {

src/front/Components/DesignSystem/Typography/index.tsx

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

src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx

@@ -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"]}>

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

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 (
+		<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>
+	);
+}

src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx

@@ -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"]}>

src/pages/subscription/new/index.tsx

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