added AboutHomepage and removed pinned. Replaced About with AboutHome…

…page in index.tsx

frontend/src/components/About/AboutHomepage.tsx

@@ -0,0 +1,59 @@
+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="mt-10 text-3xl font-extrabold">CSESoc</h2>
+                <p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
+                <button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
+                <p>
+                  CSESoc is the principal representative body for UNSW computing students.
+                </p>
+                <div className="my-4 flex gap-5">
+                  <Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
+                  <div>
+                    432 <span className="text-[#727B8C]">members</span> · 342{' '}
+                    <span className="text-[#727B8C]">subcom</span>
+                  </div>
+                </div>
+                <div className="my-4 flex gap-5">
+                  <Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
+                  Sydney, Australia
+                </div>
+                <div className="flex gap-5">
+                  <Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
+                  info@csesoc.org.au
+                </div>
+              </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.
+                  </p>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </section>
+      );
+}

frontend/src/components/Resources/index.tsx

@@ -12,14 +12,12 @@ const Resources = () => {
       <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">
             <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
@@ -29,7 +27,13 @@ const Resources = () => {
                     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>
@@ -47,8 +51,14 @@ const Resources = () => {
                     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>
@@ -66,8 +76,15 @@ const Resources = () => {
                     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/pages/index.tsx

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