Add preliminary Apply page and application form

apps/site/src/app/apply/sections/Form/AgeInformation.tsx

@@ -33,7 +33,7 @@ export default function AgeInformation() {
 				name="minor-check"
 				values={yesNoOptions}
 				title="Will you be 18 years or older by January 26th, 2024?"
-				titleClass="text-xl font-bold m-0"
+				titleClass="text-xl font-bold m-0 text-center"
 				containerClassTotal="flex flex-col gap-1 w-full items-center"
 				isRequired={true}
 				labelClass="font-bold text-xl"

apps/site/src/app/apply/sections/Form/BasicInformation.tsx

@@ -3,8 +3,8 @@ import TextInput from "@/app/apply/sections/Components/TextInput";
 import styles from "./Form.module.scss";
 
 const pronouns = [
-	{ value: "she", text: "She/her/hers" },
 	{ value: "he", text: "He/him/his" },
+	{ value: "she", text: "She/her/hers" },
 	{ value: "they", text: "They/them/theirs" },
 	{ value: "ze", text: "Ze/zir/zirs" },
 	{ value: "other", text: "Other:" },

apps/site/src/app/apply/sections/Form/ProfileInformation.tsx

@@ -44,7 +44,7 @@ export default function ProfileInformation() {
 			<Textfield
 				name="job-answer"
 				labelClass={`${styles.label} mt-7`}
-				labelText="If you could do any job, what would it be? (ex. Youtuber, Body Builder, etc.) (100 words)"
+				labelText="If you could have any job in the world, what would it be? (ex. Youtuber, Body Builder, etc.) (100 words)"
 				inputClass={`bg-[#E1E1E1] p-3 h-48 resize-none rounded-xl`}
 				containerClass="flex flex-col w-full"
 				isRequired={true}

apps/site/src/app/apply/sections/Form/SchoolInformation.tsx

@@ -1,11 +1,11 @@
 import styles from "./Form.module.scss";
 import DropdownSelect from "@/app/apply/sections/Components/DropdownSelect";
-import TextInput from "@/app/apply/sections/Components/TextInput";
 import SimpleRadio from "@/app/apply/sections/Components/SimpleRadio";
 
 //these values can be edited if backend needs it later on
 
 const educationLevels = [
+	{ value: "high school", text: "High School (18+)" },
 	{ value: "first-year-undergrad", text: "First Year Undergraduate" },
 	{ value: "second-year-undergrad", text: "Second Year Undergraduate" },
 	{ value: "third-year-undergrad", text: "Third Year Undergraduate" },
@@ -15,17 +15,37 @@ const educationLevels = [
 ];
 const universityOptions = [
 	{ value: "UC Irvine", text: "UC Irvine" },
-	{ value: "UC San Diego", text: "UC San Diego" },
-	{ value: "UCLA", text: "UCLA" },
-	{ value: "UC Berkeley", text: "UC Berkeley" },
+	{ value: "Cal Poly Pomona", text: "Cal Poly Pomona" },
 	{ value: "Cal State Long Beach", text: "Cal State Long Beach" },
 	{ value: "Cal State Fullerton", text: "Cal State Fullerton" },
-	{ value: "Cal Poly Pomona", text: "Cal Poly Pomona" },
+	{ value: "UC Berkeley", text: "UC Berkeley" },
+	{ value: "UCLA", text: "UCLA" },
 	{ value: "UC Riverside", text: "UC Riverside" },
+	{ value: "UC San Diego", text: "UC San Diego" },
 	{ value: "UC Santa Barbara", text: "UC Santa Barbara" },
 	{ value: "other", text: "Other" },
 ];
 
+const majorOptions = [
+	{
+		value: "Business Information Management",
+		text: "Business Information Management",
+	},
+	{ value: "Computer Game Science", text: "Computer Game Science" },
+	{ value: "Computer Science", text: "Computer Science" },
+	{
+		value: "Computer Science and Engineering",
+		text: "Computer Science and Engineering",
+	},
+	{ value: "Data Science", text: "Data Science" },
+	{ value: "Informatics", text: "Informatics" },
+	{ value: "Electrical Engineering", text: "Electrical Engineering" },
+	{ value: "Software Engineering", text: "Software Engineering" },
+	{ value: "N/A (High School)", text: "N/A (High School)" },
+	{ value: "Undeclared", text: "Undeclared" },
+	{ value: "other", text: "Other" },
+];
+
 const yesNoOptions = [
 	{
 		id: "hack-yes",
@@ -48,46 +68,46 @@ export default function SchoolInformation() {
 
 			<div className="flex gap-5 w-full max-[1000px]:flex-col max-[1000px]:items-center">
 				<DropdownSelect
-					labelStyle={`${styles.label}`}
-					inputStyle={`${styles.input}`}
+					labelStyle={styles.label}
+					inputStyle={styles.input}
 					name="education-level"
 					labelText="Current Education Level"
 					values={educationLevels}
 					containerClass="flex flex-col w-6/12 max-[1000px]:w-full"
 				/>
 
 				<DropdownSelect
-					labelStyle={`${styles.label}`}
-					inputStyle={`${styles.input}`}
+					labelStyle={styles.label}
+					inputStyle={styles.input}
 					name="school-name"
 					labelText="School Name"
 					values={universityOptions}
 					containerClass="flex flex-col w-6/12 max-[1000px]:w-full"
 				/>
 			</div>
 
-			<TextInput
-				name="major"
-				labelClass={`${styles.label}`}
-				labelText="What is your major?"
-				inputClass={`${styles.input}`}
-				containerClass="flex flex-col w-full"
-				isRequired={true}
-				type="text"
-				placeholder=""
-			/>
+			<div className="flex gap-5 items-end w-full max-[1000px]:flex-col max-[1000px]:items-center">
+				<DropdownSelect
+					labelStyle={styles.label}
+					inputStyle={styles.input}
+					name="major"
+					labelText="What is your major?"
+					values={majorOptions}
+					containerClass="flex flex-col w-6/12 max-[1000px]:w-full"
+				/>
 
-			<SimpleRadio
-				name="hack-check"
-				values={yesNoOptions}
-				title="Is this your first Hackathon?"
-				titleClass="text-lg mb-0 p-0"
-				containerClassTotal="flex flex-row items-center gap-5 max-[600px]:flex-col max-[600px]:items-center max-[600px]:gap-1 max-[600px]:w-full text-center"
-				isRequired={true}
-				labelClass="font-bold"
-				containerClassInputLabels="flex gap-2 items-center"
-				containerClassValues="flex gap-3"
-			/>
+				<SimpleRadio
+					name="hack-check"
+					values={yesNoOptions}
+					title="Is this your first Hackathon?"
+					titleClass="text-lg mb-0 p-0"
+					containerClassTotal="flex gap-5 w-6/12 max-[1000px]:w-full mb-2 max-[1300px]:mb-0 max-[1300px]:flex-col max-[1300px]:gap-1 items-center text-center"
+					isRequired={true}
+					labelClass="font-bold"
+					containerClassInputLabels="flex gap-2 items-center"
+					containerClassValues="flex gap-3"
+				/>
+			</div>
 		</div>
 	);
 }