Merge pull request #190 from LaurierHawkHacks/feature/186/get-contact…

…-us-button-working Feature/186/get contact us button working
LaurierHawkHacks · Mar 29, 2024 · 634194a · 634194a
2 parents b2b286b + 58509f7
commit 634194a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "dependencies": {
         "@types/node": "^20.11.24",
         "@uidotdev/usehooks": "^2.4.1",
+        "axios": "^1.6.8",
         "class-variance-authority": "^0.7.0",
         "hamburger-react": "^2.5.0",
         "react": "^18.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
-import {
-    TopBorder,
-    BottomBorder,
-    MiddleBody,
-    ArrowRightIcon,
-    Hawk,
-    BirdParts,
-} from '@assets';
-import { SocialIcons } from '@components';
+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 handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault(); // Prevent default form submission behavior
+        openInNewTab('http://eepurl.com/hDHf8b');
+    };
     return (
         <section className="contact-section relative z-10">
             <img src={TopBorder} className="z-0 w-full" />
@@ -38,20 +40,14 @@ const ContactSection: React.FC = () => {
                         Sign up for our newsletter!
                     </h3>
                     <div className="mt-2 flex flex-col items-center sm:items-start md:mt-4">
-                        <div className="relative mb-4 w-full sm:mb-6 sm:w-1/2 lg:max-w-lg">
-                            {' '}
-                            {/* Adjusted margin-bottom for small screens */}
-                            <input
-                                type="email"
-                                placeholder="Enter your email"
-                                className="h-12 w-full rounded-lg border-2 border-gray-400 bg-white pl-4 pr-12 text-sm focus:outline-none"
-                            />
-                            <button
-                                type="submit"
-                                className="absolute inset-y-0 right-0 flex w-12 items-center justify-center rounded-r-lg px-4 shadow-none focus:bg-transparent focus:outline-none"
+                        <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}
+                                className="inset-y-0 flex w-1/3 justify-center rounded-r-lg px-4 sm:w-2/3 sm:justify-start"
                             >
-                                <img src={ArrowRightIcon} alt="Submit" />
-                            </button>
+                                Subscribe
+                            </Button>
                         </div>
                         <div className="pt-2 sm:pt-4">
                             <SocialIcons color="#32848C" />