Contact form (#22)

* Add project wireframes

* Make updates

* Add discord link to landing

* Change color-grading on images

* Add gradient line; upload headshots

* Replace boilermaker gold with old gold color

* Add gtags, fix some console errors

* Update calendar; add cfturbo sponsor logo

* Change verification gtag

* Modify caleander

* Change the number of members

* Update landing

* Update readme

* Add Donate/Contact form

* revert contact page

* Update contact page

src/components/ContactForm.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const ContactForm = () => {
     return (
-        <div className="p-1 w-full h-min bg-gradient-to-tl from-stardust to-boilermaker-gold to-80%">
+        <div className="p-1 w-full h-min bg-gradient-to-tl from-stardust to-boilermaker-gold to-80% max-w-[700px] mx-auto">
             <div className="px-4 pt-4 pb-6 bg-dusk">
                 <h2 className="font-display text-white mb-8 text-3xl t text-left">Contact Us</h2>
                 <form action="https://formspree.io/f/xqazodjj" method="POST" className="flex flex-col w-full space-y-3 bg-dusk text-dusk text-lg text-left font-display">

src/pages/Contact.js

@@ -23,15 +23,27 @@ const Contact = () => {
             </Banner>
             <ContentWrapper>
                 <div className="lg:w-[950px] flex flex-col w-full space-y-8 md:space-y-10">
-                    <div className="flex flex-col mr-auto space-y-2 lg:space-y-4">
-                        <div className="flex flex-col h-full text-stardust font-display text-lg md:text-2xl text-left my-4 lg:my-8 space-y-2 md:space-y-6">
-                            <p className=""><span className="text-stardust">Email: </span>[email protected]</p>
-                            <p className=""><span className="text-stardust">Linkedin: </span>@purpl-purdue</p>
-                            <p className=""><span className="text-stardust">Instagram: </span>@purpl_purdue</p>
-                            <p className=""><span className="text-stardust">Location: </span>Bechtel Innovation Design Center</p>
-                            <p className="">Stay in the loop by joining our <a className="text-white hover:white underline italic" href="https://discord.gg/cC6FYAu93W">Discord</a>.</p>
+                    <div className="flex flex-col items-center space-y-8 md:space-y-14">
+                        <div className="flex flex-col h-full text-white font-display text-lg md:text-xl text-center space-y-2">
+                            <p className="text-balance">
+                                <span className="">Email: </span>
+                                <a href="mailto:[email protected]" className="hover:text-boilermaker-gold underline text-stardust">[email protected]</a>
+                                <span>. Linkedin: </span>
+                                <a href="https://www.linkedin.com/company/purpl-purdue/mycompany"
+                                    className="hover:text-boilermaker-gold underline text-stardust">@purpl-purdue
+                                </a>.
+                            </p>
+                            <p className="text-balance">
+                                <span className="">Instagram: </span>
+                                <a href="https://instagram.com/purpl_purdue" className="hover:text-boilermaker-gold underline text-stardust">
+                                    @purpl_purdue
+                                </a>
+                                <span className="">. Location: </span>
+                                <span className="text-stardust">Bechtel Innovation Design Center</span>.
+                            </p>
                         </div>
-                        <img src={image} alt={imageAlt} className="mr-auto w-full max-w-[600px]"></img>
+                        <ContactForm />
+                        <img src={image} alt={imageAlt} className="pt-8 w-full max-w-[600px]"></img>
                     </div>
                 </div>
             </ContentWrapper>

src/pages/Donate.js

@@ -25,8 +25,7 @@ const Donate = () => {
             <ContentWrapper>
                 <div className="lg:w-[950px] flex flex-col w-full space-y-8 md:space-y-10">
                     <div className="flex flex-col w-full mr-auto space-y-2 lg:space-y-4">
-                        <div className="flex flex-col w-full h-full text-white font-display text-lg md:text-2xl text-left my-4 lg:my-8 space-y-8 md:space-y-14">
-
+                        <div className="flex flex-col w-full h-full text-white font-display text-lg md:text-xl text-left my-4 lg:my-8 space-y-8 md:space-y-14">
                             <div className="flex flex-col space-y-1 md:space-y-2 pb-2 md:pb-4 text-center">
                                 <p className="">Want to support our club? We'd love to hear from you!</p>
                                 <p className="">Email us at <a href="mailto:[email protected]" className="text-stardust">[email protected]</a> or use the form below.</p>