Merge pull request #111 from HackAtUCI/feature/add-remaining-resources

Add remaining resources sections

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

@@ -2,12 +2,17 @@ import styles from "./Resources.module.scss";
 import Landing from "./sections/Landing/Landing";
 import ApiResources from "./sections/ApiResources/ApiResources";
 import BackendResources from "./sections/BackendResources/BackendResources";
+import FrontendResources from "./sections/FrontendResources/FrontendResources";
+import StarterPacks from "./sections/StarterPacks/StarterPacks";
+
 export default function Resources() {
 	return (
 		<div className={styles.resources}>
 			<Landing />
 			<ApiResources />
 			<BackendResources />
+			<FrontendResources />
+			<StarterPacks />
 		</div>
 	);
 }

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

@@ -23,7 +23,7 @@
 	justify-content: center;
 	align-items: center;
 	gap: 10px;
-	height: 350px;
+	height: 450px;
 }
 
 .tag {

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

@@ -0,0 +1,58 @@
+@use "bootstrap-utils" as utils;
+
+.bottom-spacer {
+	margin-bottom: 50px;
+}
+
+.column {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	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;
+}
+
+.title {
+	position: absolute;
+	top: 8%;
+}
+
+.text {
+	position: absolute;
+	bottom: 25%;
+	width: 90%;
+	height: 40%;
+	font-size: 24px;
+}
+
+@include utils.media-breakpoint-down(lg) {
+	.title {
+		font-size: 28px;
+	}
+}
+
+@include utils.media-breakpoint-only(md) {
+	.text {
+		font-size: 20px;
+	}
+}
+
+@include utils.media-breakpoint-down(sm) {
+	.title {
+		font-size: 18px;
+	}
+	.text {
+		font-size: 15px;
+	}
+}

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

@@ -0,0 +1,41 @@
+import urlImageBuilder from "@sanity/image-url";
+import { PortableText } from "@portabletext/react";
+
+import ResourceCard from "../../components/ResourceCard/ResourceCard";
+import { getResources } from "../../getResources";
+import { client } from "@/lib/sanity/client";
+
+import styles from "./FrontendResources.module.scss";
+
+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
+					experiences. Your users will interact with your services through the
+					frontend.
+				</p>
+			</div>
+			<div className={styles["bottom-spacer"] + " row"}>
+				{resources.map(
+					({ _id, title, description, link, logo, stickyNoteColor }) => (
+						<div className={styles.column + " col"} key={_id}>
+							<ResourceCard
+								title={title}
+								description={<PortableText value={description} />}
+								stickerSrc={urlImageBuilder(client).image(logo).url()}
+								stickyNoteColor={stickyNoteColor.hex}
+								links={[{ text: "Reference", link: link }]}
+							/>
+						</div>
+					),
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default FrontendResources;

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

@@ -0,0 +1,60 @@
+@use "bootstrap-utils" as utils;
+
+.bottom-spacer {
+	margin-bottom: 50px;
+}
+
+.column {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	margin-bottom: 20px;
+	gap: 60px;
+}
+
+.card {
+	background-image: url("~@/assets/index_cards/backend-description-card.svg");
+	filter: drop-shadow(5px 5px 5px darkgray);
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 100% 100%;
+	height: 230px;
+	position: relative;
+	display: flex;
+	justify-content: center;
+}
+
+.title {
+	position: absolute;
+	top: 10%;
+}
+
+.text {
+	position: absolute;
+	bottom: 10%;
+	width: 90%;
+	height: 40%;
+	font-size: 24px;
+}
+
+@include utils.media-breakpoint-down(lg) {
+	.title {
+		font-size: 28px;
+		top: 20%;
+	}
+
+	.text {
+		font-size: 20px;
+	}
+}
+
+@include utils.media-breakpoint-down(sm) {
+	.title {
+		font-size: 18px;
+		top: 20%;
+	}
+
+	.text {
+		font-size: 14px;
+	}
+}

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

@@ -0,0 +1,40 @@
+import urlImageBuilder from "@sanity/image-url";
+import { PortableText } from "@portabletext/react";
+
+import ResourceCard from "../../components/ResourceCard/ResourceCard";
+import { getResources } from "../../getResources";
+import { client } from "@/lib/sanity/client";
+
+import styles from "./StarterPacks.module.scss";
+
+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>
+			<div className={styles["bottom-spacer"] + " row"}>
+				{resources.map(
+					({ _id, title, description, link, logo, stickyNoteColor }) => (
+						<div className={styles.column + " col"} key={_id}>
+							<ResourceCard
+								title={title}
+								description={<PortableText value={description} />}
+								stickerSrc={urlImageBuilder(client).image(logo).url()}
+								stickyNoteColor={stickyNoteColor.hex}
+								links={[{ text: "Reference", link: link }]}
+							/>
+						</div>
+					),
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default StarterPacks;