From 5dcdfbff377d882f52eaa37421b64a053dd59308 Mon Sep 17 00:00:00 2001
From: Christopher Stevers <christopher.stevers@protonmail.com>
Date: Fri, 14 Oct 2022 07:56:46 -0400
Subject: [PATCH 1/3] added converkit connected email form

---
 src/components/footer/index.js     | 12 ++++++----
 src/components/footer/subscribe.js | 38 ++++++++++++++++++++++++++++++
 src/twind.config.js                |  3 +++
 3 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 src/components/footer/subscribe.js

diff --git a/src/components/footer/index.js b/src/components/footer/index.js
index 1a3313d..f51c2e6 100755
--- a/src/components/footer/index.js
+++ b/src/components/footer/index.js
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import Subscibe from './subscribe';
 
 const Footer = () => {
   const [showCookieNotice, setShowCookieNotice] = useState(true);
@@ -83,9 +84,9 @@ const Footer = () => {
           <Image src='/logo.png' alt='OpenQ Logo' width='60%' height='60%' />
           <p className={tw(`text-4xl text-black font-bold pl-5`)}>OpenQ</p>
         </div>
-        <div className={tw(`w-full lg:w-1/2`)}>
+        <div className={tw(`w-full flex lg:w-5/6 flex-wrap xl:flex-nowrap`)}>
           <ul className={tw(`text-lg font-light flex flex-wrap w-full`)}>
-            <li className={tw(`w-1/2 md:w-1/3 lg:w-1/3`)}>
+            <li className={tw(`w-1/2 md:w-1/3 lg:w-1/3 pb-5`)}>
               <div>
                 <h4 className={tw(`text-gray-900 text-base font-bold mb-1`)}>Socials</h4>
                 <ul>
@@ -107,7 +108,7 @@ const Footer = () => {
                 </ul>
               </div>
             </li>
-            <li className={tw(`w-1/2 md:w-1/3 lg:w-1/3`)}>
+            <li className={tw(`w-1/2 md:w-1/3 lg:w-1/3 pb-5`)}>
               <div>
                 <h4 className={tw(`text-gray-900 text-base font-bold mb-1`)}>Resources</h4>
                 <ul>
@@ -129,9 +130,9 @@ const Footer = () => {
                 </ul>
               </div>
             </li>
-            <li className={tw(`w-1/2 md:w-1/3 lg:w-1/3`)}>
+            <li className={tw(`w-1/2 md:w-1/3 lg:w-1/3 pb-5`)}>
               <div>
-                <h4 className={tw(`text-gray-900 pt-5 lg:-pt-1 text-base font-bold mb-1`)}>About Us</h4>
+                <h4 className={tw(`text-gray-900   text-base font-bold mb-1`)}>About Us</h4>
                 <ul>
                   <li className={tw(`text-gray-800 text-sm font-medium leading-6`)}>
                     <a href='/terms-of-service'>Terms of Service</a>
@@ -143,6 +144,7 @@ const Footer = () => {
               </div>
             </li>
           </ul>
+          <Subscibe />
         </div>
         {/*  <div className={tw(`w-full lg:w-1/2 mt-12 lg:mt-0`)}>
         <div className={tw(`border border-gray-400 rounded py-5 px-4`)}>
diff --git a/src/components/footer/subscribe.js b/src/components/footer/subscribe.js
new file mode 100644
index 0000000..7d5924e
--- /dev/null
+++ b/src/components/footer/subscribe.js
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { tw } from 'twind';
+
+const Subscribe = () => {
+	const [email, setEmail] = useState("");
+	const [subscribed, setSubscribed] = useState();
+
+	const subscribe = async () => {
+		const formData = new FormData();
+		formData.append("api_key", "JlUKxDNJAmbFF44byOHTNQ");
+		formData.append("email", email);
+		const response = await fetch('https://api.convertkit.com/v3/forms/3697685/subscribe', {
+			method: "POST",
+			body: formData
+		});
+		const subscribeJson = await response.json();
+		if (subscribeJson) {
+			setSubscribed(true);
+		}
+
+	};
+	return (<div>
+		<div className={tw(`text-gray-900 font-bold pb-2 sm:w-60`)}>
+			Sign up for our newsletter.</div>
+		{subscribed ?
+			<div className={tw(`gap-4 md:h-12 bg-green-100 md:w-128 max-w-full px-2 border-emerald-500 border flex justify-center rounded-md py-2.5  justify-items-center text-emerald-500`)}>
+				<span>Success! Now  check your email to confirm your subscription.</span>
+
+			</div>
+
+			: <div className={tw(`flex flex-wrap text-white gap-4 md:w-128 `)}>
+				<input value={email} onChange={(e) => setEmail(e.target.value)} className={tw(`rounded-md border-gray-400  w-full sm:w-auto border h-12 px-2 text-black`)} />
+				<button onClick={subscribe} className={tw(`bg-purple-800 px-6 rounded-md py-3`)}>Subscribe</button>
+			</div>}
+	</div>
+	);
+};
+export default Subscribe;
\ No newline at end of file
diff --git a/src/twind.config.js b/src/twind.config.js
index ff14aa4..616d9a3 100755
--- a/src/twind.config.js
+++ b/src/twind.config.js
@@ -24,6 +24,9 @@ export default {
       maxHeight: {
         '128': '32rem',
       },
+      spacing: {
+        '128': '32rem'
+      },
       colors: {
         transparent: 'transparent',
         'dark-mode': '#121212',

From f5b67cc9ac3d5753edef6c6fc3f6ddfab29474c1 Mon Sep 17 00:00:00 2001
From: Christopher Stevers <christopher.stevers@protonmail.com>
Date: Fri, 14 Oct 2022 08:02:19 -0400
Subject: [PATCH 2/3] added error state for subscribe

---
 src/components/footer/subscribe.js | 50 +++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/components/footer/subscribe.js b/src/components/footer/subscribe.js
index 7d5924e..07b9009 100644
--- a/src/components/footer/subscribe.js
+++ b/src/components/footer/subscribe.js
@@ -1,37 +1,51 @@
 import { useState } from 'react';
 import { tw } from 'twind';
+import { Z_STREAM_ERROR } from 'zlib';
 
 const Subscribe = () => {
 	const [email, setEmail] = useState("");
 	const [subscribed, setSubscribed] = useState();
+	const [error, setError] = useState();
 
 	const subscribe = async () => {
-		const formData = new FormData();
-		formData.append("api_key", "JlUKxDNJAmbFF44byOHTNQ");
-		formData.append("email", email);
-		const response = await fetch('https://api.convertkit.com/v3/forms/3697685/subscribe', {
-			method: "POST",
-			body: formData
-		});
-		const subscribeJson = await response.json();
-		if (subscribeJson) {
-			setSubscribed(true);
+		try {
+			const formData = new FormData();
+			formData.append("api_key", "JlUKxDNJAmbFF44byOHTNQ");
+			formData.append("email", email);
+			const response = await fetch('https://api.convertkit.com/v3/forms/3697685/subscribe', {
+				method: "POST",
+				body: formData
+			});
+			const subscribeJson = await response.json();
+			if (subscribeJson) {
+				setSubscribed(true);
+			}
 		}
+		catch (err) {
+			setError(err);
 
+		}
 	};
 	return (<div>
 		<div className={tw(`text-gray-900 font-bold pb-2 sm:w-60`)}>
 			Sign up for our newsletter.</div>
-		{subscribed ?
-			<div className={tw(`gap-4 md:h-12 bg-green-100 md:w-128 max-w-full px-2 border-emerald-500 border flex justify-center rounded-md py-2.5  justify-items-center text-emerald-500`)}>
-				<span>Success! Now  check your email to confirm your subscription.</span>
+		{
+
+			error ? <div className={tw(`gap-4 md:h-12 bg-red-100 md:w-128 max-w-full px-2 border-red-500 border flex justify-center rounded-md py-2.5  justify-items-center text-red-500`)}>
+				<span>Couldn't process your subscription, please reload and try again.</span>
+
+			</div> :
+
+				subscribed ?
+					<div className={tw(`gap-4 md:h-12 bg-green-100 md:w-128 max-w-full px-2 border-emerald-500 border flex justify-center rounded-md py-2.5  justify-items-center text-emerald-500`)}>
+						<span>Success! Now  check your email to confirm your subscription.</span>
 
-			</div>
+					</div>
 
-			: <div className={tw(`flex flex-wrap text-white gap-4 md:w-128 `)}>
-				<input value={email} onChange={(e) => setEmail(e.target.value)} className={tw(`rounded-md border-gray-400  w-full sm:w-auto border h-12 px-2 text-black`)} />
-				<button onClick={subscribe} className={tw(`bg-purple-800 px-6 rounded-md py-3`)}>Subscribe</button>
-			</div>}
+					: <div className={tw(`flex flex-wrap text-white gap-4 md:w-128 `)}>
+						<input value={email} onChange={(e) => setEmail(e.target.value)} className={tw(`rounded-md border-gray-400  w-full sm:w-auto border h-12 px-2 text-black`)} />
+						<button onClick={subscribe} className={tw(`bg-purple-800 px-6 rounded-md py-3`)}>Subscribe</button>
+					</div>}
 	</div>
 	);
 };

From 9dd3a0998bee21346ecff3d045b2cf9980dab982 Mon Sep 17 00:00:00 2001
From: Christopher Stevers <christopher.stevers@protonmail.com>
Date: Fri, 14 Oct 2022 08:09:33 -0400
Subject: [PATCH 3/3] aligned Hackathon launchpad text

---
 src/components/footer/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/footer/index.js b/src/components/footer/index.js
index 26ea0b4..35029dd 100755
--- a/src/components/footer/index.js
+++ b/src/components/footer/index.js
@@ -137,7 +137,7 @@ const Footer = () => {
                   </li>
                   <li>
                     <a rel='noopener noreferrer' href='https://app.openq.dev/hackathon-launchpad'>
-                      <button className={tw(`text-gray-800 text-sm font-medium leading-6`)}>Hackathon Launchpad</button>
+                      <button className={tw(`text-gray-800 text-left text-sm font-medium leading-6`)}>Hackathon Launchpad</button>
                     </a>
                   </li>
                 </ul>