From bdb207e0b18bd86014da68ae37ced453333bb69c Mon Sep 17 00:00:00 2001
From: Ray <22254748+rayokamoto@users.noreply.github.com>
Date: Mon, 19 Feb 2024 21:01:26 +1030
Subject: [PATCH 1/3] feat(home): Add join us button at end of page

---
 src/app/(home)/page.tsx   | 58 ++++++++++++++++++++++++---------------
 src/components/Button.tsx |  5 ++--
 2 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index a11d102a..912d92a8 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -1,3 +1,4 @@
+import Button from '@/components/Button';
 import Duck from '@/components/Duck';
 import FancyRectangle from '@/components/FancyRectangle';
 import ImageCarousel from '@/components/ImageCarousel';
@@ -230,41 +231,54 @@ export default function HomePage() {
             </section>
 
             {/* CTA part 2 */}
-            <section>
+            <section className="mb-[1em] lg:mb-[6em] xl:mb-[10em]">
                 <div className="h-24"></div>
-                <div className="mb-[3em] md:mb-[8.75em] lg:md:mb-[11.3em]">
+                <div className="mb-[3em] md:mb-[8em] lg:mb-[6em]">
                     {/* <Grid /> */}
                     <Image
                         src="/images/rectangle-grid.svg"
                         alt="Rectangle Grid"
                         width={500}
                         height={500}
-                        className="absolute -z-10 mt-12 w-[20em] md:w-[35em] lg:w-[35em]"
+                        className="absolute -z-10 mt-10 w-[25em] md:w-[40em] lg:w-[45em]"
                     />
                 </div>
 
-                <div className="relative z-10 ml-[2.5em] flex w-fit flex-col md:ml-[4.4em]">
-                    <div className="relative mb-2 flex flex-row justify-end space-x-4 *:h-8 md:*:h-10">
-                        <Duck colour="white" outline />
-                        <Duck colour="white" outline />
-                        <Duck colour="white" />
-                        <Duck colour="white" />
-                        <Duck colour="white" />
+                <div className="z-10 flex flex-col gap-20 xl:flex-row">
+                    <div className="relative z-10 flex w-fit flex-col xl:ml-12">
+                        <div className="relative mb-2 flex flex-row justify-end space-x-4 *:h-8 md:*:h-10">
+                            <Duck colour="white" outline />
+                            <Duck colour="white" outline />
+                            <Duck colour="white" />
+                            <Duck colour="white" />
+                            <Duck colour="white" />
+                        </div>
+                        <div className="relative z-10 flex flex-row">
+                            <div className="h-auto w-16 bg-orange"></div>
+                            <div className="relative flex flex-col">
+                                <span className="relative bg-white py-8 pl-4 pr-16 text-3xl font-black text-black lg:pr-32 lg:text-6xl">
+                                    Thinking about <span className="text-orange">Joining?</span>
+                                </span>
+                                <p className="border-2 border-white bg-grey py-4 pl-4 pr-16 text-lg lg:pr-32 lg:text-xl">
+                                    New members are always welcome!
+                                </p>
+                            </div>
+                        </div>{' '}
                     </div>
-                    <div className="relative z-10 flex flex-row">
-                        <div className="h-auto w-10 bg-orange"></div>
-                        <div className="relative flex flex-col">
-                            <span className="relative bg-white px-4 py-2 text-2xl font-black text-black lg:text-3xl">
-                                Thinking about <span className="text-orange"> Joining?</span>
-                            </span>
-                            <p className="border-2 border-white bg-grey px-4 py-2 text-lg lg:text-xl">
-                                New members are always welcome!
-                            </p>
+
+                    <div className="h-fill flex flex-row justify-center py-4 xl:flex-col">
+                        <div className="w-fit">
+                            <Button
+                                colour="purple"
+                                href="/join"
+                                width="w-64"
+                                font="text-center text-black text-xl md:text-4xl lg:text-5xl"
+                            >
+                                Join Us
+                            </Button>
                         </div>
-                    </div>{' '}
+                    </div>
                 </div>
-
-                <div className="h-16 smr:h-24 md:h-32 lg:h-20"></div>
             </section>
         </main>
     );
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 73c1f249..ba12f1ec 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -11,9 +11,10 @@ interface ButtonProps {
     type?: 'button' | 'submit' | 'reset';
     width?: string;
     loading?: boolean;
+    font?: string;
 }
 
-const Button = ({ children, colour, href, onClick, width, type, loading }: ButtonProps) => {
+const Button = ({ children, colour, href, onClick, width, type, loading, font }: ButtonProps) => {
     const isAnchor = !!href;
     const Component = isAnchor ? 'a' : 'button';
 
@@ -23,7 +24,7 @@ const Button = ({ children, colour, href, onClick, width, type, loading }: Butto
                 href={isAnchor ? href : undefined}
                 onClick={onClick}
                 type={isAnchor ? undefined : type}
-                className={`${width} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black px-12 py-4 text-lg font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 md:text-base lg:px-6 lg:py-2`}
+                className={`${width} ${font ?? 'text-lg md:text-base'} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black px-12 py-4 font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 lg:px-6 lg:py-2`}
                 disabled={loading}
             >
                 {children}

From efae9463786258cf529d7c2c6af9a7e656bfb7ac Mon Sep 17 00:00:00 2001
From: Ray <22254748+rayokamoto@users.noreply.github.com>
Date: Mon, 19 Feb 2024 21:12:53 +1030
Subject: [PATCH 2/3] fix(home): Center sponsors on screen resize

---
 src/app/(home)/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 912d92a8..855c5117 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -190,7 +190,7 @@ export default function HomePage() {
 
                     <div>
                         <h3>Supported By </h3>
-                        <div className="flex flex-col md:flex-row">
+                        <div className="flex flex-col smr:flex-row">
                             <h3 className="mb-2 mr-2 md:mb-0">Industry&apos;s </h3>
                             <FancyRectangle colour="orange" offset="6" filled={false}>
                                 <div className="w-fit bg-orange px-2">
@@ -206,10 +206,10 @@ export default function HomePage() {
                         if (sponsors.length === 0) return;
                         return (
                             <Fragment key={type}>
-                                <h3 className="text-2xl font-black capitalize lg:text-3xl">
+                                <h3 className="text-center text-2xl font-black capitalize smr:text-left lg:text-3xl">
                                     {type} Sponsors
                                 </h3>
-                                <div className="flex flex-wrap gap-6 pb-2">
+                                <div className="flex flex-wrap justify-center gap-6 pb-2 smr:justify-start">
                                     {sponsors.map(({ image, website, name }, i) => (
                                         <a href={website} key={i} className="block" target="_blank">
                                             <FancyRectangle colour="white" offset="10">

From 73214f98a8d3e8e3df59f1f9c57862c13918bd58 Mon Sep 17 00:00:00 2001
From: Ray <22254748+rayokamoto@users.noreply.github.com>
Date: Mon, 19 Feb 2024 21:38:11 +1030
Subject: [PATCH 3/3] feat(home): Use join us link instead of button

---
 src/app/(home)/page.tsx | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 855c5117..a47e8463 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -6,6 +6,7 @@ import Title from '@/components/Title';
 import { CAROUSEL_IMAGES } from '@/data/home';
 import { SPONSOR_TYPES, getSponsors } from '@/data/sponsors';
 import Image from 'next/image';
+import Link from 'next/link';
 import { Fragment } from 'react';
 
 export default function HomePage() {
@@ -244,8 +245,8 @@ export default function HomePage() {
                     />
                 </div>
 
-                <div className="z-10 flex flex-col gap-20 xl:flex-row">
-                    <div className="relative z-10 flex w-fit flex-col xl:ml-12">
+                <div className="z-10">
+                    <div className="relative z-10 w-fit xl:ml-12">
                         <div className="relative mb-2 flex flex-row justify-end space-x-4 *:h-8 md:*:h-10">
                             <Duck colour="white" outline />
                             <Duck colour="white" outline />
@@ -259,23 +260,16 @@ export default function HomePage() {
                                 <span className="relative bg-white py-8 pl-4 pr-16 text-3xl font-black text-black lg:pr-32 lg:text-6xl">
                                     Thinking about <span className="text-orange">Joining?</span>
                                 </span>
-                                <p className="border-2 border-white bg-grey py-4 pl-4 pr-16 text-lg lg:pr-32 lg:text-xl">
-                                    New members are always welcome!
+                                <p className="border-2 border-white bg-grey py-6 pl-4 pr-16 text-lg lg:pr-32 lg:text-2xl">
+                                    New members are always welcome.{' '}
+                                    <Link
+                                        className="font-bold underline hover:text-yellow"
+                                        href={'/join'}
+                                    >
+                                        Join us today!
+                                    </Link>
                                 </p>
                             </div>
-                        </div>{' '}
-                    </div>
-
-                    <div className="h-fill flex flex-row justify-center py-4 xl:flex-col">
-                        <div className="w-fit">
-                            <Button
-                                colour="purple"
-                                href="/join"
-                                width="w-64"
-                                font="text-center text-black text-xl md:text-4xl lg:text-5xl"
-                            >
-                                Join Us
-                            </Button>
                         </div>
                     </div>
                 </div>