Resources

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

@@ -11,3 +11,18 @@ $container-padding: 6rem;
 		}
 	}
 }
+.resources {
+	background: url("~@/assets/background/resources/stars.png"),
+		url("~@/assets/background/resources/front-mountains.png"),
+		url("~@/assets/background/resources/back-mountains.png"),
+		radial-gradient(101.83% 44.96% at 50% 50%, #172750 0%, #121c32 100%);
+
+	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+	background-size: cover, cover, cover, cover;
+	background-position:
+		center top,
+		center 50vh,
+		center 30vh,
+		center;
+	padding-bottom: 2rem;
+}

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

@@ -1,15 +1,13 @@
-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";
 import FrontendResources from "./sections/FrontendResources/FrontendResources";
 import StarterPacks from "./sections/StarterPacks/StarterPacks";
+import styles from "./Resources.module.scss";
 
 export default function Resources() {
 	return (
 		<div className={styles.resources}>
-			<Figures />
 			<Landing />
 			<ApiResources />
 			<BackendResources />

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

@@ -10,40 +10,41 @@ $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;
+	flex-direction: column;
 	align-items: center;
-}
-
-.bang {
-	display: none;
-	margin-right: $mobile-item-padding-x - 0.4375;
+	justify-content: center;
+	width: 100%;
+	max-width: 900px;
+	margin: 0 auto;
+	height: auto;
+	gap: 10px;
+	padding: 20px;
 }
 
 .title {
-	font-size: $heading-font-size;
-	font-weight: 600;
-	color: theme.$light-blue;
+	font-family: "Reddit Mono", monospace;
+	font-weight: 800;
+	font-style: normal;
+	font-size: 25px;
+	line-height: 180%;
+	letter-spacing: 2%;
+	text-align: center;
+	color: rgba(202, 202, 202, 1);
 }
 
 .description {
-	margin: 0;
-	font-weight: 500;
+	font-family: "Reddit Mono", monospace;
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 180%;
+	letter-spacing: 0.02em;
+	text-align: center;
+	color: rgba(153, 177, 203, 1);
 }
 
 @include utils.media-breakpoint-up(md) {
 	.card {
 		padding: $item-padding-y $item-padding-x;
 	}
-
-	.bang {
-		display: block;
-		margin-right: $item-padding-x - 0.4375;
-	}
 }

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

@@ -1,6 +1,3 @@
-import Image from "next/image";
-import resourcesBang from "@/assets/images/resources-bang.svg";
-
 import styles from "./HeadingCard.module.scss";
 
 interface HeadingCardProps {
@@ -11,11 +8,6 @@ interface HeadingCardProps {
 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>

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

@@ -1,94 +1,69 @@
 @use "zothacks-theme" as theme;
 @use "bootstrap-utils" as utils;
-
-.group {
-	position: relative;
-	padding: 1rem 0;
-	width: 200px;
-}
-
-.container {
-	position: relative;
+.frame {
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
 	align-items: center;
-	gap: 10px;
+	justify-content: center;
+	width: 423px;
+	min-height: 260px;
+	padding: 3vh 0 0;
+	border-radius: 20px;
+	border: 5px solid rgba(42, 80, 75, 1);
+	background-color: rgba(42, 80, 75, 0.69);
+	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+	gap: 16px;
 }
 
-.buttonImage {
-	width: 50px;
+.logo {
+	width: 80px;
+	height: auto;
+	fill: #ffffff;
 }
 
-.titleLink {
-	font-family: inherit;
+.cardLinkWrapper {
+	display: flex;
+	flex: 1 1 auto;
 	text-decoration: none;
 	color: inherit;
-	font-weight: 600;
-	color: theme.$lighter-black;
-	:link {
-		text-decoration: none;
-	}
-}
+	cursor: pointer;
+	transition:
+		transform 0.2s ease,
+		box-shadow 0.2s ease;
 
-.titleLinkIcon {
-	margin-bottom: 0.2rem;
-}
-
-.islandBackground {
-	position: absolute;
-	width: 350px;
-}
-
-.CardContainer {
-	position: relative;
-	height: auto;
-	aspect-ratio: 1 / 1.3;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-family: utils.$font-family-base;
-	width: 350px;
-	min-width: 350px;
+	&:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+	}
 }
 
-.description > * {
-	margin: 0;
-	font-size: 1.05rem;
-	color: theme.$lighter-black;
+.text {
+	font-family: "Reddit Mono", monospace;
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 180%;
+	letter-spacing: 0.02em;
+	text-align: center;
+	color: rgba(153, 177, 203, 1);
+	max-width: 90%;
 }
 
-@include utils.media-breakpoint-up(md) {
-	.container {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		gap: 10px;
-		height: 450px;
-	}
-
-	.buttonImage {
-		width: 100px;
-	}
+.bold {
+	font-weight: 800;
+	color: rgba(202, 202, 202, 1);
 }
 
-@include utils.media-breakpoint-up(sm) {
-	.CardContainer {
-		width: 500px;
-		min-width: 500px;
-	}
-
-	.islandBackground {
-		width: 500px;
+@media (max-width: 480px) {
+	.frame {
+		width: 90%;
+		padding: 20px;
 	}
 
-	.group {
-		width: 300px;
+	.logo {
+		width: 60px;
 	}
 
-	.description > * {
-		font-size: 24px;
+	.text {
+		font-size: 15px;
 	}
 }