Adds convertkit.

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);
@@ -86,9 +87,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>
@@ -110,7 +111,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>
@@ -136,15 +137,15 @@ 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>
               </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>
@@ -156,6 +157,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`)}>

src/components/footer/subscribe.js

@@ -0,0 +1,52 @@
+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 () => {
+		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>
+		{
+
+			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 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;

src/twind.config.js

@@ -24,19 +24,22 @@ export default {
       maxHeight: {
         '128': '32rem',
       },
+      spacing: {
+        '128': '32rem'
+      },
       screens: {
         'sm': '640px',
         // => @media (min-width: 640px) { ... }
-  
+
         'md': '768px',
         // => @media (min-width: 768px) { ... }
-  
+
         'lg': '1024px',
         // => @media (min-width: 1024px) { ... }
-  
+
         'xl': '1280px',
         // => @media (min-width: 1280px) { ... }
-  
+
         '2xl': '1536px',
         // => @media (min-width: 1536px) { ... }
       },