[CW2-33] Organise Landing Page

frontend/src/components/About/index.tsx

@@ -5,7 +5,6 @@ const About = () => {
   return (
     <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>
         <h2 className="font-bold text-6xl">ABOUT</h2>
       </div>
       <div className="flex justify-center items-center">

frontend/src/components/Event/index.tsx

@@ -2,14 +2,20 @@ 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>
+        <h1 className="font-bold text-6xl">UPCOMING EVENTS</h1>
       </div>
       <div className="flex items-center">
+        <div className="flex flex-col">
         <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>
+        <a href="events">
+                <button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10">
+                  See all events
+                </button>
+              </a>
+        </div>
         <div className="bg-blue-500 w-4/5 h-96 ml-80">Placeholder</div>
       </div>
     </section>

frontend/src/components/Landing/index.tsx

@@ -25,22 +25,6 @@ const Landing = () => {
             <p>{'</h2>'}</p>
           </div>
         </div>
-        <div className="w-72 font-semibold text-xl lg:block hidden">
-          <p className="font-bold bg-[#3977F8] inline px-3 py-1">STATS</p>
-          <hr className="mb-3 mt-5" />
-          <div className="flex justify-between">
-            <p>323,000</p>
-            <p>Members</p>
-          </div>
-          <div className="flex justify-between">
-            <p>300</p>
-            <p>Team Members</p>
-          </div>
-          <div className="flex justify-between">
-            <p>52</p>
-            <p>Events held</p>
-          </div>
-        </div>
       </div>
     </section>
   );

frontend/src/components/Navbar.tsx

@@ -24,26 +24,21 @@ const Navbar = () => {
         <p className="mt-3 text-xs">C:\INTERNAL STRUCTURE\{path}</p>
       </Link>
       <div>
-        <div className="md:flex xl:gap-36 lg:gap-20 md:gap-10 text-right font-bold hidden">
+        <div className="md:flex xl:gap-18 lg:gap-10 md:gap-5 text-right font-bold hidden">
           <Link href="/about">
-            <p className="text-[0.6rem] text-[#C4C5C8]">01</p>
-            <div>{'//'} about us</div>
+            <div className="text-xl">{'//'} about us</div>
           </Link>
           <Link href="/events">
-            <p className="text-[0.6rem] text-[#C4C5C8]">02</p>
-            <div>{'//'} events</div>
+            <div className="text-xl">{'//'} events</div>
           </Link>
           <Link href="/resources">
-            <p className="text-[0.6rem] text-[#C4C5C8]">03</p>
-            <div>{'//'} resources</div>
+            <div className="text-xl">{'//'} resources</div>
           </Link>
           <Link href="/sponsors">
-            <p className="text-[0.6rem] text-[#C4C5C8]">04</p>
-            <div>{'//'} sponsors</div>
+            <div className="text-xl">{'//'} sponsors</div>
           </Link>
           <Link href="/contact-us">
-            <p className="text-[0.6rem] text-[#C4C5C8]">05</p>
-            <div>{'//'} contact us</div>
+            <div className="text-xl">{'//'} contact us</div>
           </Link>
         </div>
         <div className="md:hidden xl:hidden lg:hidden text-right font-bold block">

frontend/src/components/Sponsors/index.tsx

@@ -13,7 +13,6 @@ const Sponsors = () => {
       id="sponsors"
     >
       <div className="text-center">
-        <p className="text-[#3977F8] font-game text-xl">04</p>
         <h2 className="font-bold text-6xl">SUPPORT CSESOC</h2>
       </div>
       <div className="flex-1 flex justify-center items-center my-20">

frontend/src/pages/index.tsx

@@ -2,15 +2,13 @@ import Landing from '@/components/Landing';
 import Sponsors from '@/components/Sponsors/index';
 import About from '@/components/About';
 import Event from '@/components/Event';
-import Resources from '@/components/Resources';
 
 export default function Home() {
   return (
     <section>
-      <Landing/>
-      <About/>
-      <Event/>
-      <Resources />
+      <Landing />
+      <About />
+      <Event />
       <Sponsors />
     </section>
   );