Added Resources title and section title component (#177)

* Added resources title svg and changed title in Resources landing

* Created Heading Card

* Added island button svgs

* Removed island svgs

* Updated font weights for card

* Updated import order for Landing.tsx and ApiResources.tsx

* Fixed resources title and text padding for mobile

* Used relative sizes for padding instead of px for FAQ and HeadingCard

* Added visually hidden title for resources landing

* Replaced all section heading cards in resources

* Changed import order for resource sections, changed heading pixel size to rem

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

@@ -1,11 +1,11 @@
 @use "zothacks-theme" as theme;
 @use "bootstrap-utils" as utils;
 
-$mobile-item-padding-y: 26px;
-$mobile-item-padding-x: 32px;
+$mobile-item-padding-y: 1.6rem;
+$mobile-item-padding-x: 2rem;
 
-$item-padding-y: 32px;
-$item-padding-x: 48px;
+$item-padding-y: 2rem;
+$item-padding-x: 3rem;
 
 .container {
 	position: relative;

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

@@ -3,10 +3,6 @@
 $container-padding: 6rem;
 
 .resources {
-	h2 {
-		text-align: center;
-	}
-
 	:global {
 		section {
 			// responsive padding

apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss

@@ -0,0 +1,47 @@
+@use "zothacks-theme" as theme;
+@use "bootstrap-utils" as utils;
+
+$mobile-item-padding-y: 1.6rem;
+$mobile-item-padding-x: 2rem;
+
+$item-padding-y: 2rem;
+$item-padding-x: 3rem;
+
+$heading-font-size: 1.75rem;
+
+.card {
+	background-color: theme.$white;
+	border: 6px solid theme.$white;
+	box-shadow: inset 0 0 0 6px theme.$black;
+	border-radius: 16px;
+
+	padding: $mobile-item-padding-y $mobile-item-padding-x;
+
+	display: flex;
+	align-items: center;
+}
+
+.bang {
+	margin-right: $mobile-item-padding-x - 0.4375;
+}
+
+.title {
+	font-size: $heading-font-size;
+	font-weight: 600;
+	color: theme.$light-blue;
+}
+
+.description {
+	margin: 0;
+	font-weight: 500;
+}
+
+@include utils.media-breakpoint-up(md) {
+	.card {
+		padding: $item-padding-y $item-padding-x;
+	}
+
+	.bang {
+		margin-right: $item-padding-x - 0.4375;
+	}
+}

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

@@ -0,0 +1,25 @@
+import Image from "next/image";
+import resourcesBang from "@/assets/images/resources-bang.svg";
+
+import styles from "./HeadingCard.module.scss";
+
+interface HeadingCardProps {
+	title: string;
+	description: string;
+}
+
+export default function HeadingCard({ title, description }: HeadingCardProps) {
+	return (
+		<div className={styles.card}>
+			<Image
+				className={styles.bang}
+				src={resourcesBang}
+				alt="exclamation mark"
+			/>
+			<div>
+				<h2 className={styles.title}>{title}</h2>
+				<p className={styles.description}>{description}</p>
+			</div>
+		</div>
+	);
+}

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

@@ -13,18 +13,6 @@
 	align-items: center;
 }
 
-.card {
-	background-image: url("~@/assets/index_cards/api-description-card.svg");
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: 100% 100%;
-	height: 343px;
-	position: relative;
-	display: flex;
-	justify-content: center;
-	margin-bottom: 30px;
-}
-
 .text {
 	font-size: 24px;
 	height: 60%;

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

@@ -1,29 +1,27 @@
 import { PortableText } from "@portabletext/react";
 import imageUrlBuilder from "@sanity/image-url";
 
-import styles from "./ApiResources.module.scss";
-
 import ResourceCard from "../../components/ResourceCard/ResourceCard";
+import HeadingCard from "../../components/HeadingCard/HeadingCard";
 import { getResources } from "../../getResources";
 import { client } from "@/lib/sanity/client";
 
+import styles from "./ApiResources.module.scss";
+
 async function ApiResources() {
 	const resources = await getResources("api");
 	return (
 		<div className="container">
-			{/* Card Component */}
-			<div className={styles.card}>
-				<h2 className={styles.title}>API Resources</h2>
-				<p className={styles.text}>
-					Application Programming Interface (API) are interfaces or
+			<HeadingCard
+				title="API Resources"
+				description="Application Programming Interface (API) are interfaces or
 					communication protocol that simplifies implementation and maintenance
-					of software. In order to access most API&apos;s, many languages use
+					of software. In order to access most API's, many languages use
 					HTTP protocol to communicate with the servers that host the API and
-					retrieve data.
-				</p>
-			</div>
+					retrieve data."
+			/>
+
 			<div className={styles["bottom-spacer"] + " row"}>
-				{/* Sticky Notes */}
 				{resources.map(
 					({ _id, title, description, link, logo, background }) => (
 						<div className={styles.column + " col"} key={_id}>

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

@@ -2,6 +2,7 @@ import { PortableText } from "@portabletext/react";
 import urlImageBuilder from "@sanity/image-url";
 
 import ResourceCard from "../../components/ResourceCard/ResourceCard";
+import HeadingCard from "../../components/HeadingCard/HeadingCard";
 import { getResources } from "../../getResources";
 import { client } from "@/lib/sanity/client";
 
@@ -11,25 +12,23 @@ async function BackendResources() {
 	const resources = await getResources("backend");
 	return (
 		<div className="container">
-			{/* Card Component */}
-			<div className={styles.card}>
-				<h2 className={styles.title}>Backend Framework Resources</h2>
-				<p className={styles.text}>
-					Backend Frameworks are a variety of middleware services used to
-					connect to other API and database vendors to fit your project&apos;s
-					needs.
-				</p>
-			</div>
+			<HeadingCard
+				title="Backend Framework Resources"
+				description="Backend Frameworks are a variety of middleware services used to
+					connect to other API and database vendors to fit your project's
+					needs."
+			/>
 			<div className={styles["bottom-spacer"] + " row"}>
-				{/* Sticky Notes */}
 				{resources.map(
 					({ _id, title, description, link, logo, background }) => (
 						<div className={styles.column + " col"} key={_id}>
 							<ResourceCard
 								title={title}
 								description={<PortableText value={description} />}
 								stickerSrc={urlImageBuilder(client).image(logo).url()}
-								islandBackground={urlImageBuilder(client).image(background).url()}
+								islandBackground={urlImageBuilder(client)
+									.image(background)
+									.url()}
 								links={[{ text: "Reference", link: link }]}
 							/>
 						</div>

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

@@ -1,7 +1,8 @@
-import urlImageBuilder from "@sanity/image-url";
 import { PortableText } from "@portabletext/react";
+import urlImageBuilder from "@sanity/image-url";
 
 import ResourceCard from "../../components/ResourceCard/ResourceCard";
+import HeadingCard from "../../components/HeadingCard/HeadingCard";
 import { getResources } from "../../getResources";
 import { client } from "@/lib/sanity/client";
 
@@ -11,14 +12,12 @@ async function FrontendResources() {
 	const resources = await getResources("frontend");
 	return (
 		<div className="container">
-			<div className={styles.card}>
-				<h2 className={styles.title}>Frontend Framework Resources</h2>
-				<p className={styles.text}>
-					Frontend frameworks aid in the design of user interfaces and
+			<HeadingCard
+				title="Frontend Framework Resources"
+				description="Frontend frameworks aid in the design of user interfaces and
 					experiences. Your users will interact with your services through the
-					frontend.
-				</p>
-			</div>
+					frontend."
+			/>
 			<div className={styles["bottom-spacer"] + " row"}>
 				{resources.map(
 					({ _id, title, description, link, logo, background }) => (
@@ -27,7 +26,9 @@ async function FrontendResources() {
 								title={title}
 								description={<PortableText value={description} />}
 								stickerSrc={urlImageBuilder(client).image(logo).url()}
-								islandBackground={urlImageBuilder(client).image(background).url()}
+								islandBackground={urlImageBuilder(client)
+									.image(background)
+									.url()}
 								links={[{ text: "Reference", link: link }]}
 							/>
 						</div>

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

@@ -1,3 +1,5 @@
+@use "bootstrap-utils" as utils;
+
 .landing {
 	display: flex;
 	flex-direction: column;
@@ -8,3 +10,7 @@
 	margin-bottom: 5vh;
 	text-align: left;
 }
+
+.title {
+	width: 75%;
+}

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

@@ -1,9 +1,17 @@
+import Image from "next/image";
+import resourcesTitle from "@/assets/images/resources-title.svg";
+
 import styles from "./Landing.module.scss";
 
 function Landing() {
 	return (
 		<div className={styles.landing}>
-			<h1>Resources</h1>
+			<h1 className="visually-hidden">Resources</h1>
+			<Image
+				src={resourcesTitle}
+				className={styles.title}
+				alt="resources title"
+			/>
 		</div>
 	);
 }

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

@@ -1,7 +1,8 @@
-import urlImageBuilder from "@sanity/image-url";
 import { PortableText } from "@portabletext/react";
+import urlImageBuilder from "@sanity/image-url";
 
 import ResourceCard from "../../components/ResourceCard/ResourceCard";
+import HeadingCard from "../../components/HeadingCard/HeadingCard";
 import { getResources } from "../../getResources";
 import { client } from "@/lib/sanity/client";
 
@@ -11,13 +12,11 @@ async function StarterPacks() {
 	const resources = await getResources("starter-pack");
 	return (
 		<div className="container">
-			<div className={styles.card}>
-				<h2 className={styles.title}>Starter Pack Resources</h2>
-				<p className={styles.text}>
-					Various starter packs to start you off on your coding journeys at
-					ZotHacks, featuring a variety of technologies and tech stacks!
-				</p>
-			</div>
+			<HeadingCard
+				title="Starter Pack Resources"
+				description="Various starter packs to start you off on your coding journeys at
+					ZotHacks, featuring a variety of technologies and tech stacks!"
+			/>
 			<div className={styles["bottom-spacer"] + " row"}>
 				{resources.map(
 					({ _id, title, description, link, logo, background }) => (
@@ -26,7 +25,9 @@ async function StarterPacks() {
 								title={title}
 								description={<PortableText value={description} />}
 								stickerSrc={urlImageBuilder(client).image(logo).url()}
-								islandBackground={urlImageBuilder(client).image(background).url()}
+								islandBackground={urlImageBuilder(client)
+									.image(background)
+									.url()}
 								links={[{ text: "Reference", link: link }]}
 							/>
 						</div>