From e6d64f12c03e3608ced2543a675bbd54da770d3c Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Mon, 9 Dec 2024 22:28:07 -0800 Subject: [PATCH 1/3] Add FAQ --- package.json | 7 +- src/app/page.tsx | 2 + src/components/FAQAccordion/index.tsx | 49 +++ src/components/FAQAccordion/style.module.scss | 67 ++++ src/sections/FAQ/index.tsx | 17 + src/sections/FAQ/questions.tsx | 53 +++ src/sections/FAQ/style.module.scss | 6 + src/sections/Statistics/style.module.scss | 24 +- src/styles/vars.scss | 1 + yarn.lock | 325 +++++++++++++++++- 10 files changed, 527 insertions(+), 24 deletions(-) create mode 100644 src/components/FAQAccordion/index.tsx create mode 100644 src/components/FAQAccordion/style.module.scss create mode 100644 src/sections/FAQ/index.tsx create mode 100644 src/sections/FAQ/questions.tsx create mode 100644 src/sections/FAQ/style.module.scss diff --git a/package.json b/package.json index 08abec8..b864df6 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,17 @@ "lint:check": "prettier --check ./src && next lint" }, "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^6.1.10", + "@mui/material": "^6.1.10", "@svgr/webpack": "^8.1.0", "@types/node": "20.6.0", "@types/react-dom": "18.2.7", "next": "^13.4.16", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "react-is": "^19.0.0" }, "devDependencies": { "@types/react": "^18.3.12", diff --git a/src/app/page.tsx b/src/app/page.tsx index 4aebeba..d85f8cd 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,7 @@ import Statistics from '@/sections/Statistics'; import Hero from '@/sections/Hero'; import About from '@/sections/About'; +import FAQ from '@/sections/FAQ'; import styles from './page.module.scss'; export default function Home() { @@ -9,6 +10,7 @@ export default function Home() { + ); } diff --git a/src/components/FAQAccordion/index.tsx b/src/components/FAQAccordion/index.tsx new file mode 100644 index 0000000..bb83de2 --- /dev/null +++ b/src/components/FAQAccordion/index.tsx @@ -0,0 +1,49 @@ +'use client'; + +import { useState } from 'react'; +import Accordion from '@mui/material/Accordion'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import styles from './style.module.scss'; +import Typography from '../Typography'; + +interface FaqProps { + data: { question: string; answer: string | any }[]; +} + +export default function FAQ({ data }: FaqProps) { + const [expandedIndex, setExpandedIndex] = useState(-1); + + const handleChange = (panelIndex: number) => (_e: React.SyntheticEvent, newExpanded: boolean) => { + setExpandedIndex(newExpanded ? panelIndex : -1); + }; + + return ( + <> + {data.map((questionObject, index) => ( + + } + className={styles.accordionSummary} + > + + {questionObject.question} + + + + + {questionObject.answer} + + + + ))} + + ); +} diff --git a/src/components/FAQAccordion/style.module.scss b/src/components/FAQAccordion/style.module.scss new file mode 100644 index 0000000..35629b7 --- /dev/null +++ b/src/components/FAQAccordion/style.module.scss @@ -0,0 +1,67 @@ +@use '../../styles/vars.scss' as vars; + +.accordion { + box-shadow: none; + margin: 0 !important; + padding: 0.5rem 0; + border-bottom: none; + + &:first-of-type { + border-top: none; + } + + &:last-of-type { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: 1px solid vars.$neutral; + } +} + +.accordionRoot { + background-color: transparent; + border-top: 1px solid vars.$neutral; + + &:before { + display: none; + } +} + +.accordionSummary { + padding: 0 1rem; + flex-direction: row-reverse; + + :global(.MuiAccordionSummary-content) { + margin: 0; + } + + :global(.MuiAccordionSummary-expandIconWrapper) { + margin-right: 1rem; + transform: rotate(-90deg); + + &.Mui-expanded { + transform: rotate(0deg); + } + } +} + +.accordionDetails { + padding: 1rem 1rem 1rem 2rem; + color: vars.$white; +} + +.expandIcon { + color: vars.$white; + min-width: 24px; +} + +.accordionQuestion { + color: vars.$white; +} + +.accordionAnswer { + color: vars.$white; + + a { + color: vars.$blue; + } +} diff --git a/src/sections/FAQ/index.tsx b/src/sections/FAQ/index.tsx new file mode 100644 index 0000000..aa4e973 --- /dev/null +++ b/src/sections/FAQ/index.tsx @@ -0,0 +1,17 @@ +import Typography from '@/components/Typography'; +import { QUESTIONS } from './questions'; +import styles from './style.module.scss'; +import FAQAccordion from '@/components/FAQAccordion'; + +const FAQ: React.FC = () => { + return ( +
+ + Frequently Asked Questions + + +
+ ); +}; + +export default FAQ; diff --git a/src/sections/FAQ/questions.tsx b/src/sections/FAQ/questions.tsx new file mode 100644 index 0000000..e78e7d5 --- /dev/null +++ b/src/sections/FAQ/questions.tsx @@ -0,0 +1,53 @@ +import Typography from '@/components/Typography'; +import Link from 'next/link'; + +interface Question { + question: string; + answer: string | React.ReactNode; +} + +export const QUESTIONS: Question[] = [ + { + question: 'How can I register for DiamondHacks?', + answer: ( + + Fill out the interest form here ( + https://acmurl.com/diamondhacks) to be + notified when applications go live! + + ), + }, + { + question: 'What is a hackathon?', + answer: + 'A hackathon is an event where hackers come together to collaborate, create, and develop projects within a set timeframe (usually 24–48 hours). Participants form teams to brainstorm ideas, write code, and build solutions, with a focus on innovation and creativity.', + }, + { + question: 'Do I need any prior experience?', + answer: + "No, hackers of any experience levels are welcome! We'll have workshops and mentors to help you get started, and beginners have the chance to win prizes specifically for first time hackers.", + }, + { + question: 'Where will DiamondHacks be held?', + answer: + 'DiamondHacks will be hosted at UC San Diego, in the Computer Science & Engineering Buildings, as well as Jacobs Hall.', + }, + { + question: 'Who can attend DiamondHacks?', + answer: ( + + Any undergraduate students enrolled in any college or university are eligible to + attend! + + ), + }, + { + question: 'Who can I reach out to for questions and concerns?', + answer: ( + + Please reach out to hackathon@acmucsd.org{' '} + with any questions or concerns about DiamondHacks! + + ), + }, +]; diff --git a/src/sections/FAQ/style.module.scss b/src/sections/FAQ/style.module.scss new file mode 100644 index 0000000..73f96d2 --- /dev/null +++ b/src/sections/FAQ/style.module.scss @@ -0,0 +1,6 @@ +@use '../../styles/vars.scss' as vars; + +.title { + margin-bottom: 2rem; + color: vars.$light-blue; +} diff --git a/src/sections/Statistics/style.module.scss b/src/sections/Statistics/style.module.scss index ebf1eee..6c1aa18 100644 --- a/src/sections/Statistics/style.module.scss +++ b/src/sections/Statistics/style.module.scss @@ -16,19 +16,21 @@ .diamond { position: relative; - aspect-ratio: 0.64; - flex: 0 0 40%; - max-height: 600px; + height: 896px; + width: 350px; + } - .slidingDiamond { - width: auto; - position: absolute; - top: 0; - left: calc(-1 * vars.$side-padding); - object-fit: contain; - } + .slidingDiamond { + position: absolute; + top: 0; + left: calc(-1 * vars.$side-padding); + object-fit: contain; + } + + @media screen and (max-width: vars.$breakpoint-md) { + height: auto; - @media screen and (max-width: vars.$breakpoint-md) { + .diamond { display: none; } } diff --git a/src/styles/vars.scss b/src/styles/vars.scss index 19f2035..cc2395d 100644 --- a/src/styles/vars.scss +++ b/src/styles/vars.scss @@ -7,6 +7,7 @@ $red: #ff8e72; $orange: #f9a857; $yellow: #ecdf98; $white: #ffffff; +$neutral: #a1acbd; // Media Query Standard Breakpoints $breakpoint-sm: 425px; // diff --git a/yarn.lock b/yarn.lock index 8362c9e..0e4ca24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -128,7 +128,7 @@ "@babel/traverse" "^7.25.9" "@babel/types" "^7.25.9" -"@babel/helper-module-imports@^7.25.9": +"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.25.9": version "7.25.9" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715" integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw== @@ -857,6 +857,13 @@ "@babel/plugin-transform-modules-commonjs" "^7.25.9" "@babel/plugin-transform-typescript" "^7.25.9" +"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.26.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": + version "7.26.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1" + integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.20.7": version "7.22.15" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz" @@ -864,13 +871,6 @@ dependencies: regenerator-runtime "^0.14.0" -"@babel/runtime@^7.8.4": - version "7.26.0" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1" - integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw== - dependencies: - regenerator-runtime "^0.14.0" - "@babel/template@^7.25.9": version "7.25.9" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016" @@ -901,6 +901,113 @@ "@babel/helper-string-parser" "^7.25.9" "@babel/helper-validator-identifier" "^7.25.9" +"@emotion/babel-plugin@^11.13.5": + version "11.13.5" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0" + integrity sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.2" + "@emotion/memoize" "^0.9.0" + "@emotion/serialize" "^1.3.3" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.2.0" + +"@emotion/cache@^11.13.5", "@emotion/cache@^11.14.0": + version "11.14.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.14.0.tgz#ee44b26986eeb93c8be82bb92f1f7a9b21b2ed76" + integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA== + dependencies: + "@emotion/memoize" "^0.9.0" + "@emotion/sheet" "^1.4.0" + "@emotion/utils" "^1.4.2" + "@emotion/weak-memoize" "^0.4.0" + stylis "4.2.0" + +"@emotion/hash@^0.9.2": + version "0.9.2" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b" + integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g== + +"@emotion/is-prop-valid@^1.3.0": + version "1.3.1" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240" + integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw== + dependencies: + "@emotion/memoize" "^0.9.0" + +"@emotion/memoize@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102" + integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ== + +"@emotion/react@^11.14.0": + version "11.14.0" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.14.0.tgz#cfaae35ebc67dd9ef4ea2e9acc6cd29e157dd05d" + integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.13.5" + "@emotion/cache" "^11.14.0" + "@emotion/serialize" "^1.3.3" + "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0" + "@emotion/utils" "^1.4.2" + "@emotion/weak-memoize" "^0.4.0" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.3.3": + version "1.3.3" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.3.tgz#d291531005f17d704d0463a032fe679f376509e8" + integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA== + dependencies: + "@emotion/hash" "^0.9.2" + "@emotion/memoize" "^0.9.0" + "@emotion/unitless" "^0.10.0" + "@emotion/utils" "^1.4.2" + csstype "^3.0.2" + +"@emotion/sheet@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c" + integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg== + +"@emotion/styled@^11.14.0": + version "11.14.0" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.14.0.tgz#f47ca7219b1a295186d7661583376fcea95f0ff3" + integrity sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.13.5" + "@emotion/is-prop-valid" "^1.3.0" + "@emotion/serialize" "^1.3.3" + "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0" + "@emotion/utils" "^1.4.2" + +"@emotion/unitless@^0.10.0": + version "0.10.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745" + integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg== + +"@emotion/use-insertion-effect-with-fallbacks@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz#8a8cb77b590e09affb960f4ff1e9a89e532738bf" + integrity sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg== + +"@emotion/utils@^1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.2.tgz#6df6c45881fcb1c412d6688a311a98b7f59c1b52" + integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA== + +"@emotion/weak-memoize@^0.4.0": + version "0.4.0" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6" + integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg== + "@eslint-community/eslint-utils@^4.2.0": version "4.4.0" resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz" @@ -984,6 +1091,88 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" +"@mui/core-downloads-tracker@^6.1.10": + version "6.1.10" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.10.tgz#871b5a4876cfd0beac6672fe50d57e0c0a53db36" + integrity sha512-LY5wdiLCBDY7u+Od8UmFINZFGN/5ZU90fhAslf/ZtfP+5RhuY45f679pqYIxe0y54l6Gkv9PFOc8Cs10LDTBYg== + +"@mui/icons-material@^6.1.10": + version "6.1.10" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-6.1.10.tgz#9ed27fc750ab4811da94c1a1252253d9d1e86cc2" + integrity sha512-G6P1BCSt6EQDcKca47KwvKjlqgOXFbp2I3oWiOlFgKYTANBH89yk7ttMQ5ysqNxSYAB+4TdM37MlPYp4+FkVrQ== + dependencies: + "@babel/runtime" "^7.26.0" + +"@mui/material@^6.1.10": + version "6.1.10" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-6.1.10.tgz#eab2a9df24c68548d0df2b5b25c0410311313ff9" + integrity sha512-txnwYObY4N9ugv5T2n5h1KcbISegZ6l65w1/7tpSU5OB6MQCU94YkP8n/3slDw2KcEfRk4+4D8EUGfhSPMODEQ== + dependencies: + "@babel/runtime" "^7.26.0" + "@mui/core-downloads-tracker" "^6.1.10" + "@mui/system" "^6.1.10" + "@mui/types" "^7.2.19" + "@mui/utils" "^6.1.10" + "@popperjs/core" "^2.11.8" + "@types/react-transition-group" "^4.4.11" + clsx "^2.1.1" + csstype "^3.1.3" + prop-types "^15.8.1" + react-is "^18.3.1" + react-transition-group "^4.4.5" + +"@mui/private-theming@^6.1.10": + version "6.1.10" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-6.1.10.tgz#cfe8f70c30351208e8ca5c2b16c6992ce0288559" + integrity sha512-DqgsH0XFEweeG3rQfVkqTkeXcj/E76PGYWag8flbPdV8IYdMo+DfVdFlZK8JEjsaIVD2Eu1kJg972XnH5pfnBQ== + dependencies: + "@babel/runtime" "^7.26.0" + "@mui/utils" "^6.1.10" + prop-types "^15.8.1" + +"@mui/styled-engine@^6.1.10": + version "6.1.10" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-6.1.10.tgz#0f093defd35934b6accff156011c9deac22356be" + integrity sha512-+NV9adKZYhslJ270iPjf2yzdVJwav7CIaXcMlPSi1Xy1S/zRe5xFgZ6BEoMdmGRpr34lIahE8H1acXP2myrvRw== + dependencies: + "@babel/runtime" "^7.26.0" + "@emotion/cache" "^11.13.5" + "@emotion/serialize" "^1.3.3" + "@emotion/sheet" "^1.4.0" + csstype "^3.1.3" + prop-types "^15.8.1" + +"@mui/system@^6.1.10": + version "6.1.10" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-6.1.10.tgz#d8a6f9099883880182cfafc08fc8ab8099647c01" + integrity sha512-5YNIqxETR23SIkyP7MY2fFnXmplX/M4wNi2R+10AVRd3Ub+NLctWY/Vs5vq1oAMF0eSDLhRTGUjaUe+IGSfWqg== + dependencies: + "@babel/runtime" "^7.26.0" + "@mui/private-theming" "^6.1.10" + "@mui/styled-engine" "^6.1.10" + "@mui/types" "^7.2.19" + "@mui/utils" "^6.1.10" + clsx "^2.1.1" + csstype "^3.1.3" + prop-types "^15.8.1" + +"@mui/types@^7.2.19": + version "7.2.19" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.19.tgz#c941954dd24393fdce5f07830d44440cf4ab6c80" + integrity sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA== + +"@mui/utils@^6.1.10": + version "6.1.10" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-6.1.10.tgz#edf8c5c9cf930a8290b5347550ece15f5800b1c3" + integrity sha512-1ETuwswGjUiAf2dP9TkBy8p49qrw2wXa+RuAjNTRE5+91vtXJ1HKrs7H9s8CZd1zDlQVzUcUAPm9lpQwF5ogTw== + dependencies: + "@babel/runtime" "^7.26.0" + "@mui/types" "^7.2.19" + "@types/prop-types" "^15.7.13" + clsx "^2.1.1" + prop-types "^15.8.1" + react-is "^18.3.1" + "@next/env@13.4.16": version "13.4.16" resolved "https://registry.npmjs.org/@next/env/-/env-13.4.16.tgz" @@ -1062,6 +1251,11 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@popperjs/core@^2.11.8": + version "2.11.8" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" + integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== + "@rushstack/eslint-patch@^1.1.3": version "1.3.3" resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz" @@ -1195,11 +1389,21 @@ resolved "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz" integrity sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg== +"@types/parse-json@^4.0.0": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239" + integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw== + "@types/prop-types@*": version "15.7.5" resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== +"@types/prop-types@^15.7.13": + version "15.7.14" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2" + integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ== + "@types/react-dom@18.2.7": version "18.2.7" resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz" @@ -1207,6 +1411,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.11": + version "4.4.11" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5" + integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^18.3.12": version "18.3.12" resolved "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz" @@ -1420,6 +1631,15 @@ axobject-query@^3.1.1: dependencies: dequal "^2.0.3" +babel-plugin-macros@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1" + integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg== + dependencies: + "@babel/runtime" "^7.12.5" + cosmiconfig "^7.0.0" + resolve "^1.19.0" + babel-plugin-polyfill-corejs2@^0.4.10: version "0.4.12" resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz#ca55bbec8ab0edeeef3d7b8ffd75322e210879a9" @@ -1547,6 +1767,11 @@ client-only@0.0.1: resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== +clsx@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" + integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== + color-convert@^2.0.1: version "2.0.1" resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz" @@ -1569,6 +1794,11 @@ concat-map@0.0.1: resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz" integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg== +convert-source-map@^1.5.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" + integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== + convert-source-map@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" @@ -1581,6 +1811,17 @@ core-js-compat@^3.38.0, core-js-compat@^3.38.1: dependencies: browserslist "^4.24.2" +cosmiconfig@^7.0.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6" + integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA== + dependencies: + "@types/parse-json" "^4.0.0" + import-fresh "^3.2.1" + parse-json "^5.0.0" + path-type "^4.0.0" + yaml "^1.10.0" + cosmiconfig@^8.1.3: version "8.3.6" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.3.6.tgz#060a2b871d66dba6c8538ea1118ba1ac16f5fae3" @@ -1644,6 +1885,11 @@ csstype@^3.0.2: resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== +csstype@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" + integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== + damerau-levenshtein@^1.0.8: version "1.0.8" resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz" @@ -1724,6 +1970,14 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" @@ -2149,6 +2403,11 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^5.0.0: version "5.0.0" resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz" @@ -2370,6 +2629,13 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +hoist-non-react-statics@^3.3.1: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + ignore@^5.2.0: version "5.2.4" resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz" @@ -2961,7 +3227,7 @@ parent-module@^1.0.0: dependencies: callsites "^3.0.0" -parse-json@^5.2.0: +parse-json@^5.0.0, parse-json@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd" integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg== @@ -3030,7 +3296,7 @@ prettier@^3.0.3: resolved "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz" integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg== -prop-types@^15.8.1: +prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -3057,11 +3323,31 @@ react-dom@18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^18.3.1: + version "18.3.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" + integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== + +react-is@^19.0.0: + version "19.0.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.0.0.tgz#d6669fd389ff022a9684f708cf6fa4962d1fea7a" + integrity sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g== + +react-transition-group@^4.4.5: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@18.2.0: version "18.2.0" resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz" @@ -3155,7 +3441,7 @@ resolve-pkg-maps@^1.0.0: resolved "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz" integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw== -resolve@^1.14.2: +resolve@^1.14.2, resolve@^1.19.0: version "1.22.8" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d" integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw== @@ -3301,6 +3587,11 @@ source-map-js@^1.0.1: resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46" integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA== +source-map@^0.5.7: + version "0.5.7" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" + integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ== + streamsearch@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz" @@ -3372,6 +3663,11 @@ styled-jsx@5.1.1: dependencies: client-only "0.0.1" +stylis@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" + integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== + supports-color@^7.1.0: version "7.2.0" resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz" @@ -3628,6 +3924,11 @@ yallist@^4.0.0: resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz" integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== +yaml@^1.10.0: + version "1.10.2" + resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" + integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== + yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz" From f835fd58c80e30e32594ab10a13100633bdfc7fe Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Tue, 10 Dec 2024 07:50:47 -0800 Subject: [PATCH 2/3] Address Sean's comments --- src/components/FAQAccordion/index.tsx | 17 +++++++++++------ src/sections/FAQ/questions.tsx | 16 ++++++++-------- src/sections/FAQ/style.module.scss | 5 +++++ 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/components/FAQAccordion/index.tsx b/src/components/FAQAccordion/index.tsx index bb83de2..960eb91 100644 --- a/src/components/FAQAccordion/index.tsx +++ b/src/components/FAQAccordion/index.tsx @@ -7,16 +7,21 @@ import AccordionDetails from '@mui/material/AccordionDetails'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import styles from './style.module.scss'; import Typography from '../Typography'; +import { Question } from '@/sections/FAQ/questions'; -interface FaqProps { - data: { question: string; answer: string | any }[]; +interface FAQAccordionProps { + data: Question[]; } -export default function FAQ({ data }: FaqProps) { - const [expandedIndex, setExpandedIndex] = useState(-1); +export default function FAQ({ data }: FAQAccordionProps) { + const [expandedIndices, setExpandedIndices] = useState([]); const handleChange = (panelIndex: number) => (_e: React.SyntheticEvent, newExpanded: boolean) => { - setExpandedIndex(newExpanded ? panelIndex : -1); + if (newExpanded) { + setExpandedIndices([...expandedIndices, panelIndex]); + } else { + setExpandedIndices(expandedIndices.filter(index => index !== panelIndex)); + } }; return ( @@ -24,7 +29,7 @@ export default function FAQ({ data }: FaqProps) { {data.map((questionObject, index) => ( + <> Fill out the interest form here ( https://acmurl.com/diamondhacks) to be notified when applications go live! - + ), }, { @@ -35,19 +35,19 @@ export const QUESTIONS: Question[] = [ { question: 'Who can attend DiamondHacks?', answer: ( - + <> Any undergraduate students enrolled in any college or university are eligible to attend! - + ), }, { question: 'Who can I reach out to for questions and concerns?', answer: ( - + <> Please reach out to hackathon@acmucsd.org{' '} with any questions or concerns about DiamondHacks! - + ), }, ]; diff --git a/src/sections/FAQ/style.module.scss b/src/sections/FAQ/style.module.scss index 73f96d2..e776103 100644 --- a/src/sections/FAQ/style.module.scss +++ b/src/sections/FAQ/style.module.scss @@ -3,4 +3,9 @@ .title { margin-bottom: 2rem; color: vars.$light-blue; + + @media screen and (max-width: vars.$breakpoint-md) { + font-size: 2.25rem !important; + line-height: 2.625rem !important; + } } From ba0e811e31effc35a7bc8ce5a627e10097c5a090 Mon Sep 17 00:00:00 2001 From: Alex Zhang Date: Tue, 10 Dec 2024 07:59:40 -0800 Subject: [PATCH 3/3] Fix guy sliding, white background on mobile --- src/components/FAQAccordion/style.module.scss | 2 +- src/sections/Statistics/style.module.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/FAQAccordion/style.module.scss b/src/components/FAQAccordion/style.module.scss index 35629b7..32e3032 100644 --- a/src/components/FAQAccordion/style.module.scss +++ b/src/components/FAQAccordion/style.module.scss @@ -18,7 +18,7 @@ } .accordionRoot { - background-color: transparent; + background-color: transparent !important; border-top: 1px solid vars.$neutral; &:before { diff --git a/src/sections/Statistics/style.module.scss b/src/sections/Statistics/style.module.scss index 8799c1a..1ca8768 100644 --- a/src/sections/Statistics/style.module.scss +++ b/src/sections/Statistics/style.module.scss @@ -25,6 +25,7 @@ top: -6rem; z-index: 1; pointer-events: none; + height: 400px; // So the diamond doesn't slide off the rope .slidingDiamond { position: absolute;