Merge pull request #31 from NUSComputingDev/KAN-28-Elections

Update election contents + add role image

package.json

@@ -14,6 +14,7 @@
     "@headlessui/react": "^2.1.2",
     "@heroicons/react": "^1.0.6",
     "clsx": "^2.1.1",
+    "comclub-website-2024": "file:",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.3.21",
     "react": "^18.2.0",

src/pages/elections/Faq.tsx

@@ -7,7 +7,7 @@ import { FAQ } from './constants';
 function Faq() {
   return (
     <div
-      className='w-full mx-auto px-5 py-4 bg-white h-full'
+      className='w-full mx-auto px-5 py-8 bg-white h-full'
       id='faq-section'
     >
       <div className='flex flex-col items-center faq'>

src/pages/elections/Process.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import './index.css';
+
+function ElectionsProcess() {
+  return (
+    <div className='w-full mx-auto px-5 py-8 bg-white h-full'>
+      <div className='flex flex-col items-center process'>
+        <h1>Nominations</h1>
+        <p className='text-neutral-500 text-xl mt-3 text-center'>
+            Learn more about how you can apply today.
+        </p>
+      </div>
+      {/* NOMINATION PROCESS */}
+      <div className='my-10 md:w-[45%] w-full flex justify-center flex-col mx-auto'>
+        <p className='text-2xl font-bold mb-4 text-primary'>Nominations Process</p>
+        <div className='ml-4'>
+          <ol className='list-decimal space-y-4'>
+            <li>
+              Nomination period: <b><u>12 - 18 August 2024 (1200H)</u></b>
+            </li>
+            <li>
+              Only a Club Member<strong className='text-red-600'>*</strong> shall be eligible to be nominated for an election.
+            </li>
+            <li>
+              As a member of the NUS Students' Computing Club, you have 2 options<strong className='text-red-600'>**</strong>:
+              <ol type='a' className='list-inside ml-8 mt-2 space-y-2' style={{ listStyle: 'lower-alpha' }}>
+                <li>Run as a Management Committee Member</li>
+                <li>Run as a NUSSU EXCO Representative</li>
+              </ol>
+
+            </li>
+            <li>
+              The Election Committee shall prescribe a procedure for Club Members to follow in order to be nominated for the election. This procedure shall adhere to the following:
+              <ol type='a' className='list-inside ml-8 mt-2 space-y-1' style={{ listStyle: 'lower-alpha' }}>
+                <li>Any nomination of a Club Member shall be endorsed by a Proposer and a Seconder who must both be Club Members;</li>
+                <li>A Club Member shall not be the Proposer or the Seconder for his own nomination;</li>
+                <li>The Club Member being nominated must accept the nomination in writing before being considered a Nominee.</li>
+              </ol>
+            </li>
+            <li>
+              You are NOT eligible for this election if you are:
+              <ol type='a' className='list-inside ml-8 mt-2 space-y-2' style={{ listStyle: 'lower-alpha' }}>
+                <li>Guilty of a disciplinary offence</li>
+                <li>Under academic warning or probation</li>
+              </ol>
+            </li>
+          </ol>
+          <p className='text-red-600 mt-4'><strong>*</strong> All full-time undergraduate students in the School of Computing are members of the NUS Students' Computing Club by default.</p>
+          <p className='text-red-600 mt-1'><strong>**</strong> You may not run for both positions concurrently.</p>
+        </div>
+      </div>
+
+      <div className='border-t border-gray-300 my-10 w-full md:w-[48%] mx-auto'></div>
+
+      {/* NOMINATION FOR MANAGEMENT COMMITTEE MEMBER */}
+      <div className='my-10 md:w-[45%] w-full flex justify-center flex-col mx-auto'>
+        <p className='text-2xl font-bold mb-4 text-primary'>Nomination for Management Committee Member</p>
+        <div className='ml-4'>
+          <ol className='list-decimal space-y-4'>
+            <li>
+              Candidates are required to submit the following documents to <a href='mailto:[email protected]' className='text-[#e58e26]'><strong>[email protected]</strong></a> by <b><u>18 August 2024, 1200H</u></b>:
+              <ol type='a' className='list-inside ml-8 mt-2 space-y-2' style={{ listStyle: 'lower-alpha' }}>
+                <li><a href='/elections/27th Management Committee Nominee Application FormA.docx' target='_blank' className='text-red-600'><strong>Nominee Agreement Form (Form A)</strong></a></li>
+                <li><a href='/elections/27th Management Committee Nominee Application FormB.docx' target='_blank' className='text-red-600'><strong>Nominee Agreement Form (Form B)</strong></a></li>
+              </ol>
+            </li>
+            <li>
+              Candidates must declare the primary position they are contesting for. Declaring a secondary position will be optional. A Nominee will not be allowed to change their primary position after the end of the nomination period. A Nominee can change their secondary position up till the Internal Elections.
+            </li>
+          </ol>
+        </div>
+      </div>
+
+      <div className='border-t border-gray-300 my-10 w-full md:w-[48%] mx-auto'></div>
+
+      {/* NOMINATION FOR NUSSU EXCO REPRESENTATIVE */}
+      <div className='my-10 md:w-[45%] w-full flex justify-center flex-col mx-auto'>
+        <p className='text-2xl font-bold mb-4 text-primary'>Nomination for NUSSU EXCO Representative</p>
+        <div className='ml-4'>
+          <ol className='list-decimal space-y-3'>
+            <li>
+              Candidates are required to submit the following documents to <a href='mailto:[email protected]' className='text-[#e58e26]'><strong>[email protected]</strong></a> by <b><u>18 August 2024, 1200H</u></b>:
+              <ol type='a' className='list-inside ml-8 mt-2 space-y-1' style={{ listStyle: 'lower-alpha' }}>
+                <li><a href='/elections/46th EXCO REPRESENTATIVE NOMINATION FORM.docx' target='_blank' className='text-red-600'><strong>46th EXCO Representative Nomination</strong></a></li>
+              </ol>
+            </li>
+            <li>
+              Candidates must get an outgoing elected member of the Constituent Club Management Committee to indicate that the candidate has consulted with the member(s) of the Constituent Club Management Committee to sign the nomination form.
+            </li>
+            <li>
+              Consultation will be on the expected roles and duties to be undertaken as a NUSSU Executive Committee Representative. In order to provide a more holistic view of the expected roles and duties, the consultation will be limited to elected members of the Presidential Wing<strong className='text-red-600'>***</strong>
+            </li>
+          </ol>
+          <p className='text-red-600 mt-4'><strong>***</strong> The full list of members can be found in the AY 2024/2025 NUSSU Students' Computing Club Election Standing Orders under the <a href='#documents-section' className='text-blue-600 underline'>documents</a>.</p>
+        </div>
+      </div>
+
+      <div className='border-t border-gray-300 my-10 mx-auto md:w-[48%] w-full'></div>
+
+      {/* CAMPAIGN PROCESS */}
+      <div className='my-10 md:w-[45%] w-full flex justify-center flex-col mx-auto'>
+        <p className='text-2xl font-bold mb-4 text-primary'>Campaign Process</p>
+        <div className='ml-4'>
+          <ol className='list-decimal space-y-4'>
+            <li>Campaign period: <b><u>20 - 26 August 2024</u></b></li>
+            <li>Nominees are to abide by the rules and regulations laid out in the <a href='#documents-section' className='text-blue-600 underline'>Computing Club Election Standing Orders.</a></li>
+            <li>A live-broadcasted physical campaign speech + Q&A will be held on <b><u>22 - 24 August 2024</u></b>.</li>
+            <li>All Nominees are required to prepare a set of slides based on the following statements:
+              <ol className='list-decimal list-inside ml-6 mt-2 space-y-3'>
+                <li>A general introduction about yourself</li>
+                <li>Which role do you wish to take up and why?</li>
+                <li>What relevant past experiences (if any) do you have?</li>
+                <li>What qualities do you possess that make you suitable for this role?</li>
+                <li>What are your goals and how do you intend to achieve them?</li>
+              </ol>
+            </li>
+            <li>You may include any additional information that supports your campaign.</li>
+            <li>More information regarding the physical speech will be released via a confirmation email.</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ElectionsProcess;

src/pages/elections/Regulations.tsx

@@ -1,17 +1,52 @@
 import React from 'react';
 import './index.css';
-import { regulationsData } from './constants';
+import { informationalData, nominationsFormsData, regulationsData } from './constants';
 
-function Regulations() {
+function Documents() {
   return (
-    <div className='w-full mx-auto px-5 py-4 bg-white h-full' id='regulations-section'>
+    <div className='w-full mx-auto px-5 py-8 bg-white h-full' id='documents-section'>
       <div className='flex flex-col items-center regulations'>
-        <h1>Regulations</h1>
+        <h1>Documents</h1>
         <p className='text-neutral-500 text-xl mt-3 text-center'>
-          Last updated as of 2 August, 2024.
+          Last updated as of 12 August, 2024.
         </p>
       </div>
       <div className='grid divide-y divide-neutral-200 max-w-xl mx-auto mt-8'>
+        <p className='text-[#e58e26] text-xl font-semibold mb-2 leading-12'>Nomination Forms</p>
+        {nominationsFormsData.map((regulation, index) => (
+          <div key={index} className='py-5 flex items-center'>
+            <div className='mr-4'>
+              <i className='fa-solid fa-link' style={{ color: regulation.color }}></i>
+            </div>
+            <p className='pt-text'>
+              <a href={regulation.link} className='text-black no-underline
+                hover:underline' target='_blank' rel='noopener noreferrer'>
+                {regulation.title}
+              </a>
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className='grid divide-y divide-neutral-200 max-w-xl mx-auto mt-8'>
+        <p className='text-[#e58e26] text-xl font-semibold mb-2 leading-12'>Informational Docs</p>
+        {informationalData.map((regulation, index) => (
+          <div key={index} className='py-5 flex items-center'>
+            <div className='mr-4'>
+              <i className='fa-solid fa-link' style={{ color: regulation.color }}></i>
+            </div>
+            <p className='pt-text'>
+              <a href={regulation.link} className='text-black no-underline
+                hover:underline' target='_blank' rel='noopener noreferrer'>
+                {regulation.title}
+              </a>
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className='grid divide-y divide-neutral-200 max-w-xl mx-auto mt-8'>
+        <p className='text-[#e58e26] text-xl font-semibold mb-2 leading-12'>Standing Orders and Regulations</p>
         {regulationsData.map((regulation, index) => (
           <div key={index} className='py-5 flex items-center'>
             <div className='mr-4'>
@@ -30,4 +65,4 @@ function Regulations() {
   );
 }
 
-export default Regulations;
+export default Documents;

src/pages/elections/Roles.tsx

@@ -3,6 +3,8 @@
 import React from 'react';
 import './index.css';
 import { wingsData } from './constants';
+import WindowCard from '../../layout/WindowCard';
+import { FaArrowUpRightFromSquare } from "react-icons/fa6";
 
 function Roles() {
   return (
@@ -16,6 +18,13 @@ function Roles() {
           Learn more about the roles available in the NUS Students' Computing
           Club.
         </p>
+        <div className='mt-8 mb-4'>
+          <WindowCard content={
+            <div className='flex justify-center items-center'>
+              <img src='/elections/roles.jpg' className='object-cover min-w-40 max-h-[30rem] p-2'></img>
+            </div>
+          }></WindowCard>
+        </div>
       </div>
       <div className='grid divide-y divide-neutral-200 max-w-xl mx-auto mt-8'>
         {wingsData.map((wing, index) => (
@@ -68,6 +77,10 @@ function Roles() {
           </div>
         ))}
       </div>
+      <div className='flex flex-row justify-center items-center mt-4 text-[#e58e26]'>
+        <a href='/elections/27th Computing Club Elections Info Pamphlet.pdf' target='_blank' className=' font-semibold text-2xl underline'>Find out more</a>
+        <FaArrowUpRightFromSquare className='ml-2'/>
+      </div>
     </div>
   );
 };

src/pages/elections/Timeline.tsx

@@ -3,7 +3,7 @@ import { TimelineEvents } from './constants';
 
 function Timeline() {
   return (
-    <div className='relative h-full mt-4'>
+    <div className='relative h-full mt-4 mb-8'>
       <div className='max-w-5xl py-4 mx-auto'>
         <div className='grid gap-4 sm:grid-cols-12'>
           <div className='col-span-12 sm:col-span-3'>