Add characters to resources page (#202)

* Add characters. Fix intro section

* Fix description spacing

* Update alt text

* Add characters

* Prettier

* Change png to svg, use bootstrap media queries

* Updated resource top margin. Fixed palm tree oversize on zoom out. Updated hammerhead and bird spacing on zoom out.

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,85 @@
+@use "bootstrap-utils" as bootstrap;
+
+.landingFigures {
+	position: absolute;
+	z-index: 1000;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 80vw;
+	min-width: 1100px;
+	max-width: 1200px;
+	height: 300px;
+}
+
+.hammerhead {
+	position: absolute;
+	visibility: hidden;
+	bottom: 0;
+	left: 0;
+}
+
+.birds {
+	position: absolute;
+	visibility: hidden;
+	width: 275px;
+	right: 0;
+	bottom: 0;
+}
+
+.palmTree {
+	position: absolute;
+	right: 0;
+	transform: translateY(95vh);
+	width: 30vw;
+
+	z-index: 2;
+	visibility: hidden;
+	height: auto;
+}
+
+.palmTreeShade {
+	position: absolute;
+	right: 0;
+	transform: translateY(calc(105vh + 50%));
+	width: 30vw;
+
+	z-index: 1;
+	visibility: hidden;
+	height: auto;
+}
+
+@include bootstrap.media-breakpoint-up(sm) {
+	.palmTree {
+		visibility: visible;
+	}
+	.palmTreeShade {
+		visibility: visible;
+	}
+}
+
+@include bootstrap.media-breakpoint-up(lg) {
+	.palmTree {
+		transform: translateY(95vh);
+		width: 20vw;
+	}
+	.palmTreeShade {
+		transform: translateY(calc(105vh + 50%));
+		width: 20vw;
+	}
+	.hammerhead {
+		visibility: visible;
+	}
+	.birds {
+		visibility: visible;
+	}
+}
+
+@include bootstrap.media-breakpoint-up(xxl) {
+	.palmTree {
+		max-width: 500px;
+	}
+	.palmTreeShade {
+		max-width: 500px;
+	}
+}

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

@@ -0,0 +1,45 @@
+"use client";
+
+import Image from "next/image";
+
+import { motion } from "framer-motion";
+
+import palmTree from "@/assets/images/resources-palm-tree.svg";
+import palmTreeShade from "@/assets/images/resources-palm-tree-shade.svg";
+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 }}
+			>
+				<div className={styles.landingFigures}>
+					<Image
+						src={hammerhead}
+						alt="Hammerhead shark swimming in water"
+						className={styles.hammerhead}
+					/>
+
+					<Image
+						src={birds}
+						alt="Birds flying above water"
+						className={styles.birds}
+					/>
+				</div>
+
+				<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;
@@ -12,5 +12,12 @@
 }
 
 .title {
-	width: 75%;
+	width: 60%;
+}
+
+@include bootstrap.media-breakpoint-up(lg) {
+	.landing {
+		margin-top: 200px;
+		margin-bottom: 300px;
+	}
 }