Cw2-18 Improve Semantic HTML

components/About/index.tsx

@@ -5,7 +5,7 @@ const About = () => {
     <section className="py-8 xl:px-24 sm:px-10 px-5" id="about">
       <div className="text-center my-10">
         <p className="text-[#3977F8] font-game text-xl">01</p>
-        <h1 className="font-bold text-6xl">ABOUT</h1>
+        <h2 className="font-bold text-6xl">ABOUT</h2>
       </div>
       <div className="flex justify-center items-center">
         <div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
@@ -14,7 +14,7 @@ const About = () => {
             <div className="flex items-center justify-center">
               <Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
             </div>
-            <h1 className="mt-10 text-3xl font-extrabold">CSESoc</h1>
+            <h2 className="mt-10 text-3xl font-extrabold">CSESoc</h2>
             <p className="text-[#727B8C] font-medium">unsw-computer-science-soc</p>
             <button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
             <p>
@@ -40,7 +40,7 @@ const About = () => {
           </div>
           {/* RIGHT SIDE */}
           <div className="col-span-4 lg:mt-0 mt-10">
-            <div className="rounded border border-[#595F6D] p-5 2xl:h-80 xl:h-64 lg:h-48 sm:h-36 h-32 h-full">
+            <div className="rounded border border-[#595F6D] p-5 2xl:h-80 xl:h-64 lg:h-48 sm:h-36 h-full">
               <p className="text-xs">
                 csesoc/README<span className="text-[#7A8192]">.md</span>
               </p>

components/Event/index.tsx

@@ -1,5 +1,19 @@
-const Event = () => {
-  return <section></section>;
-};
-
-export default Event;
+const Event = () => {
+  return (
+    <section className="py-8 xl:px-24 sm:px-10 px-5" id="events">
+      <div className="text-center my-10">
+        <p className="text-[#3977F8] font-game text-xl">02</p>
+        <h1 className="font-bold text-6xl">EVENTS</h1>
+      </div>
+      <div className="flex items-center">
+        <p className="text-center text-3xl">
+          We run a wide-variety of events for fun, learning new skills and careers. For full
+          listings, check out the CSESoc Discord or our Facebook page!
+        </p>
+        <div className="bg-blue-500 w-4/5 h-96 ml-80">Placeholder</div>
+      </div>
+    </section>
+  );
+};
+
+export default Event;

components/Footer.tsx

@@ -1,13 +1,14 @@
+import Image from 'next/image';
 import Link from 'next/link';
 
 const Footer = () => {
   return (
     <section>
       <div className="sm:flex justify-between">
         <div className="flex items-center">
-          <img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
+          <Image src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
           <Link href="/flag/ollie_is_hiding.png" target="_blank" className="sm:hidden block">
-            <img
+            <Image
               src="/flag/ollie_is_hiding.png"
               alt="Ollie"
               draggable="false"
@@ -16,7 +17,7 @@ const Footer = () => {
               className="ml-10"
             />
           </Link>
-          <img
+          <Image
             src="/flag/ollie_is_hiding.png"
             alt="Ollie"
             draggable="false"
@@ -30,7 +31,7 @@ const Footer = () => {
           <p>© 2021 — CSESoc UNSW</p>
         </div>
       </div>
-      <img
+      <Image
         src="assets/sponsors_backdrop.svg"
         alt="Sponsors backdrop"
         className="absolute bottom-0 left-0 w-screen -z-10"

components/Landing/index.tsx

@@ -13,7 +13,7 @@ const Landing = () => {
         <div>
           <div className="font-semibold">
             <p>{'<h1>'}</p>
-            <h1 className="font-black 2xl:text-8xl lg:text-6xl text-4xl">Hello World!</h1>
+            <h2 className="font-black 2xl:text-8xl lg:text-6xl text-4xl">Hello World!</h2>
             <p>{'</h1>'}</p>
           </div>
           <div className="font-semibold mt-10">

components/ResourcesAndContacts/index.tsx

@@ -15,7 +15,7 @@ const ResourcesAndContacts = () => {
 
           <div className="text-center my-10">
             <p className="text-[#3977F8] font-game text-xl">03</p>
-            <h1 className="font-bold text-6xl">RESOURCES & CONTACTS</h1>
+            <h2 className="font-bold text-6xl">RESOURCES & CONTACTS</h2>
           </div>
 
           <div className="py-8 bg-no-repeat bg-center">
@@ -122,23 +122,41 @@ const ResourcesAndContacts = () => {
         <div className="md:mt-10 mt-5">
           <div className="grid grid-cols-3 1 gap-x-9 gap-y-5 mb-10">
             <a href="https://bit.ly/CSESocDiscord" target="_blank" className={socialsBoxStyling}>
-              <Image src="assets/discord_logo.svg" alt="" width={25} height={25} className="mr-1" />
+              <Image
+                src="assets/discord_logo.svg"
+                alt="discord logo"
+                width={25}
+                height={25}
+                className="mr-1"
+              />
               <p className="text-xl font-bold m-2">DISCORD</p>
             </a>
             <a
               href="https://www.facebook.com/csesoc/"
               target="_blank"
               className={socialsBoxStyling}
             >
-              <Image src="assets/fb_logo.svg" alt="" width={25} height={25} className="mr-1" />
+              <Image
+                src="assets/fb_logo.svg"
+                alt="facebook logo"
+                width={25}
+                height={25}
+                className="mr-1"
+              />
               <p className="text-xl font-bold m-2">FACEBOOK</p>
             </a>
             <a
               href="https://www.facebook.com/groups/csesoc"
               target="_blank"
               className={socialsBoxStyling}
             >
-              <Image src="assets/group_icon.svg" alt="" width={25} height={25} className="mr-1" />
+              <Image
+                src="assets/group_icon.svg"
+                alt="facebook group"
+                width={25}
+                height={25}
+                className="mr-1"
+              />
               <p className="text-xl font-bold m-2">FACEBOOK GROUP</p>
             </a>
           </div>