feat: add important dates and FAQs section to t3 recweek page

src/Pages/T3Apply/Sections/About.tsx

@@ -2,8 +2,22 @@ import React from 'react'
 
 function About() {
   return (
-    <section className="min-h-screen">
-      <h1>About</h1>
+    <section className="min-h-screen bg-[#F5F0E8] flex flex-col">
+      <div className='flex justify-center mt-50 items-start gap-10'>
+        <div className="flex flex-col">
+          <h1 className="font-micu text-7xl">ABOUT US</h1>
+          <div className="mt-10 h-2 w-15 bg-red-600"></div>
+        </div>
+        <div className="flex items-start gap-4 max-w-105">
+        <div className="w-3 h-35 bg-green-700 ml-5"></div>
+        <p className="text-xl mt-10 text-green-700 font-libre-caslon-condensed font-bold">
+          Green & White is the official yearbook publication of De La Salle University.
+        </p>
+        </div>
+      </div>
+      <div className='max-w-140 ml-186 mt-10 font-dm-mono'>
+        Celebrating its 101st year, the publication lives as the record-keeper of Lasallian memories. From portraits to pages, Green & White brings the Lasallian community together and etches their place in time through the yearbook.
+      </div>
     </section>
   )
 }

src/Pages/T3Apply/Sections/Dates.tsx

@@ -1,11 +1,22 @@
-import React from 'react'
+import DateCard from "../../../components/t3-recweek/DateCard"
 
 function Dates() {
   return (
-    <section className="min-h-screen">
-      <h1>Dates</h1>
+    <section className="min-h-screen flex flex-col justify-center items-center px-6 bg-[#E8E4DD] py-16">
+      <div className="w-full max-w-sm md:max-w-2xl lg:max-w-4xl xl:max-w-5xl">
+        <h1 className="font-micu text-[#B34865] text-5xl md:text-6xl lg:text-7xl text-center mb-16 md:mb-20">
+          important dates
+        </h1>
+
+        <div className="flex flex-col gap-3 w-full">
+          <DateCard title="COMMITTEE EXAMS" dateRange="May 25 to 27" />
+          <DateCard title="PRACTICAL EXAMS" dateRange="May 25 to 29" />
+          <DateCard title="COMMITTEE HEAD INTERVIEW" dateRange="May 28 to June 2" />
+          <DateCard title="EXECUTIVE EDITOR INTERVIEW" dateRange="June 1 to June 5" />
+        </div>
+      </div>
     </section>
   )
 }
 
-export default Dates
+export default Dates;

src/Pages/T3Apply/Sections/FAQ.tsx

@@ -1,9 +1,100 @@
-import React from 'react'
+import FaqDropdown from "../../../components/t3-recweek/FaqDropdown"
+
+const faqs = [
+  {
+    question: "Who can apply?",
+    answer: "All undergraduate students from all campuses under DLSU-Manila, with a minimum of three (3) terms left are eligible to apply for Green & White."
+  },
+  {
+    question: "What committees may I apply for?",
+    answer: (
+      <div className="flex flex-col gap-1">
+        <p>You may apply to any of the seven (7) committees:</p>
+        <ul className="list-disc list-inside flex flex-col gap-1 mt-1">
+          <li><span className="font-bold">Literary:</span> Pitch and write stories for the yearbook, proofread yearbook write-ups, and create captions for online platforms.</li>
+          <li><span className="font-bold">Photo:</span> Handle operations behind photoshoots and provide visual-photo assets for the yearbook and campaign materials.</li>
+          <li><span className="font-bold">Layout:</span> Creates publicity materials and designs the contents of the yearbook.</li>
+          <li><span className="font-bold">Marketing:</span> Ideates and executes promotion strategies that encourage students to subscribe to the yearbook.</li>
+          <li><span className="font-bold">Customer Care:</span> Accommodates subscriber concerns and guides subscribers throughout yearbook processes.</li>
+          <li><span className="font-bold">Office:</span> Organizes the systems, logistics and data of the yearbook operations.</li>
+          <li><span className="font-bold">Web:</span> Deploys and manages the digital solutions behind G&W's systems.</li>
+        </ul>
+      </div>
+    )
+  },
+  {
+    question: "Can I apply for more than one (1) committee?",
+    answer: "Yes, you may apply to two (2) committees! Kindly note, however, that you can only be accepted into one (1) committee if and when you pass the application process. If you do apply for two committees, you may be redirected to your second choice."
+  },
+  {
+    question: "I am a member of another org. Can I still join?",
+    answer: "Yes, you can! Aspiring applicants from other organizations may still apply, as long as you are not an officer or member of any political organization within the university."
+  },
+  {
+    question: "What are the expectations for a Green & White staffer?",
+    answer: "Members of the publication are expected to be active contributors with a nose for initiative. Outside of section-specific deliverables, staffers are expected to be available on-site to man the publication's booths and assist subscribers with yearbook concerns."
+  },
+  {
+    question: "Is there a minimum grade requirement?",
+    answer: "None."
+  },
+  {
+    question: "What does the application process look like?",
+    answer: (
+      <div className="flex flex-col gap-1">
+        <p>Green & White's application process is conducted in five (5) stages:</p>
+        <ol className="list-decimal list-inside flex flex-col gap-1 mt-1">
+          <li><span className="font-bold">Application:</span> Fill out the application form at <a href="http://bit.ly/GW26-T3-Application" className="underline" onClick={(e) => e.stopPropagation()}>bit.ly/GW26-T3-Application</a> by Saturday, May 23.</li>
+          <li><span className="font-bold">Examination:</span> Wait for the details of your committee exam and practical exam to be sent to you by May 25. Submit your exam deliverables, resume, and portfolio within the given time period.</li>
+          <li><span className="font-bold">Committee Head Interview:</span> Schedule your interview with your priority and secondary committee choices.</li>
+          <li><span className="font-bold">Executive Editors Interview:</span> Schedule your interview with the executive editors.</li>
+          <li><span className="font-bold">Results:</span> Wait for the results to be posted.</li>
+        </ol>
+      </div>
+    )
+  },
+  {
+    question: "Are Green & White application exams difficult?",
+    answer: "Don't worry, the workload fits right into a student's schedule! Here in Green & White, we take our workload and time management holistically, always with the student in mind. We know some tasks may seem time consuming but with time and practice, we are able to manage work at a breathable and competent pace. These exams are also meant to test your technical skills and commitment and help us identify which committee you best belong to."
+  }, 
+  {
+    question: "Have any more questions?",
+    answer: (
+      <p>
+        For any other questions or concerns, kindly message our Facebook inbox through{" "}
+        <a href="https://fb.com/gwyearbookdlsu" className="underline" onClick={(e) => e.stopPropagation()}>
+          fb.com/gwyearbookdlsu
+        </a>{" "}
+        or send us an email at{" "}
+        <a href="mailto:gw@dlsu.edu.ph" className="underline" onClick={(e) => e.stopPropagation()}>
+          gw@dlsu.edu.ph
+        </a>{" "}
+        with the subject line "[GW26] T3 Recruitment Concern".
+      </p>
+    )
+  }
+] 
 
 function FAQ() {
   return (
-    <section className="min-h-screen">
-      <h1>FAQ</h1>
+    <section className="min-h-screen flex flex-col justify-center items-center px-6 bg-[#E8E4DD] py-16">
+      <div className="w-full max-w-sm md:max-w-2xl lg:max-w-4xl xl:max-w-5xl">
+        <h1 className="font-micu text-[#B34865] text-5xl md:text-6xl lg:text-7xl text-center mb-16 md:mb-20">
+          FAQS 
+        </h1>
+
+        <div className="flex flex-col gap-3 w-full">
+          { faqs.map((faq, index) => {
+              return <FaqDropdown
+                key={index} 
+                question={faq.question} 
+                answer={faq.answer} 
+              />
+            })
+          } 
+
+        </div>
+      </div>
     </section>
   )
 }

src/Pages/T3Apply/Sections/Steps.tsx

@@ -2,8 +2,57 @@ import React from 'react'
 
 function Steps() {
   return (
-    <section className="min-h-screen">
-      <h1>Steps</h1>
+    <section className="min-h-screen bg-[#2D6A3F] flex flex-col">
+      <div className='flex justify-center mt-40'>
+        <h1 className='font-micu text-white text-5xl'>APPLICATION STEPS</h1>
+      </div>
+      <div className="mt-8 h-1 w-250 bg-white ml-65"></div>
+      <div className="flex w-full items-start justify-center mt-20 px-10 gap-x-24">
+        <div className="flex flex-col items-start justify-start">
+          <div className="relative flex h-30 w-30 items-center justify-center border-2 border-black bg-[#f7f3e9] text-8xl font-libre-caslon-condensed shadow-[6px_6px_0px_0px_black]">
+            1
+          </div>
+          <p className="mt-3 w-44 font-libre-caslon-condensed text-[#f7f3e9] text-lg">
+            APPLICATION
+          </p>
+          <p className="mt-3 w-44 font-libre-caslon-condensed text-[#f7f3e9]">
+            Fill out the application at <a href="https://bit.ly/GW26-T1-Application" target="_blank" rel="noopener noreferrer"><u>bit.ly/GW26-T1-Application</u></a> by Saturday, placeholder date.
+          </p>
+        </div>
+        <div className="flex flex-col items-start justify-start">
+          <div className="relative flex h-30 w-30 items-center justify-center border-2 border-black bg-[#f7f3e9] text-8xl font-libre-caslon-condensed shadow-[6px_6px_0px_0px_black]">
+            2
+          </div>
+          <p className="mt-3 w-44 font-libre-caslon-condensed text-[#f7f3e9] text-lg">
+            EXAMINATION
+          </p>
+          <p className="mt-3 w-44 font-libre-caslon-condensed text-[#f7f3e9]">
+            Fill out the application at <a href="https://bit.ly/GW26-T1-Application" target="_blank" rel="noopener noreferrer"><u>bit.ly/GW26-T1-Application</u></a> by Saturday, placeholder date.
+          </p>
+        </div>
+        <div className="flex flex-col items-start justify-start">
+          <div className="relative flex h-30 w-30 items-center justify-center border-2 border-black bg-[#f7f3e9] text-8xl font-libre-caslon-condensed shadow-[6px_6px_0px_0px_black]">
+            3
+          </div>
+          <p className="mt-3 w-44 font-libre-caslon-condensed text-[#f7f3e9] text-lg">
+            COMMITTEE HEAD INTERVIEW
+          </p>
+          <p className="mt-3 w-44 font-libre-caslon-condensed text-[#f7f3e9]">
+            Fill out the application at <a href="https://bit.ly/GW26-T1-Application" target="_blank" rel="noopener noreferrer"><u>bit.ly/GW26-T1-Application</u></a> by Saturday, placeholder date.
+          </p>
+        </div>
+        <div className="flex flex-col items-start justify-start">
+          <div className="relative flex h-30 w-30 items-center justify-center border-2 border-black bg-[#f7f3e9] text-8xl font-libre-caslon-condensed shadow-[6px_6px_0px_0px_black]">
+            4
+          </div>
+          <p className="mt-3 w-44 font-libre-caslon-condensed text-[#f7f3e9] text-lg">
+            EXECUTIVE EDITOR INTERVIEW
+          </p>
+          <p className="mt-3 w-44 font-libre-caslon-condensed text-[#f7f3e9]">
+            Fill out the application at <a href="https://bit.ly/GW26-T1-Application" target="_blank" rel="noopener noreferrer"><u>bit.ly/GW26-T1-Application</u></a> by Saturday, placeholder date.
+          </p>
+        </div>
+      </div>
     </section>
   )
 }

src/components/t3-recweek/DateCard.tsx

@@ -0,0 +1,15 @@
+
+export default function DateCard(
+  { title, dateRange }: { title: string; dateRange: string }
+) {
+  return (
+    <div className="group flex flex-col md:flex-row md:items-center md:justify-between border-b-2 border-b-[#B34865] px-2 py-4 cursor-pointer">
+      <h3 className="font-futura-bold text-[#B34865] font-bold text-xl md:text-lg lg:text-xl transition-all duration-300 group-hover:text-2xl md:group-hover:text-xl lg:group-hover:text-2xl">
+        {title}
+      </h3>
+      <p className="font-futura-bold text-[#48B39A] text-lg md:text-base lg:text-lg transition-all duration-300 group-hover:text-xl md:group-hover:text-lg lg:group-hover:text-xl">
+        {dateRange}
+      </p>
+    </div>
+  )
+}

src/components/t3-recweek/FaqDropdown.tsx

@@ -0,0 +1,42 @@
+import { useState, useRef, useEffect } from "react"
+import { ChevronUp } from "lucide-react";
+import { ReactNode } from "react"
+
+export default function FaqDropdown(
+  { question, answer }: { question: string; answer: ReactNode }
+) {
+  const [isOpen, setIsOpen] = useState(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [height, setHeight] = useState(0)
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setHeight(isOpen ? contentRef.current.scrollHeight : 0)
+    }
+  }, [isOpen])
+
+  return (
+    <div className="flex flex-col border-b-2 border-b-[#B34865] px-2 py-4 cursor-pointer" onClick={() => setIsOpen(!isOpen)}>
+      <div className="flex flex-row items-center justify-between">
+        <h3 className={`font-futura-bold transition-all duration-300 ${isOpen ? "text-[#48B39A] text-2xl md:text-xl lg:text-2xl" : "text-[#B34865] text-xl md:text-lg lg:text-xl"}`}>
+          {question}
+        </h3>
+        <span
+          className="text-[#B34865] font-bold text-xl transition-transform duration-300"
+          style={{ transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" }}
+        >
+          <ChevronUp />
+        </span>
+      </div>
+      <div
+        ref={contentRef}
+        className="overflow-hidden transition-all duration-300 ease-in-out"
+        style={{ height: `${height}px` }}
+      >
+        <div className="font-futura-medium text-[#B34865] text-lg md:text-base lg:text-lg mt-2">
+          {answer}
+        </div>
+      </div>
+    </div>
+  )
+}