From 3fe09a5de78acdda7f06e400e71512141d71492e Mon Sep 17 00:00:00 2001 From: Ryan Yang Date: Tue, 3 Oct 2023 08:57:18 -0700 Subject: [PATCH] FAQ updated - some styling nits --- src/app/components/Nav/Nav.js | 251 +++++++++++------------- src/app/components/Nav/Nav.scss | 8 +- src/app/pages/Houses/Houses.jsx | 227 ++++++++++++--------- src/app/pages/Houses/Houses.module.scss | 48 ++++- src/app/pages/Houses/assets/FAQ.json | 62 ++++++ src/app/styles/global.scss | 1 + 6 files changed, 366 insertions(+), 231 deletions(-) create mode 100644 src/app/pages/Houses/assets/FAQ.json diff --git a/src/app/components/Nav/Nav.js b/src/app/components/Nav/Nav.js index f426ac0e..fa6e9d85 100644 --- a/src/app/components/Nav/Nav.js +++ b/src/app/components/Nav/Nav.js @@ -1,142 +1,125 @@ -import { useState, memo } from 'react'; -import { Link, useLocation } from 'react-router-dom'; +import { useState, memo } from "react"; +import { Link, useLocation } from "react-router-dom"; -import { Text } from 'app/components'; -import { Space, Icon } from 'app/Symbols'; -import socials from 'assets/data/socials.json'; +import { Text } from "app/components"; +import { Space, Icon } from "app/Symbols"; +import socials from "assets/data/socials.json"; -import './Nav.scss'; +import "./Nav.scss"; const Nav = () => { - const { pathname } = useLocation(); - const [mobileExpand, setMobileExpand] = useState(false); - const toggleMobileExpand = () => { - setMobileExpand(!mobileExpand); - }; - if (pathname === '/designathon22/' || pathname === '/designathon22') - return <>; + const { pathname } = useLocation(); + const [mobileExpand, setMobileExpand] = useState(false); + const toggleMobileExpand = () => { + setMobileExpand(!mobileExpand); + }; + if (pathname === "/designathon22/" || pathname === "/designathon22") + return <>; - return ( - - ); + return ( + + ); }; export default memo(Nav); diff --git a/src/app/components/Nav/Nav.scss b/src/app/components/Nav/Nav.scss index ccebcaba..2f9120d3 100644 --- a/src/app/components/Nav/Nav.scss +++ b/src/app/components/Nav/Nav.scss @@ -10,6 +10,10 @@ padding: 0 48px; z-index: 1000; background: white; + + & .logo { + min-width: 190px; + } & .wrapper { display: grid; @@ -38,7 +42,7 @@ } - @media screen and (max-width: 768px) { + @media screen and (max-width: 800px) { padding: 0 16px; box-shadow: 0 0px 128px 64px #6670; @@ -96,7 +100,7 @@ } -@media only screen and (min-width: 768px) { +@media only screen and (min-width: 800px) { #nav.shrink>.wrapper { height: 66px; } diff --git a/src/app/pages/Houses/Houses.jsx b/src/app/pages/Houses/Houses.jsx index ef1e944a..73954a5e 100644 --- a/src/app/pages/Houses/Houses.jsx +++ b/src/app/pages/Houses/Houses.jsx @@ -1,7 +1,7 @@ -import React, { memo } from "react"; +import React, { memo, useCallback, useRef, useState } from "react"; import cn from "./Houses.module.scss"; import Helmet from "react-helmet"; -import { Section } from "app/Symbols"; +import { Icon, Section } from "app/Symbols"; import { Text } from "app/components"; import { Link } from "react-router-dom"; import clsx from "clsx"; @@ -21,6 +21,7 @@ import House1 from "./assets/Group1.png"; import House2 from "./assets/Group2.png"; import House3 from "./assets/Group3.png"; import House4 from "./assets/Group4.png"; +import FAQ_QUESTIONS from "./assets/FAQ.json"; export const Houses = memo(() => { const HOUSES = [ @@ -28,25 +29,25 @@ export const Houses = memo(() => { name: "Water Tribe", icon: House1, description: "peaceful and resilient, this group presents calm and flow", - link: "https://docs.google.com/spreadsheets/d/1bEw6QacTrd6lTbqqx3D1CfJ068MuCs8cQRncch7Z_00", + link: "https://docs.google.com/spreadsheets/d/1bEw6QacTrd6lTbqqx3D1CfJ068MuCs8cQRncch7Z_00/edit?usp=sharing", }, { name: "Earth Kingdom", icon: House2, description: "A diverse and resourceful nation known for its resolve", - link: "https://docs.google.com/spreadsheets/d/1GYwUszVwXia8AHADNwLRsiOQJvziCoSoblxnd1hR5AU", + link: "https://docs.google.com/spreadsheets/d/1GYwUszVwXia8AHADNwLRsiOQJvziCoSoblxnd1hR5AU/edit?usp=sharing", }, { name: "Fire Nation", icon: House3, description: "A powerful and ambitious empire ruled by determination", - link: "https://docs.google.com/spreadsheets/d/1ELynayIT6gn9DgyMRca5MmKwklLmVLqlM1-ofZdOx10", + link: "https://docs.google.com/spreadsheets/d/1ELynayIT6gn9DgyMRca5MmKwklLmVLqlM1-ofZdOx10/edit?usp=sharing", }, { name: "Air Nomads", icon: House4, description: "A nomadic society driven by a drive for peace", - link: "https://docs.google.com/spreadsheets/d/1ZOgMm07NGX_-DrO8enfEvCBsmawohOqziiyjTZSEn40", + link: "https://docs.google.com/spreadsheets/d/1ZOgMm07NGX_-DrO8enfEvCBsmawohOqziiyjTZSEn40/edit?usp=sharing", }, ]; @@ -93,6 +94,12 @@ export const Houses = memo(() => { }, ]; + const joinSectionRef = useRef(null); + + const scrollToJoin = useCallback(() => { + joinSectionRef.current?.scrollIntoView({ behavior: "smooth" }); + }, []); + return (
@@ -120,11 +127,14 @@ export const Houses = memo(() => { be a part of your own design family
- +
@@ -166,11 +176,16 @@ export const Houses = memo(() => { ))}
- + view all points - +
@@ -219,93 +234,123 @@ export const Houses = memo(() => { - {/*
-
- {[ - { - q: "Where do I submit my project?", - a: ( - - You will submit your final, working prototype to the{" "} - - Submission Form - {" "} - (opens during event). Only one person on your team should - submit a form, which will be on behalf of all contributors. - - ), - }, - ].map((item) => { - return ( - -

{item.q}

-
- } - opened={ -
-

{item.q}

- +
+ FAQ +
+
+ + ask any questions in our{" "} + + discord server + + +
+
+ {FAQ_QUESTIONS.map((item, i) => ( + - {item.a} - -
- } - /> - ); - })} +
+ {item.q} +
+
+ } + opened={ +
+
+ {item.q} + {item.a} +
+
+ } + /> + ))} +
+ - */} -
- - Join a tribe now - -
- - - join now +
+
+ {new Date() < + new Date("Fri Oct 06 2023 17:00:0 GMT-0700 (Pacific Daylight Time)") ? ( + <> + + Sign Up and Get Sorted! - - + + form open until Friday at 5pm + + + + ) : ( + <> + + Didn’t get to Join a House? Send Us an Email + + + To get sorted into a house, please email us or talk to a board + member at any meeting! + + + + )}
); }); -// const Toggle = ({ opened, closed }) => { -// const [open, setOpen] = useState(false); +const Toggle = ({ opened, closed }) => { + const [open, setOpen] = useState(false); -// const toggleExpand = useCallback(() => { -// setOpen((p) => !p); -// }, []); + const toggleExpand = useCallback(() => { + setOpen((p) => !p); + }, []); -// return ( -//
-// -// {open ? opened : closed} -//
-// ); -// }; + return ( +
+ + {open ? opened : closed} +
+ ); +}; diff --git a/src/app/pages/Houses/Houses.module.scss b/src/app/pages/Houses/Houses.module.scss index dd39fbc6..5d4b3e94 100644 --- a/src/app/pages/Houses/Houses.module.scss +++ b/src/app/pages/Houses/Houses.module.scss @@ -20,8 +20,6 @@ display: inline; } - // white-space: nowrap; - & span { display: inline; color: var(--blue); @@ -30,6 +28,7 @@ & .join { margin-top: 20px; + border: none; } & .title { @@ -39,6 +38,13 @@ & .decoration { position: absolute; transform: translate(-50%, -50%); + transition: opacity 250ms; + opacity: 0; + + @media screen and (min-width: 800px) { + opacity: 1; + + } } } @@ -62,7 +68,7 @@ &>.houses { text-align: center; margin: 0 auto; - max-width: 1100px; + max-width: 1300px; & .title { font-weight: bold; @@ -98,7 +104,7 @@ } & img { - height: 80px; + height: 120px; grid-row: 1 / 3; grid-column: 1 / 2; } @@ -140,15 +146,49 @@ } } + + &>.faq { + & .question { + border-radius: 20px; + padding: 10px 20px; + display: grid; + grid-template-columns: auto 1fr; + border: 2px solid transparent; + transition: border-color 250ms, background-color 250ms; + + &.opened { + border: 2px solid var(--silver); + } + + &:hover { + background-color: var(--silver); + } + } + + & .answer { + display: grid; + gap: 20px; + grid-template-rows: auto auto; + } + } + &>.bottom { height: 60vh; display: grid; place-content: center; + max-width: 800px; + margin: 0 auto; & .title { + text-align: center; font-weight: bold; } + & .description{ + text-align: center; + margin-top: 20px; + } + & .button { margin: 40px auto; } diff --git a/src/app/pages/Houses/assets/FAQ.json b/src/app/pages/Houses/assets/FAQ.json new file mode 100644 index 00000000..635269c3 --- /dev/null +++ b/src/app/pages/Houses/assets/FAQ.json @@ -0,0 +1,62 @@ +[ + { + "q": "What is the House System?", + "a": "The House System is a way for members to get closer to a smaller group of people in our club! Houses will have a friendly competition against each other to earn the most points at the end of the quarter, which can be earned by attending our general meetings, industry events, workshop events, and socials! The house with the most points at the end of the quarter gets a prize that will be announced closer to the end of the quarter!" + }, + { + "q": "What do you get out of joining a House?", + "a": "By joining a house, you’ll get the wonderful opportunity to create closer connections and become more involved in the club!" + }, + { + "q": "Are there any requirements to be a part of a house?", + "a": "There are no requirements to be a part of a house." + }, + { + "q": "Do you need to be in a house to attend DAUCI events?", + "a": "No! You do not need to be assigned a house to attend our events." + }, + { + "q": "How do I gain points once I join a house?", + "a": "Come out to our general meetings (workshop/industry events) and our social events! At the end of each event, there will be a QR code you can scan to mark your attendance. Board members will update the points accordingly and you can access the points sheet to see your updated points." + }, + { + "q": "Who is in charge of the House System?", + "a": "Exec will generally be in charge of the House System. As of Fall 2023, points are awarded for attending general meetings (industry/workshop) and socials. In terms of who is updating what points, Exec will be in charge of updating general meeting points while Socials will be in charge of updating social event points." + }, + { + "q": "How are points assigned?", + "a": "At the end of any general meetings or socials, attendees will have access to the QR code to an attendance form. This form consists of information on the name and house of the attendee and the date the attendee is filling out the form.\n\nThere will be a different attendance form made for every event to keep attendance organized and prevent members from filling out the form without attending the event.\n\nEach form will be made by Exec and will be titled as followed: “[INSERT EVENT] House Attendance Form”." + }, + { + "q": "How are members sorted into Houses?", + "a": "At the very first general meeting, everyone there will fill out a form where they will be able to express their preferences for the house they’d like to be in. This form will only be used once at the beginning of the quarter. After the first general meeting, we will no longer be using the form to express preferences and any other members who need to be sorted can come see Exec at general meetings or send us an email at designatuci@gmail.com. The members who are sorted into houses after the first general meeting will be sorted randomly, will not have the ability to request a specific house, and will be sorted into whatever house has the least amount of people to keep the amount of people in houses as even as possible. Members will be able to find out their house assignment by looking at the points sheet (talked about below) that will be available on the website." + }, + { + "q": "How do we keep track of points?", + "a": "Points will be kept track of through Google Sheets. After every event, the person in charge of updating points (either Exec or Socials) will go through the attendance form for the event and update points accordingly. \n\nEach event is worth 5 points and can be seen being updated below for the first general meeting as an example." + }, + { + "q": "How will members stay updated on House competition standings?", + "a": "At the beginning of each general meeting, we will take about a minute to reveal the standings for the House competition (who is in 1st, 2nd, etc.) and how many points each House currently has. Exec will be in charge of presenting this information." + }, + { + "q": "What are House Leads?", + "a": "A House lead is a board member from each house that is responsible for leading icebreakers during general meetings within their house and supporting individuals in their house during design activities. In the points sheet for each house, the house lead is always bolded.\n\nIn any case where a house lead is unable to attend any of the general meetings, house leads are responsible for appointing another board member in their house to be house lead for the meeting.\n\nThese are the house leads for Fall 2023:\n\nAir Nomads: Candyce\nWater Tribe: Jasmine\nFire Nation: Ryan\n Earth Kingdom: Michelle" + }, + { + "q": "How are House themes decided and how often are they changed?", + "a": "House themes are decided before the start of the quarter and change every quarter. For Fall of 2023, Exec decided on the house theme. Moving forward we may open up the decision process of house themes to the rest of board." + }, + { + "q": "Do the members in the Houses ever change?", + "a": "Along with the House theme, the members in each House also change every quarter to encourage making connections with different people in the club." + }, + { + "q": "What does the future of the House System look like?", + "a": "While we are still establishing the House System throughout the Fall, there are some aspects of the House System that we will be considering after the Fall Quarter. This includes incorporating a member of the month and House socials. This will be discussed more at the end of Fall 2023 and after the House System is more established." + }, + { + "q": "What are things that will be unique to each House?", + "a": "Each house (no matter the theme) should have their own symbol/image/character that represents their house. During Fall 2023, we are testing out how establishing “values” for each house will add onto the House System. Other than that, as of Fall 2023, there will be no specialization for each house (i.e. front-end, research, etc.). This was decided to allow everyone, regardless of house, to feel comfortable exploring different aspects of design!" + } +] diff --git a/src/app/styles/global.scss b/src/app/styles/global.scss index b326a6f9..103d1ecb 100644 --- a/src/app/styles/global.scss +++ b/src/app/styles/global.scss @@ -53,6 +53,7 @@ script { padding: 0; } + body { min-height: 100vh; color: $black;