✨ Add & display loves on map

app/styles.scss

@@ -1,6 +1,20 @@
-.mapContainer {
+.page {
 	position: relative;
 	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+
+	& > .mapContainer {
+		flex-grow: 1;
+		position: relative;
+
+		& > .pinImage {
+			z-index: 1;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+		}
+	}
 
 	& > .dropLove {
 		z-index: 1;
@@ -18,6 +32,52 @@
 		background-color: #d94253;
 		color: #ffffff;
 		box-shadow: 0 2px 6px rgba(255, 255, 255, 0.6);
+		cursor: pointer;
+	}
+
+	& > .addLoveContainer {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		padding-bottom: 40px;
+
+		& > .addLoveHeader {
+			padding: 10px;
+			background-color: #d94253;
+			font-size: 1.1rem;
+			text-align: center;
+			color: #ffffff;
+		}
+
+		& > .addLoveForm {
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+			padding: 5px 10px;
+
+			& > .buttonsContainer {
+				display: grid;
+				grid-template-columns: repeat(2, 1fr);
+				align-items: center;
+				gap: 20px;
+				margin-top: 10px;
+
+				& > .button {
+					display: grid;
+					grid-template-columns: 20px max-content;
+					justify-content: center;
+					align-items: center;
+					gap: 5px;
+					padding: 5px 15px;
+					border: none;
+					border-radius: 5px;
+					background-color: #d94253;
+					font-size: 1rem;
+					color: #ffffff;
+					cursor: pointer;
+				}
+			}
+		}
 	}
 }