From 7e259991325c9a1ad9e1236d42a5c9bf147069be Mon Sep 17 00:00:00 2001
From: Derek Tran <derektran.dt@gmail.com>
Date: Sun, 10 Sep 2023 22:55:54 +1000
Subject: [PATCH 1/3] Implemented grid design for sponsors.

---
 components/Sponsors/index.tsx | 21 +++++++++++++++++++++
 pages/index.tsx               |  2 ++
 2 files changed, 23 insertions(+)
 create mode 100644 components/Sponsors/index.tsx

diff --git a/components/Sponsors/index.tsx b/components/Sponsors/index.tsx
new file mode 100644
index 0000000..5b26e99
--- /dev/null
+++ b/components/Sponsors/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const Sponsors = () => {
+    return (
+        <section className="flex flex-col min-h-screen py-8 px-24">
+            <div>
+                <p>04</p>
+                <h2>SUPPORT CSESOC</h2>
+            </div>
+            <div className="flex-1 grid grid-cols-10 grid-row-2 py-80 px-64">
+                <div className="bg-blue-300 sponsors col-span-4 row-start-1 row-end-3"></div>
+                <div className="bg-red-300 atlassian col-span-3 row-start-1 row-end-2"></div>
+                <div className="bg-yellow-300 google col-span-3 row-start-1 row-end-2"></div>
+                <div className="bg-pink-300 freelancer col-span-3 row-start-2 row-end-3"></div>
+                <div className="bg-green-300 microsoft col-span-3 row-start-2 row-end-3"></div>
+            </div>
+        </section >
+    )
+}
+
+export default Sponsors
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index ef7dea4..9077f3b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,10 +1,12 @@
 import Image from "next/image";
 import Landing from "@/components/Landing";
+import Sponsors from "@/components/Sponsors";
 
 export default function Home() {
   return (
     <section>
       <Landing />
+      <Sponsors />
     </section>
   );
 }

From 3eb74b5e26b2d61c14d4ac3d0f1defbc5e6b2fd2 Mon Sep 17 00:00:00 2001
From: Derek Tran <derektran.dt@gmail.com>
Date: Mon, 11 Sep 2023 22:38:59 +1000
Subject: [PATCH 2/3] Finished sponsors part -responsiveness

---
 components/Sponsors/index.tsx       | 18 +++++++++---------
 public/assets/sponsors_backdrop.svg |  9 +++++++++
 2 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 public/assets/sponsors_backdrop.svg

diff --git a/components/Sponsors/index.tsx b/components/Sponsors/index.tsx
index 29821ee..c266554 100644
--- a/components/Sponsors/index.tsx
+++ b/components/Sponsors/index.tsx
@@ -2,18 +2,18 @@ import React from 'react'
 
 const Sponsors = () => {
     return (
-        <section className="flex flex-col min-h-screen py-8 px-24">
+        <section className="flex flex-col min-h-screen py-8 px-24 relative">
             <div>
                 <p className="text-[#3977F8] font-game text-xl">04</p>
                 <h2 className="font-bold text-7xl">SUPPORT CSESOC</h2>
             </div>
             <div className="flex-1 flex justify-center items-center">
                 <div style={{ backgroundImage: 'radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)' }} className="overflow-hidden rounded-[4rem] h-[35rem] w-[90rem] grid grid-cols-10 grid-row-2">
-                    <div className="flex flex-col justify-center items-center col-span-4 row-start-1 row-end-3 flex">
-                        <div className="div">
-                            <h2 className=" text-5xl font-extrabold">Our sponsors</h2>
-                            <p className="my-36 text-2xl">Check out our very cool sponsors.</p>
-                            <button>View our sponsors</button>
+                    <div className="flex flex-col justify-center items-center col-span-4 row-start-1 row-end-3">
+                        <div className="max-w-[19.5rem] flex flex-col justify-center items-center">
+                            <h2 className="text-5xl font-black">Our sponsors</h2>
+                            <p style={{ fontSize: '1.65rem', lineHeight: '2.1rem' }} className="my-16" >Check out our very cool sponsors.</p>
+                            <button style={{ backgroundColor: '#FFFFFF', border: '1px solid #A7A6E5', color: '#3977F8' }} className="text-2xl rounded-xl w-[100%] h-16">View our sponsors</button>
                         </div>
                     </div>
                     <div style={{ backgroundColor: 'rgba(0, 71, 255, 0.33)' }} className="flex justify-center items-center col-span-3 row-start-1 row-end-2"><img src="assets/atlassian_logo.svg" alt="Atlassian logo" /></div>
@@ -24,12 +24,12 @@ const Sponsors = () => {
             </div>
             <div className="flex justify-between">
                 <img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
-                <div className="flex flex-col">
-                    <p>B03 CSE Building K17, UNSW csesoc@csesoc.org.au</p>
+                <div className="flex flex-col max-w-[14rem]">
+                    <p className="mb-6">B03 CSE Building K17, UNSW csesoc@csesoc.org.au</p>
                     <p>© 2021 — CSESoc UNSW</p>
                 </div>
-
             </div>
+            <img src="assets/sponsors_backdrop.svg" alt="Sponsors backdrop" className="absolute bottom-0 left-0 w-screen -z-10" />
         </section >
     )
 }
diff --git a/public/assets/sponsors_backdrop.svg b/public/assets/sponsors_backdrop.svg
new file mode 100644
index 0000000..b67806c
--- /dev/null
+++ b/public/assets/sponsors_backdrop.svg
@@ -0,0 +1,9 @@
+<svg width="1728" height="891" viewBox="0 0 1728 891" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1863.58 366.826C986.752 -314.814 165.844 109.676 -135.5 393.692L-472 1008.24L1067.05 1234C1697.91 1228.96 2740.41 1048.46 1863.58 366.826Z" fill="url(#paint0_radial_1601_509)"/>
+<defs>
+<radialGradient id="paint0_radial_1601_509" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(918 538.5) rotate(-90.6916) scale(538.539 1165.8)">
+<stop stop-color="#00009E" stop-opacity="0"/>
+<stop offset="1" stop-color="#000031"/>
+</radialGradient>
+</defs>
+</svg>

From 8836ee02a9628f74ad27804b7114816a47f41af0 Mon Sep 17 00:00:00 2001
From: James Teng <jamest.1402@gmail.com>
Date: Mon, 11 Sep 2023 23:18:27 +1000
Subject: [PATCH 3/3] add responsiveness and clean up code

---
 components/ResourcesAndContacts/index.tsx |  2 +-
 components/Sponsors/index.tsx             | 77 +++++++++++++----------
 2 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/components/ResourcesAndContacts/index.tsx b/components/ResourcesAndContacts/index.tsx
index 5802924..1650297 100644
--- a/components/ResourcesAndContacts/index.tsx
+++ b/components/ResourcesAndContacts/index.tsx
@@ -13,7 +13,7 @@ const ResourcesAndContacts = () => {
 
           <div className="text-center my-10">
             <p className="text-[#3977F8] font-game text-xl">03</p>
-            <h1 className="font-bold text-5xl">RESOURCES & CONTACTS</h1>
+            <h1 className="font-bold text-6xl">RESOURCES & CONTACTS</h1>
           </div>
 
           <div className="py-8 bg-no-repeat bg-center">
diff --git a/components/Sponsors/index.tsx b/components/Sponsors/index.tsx
index c266554..8c8d88d 100644
--- a/components/Sponsors/index.tsx
+++ b/components/Sponsors/index.tsx
@@ -1,37 +1,48 @@
-import React from 'react'
+import React from "react";
 
 const Sponsors = () => {
-    return (
-        <section className="flex flex-col min-h-screen py-8 px-24 relative">
-            <div>
-                <p className="text-[#3977F8] font-game text-xl">04</p>
-                <h2 className="font-bold text-7xl">SUPPORT CSESOC</h2>
-            </div>
-            <div className="flex-1 flex justify-center items-center">
-                <div style={{ backgroundImage: 'radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)' }} className="overflow-hidden rounded-[4rem] h-[35rem] w-[90rem] grid grid-cols-10 grid-row-2">
-                    <div className="flex flex-col justify-center items-center col-span-4 row-start-1 row-end-3">
-                        <div className="max-w-[19.5rem] flex flex-col justify-center items-center">
-                            <h2 className="text-5xl font-black">Our sponsors</h2>
-                            <p style={{ fontSize: '1.65rem', lineHeight: '2.1rem' }} className="my-16" >Check out our very cool sponsors.</p>
-                            <button style={{ backgroundColor: '#FFFFFF', border: '1px solid #A7A6E5', color: '#3977F8' }} className="text-2xl rounded-xl w-[100%] h-16">View our sponsors</button>
-                        </div>
-                    </div>
-                    <div style={{ backgroundColor: 'rgba(0, 71, 255, 0.33)' }} className="flex justify-center items-center col-span-3 row-start-1 row-end-2"><img src="assets/atlassian_logo.svg" alt="Atlassian logo" /></div>
-                    <div style={{ backgroundColor: 'rgba(82, 130, 255, 0.47)' }} className="flex justify-center items-center col-span-3 row-start-1 row-end-2"><img src="assets/google_logo.svg" alt="Google logo" /></div>
-                    <div style={{ backgroundColor: 'rgba(48, 93, 255, 0.2)' }} className="flex justify-center items-center col-span-3 row-start-2 row-end-3"><img src="assets/freelancer_logo.svg" alt="Freelancer logo" /></div>
-                    <div style={{ backgroundColor: 'rgba(122, 137, 236, 0.27)' }} className="flex justify-center items-center col-span-3 row-start-2 row-end-3"><img src="assets/microsoft_logo.svg" alt="Microsoft logo" /></div>
-                </div>
-            </div>
-            <div className="flex justify-between">
-                <img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
-                <div className="flex flex-col max-w-[14rem]">
-                    <p className="mb-6">B03 CSE Building K17, UNSW csesoc@csesoc.org.au</p>
-                    <p>© 2021 — CSESoc UNSW</p>
-                </div>
+  const firstRowBoxesStyling = "xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-1 xl:row-end-2 sm:row-start-3 sm:row-end-4 sm:h-auto h-36";
+  const secondRowBoxesStyling = "xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-2 xl:row-end-3 sm:row-start-4 sm:row-end-5 sm:h-auto h-36";
+
+  return (
+    <section className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20">
+      <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">
+        <div style={{ backgroundImage: "radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)" }} className="overflow-hidden rounded-[4rem] w-[90rem] grid grid-cols-10 xl:grid-row-2 sm:grid-row-5">
+          <div className="flex flex-col justify-center items-center xl:col-span-4 col-span-10 row-start-1 row-end-3 xl:my-0 my-12">
+            <div className="max-w-[15rem]">
+              <h2 className="text-4xl font-black">Our sponsors</h2>
+              <p className="xl:my-10 my-3 text-lg">Check out our very cool sponsors.</p>
+              <button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10">View our sponsors</button>
             </div>
-            <img src="assets/sponsors_backdrop.svg" alt="Sponsors backdrop" className="absolute bottom-0 left-0 w-screen -z-10" />
-        </section >
-    )
-}
+          </div>
+          <div className={`${firstRowBoxesStyling} bg-[rgba(0, 71, 255, 0.33)]`}>
+            <img src="assets/atlassian_logo.svg" alt="Atlassian logo" />
+          </div>
+          <div className={`${firstRowBoxesStyling} bg-[rgba(82, 130, 255, 0.47)]`}>
+            <img src="assets/google_logo.svg" alt="Google logo" />
+          </div>
+          <div className={`${secondRowBoxesStyling} bg-[rgba(48, 93, 255, 0.2)]`}>
+            <img src="assets/freelancer_logo.svg" alt="Freelancer logo" />
+          </div>
+          <div className={`${secondRowBoxesStyling} bg-[rgba(122, 137, 236, 0.27)]`}>
+            <img src="assets/microsoft_logo.svg" alt="Microsoft logo" />
+          </div>
+        </div>
+      </div>
+      <div className="sm:flex justify-between">
+        <img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
+        <div className="flex flex-col max-w-[14rem] sm:mt-0 mt-10 font-light">
+          <p className="mb-6">B03 CSE Building K17, UNSW csesoc@csesoc.org.au</p>
+          <p>© 2021 — CSESoc UNSW</p>
+        </div>
+      </div>
+      <img src="assets/sponsors_backdrop.svg" alt="Sponsors backdrop" className="absolute bottom-0 left-0 w-screen -z-10" />
+    </section>
+  );
+};
 
-export default Sponsors
\ No newline at end of file
+export default Sponsors;