Add characters

apps/site/src/views/Resources/Resources.tsx

@@ -1,4 +1,5 @@
 import styles from "./Resources.module.scss";
+import Figures from "./sections/Figures/Figures"
 import Landing from "./sections/Landing/Landing";
 import ApiResources from "./sections/ApiResources/ApiResources";
 import BackendResources from "./sections/BackendResources/BackendResources";
@@ -8,6 +9,7 @@ import StarterPacks from "./sections/StarterPacks/StarterPacks";
 export default function Resources() {
 	return (
 		<div className={styles.resources}>
+			<Figures />
 			<Landing />
 			<ApiResources />
 			<BackendResources />

apps/site/src/views/Resources/sections/Figures/Figures.module.scss

@@ -0,0 +1,95 @@
+@use "bootstrap-utils" as bootstrap;
+
+.hammerhead {
+	position: absolute;
+	visibility: hidden;
+	transform: translateY(10vh);
+}
+
+.birds {
+	position: absolute;
+	visibility: hidden;
+	width: 275px;
+}
+
+.palmTree {
+	position: absolute;
+	right: 0;
+	transform: translateY(90vh);
+	width: 30vw;
+
+	z-index: 2;
+	visibility: hidden;
+	height: auto;
+}
+
+.palmTreeShade {
+	position: absolute;
+	right: 0;
+	transform: translateY(calc(100vh + 50%));
+	width: 30vw;
+
+	z-index: 1;
+	visibility: hidden;
+	height: auto;
+}
+
+@include bootstrap.media-breakpoint-up(md) {
+	.palmTree {
+		visibility: visible;
+	}
+
+	.palmTreeShade {
+		visibility: visible;
+	}
+}
+
+@include bootstrap.media-breakpoint-up(lg) {
+	.hammerhead {
+		visibility: visible;
+		left: 5vh;
+	}
+
+	.birds {
+		visibility: visible;
+		right: 2vh;
+	}
+
+	.palmTree {
+		visibility: visible;
+	}
+
+	.palmTreeShade {
+		visibility: visible;
+	}
+}
+
+@media (min-width: 1200px) {
+	.hammerhead {
+		left: 10vh;
+	}
+
+	.birds {
+		right: 10vh;
+	}
+
+	.palmTree {
+		transform: translateY(75vh);
+		width: 20vw;
+	}
+
+	.palmTreeShade {
+		transform: translateY(calc(80vh + 50%));
+		width: 20vw;
+	}
+}
+
+@media (min-width: 1600px) {
+	.hammerhead {
+		left: 20vh;
+	}
+
+	.birds {
+		right: 20vh;
+	}
+}

apps/site/src/views/Resources/sections/Figures/Figures.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import Image from "next/image";
+
+import { motion } from "framer-motion";
+
+import palmTree from "@/assets/images/resources-palm-tree.png";
+import palmTreeShade from "@/assets/images/resources-palm-tree-shade.png";
+import hammerhead from "@/assets/images/resources-hammerhead.svg";
+import birds from "@/assets/images/resources-birds.svg";
+
+import styles from "./Figures.module.scss";
+
+export default function Figures() {
+	return (
+		<div>
+			<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 2 }} >
+				<Image
+					src={hammerhead}
+					alt="Hammerhead shark swimming in water"
+					className={styles.hammerhead}
+				/>
+
+				<Image
+					src={birds}
+					alt="Birds flying above water"
+					className={styles.birds}
+				/>
+				<Image
+					src={palmTreeShade}
+					alt="Palm tree shadow"
+					className={styles.palmTreeShade}
+				/>
+				<Image src={palmTree} alt="Palm tree" className={styles.palmTree} />
+			</motion.div>
+		</div>
+	);
+}

apps/site/src/views/Resources/sections/Landing/Landing.module.scss

@@ -1,4 +1,4 @@
-@use "bootstrap-utils" as utils;
+@use "bootstrap-utils" as bootstrap;
 
 .landing {
 	display: flex;
@@ -9,8 +9,16 @@
 	margin-top: 15vh;
 	margin-bottom: 5vh;
 	text-align: left;
+
 }
 
 .title {
-	width: 75%;
+	width: 60%;
 }
+
+@include bootstrap.media-breakpoint-up(lg) {
+	.landing {
+		margin-top: 40vh;
+		margin-bottom: 40vh;
+	}
+}