✨ Updated page style & added drop love button

app/globals.scss

@@ -11,7 +11,10 @@
 }
 
 body {
+	--navSize: 60px;
 	position: relative;
+	display: grid;
+	grid-template-rows: calc(100svh - var(--navSize)) var(--navSize);
 	width: 100svw;
 	height: 100svh;
 	background-color: #d94253;

app/page.jsx

@@ -15,6 +15,7 @@ import { useData } from './hooks/useData';
 // ------------------------------------------------- Assets & Styles ---------------------------------------------------
 import './styles.scss';
 import 'mapbox-gl/dist/mapbox-gl.css';
+import HeartIcon from '@/assets/HeartIcon';
 // ---------------------------------------------------------------------------------------------------------------------
 
 const Home = () => {
@@ -57,6 +58,11 @@ const Home = () => {
 					preserveDrawingBuffer
 				></Map>
 			</DeckGL>
+
+			<button className='dropLove'>
+				<HeartIcon />
+				Placer un love
+			</button>
 		</div>
 	);
 };

app/styles.scss

@@ -1,7 +1,23 @@
 .mapContainer {
 	position: relative;
-	width: 100svw;
-	height: 100svh;
+
+	& > .dropLove {
+		z-index: 1;
+		position: absolute;
+		bottom: 10px;
+		left: 50%;
+		transform: translateX(-50%);
+		display: grid;
+		grid-template-columns: 20px 1fr;
+		gap: 10px;
+		align-items: center;
+		padding: 10px 30px;
+		border: none;
+		border-radius: 300px;
+		background-color: #d94253;
+		color: #ffffff;
+		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
+	}
 }
 
 .appMessage {

components/Navbar/styles.scss

@@ -1,34 +1,47 @@
 .navbar {
-	$navSize: 60px;
-	position: fixed;
-	bottom: 0;
-	left: 0;
+	position: relative;
+	z-index: 1;
 	display: grid;
 	justify-items: center;
 	align-items: center;
 	width: 100svw;
-	height: $navSize;
+	height: var(--navSize);
 	background-color: #d94253;
+	box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
 
 	& > .navButton {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 		gap: 5px;
-		width: $navSize;
-		height: $navSize;
+		width: var(--navSize);
+		height: var(--navSize);
 		border-radius: 50%;
 		background-color: #d94253;
 		color: #ffffff;
 
 		& > svg {
-			width: $navSize / 2.5;
+			width: calc(var(--navSize) / 2.5);
 		}
 
 		&.selected {
-			margin-top: $navSize / -2;
 			scale: 1.2;
+			margin-top: calc(var(--navSize) / -2);
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				display: block;
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
+				clip-path: inset(-6px -6px 42px -6px);
+			}
 		}
 
 		& > .navButtonLabel {