APPLICATION | Volunteer form frontend 1&2

.vscode/settings.json

@@ -10,5 +10,8 @@
 	"mypy-type-checker.cwd": "${workspaceFolder}/apps/api",
 	"flake8.cwd": "${workspaceFolder}/apps/api",
 	"isort.args": ["--settings-path", "apps/api/pyproject.toml"],
-	"python.testing.pytestArgs": ["--rootdir", "apps/api"]
+	"python.testing.pytestArgs": [
+		"--rootdir",
+		"apps/api"
+	]
 }

apps/site/src/app/(main)/apply/Hacker.tsx

@@ -4,7 +4,7 @@ import ApplicationFlow from "@/lib/components/forms/shared/ApplicationFlow";
 import getUserIdentity from "@/lib/utils/getUserIdentity";
 
 import BasicInformation from "./Form/HackerBasicInformation";
-import SchoolInformation from "@/lib/components/forms/shared/SchoolInformation";
+import EssentialQuestions from "@/lib/components/forms/shared/PersonalInformation";
 import ProfileInformation from "./Form/ProfileInformation";
 import ResumeInformation from "@/lib/components/forms/shared/ResumeInformation";
 import AgeInformation from "@/lib/components/forms/shared/AgeInformation";
@@ -25,7 +25,7 @@ export default async function Hacker() {
 			identity={identity}
 		>
 			<BasicInformation />
-			<SchoolInformation />
+			<EssentialQuestions />
 			<ProfileInformation />
 			<ResumeInformation />
 			<AgeInformation />

apps/site/src/app/(main)/globals.css

@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -52,14 +53,14 @@
 }
 
 body {
-	color: var(--color-turquoise);
+	color: var(--color-black);
 	background-color: #c5e7e1;
 }
 
 /* based on Bootstrap Reboot */
 p {
 	margin-top: 0;
-	margin-bottom: 1rem;
+	/* margin-bottom: 1rem; */
 }
 
 hr {

apps/site/src/app/(main)/mentor/Mentor.tsx

@@ -6,7 +6,7 @@ import getUserIdentity from "@/lib/utils/getUserIdentity";
 import Textfield from "@/lib/components/forms/Textfield";
 
 import AgeInformation from "@/lib/components/forms/shared/AgeInformation";
-import SchoolInformation from "@/lib/components/forms/shared/SchoolInformation";
+import EssentialQuestions from "@/lib/components/forms/shared/PersonalInformation";
 import ResumeInformation from "@/lib/components/forms/shared/ResumeInformation";
 import BasicInformation from "./Form/MentorBasicInformation";
 import ProfileInformation from "./Form/MentorProfileInformation";
@@ -30,7 +30,7 @@ export default async function Mentor() {
 			identity={identity}
 		>
 			<BasicInformation />
-			<SchoolInformation />
+			<EssentialQuestions />
 			<ShortAnswers />
 			<ExperienceInformation />
 			<ResumeInformation isRequired />

apps/site/src/app/(main)/volunteer/Volunteer.tsx

@@ -3,12 +3,12 @@ import { redirect } from "next/navigation";
 import ApplicationFlow from "@/lib/components/forms/shared/ApplicationFlow";
 import getUserIdentity from "@/lib/utils/getUserIdentity";
 
-import BasicInformation from "./components/VolunteerBasicInformation";
-import AgeInformation from "@/lib/components/forms/shared/AgeInformation";
-import SchoolInformation from "@/lib/components/forms/shared/SchoolInformation";
+import BasicInformation from "./components/VolunteerDescription";
+import EssentialQuestions from "@/lib/components/forms/shared/PersonalInformation";
 import ShiftAvailability from "./components/ShiftAvailability";
 import VolunteerFRQ from "./components/VolunteerFRQ";
 import ExtraQuestions from "./components/ExtraQuestions";
+import VolunteerGeneralQuestions from "./components/VolunteerGeneralQuestions";
 
 export const revalidate = 60;
 
@@ -26,11 +26,11 @@ export default async function Volunteer() {
 			identity={identity}
 		>
 			<BasicInformation />
-			<SchoolInformation />
+			<EssentialQuestions />
+			<VolunteerGeneralQuestions />
 			<VolunteerFRQ />
 			<ShiftAvailability />
 			<ExtraQuestions />
-			<AgeInformation />
 		</ApplicationFlow>
 	);
 }

apps/site/src/app/(main)/volunteer/components/DayShift.tsx

@@ -62,7 +62,7 @@ export default function DayShift({
 	}
 
 	return (
-		<div className="flex flex-col items-start w-11/12">
+		<div className="flex flex-col items-start w-9/12">
 			<div className="flex flex-col relative w-full">
 				{/* TODO: use actual checkboxes in a table */}
 				{availability.map(
@@ -77,7 +77,9 @@ export default function DayShift({
 							/>
 						),
 				)}
-				<div className="w-full text-2xl text-center pb-5">{shiftText}</div>
+				<div className="w-full text-2xl text-center pb-5 font-sniglet">
+					{shiftText}
+				</div>
 				{availability.map((available, i) => {
 					return (
 						<div
@@ -90,7 +92,7 @@ export default function DayShift({
 							<div
 								className={`h-[50px] w-full ${
 									i === num_hours ? "" : "border-black border-b-2"
-								} ${available ? "bg-blue-500" : "bg-gray-200"}`}
+								} ${available ? "bg-blue-500" : "bg-green-100"}`}
 								onMouseDown={(e) => onMouseDown(e, i)}
 								onMouseUp={onMouseUp}
 								onMouseOver={() => onMouseOver(i)}

apps/site/src/app/(main)/volunteer/components/ExtraQuestions.tsx

@@ -2,21 +2,24 @@ import Textfield from "@/lib/components/forms/Textfield";
 
 export default function ExtraQuestions() {
 	return (
-		<>
+		<div className="flex flex-col gap-5">
+			<div className="text-xl font-semibold font-sniglet">
+				V. Extra Questions
+			</div>
 			<Textfield
 				name="allergies"
 				labelText="If you are tasked to serve food, do you have any allergies we should be aware of? If so, please explain the severity of each allergy."
-				containerClass="w-11/12 flex flex-col gap-5"
+				containerClass="w-11/12 flex flex-col gap-5 font-sniglent"
 				isRequired={false}
 				maxLength={1500}
 			/>
 			<Textfield
 				name="extra_questions"
 				labelText="Any questions, comments, or concerns?"
-				containerClass="w-11/12 flex flex-col gap-5"
+				containerClass="w-11/12 flex flex-col gap-5 font-sniglet"
 				isRequired={false}
 				maxLength={1500}
 			/>
-		</>
+		</div>
 	);
 }

apps/site/src/app/(main)/volunteer/components/ShiftAvailability.tsx

@@ -2,23 +2,17 @@ import DayShift from "./DayShift";
 
 export default function ShiftAvailability() {
 	return (
-		<div className="flex flex-col gap-10 items-start w-11/12">
-			<div className="text-4xl font-bold">Shift Availability</div>
+		<div className="flex flex-col gap-10 ">
+			<div className="text-3xl font-sniglet">IV. Shift Availability</div>
 			<div className="w-full flex flex-col items-center gap-10">
 				<DayShift
-					shiftText="January 24 - Friday Shift"
-					shiftLabel="friday_availability"
-					startHour={7}
-					endHour={24}
-				/>
-				<DayShift
-					shiftText="January 25 - Saturday Shift"
+					shiftText="April 16 - Saturday Shift"
 					shiftLabel="saturday_availability"
 					startHour={7}
 					endHour={24}
 				/>
 				<DayShift
-					shiftText="January 26 - Sunday Shift"
+					shiftText="April 17 - Sunday Shift"
 					shiftLabel="sunday_availability"
 					startHour={7}
 					endHour={18}

apps/site/src/app/(main)/volunteer/components/VolunteerDescription.tsx

@@ -0,0 +1,65 @@
+export default function BasicInformation() {
+	return (
+		<div className="flex flex-col gap-3 ">
+			<p className="font-normal text-3xl m-0 mb-2 font-sniglet text-center">
+				Volunteer Application
+			</p>
+
+			<p>
+				Interested in volunteering during VenusHacks 2026? Please fill in the
+				application below!
+			</p>
+
+			<p>
+				VenusHacks is UCI’s largest women-centric hackathon that includes
+				networking, fun activities, educational workshops, and lots of coding!
+				Our mission is to empower underrepresented groups by providing an
+				inclusive community to foster growth and creativity in computing. This
+				event will take place from{" "}
+				<b>
+					May 15th - May 17th (not overnight) at UC Irvine in the Donald Bren
+					Hall.
+				</b>
+			</p>
+			<p>
+				As a volunteer, you will be assigned to various roles throughout the 
+				event, which include but are not limited to: 
+			</p>
+
+			<ol className="list-decimal list-inside">
+				<li>Food Service</li>
+				<li>Check In</li>
+				<li>Snack and info table</li>
+				<li>Event Set Up & Clean Up</li>
+			</ol>
+
+			<p>Details about the role:</p>
+			<ul className="list-disc list-inside">
+				<li>Volunteers will be scheduled for specific time slots </li>
+				<li>Volunteers will also be given free food & swag!  </li>
+				<li>
+					There will be a <b>mandatory </b>volunteer orientation prior to the 
+					first day of the hackathon (Time TBD). If you are unable to attend, 
+					you must watch the recording that will be sent out.
+				</li>
+			</ul>
+			<p>
+				<b>IMPORTANT NOTE:</b> Please only apply if you are sure about your 
+				availability. In addition, there will be no travel reimbursements for 
+				this role.
+			</p>
+			<p>
+				<b>Application Due Date: Friday, April 24, 2026 at 11:59 PM</b>
+			</p>
+			<p>
+				If you have any questions about VenusHacks, please check out our{" "} 
+				<a 
+					className="underline hover:text-blue-800"
+					style={{ color: 'rgb(37, 99, 235)' }}
+					href="https://venushacks.com/">
+					website
+				</a>{" "} 
+				or email us at venushacks.uci@gmail.com :)</p>
+		</div>
+	);
+}

apps/site/src/app/(main)/volunteer/components/VolunteerFRQ.tsx

@@ -2,21 +2,31 @@ import Textfield from "@/lib/components/forms/Textfield";
 
 export default function VolunteerFRQ() {
 	return (
-		<div className="flex flex-col items-start w-11/12 gap-5">
-			<div className="text-4xl font-bold">Volunteer Information</div>
+		<div className="flex flex-col items-start gap-5">
+			<div className="text-xl font-semibold">III. Free Response Questions</div>
 			<Textfield
 				name="frq_volunteer"
-				labelText="Why are you interested in volunteering, and what do you expect to gain from this experience?"
+				labelText="Why do you want to be a volunteer at Venus Hacks? [max of 150 words]"
 				containerClass="w-full"
+				placeholder={"Answer in 150 words"}
 				isRequired={true}
-				maxLength={1500}
+				maxLength={150}
 			/>
 			<Textfield
-				name="frq_utensil"
-				labelText="If you were a kitchen utensil, what would you be and why?"
+				name="frq_experience"
+				labelText="What do you expect to gain from this experience? [max of 150 words]"
 				containerClass="w-full"
+				placeholder={"Answer in 150 words"}
 				isRequired={true}
-				maxLength={1500}
+				maxLength={150}
+			/>
+			<Textfield
+				name="frq_picnic"
+				labelText="What would you bring to your ideal picnic outing and why? Who would be there? [max of 100 words]"
+				containerClass="w-full"
+				placeholder={"Answer in 150 words"}
+				isRequired={true}
+				maxLength={100}
 			/>
 		</div>
 	);

apps/site/src/app/(main)/volunteer/components/VolunteerGeneralQuestions.tsx

@@ -0,0 +1,37 @@
+import DropdownSelectYesFRQ from "@/lib/components/forms/DropdownSelectYesFRQ";
+import SimpleCheckBox from "@/lib/components/forms/SimpleCheckBox";
+
+const yesNoValues = [
+                    {value: "yes", text: "Yes"},
+                    {value: "no", text: "No"},
+                ];
+
+export default function VolunteerGeneralQuestions() {
+    return (
+        <div className="flex flex-col items-start gap-5">
+            <div className="text-xl font-semibold">II. General Questions</div>
+            <DropdownSelectYesFRQ
+                name="prior_experience"
+                labelText="Any prior hackathon volunteer experience (ex. VH 2025)?"
+                containerClass="w-full"
+                values={yesNoValues}
+            />
+            <SimpleCheckBox
+                name="transportation"
+                labelText="I acknowledge that I am responsible for my own transportation to UC Irvine and overnight stay between event days."
+                containerClass="w-full"
+                isRequired={true}
+                labelClass=""
+
+            />
+            <SimpleCheckBox
+                name="availability_confirmation"
+                labelText="I will be available to volunteer a combined amount of 5 hours minimum across Friday, May 15th, through May 17th, Sunday."
+                containerClass="w-full"
+                isRequired={true}
+                labelClass=""
+
+            />
+        </div>
+    );
+}