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 ( +
+ exclamation mark +
+

{title}

+

{description}

+
+
+ ); +} diff --git a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.module.scss b/apps/site/src/views/Resources/sections/ApiResources/ApiResources.module.scss index 91cba8e0..31fae379 100644 --- a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.module.scss +++ b/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%; diff --git a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx b/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx index f0271888..5afe70ab 100644 --- a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx +++ b/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 (
- {/* Card Component */} -
-

API Resources

-

- Application Programming Interface (API) are interfaces or + +

- {/* Sticky Notes */} {resources.map( ({ _id, title, description, link, logo, background }) => (
diff --git a/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx b/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx index 227264db..0c7a4bf9 100644 --- a/apps/site/src/views/Resources/sections/BackendResources/BackendResources.tsx +++ b/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,17 +12,13 @@ async function BackendResources() { const resources = await getResources("backend"); return (
- {/* Card Component */} -
-

Backend Framework Resources

-

- Backend Frameworks are a variety of middleware services used to - connect to other API and database vendors to fit your project's - needs. -

-
+
- {/* Sticky Notes */} {resources.map( ({ _id, title, description, link, logo, background }) => (
@@ -29,7 +26,9 @@ async function BackendResources() { title={title} description={} stickerSrc={urlImageBuilder(client).image(logo).url()} - islandBackground={urlImageBuilder(client).image(background).url()} + islandBackground={urlImageBuilder(client) + .image(background) + .url()} links={[{ text: "Reference", link: link }]} />
diff --git a/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.tsx b/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.tsx index b6bfa2e9..30b9c0aa 100644 --- a/apps/site/src/views/Resources/sections/FrontendResources/FrontendResources.tsx +++ b/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 (
-
-

Frontend Framework Resources

-

- Frontend frameworks aid in the design of user interfaces and +

{resources.map( ({ _id, title, description, link, logo, background }) => ( @@ -27,7 +26,9 @@ async function FrontendResources() { title={title} description={} stickerSrc={urlImageBuilder(client).image(logo).url()} - islandBackground={urlImageBuilder(client).image(background).url()} + islandBackground={urlImageBuilder(client) + .image(background) + .url()} links={[{ text: "Reference", link: link }]} />
diff --git a/apps/site/src/views/Resources/sections/Landing/Landing.module.scss b/apps/site/src/views/Resources/sections/Landing/Landing.module.scss index 1e19c5b8..51859126 100644 --- a/apps/site/src/views/Resources/sections/Landing/Landing.module.scss +++ b/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%; +} diff --git a/apps/site/src/views/Resources/sections/Landing/Landing.tsx b/apps/site/src/views/Resources/sections/Landing/Landing.tsx index 62dffce7..07f28126 100644 --- a/apps/site/src/views/Resources/sections/Landing/Landing.tsx +++ b/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 (
-

Resources

+

Resources

+ resources title
); } diff --git a/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.tsx b/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.tsx index 56d00dba..41ecd7b6 100644 --- a/apps/site/src/views/Resources/sections/StarterPacks/StarterPacks.tsx +++ b/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 (
-
-

Starter Pack Resources

-

- Various starter packs to start you off on your coding journeys at - ZotHacks, featuring a variety of technologies and tech stacks! -

-
+
{resources.map( ({ _id, title, description, link, logo, background }) => ( @@ -26,7 +25,9 @@ async function StarterPacks() { title={title} description={} stickerSrc={urlImageBuilder(client).image(logo).url()} - islandBackground={urlImageBuilder(client).image(background).url()} + islandBackground={urlImageBuilder(client) + .image(background) + .url()} links={[{ text: "Reference", link: link }]} />