Added Resources title and section title component

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,33 @@
+@use "zothacks-theme" as theme;
+
+$item-padding-y: 32px;
+$item-padding-x: 48px;
+
+$heading-font-size: 28px;
+
+.card {
+ background-color: theme.$white;
+ border: 6px solid theme.$white;
+ box-shadow: inset 0 0 0 6px theme.$black;
+ border-radius: 16px;
+
+ padding: $item-padding-y $item-padding-x;
+
+ display: flex;
+ align-items: center;
+}
+
+.bang {
+ margin-right: $item-padding-x - 7;
+}
+
+.title {
+ font-size: $heading-font-size;
+ font-weight: 600;
+ color: theme.$light-blue;
+}
+
+.description {
+ margin: 0;
+ font-weight: 500;
+}

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

@@ -11,18 +11,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,27 +1,26 @@
 import { PortableText } from "@portabletext/react";
+import { client } from "@/lib/sanity/client";
 import imageUrlBuilder from "@sanity/image-url";
 
-import styles from "./ApiResources.module.scss";
-
-import ResourceCard from "../../components/ResourceCard/ResourceCard";
 import { getResources } from "../../getResources";
-import { client } from "@/lib/sanity/client";
+import ResourceCard from "../../components/ResourceCard/ResourceCard";
+import HeadingCard from "../../components/HeadingCard/HeadingCard";
+
+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(

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

@@ -1,9 +1,12 @@
+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>
+ <Image src={resourcesTitle} alt="resources title" />
  </div>
  );
 }