[CW2-33] Organise Landing Page

frontend/src/components/About/AboutHomepage.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link";
+import Image from "next/image";
+export default function AboutHomePage() {
+    return (
+        <section className="py-8 xl:px-24 sm:px-10 px-5" id="about">
+          <div className="text-center my-10">
+            <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]">
+              {/* LEFT SIDE */}
+              <div className="col-span-2 md:mx-5">
+                <div className="flex items-center justify-center">
+                  <Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
+                </div>
+                <h2 className="text-3xl font-extrabold">CSESoc</h2>
+                <button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
+              </div>
+              {/* RIGHT SIDE */}
+              <div className="col-span-4 lg:mt-0 mt-10">
+                <div className="rounded border border-[#595F6D] p-5 h-auto">
+                  <p className="text-xs">
+                    csesoc/README<span className="text-[#7A8192]">.md</span>
+                  </p>
+                  <p className="mt-5">
+                    CSESoc is one of the biggest and most active societies at UNSW, catering to over 3500 CSE
+                    students spanning across degrees in Computer Science, Software Engineering,
+                    Bioinformatics and Computer Engineering. 
+                    <br/><br/>
+                    We are here to fulfil the social, personal and 
+                    professional needs of CSE students, and promote computing through a variety of forms.
+                    <br/><br/>
+                    Learn more <a href="about" className="text-[#3977F9]">about us!</a>
+                  </p>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      );
+}

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 text-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>
+        <a href="events">
+                <button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[60%] 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/Resources/index.tsx

@@ -3,7 +3,7 @@
 
 const boxStyling =
   'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
 const socialsBoxStyling =
   'xl:col-span-1 col-span-3 flex justify-center pt-2 pb-2 border border-[#595F6D] hover:border-[#788093] rounded-lg hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
 
 const Resources = () => {
@@ -12,15 +12,12 @@
       <div className="2xl:w-[90rem] xl:w-[75rem] w-[90%]">
         <div className="relative">
           <Image src="assets/resources_bg.svg" alt="Background" className="-z-50 absolute" fill />
-
           <div className="text-center my-10">
-            <p className="text-[#3977F8] font-game text-xl">03</p>
             <h2 className="font-bold text-6xl">RESOURCES</h2>
           </div>
 
           <div className="py-8 bg-no-repeat bg-center">
             <div className="grid grid-cols-4 1 gap-x-9 gap-y-5">
-
               {stage1.map((item: resourceCards) => {
                 return (
                   <a
@@ -30,7 +27,13 @@
                     className={`col-span-4 p-5 ${boxStyling} flex`}
                   >
                     <div className="flex justify-center align-middle items-center pl-2 pr-10">
-                      <Image src={item.svg} alt={item.alt} draggable="false" width={item.width} height={item.height}/>
+                      <Image
+                        src={item.svg}
+                        alt={item.alt}
+                        draggable="false"
+                        width={item.width}
+                        height={item.height}
+                      />
                     </div>
                     <div>
                       <h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>
@@ -48,8 +51,14 @@
                     target="_blank"
                     className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
                   >
-                    <div className='flex align-middle items-center pt-2 pb-4'>
-                      <Image src={item.svg} alt={item.alt} draggable="false" width={item.width} height={item.height}/>
+                    <div className="flex align-middle items-center pt-2 pb-4">
+                      <Image
+                        src={item.svg}
+                        alt={item.alt}
+                        draggable="false"
+                        width={item.width}
+                        height={item.height}
+                      />
                     </div>
                     <div>
                       <h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>
@@ -67,8 +76,15 @@
                     target="_blank"
                     className={`md:col-span-2 col-span-4 p-5 ${boxStyling} flex`}
                   >
-                    <div className='flex align-middle items-center pt-2 pb-4 pr-10'>
-                      <Image src={item.svg} alt={item.alt} draggable="false" width={item.width} height={item.height} className='rounded-md'/>
+                    <div className="flex align-middle items-center pt-2 pb-4 pr-10">
+                      <Image
+                        src={item.svg}
+                        alt={item.alt}
+                        draggable="false"
+                        width={item.width}
+                        height={item.height}
+                        className="rounded-md"
+                      />
                     </div>
                     <div>
                       <h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>

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/contact-us.tsx

@@ -8,7 +8,6 @@ export default function ContactUs() {
       <Navbar />
       <section className="py-8 xl:px-24 sm:px-10 px-5" id="contact-us">
         <div className="text-center my-10">
-          <p className="text-[#3977F8] font-game text-xl">05</p>
           <h1 className="font-bold text-6xl">CONTACT US</h1>
         </div>
 
@@ -54,10 +53,6 @@ export default function ContactUs() {
               </a>
               .
             </p>
-            {/* <iframe
-              className="w-1/2 h-[80vh] self-center"
-              src="https://forms.gle/7kk3RRBJbXo3Sip86"
-            ></iframe> */}
           </li>
         </ul>
 

frontend/src/pages/index.tsx

@@ -1,16 +1,14 @@
 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';
+import AboutHomePage from '@/components/About/AboutHomepage';
 
 export default function Home() {
   return (
     <section>
-      <Landing/>
-      <About/>
-      <Event/>
-      <Resources />
+      <Landing />
+      <AboutHomePage />
+      <Event />
       <Sponsors />
     </section>
   );