Add characters to landing page. Fix intro section spacing

apps/site/src/app/(home)/sections/Intro/Intro.module.scss

@@ -2,15 +2,12 @@
 
 .description {
 	text-align: center;
-	font-size: 0.85rem;
+	font-size: 0.75rem;
 
-	@media screen and (min-width: 415px) {
+	@include bootstrap.media-breakpoint-up(sm) {
 		font-size: 1rem;
 	}
 
-	@media screen and (min-width: 500px) {
-		font-size: 1.25rem;
-	}
 
 	@include bootstrap.media-breakpoint-up(xl) {
 		font-size: 1.5rem;
@@ -21,9 +18,6 @@
 	font-size: 1rem;
 	font-weight: 600;
 
-	@media screen and (min-width: 415px) {
-		font-size: 1.25rem;
-	}
 
 	@include bootstrap.media-breakpoint-up(sm) {
 		font-size: 1.5rem;
@@ -39,38 +33,20 @@
 	flex-direction: column;
 	justify-content: center;
 	width: 90vw;
-	margin-top: 3vw;
+	margin-top: 1vw;
 
-	@media screen and (min-width: 400px) {
-		margin-top: 7.5vw;
-	}
-
-	@include bootstrap.media-breakpoint-up(sm) {
-		margin-top: 15vw;
-	}
+	transform: translateY(calc(-50% + 40vw));
 
-	@media screen and (min-width: 650px) {
-		margin-top: 20vw;
+	@media (min-width: 400px) {
+		transform: translateY(calc(-50% + 40vw));
 	}
 
 	@include bootstrap.media-breakpoint-up(md) {
-		margin-top: 1vw;
+		transform: translateY(calc(-50% + 18vw));
 	}
 
-	@media screen and (min-width: 850px) {
-		margin-top: 3vw;
+	@media (min-width: 1200px) {
+		transform: translateY(calc(-50% + 22vw));
 	}
 
-	@include bootstrap.media-breakpoint-up(lg) {
-		max-width: 80vw;
-		margin-top: 8vw;
-	}
-
-	@include bootstrap.media-breakpoint-up(xl) {
-		margin-top: 12vw;
-	}
-
-	@include bootstrap.media-breakpoint-up(xxl) {
-		margin-top: 15vw;
-	}
 }

apps/site/src/app/(home)/sections/Landing/Characters.module.scss

@@ -0,0 +1,71 @@
+@use "bootstrap-utils" as bootstrap;
+
+.character {
+	position: absolute;
+	visibility: hidden;
+	right: 18vw;
+	top: 15.5vw;
+	transform: translateY(-70%);
+	width: 80px;
+	max-width: 7vw;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		visibility: visible;
+	}
+}
+
+.characterFoam {
+	position: absolute;
+	visibility: hidden;
+	right: 18vw;
+	top: 16.4vw;
+	transform: translateY(-50%);
+	width: 80px;
+	max-width: 7vw;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		visibility: visible;
+	}
+}
+
+.characterShadow {
+	position: absolute;
+	visibility: hidden;
+	right: 18vw;
+	top: 16.5vw;
+	transform: translateY(-20%);
+	width: 80px;
+	max-width: 7vw;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		visibility: visible;
+	}
+}
+
+.mainCharacter {
+	position: absolute;
+	width: 300px;
+	visibility: hidden;
+	left: 10vw;
+	top: 32vw;
+	transform: translate(-50%, -50%);
+	max-width: 18vw;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		visibility: visible;
+	}
+}
+
+.beachBall {
+	position: absolute;
+	width: 300px;
+	visibility: hidden;
+	right: 2vw;
+	top: 22vw;
+	transform: translate(calc(50% - 10vw), calc(-50% + 5vw));
+	max-width: 14vw;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		visibility: visible;
+	}
+}

apps/site/src/app/(home)/sections/Landing/Characters.tsx

@@ -0,0 +1,71 @@
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+import waterAnteater from "@/assets/images/intro-water-anteater.svg";
+import waterAnteaterFoam from "@/assets/images/intro-character-foam.svg";
+import waterAnteaterShadow from "@/assets/images/intro-water-anteater-shadow.svg";
+import beachBall from "@/assets/images/intro-beach-ball.svg";
+
+import mainCharacter from "@/assets/images/intro-main-anteater.svg";
+
+import styles from "./Characters.module.scss";
+
+export default function Characters() {
+	return (
+		<div>
+			<motion.div
+				initial={{ translateX: 100, opacity: 0 }}
+				animate={{ translateX: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.6 }}
+			>
+				<Image
+					src={waterAnteater}
+					alt="Anteater floating in the water"
+					className={styles.character}
+				/>
+			</motion.div>
+			<motion.div
+				initial={{ translateX: 100, opacity: 0 }}
+				animate={{ translateX: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.6 }}
+			>
+				<Image
+					src={waterAnteaterShadow}
+					alt="Reflection of anteater in the water"
+					className={styles.characterShadow}
+				/>
+			</motion.div>
+
+			<motion.div
+				initial={{ translateX: 100, opacity: 0 }}
+				animate={{ translateX: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.6 }}
+			>
+				<Image
+					src={waterAnteaterFoam}
+					alt="Foam between anteater and the water"
+					className={styles.characterFoam}
+				/>
+			</motion.div>
+
+			<motion.div
+				initial={{ translateY: -100, opacity: 0 }}
+				animate={{ translateY: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 1 }}
+			>
+				<Image
+					src={mainCharacter}
+					alt="Anteater standing on the shore"
+					className={styles.mainCharacter}
+				/>
+			</motion.div>
+			<motion.div
+				initial={{ scale: 0.85, opacity: 0 }}
+				animate={{ scale: 1, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.8 }}
+			>
+				<Image src={beachBall} alt="Beach ball" className={styles.beachBall} />
+			</motion.div>
+		</div>
+	);
+}

apps/site/src/app/(home)/sections/Landing/Landing.tsx

@@ -1,13 +1,15 @@
 "use client";
 import ApplyButton from "./ApplyButton";
 import Title from "@/app/(home)/sections/Landing/Title";
+import Characters from "./Characters";
 import Intro from "../Intro";
 import styles from "./Landing.module.scss";
 
 const Landing = () => {
 	return (
 		<div className={styles.landing}>
 			<div className={styles.title}>
+				<Characters />
 				<Title />
 				<ApplyButton />
 				<Intro />