✨ Design of my loves page

app/my-loves/page.jsx

@@ -0,0 +1,35 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------- Assets & Styles ---------------------------------------------------
+import './styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const MyLoves = () => {
+	const data = [];
+
+	return (
+		<div className='myLovesContainer'>
+			<h1 className='title'>Mes loves</h1>
+
+			<div className='myLovesList'>
+				{data.map((love, index) => (
+					<div
+						key={love.id || index}
+						className='loveItem'
+					>
+						<p className='date'>
+							Le: {love.createdAt || '20/09/2024'}
+						</p>
+						<p className='description'>
+							{love.description || 'Description'}
+						</p>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default MyLoves;

app/my-loves/styles.scss

@@ -0,0 +1,40 @@
+.myLovesContainer {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 10px;
+
+	& > .title {
+		font-size: 1.5rem;
+		font-weight: normal;
+		color: #ffffff;
+	}
+
+	& > .myLovesList {
+		display: flex;
+		flex-direction: column;
+
+		& > .loveItem {
+			display: flex;
+			flex-direction: column;
+			gap: 5px;
+			padding: 10px;
+			background-color: #d94253;
+
+			&:not(:last-child) {
+				border-bottom: 2px solid #d80135;
+			}
+
+			& > .date {
+				font-size: 1.1rem;
+				color: #ffffff;
+			}
+
+			& > .description {
+				font-weight: 300;
+				color: #ffffff;
+			}
+		}
+	}
+}