695 create how to join us page steps

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";

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 (
+    <div className="bg-grey-light p-8">
+      <div className="mx-auto flex max-w-5xl flex-col items-center rounded-lg bg-grey-light p-6">
+        <Typography.Title2 className="mb-12 text-charcoal">
+          Frequently Asked Questions
+        </Typography.Title2>
+        <AccordionFaq items={faqData} />
+        <div className="mt-20" />
+      </div>
+    </div>
+  );
+};
+export default JoinUsFAQ;

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 (
+    <div className="relative flex flex-col">
+      {/* Create stacking context for the top SVG */}
+      <div className="relative z-0" style={{ minHeight: "300px" }}>
+        <div className="absolute inset-0 z-10 flex flex-col sm:flex-row h-full px-10">
+
+          <div className="w-full sm:w-1/3 flex items-center justify-center sm:justify-start text-center sm:text-left">
+            <div className="w-1/2"></div>
+
+            <div className="w-3/5 pt-10">
+              <h3 className="mb-2 mt-3 text-2xl font-bold sm:text-3xl md:mb-3 md:text-4xl lg:text-5xl xl:text-6xl">
+                Volunteer with us!
+              </h3>
+              <p className="mt-2 text-xs sm:text-sm md:mt-3 md:text-base lg:text-lg xl:text-2xl">
+                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.
+              </p>
+            </div>
+          </div>
+
+
+          <div className="w-full sm:w-2/3 flex items-end justify-center sm:justify-end">
+            <img
+              className="w-full max-w-none"
+              src={joinusAllPage}
+              alt="Join Us All Page"
+            />
+          </div>
+
+        </div>
+
+        <TopSvg className="w-full flex-none" />
+      </div>
+
+
+
+
+
+      <div className="bg-white4 flex-1">
+        <div className="my-4 px-16 py-6 md:px-24 lg:px-32">
+        </div>
+
+        <JoinUsSteps/>
+
+      </div>
+      <div className="bg-white4 flex-1">
+        <div className="my-4 px-16 py-6 md:px-24 lg:px-32">
+        </div>
+
+        <JoinUsFAQ/>
+
+      </div>
+    </div>
+  );
+};
+export { JoinUsPage };

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{" "}
+          <a href="/" className="text-blue-600 underline">
+            Home page
+          </a>{" "}
+          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 <b>mandatory</b> 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{" "}
+          <a href="/" className="text-blue-600 underline">
+            Meetup page
+          </a>
+          .
+        </>
+      ),
+      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 <b>three simple steps:</b>
+          <p className=" ml-6 mt-2 mb-2">
+            1. Select your <b>Practice Area</b><br/>
+            2. Complete the <b>Skill Evaluation</b> survey *<br/>
+            3. Choose your <b>Availability</b><br/>
+          </p>
+          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 (
+    <div className="container mx-auto px-4 py-12 h-[2400px] flex flex-col justify-between relative">
+      {steps.map((step, index) => (
+        <div
+          key={step.id}
+          className="flex flex-row items-center gap-16 my-10"
+        >
+          <div className="flex flex-col items-center w-1/3 relative my-10">
+            <img
+              src={step.image}
+              alt={step.title}
+              className="w-full max-w-sm h-80 rounded-lg z-10"
+            />
+          </div>
+
+          <div className="w-2/3 text-left pl-6">
+            <h2 className="text-2xl font-bold mb-4">
+              {step.id}. {step.title}
+            </h2>
+            <div className="text-gray-700 text-base md:text-lg leading-relaxed">
+              {step.description}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default VolunteerSteps;