WIP

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

@@ -0,0 +1,154 @@
+.container {
+	padding: 24px;
+	background-color: #3d006f; // Adjusted to match the background color in the image
+	border-radius: 10px;
+	color: #fff;
+	font-family: "Arial", sans-serif;
+	max-width: 400px;
+	margin: auto;
+	text-align: center;
+
+	.root {
+		padding: 24px;
+		background-color: var(--white);
+		border: 1px dashed #e7e7e7;
+		height: fit-content;
+
+		&[data-drag-over="true"] {
+			border: 1px dashed var(--grey);
+		}
+
+		&.validated {
+			border: 1px dashed var(--green-flash);
+		}
+
+		.top-container {
+			display: flex;
+			align-items: center;
+
+			.left {
+				margin-right: 28px;
+			}
+
+			.separator {
+				background-color: #939393;
+				width: 1px;
+				align-self: stretch;
+			}
+
+			.right {
+				margin-left: 18px;
+
+				.validated {
+					color: var(--green-flash);
+				}
+
+				.refused-button {
+					font-size: 14px;
+					color: var(--re-hover);
+					margin-left: 8px;
+				}
+
+				.title {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+				}
+			}
+		}
+
+		.documents-container {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			margin-top: 16px;
+
+			.file-container {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.left-part {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					.loader {
+						width: 32px;
+						height: 32px;
+					}
+				}
+
+				.cross {
+					cursor: pointer;
+				}
+			}
+		}
+
+		.bottom-container {
+			margin-top: 16px;
+
+			.add-button {
+				.add-document {
+					display: flex;
+					align-items: center;
+					gap: 14px;
+				}
+			}
+		}
+
+		.text {
+			margin-bottom: 12px;
+		}
+	}
+
+	.modal-content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.error-message {
+		color: var(--red-flash);
+		margin-top: 8px;
+	}
+
+	h2 {
+		font-size: 24px;
+		margin-bottom: 8px;
+	}
+
+	.subtitle {
+		font-size: 16px;
+		margin-bottom: 20px;
+	}
+
+	.email-input {
+		width: 100%;
+		padding: 10px;
+		border: 1px solid #ccc;
+		border-radius: 5px;
+		margin-bottom: 20px;
+		font-size: 16px;
+		color: #333;
+	}
+
+	.submit-button {
+		width: 100%;
+		padding: 10px;
+		background-color: #e91e63; // Adjusted to match the button color in the image
+		border: none;
+		border-radius: 5px;
+		font-size: 16px;
+		color: #fff;
+		cursor: pointer;
+		transition: background-color 0.3s;
+
+		&:hover {
+			background-color: #d81b60; // Darker shade for hover effect
+		}
+	}
+
+	.response {
+		margin-top: 10px;
+	}
+}

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

@@ -0,0 +1,60 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import TextField from "../Form/TextField";
+import Button, { EButtonVariant } from "../Button";
+
+type IProps = {};
+
+interface IState {
+	email: string;
+	errorMessage: string;
+	successMessage: string;
+}
+
+export default class Newsletter extends React.Component<IProps, IState> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = {
+			email: "",
+			errorMessage: "",
+			successMessage: "",
+		};
+	}
+
+	handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+		this.setState({ email: e.target.value });
+	};
+
+	handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		console.log("submit");
+
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailRegex.test(this.state.email)) {
+			this.setState({ errorMessage: "Invalid email address", successMessage: "" });
+			return;
+		}
+
+		// Clear error message
+		this.setState({ errorMessage: "" });
+
+		// Normally, form submission would happen here
+		// For demo purposes, we'll just show a success message
+		this.setState({ successMessage: "Subscription successful!", email: "" });
+	};
+
+	public override render(): JSX.Element {
+		return (
+			<div className={classes["container"]}>
+				<h2>Restez Informé(e) avec notre Newsletter</h2>
+				<p className="subtitle">Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !</p>
+				<TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} />
+				<div className={classes["buttons-container"]}>
+					<Button fullwidth type="submit" variant={EButtonVariant.GHOST}>
+						Envoyer
+					</Button>
+				</div>
+			</div>
+		);
+	}
+}

src/front/Components/Layouts/Folder/index.tsx

@@ -4,6 +4,7 @@ import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 
 import BasePage from "../Base";
 import classes from "./classes.module.scss";
+import Newletter from "@Front/Components/DesignSystem/Newsletter";
 
 type IProps = {};
 type IState = {
@@ -32,6 +33,7 @@ export default class Folder extends BasePage<IProps, IState> {
 								Sélectionnez un dossier
 							</Typography>
 						</div>
+						<Newletter />
 					</div>
 				</div>
 			</DefaultNotaryDashboard>