Feature/resources page (#36)

* feat: resources page section structure

* feat: API Resources section

feat: API Description card

fix: removed top margin on Resource title

feat: google cloud post it

feat: API resources section

* fix: moved post its into single row

* fix: remove unused imports

* feat: resource page enhancements

feat: backend resources section

feat: backend card

fix: removed console log

feat: flask sticky note and config setup

feat: Backend Resource section

fix: common interfaces

fix: added typing + changed interface names

feat: API Resource schema and organization

fix: added type

feat: added tape to backend resources

fix: responsive design

fix: pascal case file names

fix: fix imports

fix: camelCase

fix: fixed unique key errors

* feat: backend resources section

feat: backend card

fix: removed console log

feat: flask sticky note and config setup

feat: Backend Resource section

* fix: common interfaces

* fix: added typing + changed interface names

* fix: added type

* feat: added tape to backend resources

* fix: responsive design

* fix: altered Bookmark Link prop to accept variable props

* feat: rebase from main + mentor redirect url

feat: added mentor app redirect route

fix: removed redirect route

update: added application link

fix: click opens new tab

feat: added apply redirect route

update: redirect in next config

fix: removed /home redirect + added /mentor redirect

update: changed button href to /apply

fix: switched mentor url to /mentor

* feat: added mentor app redirect route

* feat: faq structure and styling

* feat: fetch faq data from sanity

* fix: imports and duplicate folder

* fix: removed mentor folder

* fix: updated lock file

* fix: text extending past card

* fix: sticker positioning simplification

* fix: rebase and html encode quotes

* fix: useRef error during build

* fix: PR changes

* fix: drop shadow tag hover change

* fix: drop shadow adjustments

* update: removed sticky note assets

* fix: backend group adjustments

* fix: removed undefined type in interface

* fix: changed post its comment to sticky notes

---------

Co-authored-by: Nathan Huey <[email protected]>
Co-authored-by: Sam Der <[email protected]>

apps/site/.eslintrc.json

@@ -1,3 +1,3 @@
 {
- "extends": ["next/babel", "next/core-web-vitals"]
+ "extends": ["next/core-web-vitals"]
 }

apps/site/src/components/NavBar/NavBar.module.scss

@@ -8,7 +8,7 @@
 }
 
 .navbar {
- background-image: url("~@/assets/images/lined_paper.png");
+ background-image: url("~@/assets/images/lined-paper.png");
  background-size: cover;
  background-position: left bottom;
  background-repeat: no-repeat;

apps/site/src/components/Sticker/BaseSticker.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import { motion } from "framer-motion";
 import styles from "./BaseSticker.module.scss";
 import { MutableRefObject, useRef } from "react";
@@ -28,10 +27,9 @@ export default function Sticker({
  transition = {},
 }: StickerProps) {
  // prevent next from throwing error involving DOM API
- const pageRef =
- typeof document !== "undefined"
- ? useRef(document.documentElement)
- : undefined;
+ const pageRef = useRef(
+ typeof document !== "undefined" ? document.documentElement : undefined,
+ );
  let transitionProps = { ...transition };
 
  let animateProps = {
@@ -48,15 +46,11 @@ export default function Sticker({
  ? {
  whileTap: {
  scale: 1.1,
- filter: `drop-shadow(${0.08 * width}px ${0.1 * height}px ${
- 0.1 * height
- }px rgba(0, 0, 0, 0.15))`,
+ filter: `drop-shadow(16px 20px 20px rgba(0, 0, 0, 0.15))`,
  },
  whileHover: {
  scale: 1.025,
- filter: `drop-shadow(${0.05 * width}px ${0.07 * height}px ${
- 0.05 * height
- }px rgba(0, 0, 0, 0.2))`,
+ filter: `drop-shadow(10px 14px 10px rgba(0, 0, 0, 0.2))`,
  },
  drag: true,
  dragMomentum: false,
@@ -67,22 +61,14 @@ export default function Sticker({
  : {};
 
  return (
- <motion.div
- style={{
- height,
- width,
- }}
+ <motion.img
  className={styles.stickerContainer}
  animate={animateProps}
+ src={imageSrc}
+ alt={alt}
+ height={height}
+ width={width}
  {...drag}
- >
- <Image
- src={imageSrc}
- alt={alt}
- height={height}
- width={width}
- style={{ pointerEvents: "none" }}
- />
- </motion.div>
+ />
  );
 }

apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx

@@ -12,8 +12,8 @@ export default function HeartSticker({
  <BaseSticker
  imageSrc={HeartEmoji.src}
  alt="heart emoji sticker"
- height={150}
- width={150}
+ height={200}
+ width={200}
  {...fastShake}
  />
  </div>

apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx

@@ -2,15 +2,13 @@ import { HackSticker, HeartSticker } from "@/components/Sticker/Stickers";
 
 export default function StickerLayout() {
  return (
- <div style={{ maxWidth: "100vw" }}>
- <HeartSticker
- style={{
- position: "absolute",
- left: "52vw",
- top: "35vh",
- zIndex: 100,
- }}
- />
- </div>
+ <HeartSticker
+ style={{
+ position: "absolute",
+ top: "45%",
+ left: "60%",
+ zIndex: 100,
+ }}
+ />
  );
 }

apps/site/src/views/Home/sections/FAQ/getQuestions.ts

@@ -30,7 +30,6 @@ const Questions = z.array(
  })
 );
 
-
 export const getQuestions = cache(async () => {
  return Questions.parse(
  await client.fetch(

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

@@ -0,0 +1,17 @@
+@use "bootstrap-utils" as bootstrap;
+
+$container-padding: 6rem;
+
+.resources {
+ h2 {
+ text-align: center;
+ }
+
+ :global {
+ section {
+ // responsive padding
+ @include bootstrap.padding-top($container-padding);
+ @include bootstrap.padding-bottom($container-padding);
+ }
+ }
+}

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

@@ -1,5 +1,15 @@
-import "./Resources.module.scss";
+"use client";
 
+import styles from "./Resources.module.scss";
+import Landing from "./sections/Landing/Landing";
+import ApiResources from "./sections/ApiResources/ApiResources";
+import BackendResources from "./sections/BackendResources/BackendResources";
 export default function Resources() {
- return <h1>Resources</h1>;
+ return (
+ <div className={styles.resources}>
+ <Landing />
+ <ApiResources />
+ <BackendResources />
+ </div>
+ );
 }

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

@@ -0,0 +1,46 @@
+.group {
+ margin-top: 50px;
+ width: 344px;
+ height: 500px;
+ position: relative;
+ box-shadow: 0 6px 5px -2px rgba(gray, 0.5);
+}
+
+.tape {
+ background-image: url("~@/assets/images/tape.png");
+ width: 238px;
+ height: 60px;
+ position: absolute;
+ top: -5%;
+}
+
+.container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ height: 450px;
+}
+
+.tag {
+ position: absolute;
+ left: -5%;
+ bottom: 5%;
+ transition:
+ filter 0.13s ease,
+ transform 0.13s ease,
+ filter 0.13s ease;
+
+ &:hover {
+ transform: translateX(-5px);
+ filter: drop-shadow(1px 0px 0px black) drop-shadow(-2px 0px 0px black)
+ drop-shadow(0px 2px 0px black) drop-shadow(0px -2px 0px black);
+ }
+}
+
+.text {
+ width: 90%;
+ text-align: center;
+}

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

@@ -0,0 +1,38 @@
+import styles from "./ApiGroup.module.scss";
+
+export interface APIGroupProps {
+ title: string;
+ description: string;
+ stickerSrc: string;
+ tagSrc: string;
+ tagLink: string;
+ stickyNoteColor: string;
+}
+
+export function ApiGroup({
+ title,
+ description,
+ stickerSrc,
+ tagSrc,
+ tagLink,
+ stickyNoteColor,
+}: APIGroupProps) {
+ return (
+ <div
+ className={styles.group}
+ style={{
+ backgroundColor: `${stickyNoteColor}`,
+ }}
+ >
+ <div className={styles.container}>
+ <div className={styles.tape}></div>
+ <img src={stickerSrc} />
+ <h3>{title}</h3>
+ <p className={styles.text}>{description}</p>
+ </div>
+ <a href={tagLink} target="_blank">
+ <img src={tagSrc} className={styles.tag} />
+ </a>
+ </div>
+ );
+}

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

@@ -0,0 +1,79 @@
+@use "bootstrap-utils" as utils;
+
+.wrapper {
+ width: 495px;
+ height: 510px;
+ position: relative;
+ margin-top: 50px;
+ box-shadow: 0 6px 5px -2px rgba(gray, 0.5);
+}
+
+.text_flexbox {
+ position: absolute;
+ top: 8%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+}
+
+.description {
+ width: 90%;
+ font-size: 23px;
+}
+
+.tag {
+ width: 100%;
+ transition:
+ filter 0.13s ease,
+ transform 0.13s ease,
+ filter 0.13s ease;
+
+ &:hover {
+ transform: translateX(-5px);
+ filter: drop-shadow(1px 0px 0px black) drop-shadow(-1px 0px 0px black)
+ drop-shadow(0px 1px 0px black) drop-shadow(0px -2px 0px black);
+ }
+}
+
+.tag_flexbox {
+ position: absolute;
+ bottom: 5%;
+ left: -3%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-end;
+}
+
+.tape {
+ position: absolute;
+ width: 60%;
+}
+
+.left_tape {
+ @extend .tape;
+ top: -10%;
+ left: -10%;
+}
+
+.right_tape {
+ @extend .tape;
+ top: -10%;
+ right: -10%;
+}
+
+@include utils.media-breakpoint-down(md) {
+ .description {
+ font-size: 20px;
+ }
+
+ .left_tape {
+ top: -6%;
+ }
+ // adjustments to prevent right tape from extending beyond page in mobile view
+ .right_tape {
+ top: -6%;
+ right: -2%;
+ }
+}