Contact Us Page

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package.json

@@ -17,6 +17,7 @@
     "framer-motion": "^5.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.43.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "swr": "^0.5.6",

src/pages/AboutUs/AboutUsPage/index.tsx

@@ -30,7 +30,7 @@ const AboutUsPage = () => {
           Today, apart from providing IT services at our two centres at YIH and AS8, we provide plenty of software
           training workshops and specialised training events catered to the NUS community. Our aim is to provide the NUS
           community with any technology necessary for them to ace their studies and to equip them with the IT skills
-          necessary to excel and differentiate themselves in their future careers.
+          necessary to excel and differentiate themselves in their future careers
         </p>
       </Container>
     </div>

src/pages/Contact/Components/Address.tsx

@@ -0,0 +1,17 @@
+import { DefaultIcon } from "@chakra-ui/react";
+import React from "react";
+import styles from './Contact.module.css';
+
+const Address = () => {
+    return(
+        <div>
+            <h2>YIH Computer Centre</h2>
+            <p>Yusof Ishak House, #03-10</p>
+            <p>National University of Singapore</p>
+            <p> 31 Lower Kent Ridge Road</p>
+            <p> Singapore 119078</p>
+        </div>
+    )
+}
+
+export default Address;

src/pages/Contact/Components/Components.module.css

@@ -0,0 +1,117 @@
+.Contact{
+    font-size: 1.3rem;
+    color: #484848;
+}
+.Main{
+    padding-top: 13vh;
+    padding-left: 13vw;
+    padding-right: 5vw;
+}
+.LinkBar{
+    background-color:white;
+    color: gray;
+    /* padding: 24px 86px; */
+    padding: 2vw 6%;
+    font-weight: 480;
+
+}
+.LinkBar h1{
+    font-weight: 600;
+    font-size: 3.4rem;
+}
+
+.TitleBar{
+    background-color:white;
+    /* padding: 24px 86px; */
+    padding-top: 0vh;
+    padding-left: 6.5%;
+    line-height: 5.5rem;
+
+}
+
+.TitleBar h1{
+    font-weight: 600;
+    font-size: 5.6rem;
+    letter-spacing: -0.4rem;
+}
+
+.NavLinks{
+    display: flex;
+    text-align: left;
+    font-size: 0.75em;
+    padding-top: 2.2vh;
+    padding-bottom: 3.5vh;
+}
+
+.NavLinks p{
+    padding-right: 2.35px;
+}
+
+.Content{
+    padding-top: 13.4vh;
+    padding-left: 5.8vw;
+    padding-right: 10rem;
+    line-height: 1rem
+}
+
+.Content p{
+    margin-bottom: 4.3vh;
+}
+
+.Details{
+    line-height:1rem;
+    margin-bottom: 3rem;
+}
+
+.Details h2{
+    color: #002A56;
+    font-weight: 500;
+    font-size: 1.6rem;
+    margin-bottom: 1.5rem;
+}
+
+.Details p{
+    color: #484848;
+    font-size: 1.25rem;
+    margin-bottom: 2.7vh;
+}
+
+.Details h3{
+    color: #484848;
+    font-size: 0.9rem;
+    margin-top: 5.4vh;
+}
+
+.Details h4{
+    color: #002A56;
+    font-weight: 500;
+    font-size: 1.25rem;
+    margin-top: 2rem;
+    text-decoration: underline #FFB200;
+}
+.Details h4:hover{
+    color: gray;
+    text-decoration: underline gray;
+}
+
+.Details a{
+    color: #4372D6;
+}
+.Details a:visited{
+    color: #551A8B; 
+}
+
+.Mailing{
+    margin-top: 1.5rem;
+}
+
+.Mailing h2{
+    color: #002A56;
+    font-weight: 500;
+    font-size: 1.7rem;
+    margin-bottom: 2rem;
+}
+
+.Space{
+    margin-top: 27vh;
+}

src/pages/Contact/Components/ContactForm.tsx

@@ -0,0 +1,37 @@
+import { DefaultIcon, Container, Select, Input, HStack, VStack, Box, Flex, Grid, StylesProvider,FormControl,
+    FormLabel,
+    FormErrorMessage,
+    FormHelperText,
+    Stack,
+    Button, } from '@chakra-ui/react'
+import  React from "react"
+import { useState } from "react";
+import styles from './Components.module.css'
+import { useForm } from "react-hook-form";
+
+const ContactForm = () => {
+    return(
+        <div className={styles.Mailing}>
+        <h2>Subscribe to our mailing list</h2>
+        <Stack spacing={10}>
+            <FormControl>
+            <FormLabel>Email address</FormLabel>
+            <Input type='email' />
+            </FormControl>
+            <FormControl>
+            <FormLabel>Current Year in NUS</FormLabel>
+            <Select>
+                <option value='option1'>Year 1</option>
+                <option value='option2'>Year 2</option>
+                <option value='option3'>Year 3</option>
+                <option value='option3'>Year 4</option>
+                <option value='option3'>Others</option>
+            </Select>
+            <Button width={'20%'} colorScheme={'yellow'}>Subscribe</Button>
+        </FormControl>
+        </Stack>
+      </div>
+    )
+}
+
+export default ContactForm;

src/pages/Contact/Components/ContactUs.tsx

@@ -0,0 +1,19 @@
+import { DefaultIcon } from "@chakra-ui/react";
+import React from "react";
+import styles from './Contact.module.css';
+
+const ContactUs = () => {
+    return(
+        <div>
+            <h2>Contact Us</h2>
+            <p><b>General Enquiries</b></p>
+            <p>+65 6601 1345</p>
+            <a href='mailto:commit@nussu.org.sg'>commit@nussu.org.sg</a>
+            <h2></h2>
+            <p><b>Marketing & Sponsorship Enquiries</b></p>
+            <a href='mailto:marketing@nussucommit.com'>marketing@nussucommit.com</a>
+        </div>
+    )
+}
+
+export default ContactUs;

src/pages/Contact/Components/Form.tsx

@@ -0,0 +1,90 @@
+import { useForm } from 'react-hook-form'
+import {
+  FormErrorMessage,
+  FormLabel,
+  FormControl,
+  Input,
+  Button,
+  Select,
+  Stack,
+} from '@chakra-ui/react'
+import styles from './Components.module.css'
+
+export default function HookForm() {
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm()
+
+
+  function onSubmit(values: any) {
+    values['year'] = +values['year']
+    fetch('http://127.0.0.1:8000/subscribe/', {  // Enter your IP address here
+
+      method: 'POST', 
+      mode: 'cors', 
+      body: JSON.stringify(values) // body data type must match "Content-Type" header
+
+    })
+
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        alert('subscribed!')
+        resolve()
+      }, 3000)
+    })
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+        <div className={styles.Mailing}>
+        <h2>Subscribe to our mailing list</h2>
+        </div>
+      <FormControl invalid={errors.name}>
+        <Stack spacing={5}>
+            <div>
+                <FormLabel htmlFor='name'>Email Address</FormLabel>
+                <Input
+                id='email'
+                placeholder='Email'
+                {...register('email', {
+                    required: 'This is required',
+                })}
+                />
+            </div>
+            <div>
+                <FormLabel>Current Year in NUS</FormLabel>
+                    <Select
+                    id= 'year'
+                    {...register('year', {
+                        required: 'This is required'
+                    })}>
+                        <option value='1'>Year 1</option>
+                        <option value='2'>Year 2</option>
+                        <option value='3'>Year 3</option>
+                        <option value='4'>Year 4</option>
+                        <option value='5'>Others</option>
+                    </Select>
+            </div>
+            <div>
+                <FormLabel>Full Name</FormLabel>
+                <Input
+                id='name'
+                placeholder='Full Name'
+                {...register('name', {
+                    required: 'This is required',
+                })}
+                />
+            </div>
+        <FormErrorMessage>
+          {errors.name && errors.name.message}
+        </FormErrorMessage>
+        </Stack>
+      </FormControl>
+      <Button mt={4} colorScheme='yellow' isLoading={isSubmitting} type='submit'>
+        Subscribe
+      </Button>
+    </form>
+  )
+}

src/pages/Contact/Components/OperatingHours.tsx

@@ -0,0 +1,17 @@
+import { DefaultIcon } from "@chakra-ui/react";
+import React from "react";
+import styles from './Contact.module.css';
+
+const OperatingHours = () => {
+    return(
+        <div>
+            <h2>Operating Hours</h2>
+            <p><b>Monday - Friday:</b> 08:30 - 19:00</p>
+            <p><b>Saturday:</b> 08:30 - 15:00</p>
+            <p>Closed on Sundays and public holidays</p>
+            <h3>Note: Our operating hours are shorter due to the university vacation</h3>
+        </div>
+    )
+}
+
+export default OperatingHours;