From 7e895deb5367d012fdc4ef539a06299b6ddf7af4 Mon Sep 17 00:00:00 2001 From: Ian Dai <56898254+IanWearsHat@users.noreply.github.com> Date: Mon, 21 Oct 2024 21:06:30 -0700 Subject: [PATCH] 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 --- .../app/(home)/sections/FAQ/FAQ.module.scss | 8 ++-- .../site/src/assets/images/resources-bang.svg | 3 ++ .../src/assets/images/resources-title.svg | 25 ++++++++++ .../src/views/Resources/Resources.module.scss | 4 -- .../HeadingCard/HeadingCard.module.scss | 47 +++++++++++++++++++ .../components/HeadingCard/HeadingCard.tsx | 25 ++++++++++ .../ApiResources/ApiResources.module.scss | 12 ----- .../sections/ApiResources/ApiResources.tsx | 22 ++++----- .../BackendResources/BackendResources.tsx | 21 ++++----- .../FrontendResources/FrontendResources.tsx | 19 ++++---- .../sections/Landing/Landing.module.scss | 6 +++ .../Resources/sections/Landing/Landing.tsx | 10 +++- .../sections/StarterPacks/StarterPacks.tsx | 19 ++++---- 13 files changed, 159 insertions(+), 62 deletions(-) create mode 100644 apps/site/src/assets/images/resources-bang.svg create mode 100644 apps/site/src/assets/images/resources-title.svg create mode 100644 apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss create mode 100644 apps/site/src/views/Resources/components/HeadingCard/HeadingCard.tsx diff --git a/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss b/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss index 6443d744..40c67b31 100644 --- a/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss +++ b/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; diff --git a/apps/site/src/assets/images/resources-bang.svg b/apps/site/src/assets/images/resources-bang.svg new file mode 100644 index 00000000..c60f77fc --- /dev/null +++ b/apps/site/src/assets/images/resources-bang.svg @@ -0,0 +1,3 @@ + diff --git a/apps/site/src/assets/images/resources-title.svg b/apps/site/src/assets/images/resources-title.svg new file mode 100644 index 00000000..cfb51176 --- /dev/null +++ b/apps/site/src/assets/images/resources-title.svg @@ -0,0 +1,25 @@ + diff --git a/apps/site/src/views/Resources/Resources.module.scss b/apps/site/src/views/Resources/Resources.module.scss index e5a14166..9d5316b0 100644 --- a/apps/site/src/views/Resources/Resources.module.scss +++ b/apps/site/src/views/Resources/Resources.module.scss @@ -3,10 +3,6 @@ $container-padding: 6rem; .resources { - h2 { - text-align: center; - } - :global { section { // responsive padding diff --git a/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss b/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss new file mode 100644 index 00000000..4eaa7634 --- /dev/null +++ b/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; + } +} diff --git a/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.tsx b/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.tsx new file mode 100644 index 00000000..f8f75f8e --- /dev/null +++ b/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 ( +
{description}
+
- Application Programming Interface (API) are interfaces or
+
- Backend Frameworks are a variety of middleware services used to - connect to other API and database vendors to fit your project's - needs. -
-
- Frontend frameworks aid in the design of user interfaces and
+
- Various starter packs to start you off on your coding journeys at - ZotHacks, featuring a variety of technologies and tech stacks! -
-