From 92a64d3e0e02b101a1f16da59d72d7b49d1e181c Mon Sep 17 00:00:00 2001
From: Gabriel Diniz <gabriel.sundiniz@gmail.com>
Date: Sun, 7 Apr 2024 13:51:10 -0400
Subject: [PATCH 1/3] [Update] contact section to match figma

---
 src/components/sections/Contact.section.tsx | 121 ++++++++++----------
 1 file changed, 61 insertions(+), 60 deletions(-)

diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx
index 00e3b89b..d6bbfe00 100644
--- a/src/components/sections/Contact.section.tsx
+++ b/src/components/sections/Contact.section.tsx
@@ -3,68 +3,69 @@ import { TopBorder, BottomBorder, MiddleBody, Hawk, BirdParts } from '@assets';
 import { Button, SocialIcons } from '@components';
 
 const ContactSection: React.FC = () => {
-  const openInNewTab = (url: string) => {
-    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
-    if (newWindow) newWindow.opener = null;
-  };
+    const openInNewTab = (url: string) => {
+        const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+        if (newWindow) newWindow.opener = null;
+    };
 
-  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault(); // Prevent default form submission behavior
-    openInNewTab('http://eepurl.com/hDHf8b');
-  };
+    const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault(); // Prevent default form submission behavior
+        openInNewTab('http://eepurl.com/hDHf8b');
+    };
 
-  return (
-    <section className="relative z-10">
-      <img src={TopBorder} className="z-0 w-full" />
-      <img
-        src={Hawk}
-        className="absolute right-0 top-0 z-[-1] w-full max-w-5xl -translate-x-2 -translate-y-1/2 md:-translate-x-3 xl:right-10 2xl:right-52"
-      />
-      <img
-        src={BirdParts}
-        className="absolute right-0 top-0 z-50 w-full max-w-5xl -translate-y-[42.5%] xl:right-10 2xl:right-52"
-      />
-      <div className="absolute inset-x-0 z-10 mx-auto max-w-4xl px-4 pt-10 sm:pt-16 md:px-8 md:pt-20 lg:px-12 lg:pt-32 xl:pt-32">
-        <div className="contact-info mb-2 text-center sm:mb-4 sm:text-left md:mb-6 lg:mb-12">
-          <h2
-            id="contact-anchor"
-            className="font-raleway text-2xl font-extrabold leading-tight tracking-wider text-[#32848C] sm:text-4xl md:text-5xl lg:text-8xl"
-          >
-            CONTACT US
-          </h2>
-          <p className="my-6">
-            Reach out at <b>hello@hawkhacks.ca</b> for any help or
-            support, and please be sure to join the{' '}
-            <b>HawkHacks Discord</b> community!
-          </p>
-        </div>
-        <div className="newsletter text-center sm:text-left lg:mt-6">
-          <div className="mt-2 flex flex-col items-center sm:items-start md:mt-4">
-            <div className="relative mb-4 flex w-full justify-center sm:mb-6 sm:w-1/2 sm:justify-start lg:max-w-lg">
-              <Button
-                type="button" // Changed to type="button" to prevent form submission
-                onClick={handleSubmit}
-                analyticsEvent="subscribe_button_click"
-                className="relative font-medium block w-fit h-16 rounded-r-lg bg-gradient-to-b from-tbrand to-tbrand-hover before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition before:duration-300 before:hover:opacity-10 sm:mx-0"
-              >
-                <span className="whitespace-nowrap text-2xl font-medium">
-                  Sign up for our newsletter!
-                </span>
-              </Button>
+    return (
+        <section className="relative z-10">
+            <img src={TopBorder} className="z-0 w-full" />
+            <img
+                src={Hawk}
+                className="absolute right-0 top-0 z-[-1] w-full max-w-5xl -translate-x-2 -translate-y-1/2 md:-translate-x-3 xl:right-10 2xl:right-52"
+            />
+            <img
+                src={BirdParts}
+                className="absolute right-0 top-0 z-50 flex w-full max-w-5xl -translate-y-[42.5%] xl:right-10 2xl:right-52"
+            />
+            {/* absolute inset-x-0 z-10 ml-0 px-4 pt-10 sm:pt-16 md:mx-32 md:px-8 md:pt-20 lg:px-12 lg:pt-32 xl:pt-32 */}
+            <div className="absolute inset-x-0 z-10 ml-0 px-4 pt-10 sm:pt-16 md:mx-32 md:px-8 md:pt-20 lg:px-12 lg:pt-32 xl:pt-32">
+                <div className="contact-info mb-2 text-center sm:mb-4 sm:text-left md:mb-6 lg:mb-12">
+                    <h2
+                        id="contact-anchor"
+                        className="font-raleway text-2xl font-extrabold leading-tight tracking-wider text-[#32848C] sm:text-4xl md:text-5xl lg:text-8xl"
+                    >
+                        CONTACT US
+                    </h2>
+                    <p className="my-6 text-base md:text-2xl">
+                        Reach out at <b>hello@hawkhacks.ca</b> for any help or
+                        support, and please be sure to join the{' '}
+                        <b>HawkHacks Discord</b> community!
+                    </p>
+                </div>
+                <div className="newsletter text-center sm:text-left lg:mt-6">
+                    <div className="mt-2 flex flex-col items-center sm:items-start md:mt-4">
+                        <div className="relative mb-4 flex w-full justify-center sm:mb-6 sm:w-1/2 sm:justify-start lg:max-w-lg">
+                            <Button
+                                type="button" // Changed to type="button" to prevent form submission
+                                onClick={handleSubmit}
+                                analyticsEvent="subscribe_button_click"
+                                className="relative block h-16 w-fit rounded-r-lg bg-gradient-to-b from-tbrand to-tbrand-hover font-medium before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition before:duration-300 before:hover:opacity-10 sm:mx-0"
+                            >
+                                <span className="whitespace-nowrap text-2xl font-medium">
+                                    Sign up for our newsletter!
+                                </span>
+                            </Button>
+                        </div>
+                        <div className="pt-2 max-[1020px]:hidden sm:pt-4">
+                            <SocialIcons color="#32848C" />
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div className="pt-2 sm:pt-4 max-[1020px]:hidden">
-              <SocialIcons color="#32848C" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <img
-        src={MiddleBody}
-        className="z-0 h-[300px] w-full object-cover sm:h-[350px] md:h-[400px] lg:h-[700px]"
-      />
-      <img src={BottomBorder} className="z-0 w-full" />
-    </section>
-  );
+            <img
+                src={MiddleBody}
+                className="z-0 h-[300px] w-full object-cover sm:h-[350px] md:h-[400px] lg:h-[700px]"
+            />
+            <img src={BottomBorder} className="z-0" />
+        </section>
+    );
 };
 
-export { ContactSection };
\ No newline at end of file
+export { ContactSection };

From ce7dc9d2de57262879d33880151385c55186e2f1 Mon Sep 17 00:00:00 2001
From: Gabriel Diniz <gabriel.sundiniz@gmail.com>
Date: Sun, 7 Apr 2024 13:55:34 -0400
Subject: [PATCH 2/3] [Update] Small fixes

---
 src/components/sections/Contact.section.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx
index d6bbfe00..4ab4a16b 100644
--- a/src/components/sections/Contact.section.tsx
+++ b/src/components/sections/Contact.section.tsx
@@ -24,8 +24,7 @@ const ContactSection: React.FC = () => {
                 src={BirdParts}
                 className="absolute right-0 top-0 z-50 flex w-full max-w-5xl -translate-y-[42.5%] xl:right-10 2xl:right-52"
             />
-            {/* absolute inset-x-0 z-10 ml-0 px-4 pt-10 sm:pt-16 md:mx-32 md:px-8 md:pt-20 lg:px-12 lg:pt-32 xl:pt-32 */}
-            <div className="absolute inset-x-0 z-10 ml-0 px-4 pt-10 sm:pt-16 md:mx-32 md:px-8 md:pt-20 lg:px-12 lg:pt-32 xl:pt-32">
+            <div className="absolute inset-x-0 z-10 ml-0 px-4 pt-10 sm:px-8 sm:pt-16 md:mx-10 md:pt-20 lg:mx-20 lg:px-12 lg:pt-32 xl:mx-32 xl:pt-32">
                 <div className="contact-info mb-2 text-center sm:mb-4 sm:text-left md:mb-6 lg:mb-12">
                     <h2
                         id="contact-anchor"
@@ -48,7 +47,7 @@ const ContactSection: React.FC = () => {
                                 analyticsEvent="subscribe_button_click"
                                 className="relative block h-16 w-fit rounded-r-lg bg-gradient-to-b from-tbrand to-tbrand-hover font-medium before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition before:duration-300 before:hover:opacity-10 sm:mx-0"
                             >
-                                <span className="whitespace-nowrap text-2xl font-medium">
+                                <span className="whitespace-nowrap text-base font-medium md:text-2xl">
                                     Sign up for our newsletter!
                                 </span>
                             </Button>

From 2d10576d50752b181f7362856d27f29633cb1035 Mon Sep 17 00:00:00 2001
From: Gabriel Diniz <gabriel.sundiniz@gmail.com>
Date: Sun, 7 Apr 2024 16:07:02 -0400
Subject: [PATCH 3/3] [Update] add w-full

---
 src/components/sections/Contact.section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx
index 4ab4a16b..ba5c4039 100644
--- a/src/components/sections/Contact.section.tsx
+++ b/src/components/sections/Contact.section.tsx
@@ -62,7 +62,7 @@ const ContactSection: React.FC = () => {
                 src={MiddleBody}
                 className="z-0 h-[300px] w-full object-cover sm:h-[350px] md:h-[400px] lg:h-[700px]"
             />
-            <img src={BottomBorder} className="z-0" />
+            <img src={BottomBorder} className="z-0 w-full" />
         </section>
     );
 };