lecoffre-front/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx

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";
import Link from "next/link";

export default function SubscriptionNew() {
	return (
		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
			<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"]}>
							<Link href={"/subscription/subscribe/standard"}>
								<Button fullwidth>S'abonner</Button>
							</Link>
						</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"]}>
							<Link href={"/subscription/subscribe/illimity"}>
								<Button fullwidth>S'abonner</Button>
							</Link>
						</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>
	);
}