diff --git a/frontend/src/assets/images/images.tsx b/frontend/src/assets/images/images.tsx index 245a4a0b..6e18a9e7 100644 --- a/frontend/src/assets/images/images.tsx +++ b/frontend/src/assets/images/images.tsx @@ -241,3 +241,8 @@ export { default as landingPageCreativeTeam } from "./svgs/landing-page-creative export { default as LandingPageBg } from "./svgs/landing-page-bg.svg?url"; export { default as LandingPageFg } from "./svgs/landing-page-fg.svg?url"; export { default as iconArrowDown } from "./svgs/icons/icon-arrow-down.svg?url"; +export { default as joinusAllPage } from "./svgs/joinus-all.svg?url"; +export { default as joinusStepOne } from "./svgs/joinus-step1.svg?url"; +export { default as joinusStepTwo } from "./svgs/joinus-step2.svg?url"; +export { default as joinusStepThree } from "./svgs/joinus-step3.svg?url"; +export { default as joinusStepFour } from "./svgs/joinus-step4.svg?url"; \ No newline at end of file diff --git a/frontend/src/assets/images/svgs/joinus-all.svg b/frontend/src/assets/images/svgs/joinus-all.svg new file mode 100644 index 00000000..8c525064 --- /dev/null +++ b/frontend/src/assets/images/svgs/joinus-all.svg @@ -0,0 +1,429 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/svgs/joinus-line.svg b/frontend/src/assets/images/svgs/joinus-line.svg new file mode 100644 index 00000000..b90dfa58 --- /dev/null +++ b/frontend/src/assets/images/svgs/joinus-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/images/svgs/joinus-step1.svg b/frontend/src/assets/images/svgs/joinus-step1.svg new file mode 100644 index 00000000..888531cf --- /dev/null +++ b/frontend/src/assets/images/svgs/joinus-step1.svg @@ -0,0 +1,298 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/svgs/joinus-step2.svg b/frontend/src/assets/images/svgs/joinus-step2.svg new file mode 100644 index 00000000..c4b9d68c --- /dev/null +++ b/frontend/src/assets/images/svgs/joinus-step2.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/svgs/joinus-step3.svg b/frontend/src/assets/images/svgs/joinus-step3.svg new file mode 100644 index 00000000..4acd6f20 --- /dev/null +++ b/frontend/src/assets/images/svgs/joinus-step3.svg @@ -0,0 +1,234 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/images/svgs/joinus-step4.svg b/frontend/src/assets/images/svgs/joinus-step4.svg new file mode 100644 index 00000000..1d31c3e8 --- /dev/null +++ b/frontend/src/assets/images/svgs/joinus-step4.svg @@ -0,0 +1,274 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/pages/JoinUsPage/JoinUsFAQ.tsx b/frontend/src/pages/JoinUsPage/JoinUsFAQ.tsx new file mode 100644 index 00000000..53651ca7 --- /dev/null +++ b/frontend/src/pages/JoinUsPage/JoinUsFAQ.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import Typography from "tw-components/Typography"; +import { AccordionFaq } from "tw-components/AccordionFaq"; + +const JoinUsFAQ = () => { + const faqData = [ + { + id: "1", + question: + "How many hours are you expected to commit to Hack for LA each week?", + answer: [ + "Most volunteers commit between 5–10 hours per week, but the exact time depends on the project and your availability. We encourage consistent engagement so you can make meaningful contributions and stay connected with your team.", + ], + }, + { + id: "2", + question: "What is a Community of Practice (CoP)?", + answer: [ + "A Community of Practice is a group of people who share a common professional focus and learn from each other. At Hack for LA, CoPs bring together volunteers in areas such as software development, data science, product management, and marketing. These communities offer skill-building opportunities, peer support, and networking.", + ], + }, + { + id: "3", + question: "Why is onboarding mandatory?", + answer: [ + "Onboarding ensures that every volunteer understands our mission, tools, and processes before joining a project. It helps you navigate our platforms, connect with your Community of Practice, and set you up for success in your role.", + ], + }, + { + id: "4", + question: + "Why is completing the Skills Evaluation survey a required step before joining a project?", + answer: [ + "Our Skills Evaluation survey connects you with projects that match your experience and career goals. Projects outline the skills they need, and you self-select your competencies and experience levels. This ensures a strong fit that supports your growth while helping the project succeed.", + ], + }, + ]; + + return ( +
+
+ + Frequently Asked Questions + + +
+
+
+ ); +}; +export default JoinUsFAQ; diff --git a/frontend/src/pages/JoinUsPage/JoinUsPage.tsx b/frontend/src/pages/JoinUsPage/JoinUsPage.tsx new file mode 100644 index 00000000..5c3a8f94 --- /dev/null +++ b/frontend/src/pages/JoinUsPage/JoinUsPage.tsx @@ -0,0 +1,70 @@ +/* eslint-disable react/no-unescaped-entities */ +import React, { FC } from "react"; + +import { joinusAllPage } from "assets/images/images"; + + +import TopSvg from "./TopSvg"; +import JoinUsSteps from "./JoinUsSteps"; +import JoinUsFAQ from "./JoinUsFAQ"; + + +const JoinUsPage: FC = () => { + + return ( +
+ {/* Create stacking context for the top SVG */} +
+
+ +
+
+ +
+

+ Volunteer with us! +

+

+ Civic Tech Jobs, a project within Hack for LA, brings + together civic-minded volunteers to address local issues + by helping build digital products, platforms, and services. +

+
+
+ + +
+ Join Us All Page +
+ +
+ + +
+ + + + + +
+
+
+ + + +
+
+
+
+ + + +
+
+ ); +}; +export { JoinUsPage }; \ No newline at end of file diff --git a/frontend/src/pages/JoinUsPage/JoinUsSteps.tsx b/frontend/src/pages/JoinUsPage/JoinUsSteps.tsx new file mode 100644 index 00000000..da25b664 --- /dev/null +++ b/frontend/src/pages/JoinUsPage/JoinUsSteps.tsx @@ -0,0 +1,105 @@ +import React from "react"; +import { + joinusStepOne, + joinusStepTwo, + joinusStepThree, + joinusStepFour, +} from "assets/images/images"; + +const VolunteerSteps = () => { + const steps = [ + { + id: 1, + title: "Browse our Communities of Practice (CoP)", + description: ( + <> + Browse and learn about our different CoPs on the bottom of our{" "} + + Home page + {" "} + to find what communities interest you. In your CoP you have access to + announcements, meeting zoom links, and helpful resources, as well as + networking opportunities. + + ), + image: joinusStepOne, + }, + { + id: 2, + title: "Attend an onboarding session", + description: ( + <> + Onboarding is a mandatory zoom session that all prospective + volunteers must register and attend prior to committing to a role + within a project. Please RSVP for one of these weekly sessions on our{" "} + + Meetup page + + . + + ), + image: joinusStepTwo, + }, + { + id: 3, + title: "Sign up for an account", + description: ( + <> + Create an account to save your preferred role(s) and availability. + Once you complete onboarding, you can sign up and finalize the process + in three simple steps: +

+ 1. Select your Practice Area
+ 2. Complete the Skill Evaluation survey *
+ 3. Choose your Availability
+

+ With your account set up, you’ll be able to access full details for + your desired roles. + + ), + image: joinusStepThree, + }, + { + id: 4, + title: "Join a project", + description: ( + <> + Search for a project role you're interested in and submit your + application via Slack. If your skills align with the requirements, one + of our Product Managers will reach out to you. + + ), + image: joinusStepFour, + }, + ]; + + return ( +
+ {steps.map((step, index) => ( +
+
+ {step.title} +
+ +
+

+ {step.id}. {step.title} +

+
+ {step.description} +
+
+
+ ))} +
+ ); +}; + +export default VolunteerSteps; diff --git a/frontend/src/pages/JoinUsPage/TopSvg.tsx b/frontend/src/pages/JoinUsPage/TopSvg.tsx new file mode 100644 index 00000000..3ecd1ed2 --- /dev/null +++ b/frontend/src/pages/JoinUsPage/TopSvg.tsx @@ -0,0 +1,169 @@ +import React from "react"; +import { FC, SVGProps } from "react"; + +const TopSvg: FC> = (props) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default TopSvg; diff --git a/frontend/src/router/Router.tsx b/frontend/src/router/Router.tsx index 94575677..6d65e7e1 100644 --- a/frontend/src/router/Router.tsx +++ b/frontend/src/router/Router.tsx @@ -4,6 +4,7 @@ import { createBrowserRouter } from "react-router-dom"; // Internal Imports import { CreditsPage } from "pages/CreditsPage/CreditsPage"; +import { JoinUsPage } from "pages/JoinUsPage/JoinUsPage"; import { Demo } from "pages/Demo/Demo"; import DemoTailwind from "pages/Demo/DemoTailwind"; import { NotFoundPage } from "pages/NotFoundPage/NotFoundPage"; @@ -53,6 +54,10 @@ const router = createBrowserRouter([ path: "privacypolicy", element: , }, + { + path: "joinus", + element: , + }, ], }, ], diff --git a/frontend/src/tw-components/HeaderNav.tsx b/frontend/src/tw-components/HeaderNav.tsx index b57f7113..6f367213 100644 --- a/frontend/src/tw-components/HeaderNav.tsx +++ b/frontend/src/tw-components/HeaderNav.tsx @@ -10,13 +10,15 @@ import { Button } from "tw-components"; interface menuObject { name?: string; link: string; + internal?: boolean; } const menuItems: menuObject[] = [ { name: "Hack for LA", link: "https://www.hackforla.org/" }, { name: "How to Join", - link: "https://www.hackforla.org/getting-started", + link: "/joinus", + internal: true, }, { name: "Projects", link: "https://www.hackforla.org/projects/" }, ]; @@ -46,7 +48,15 @@ function HeaderNav() { aria-label="header-navigation" > {menuItems.map((item, index) => { - return ( + return item.internal ? ( + + {item.name} + + ) : (