make website more beginner friendly

src/app/(landing)/About.tsx

@@ -1,20 +1,32 @@
+"use client"
+import { useState } from 'react';
 import Section from '../../components/Section';
 
 
 export default function About() {
+    const [status,setStatus] = useState('B');
+
     return (
         <Section title="About" id="about">
-            <p className="mb-4">Make, Build, Create & Learn. It’s GunnHacks 10.0, the tenth iteration of Gunn’s annual hackathon!</p>
-            <p className="mb-4">
-                GunnHacks is a 24-hour high school hackathon hosted by the United Computations club at Gunn High School.
-                Throughout the years, we have continued this valued tradition to encourage students of all skill levels
-                and backgrounds to make cool projects and share what they can do. Join us in-person this year in teams of 
-                up to four to create something amazing!
-            </p>
-            <p className="mb-4">
-                Registration is open for PAUSD students! Register for GunnHacks <a href="/register">here</a>.
-                All hackers are also expected to follow MLH's <a href="http://hackp.ac/coc" target="_blank" rel="noopener noreferrer">Code of Conduct</a>.
-            </p>
+
+            <div className="text-xl">I am a hackathon
+                <div className="flex gap-5 my-3">
+                    <div 
+                        className={"flex-1 p-3 rounded-lg cursor-pointer border-2 " + (status === 'B' ? 'border-transparent bg-slate-200' : 'border-solid border-slate-200')}
+                        onClick={() => setStatus('B')}
+                    >
+                        Beginner
+                    </div>
+                    <div 
+                        className={"flex-1 p-3 rounded-lg cursor-pointer border-2 " + (status === 'V' ? 'border-transparent bg-slate-200' : 'border-solid border-slate-200')}
+                        onClick={() => setStatus('V')}
+                    >
+                        Veteran
+                    </div>
+                </div>
+            </div>
+
+            { status==='B' ? <Beginner /> : <Veteran /> }
             {/*
             <p>
                 Before you participate, please refer to the MLH Code of Conduct <a href="docs/mlh-code-of-conduct.pdf" target="_blank" rel="noopener noreferrer">here</a>
@@ -24,3 +36,52 @@ export default function About() {
         </Section>
     )
 }
+
+const Beginner = () => {
+    return <div className='text-lg'>
+        <p className="mb-4">Make, Build, Create & Learn. Join GunnHaX, the tenth iteration of Gunn’s annual hackathon!</p>
+
+        <p className="mb-4">
+            In a hackathon, participants compete in teams to create a programming project within a given time limit. At the end, projects are then
+            rated by a panel of judges, and the winners get prizes! At GunnHaX, the project can be anything, from games to data visualization
+            to AI-powered assistants. GunnHacks welcomes beginner coders&#8212;there will be several coding workshops, from basic programming to
+            web development and AI, to help get beginners started. Our experienced staff will also be available to offer technical help and advice.
+            All you need to get started is an idea!
+        </p>
+
+        <p className="mb-4">
+            GunnHaX is a 24-hour event, which means participants are given a 24-hour time frame to complete your project. (Of course, most participants 
+            sleep a little.) At the end, participants will give a quick presentation and their project will be rated in 4 categories: technical difficulty,
+            practicality, creativity, and user experience. The best projects in each category, as well as overall, will win prizes. The best beginner teams
+            will also win prizes!
+        </p>
+
+        <p className="mb-4">
+            GunnHaX is a great opportunity for beginners to learn and become acquainted with coding. It’s a lot of fun, too, with a host of mini-events
+            throughout the night. So whether you’re a programming veteran or someone who has never touched a line of code before, we invite you to join!
+            The registration link is <a href="/register">here</a>. (Only PAUSD students are allowed to participate at this time.)
+        </p>
+
+        <p className="mb-4">
+            GunnHaX is dedicated to an inclusive experience for all. All hackers are expected to follow MLH's <a href="http://hackp.ac/coc" target="_blank" rel="noopener noreferrer">Code of Conduct</a>.
+        </p>
+
+    </div>
+}
+
+const Veteran = () => {
+    return <div className='text-lg'>
+        <p className="mb-4">Make, Build, Create & Learn. It’s GunnHacks 10.0, the tenth iteration of Gunn’s annual hackathon!</p>
+
+        <p className="mb-4">
+            GunnHacks is a 24-hour high school hackathon hosted by the United Computations club at Gunn High School.
+            Throughout the years, we have continued this valued tradition to encourage students of all skill levels
+            and backgrounds to make cool projects and share what they can do. Join us in-person this year in teams of
+            up to four to create something amazing!
+        </p>
+        <p className="mb-4">
+            Registration is open for PAUSD students! Register for GunnHacks <a href="/register">here</a>.
+            All hackers are also expected to follow MLH's <a href="http://hackp.ac/coc" target="_blank" rel="noopener noreferrer">Code of Conduct</a>.
+        </p>
+    </div>
+}

src/app/(landing)/FAQ.tsx

@@ -21,8 +21,8 @@ export default function FAQ() {
                     for you to start off or learn something new.
                 </Question>
                 <Question q="What can I build?">
-                    Web, mobile, hardware, you name it — any type of project is welcome. Projects will be judged based
-                    on creativity, technical difficulty, polish, and utility by a panel of industry judges.
+                    Web, mobile, hardware, you name it — any type of project is welcome, as long as it is built within the hacking time frame.
+                    Projects will be judged based on technical difficulty, practicality, creativity, and user experience by a panel of industry judges.
                 </Question>
                 {/* Update with team formation event info when that becomes available */}
                 <Question q="How big should teams be?">

src/app/(landing)/Heading.tsx

@@ -39,7 +39,7 @@ export default function Heading() {
 
             </div>
             <a className={"no-underline"} href="https://docs.google.com/forms/d/e/1FAIpQLSdF_KFH0pH_ryAx3uYglID2ITeXvoTaHfTh2i9YMgnlwLC91A/viewform" rel="noopener noreferrer" target="_blank">
-            <div className={'mt-20 rounded-lg px-16 py-5 text-2xl bg-white text-[#292834] hover:bg-[#F47722] transition ' + overpass.className}>
+            <div className={'mt-20 rounded-lg px-16 py-5 text-2xl bg-white text-[#292834] hover:bg-[#F47722] transition font-bold'}>
                 Register
             </div>
             </a>

src/app/(landing)/Prizes.tsx

@@ -51,7 +51,7 @@ const miniEventPrizes = [{
 
 export default function Prizes() {
     return (
-        <Section title="Prizes" id="prizes">
+        <Section red title="Prizes" id="prizes">
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                 {mainPrizes.map(prize => (
                     <div key={prize.name}>
@@ -79,7 +79,7 @@ export default function Prizes() {
 
 function Prize(props: {children: ReactNode}) {
     return (
-        <li className="p-4 bg-white rounded-lg mb-2.5 rounded-md border border-theme">
+        <li className="p-4 bg-white rounded-lg mb-2.5 rounded-md text-black">
             {props.children}
         </li>
     )

src/app/(landing)/Schedule.tsx

@@ -4,7 +4,7 @@ import Section from '../../components/Section';
 
 export default function Schedule() {
     return (
-        <Section red title="Schedule" id="schedule">
+        <Section title="Schedule" id="schedule">
             <div className="flex flex-wrap gap-8">
                 <ScheduleDay name="January 27">
                     <ScheduleItem start="1:30 PM">Doors open</ScheduleItem>

src/app/(landing)/page.tsx

@@ -15,10 +15,10 @@ export default function Home() {
             {/* <Header /> */}
             <Heading />
             <About />
+            <FAQ />
             <Schedule />
             <Prizes />
             {/* <Judges /> */}
-            <FAQ />
             <Sponsors />
             <Footer />
         </div>