Newsletter signup section (#228)

* add button to EmailSignup component and edit Button to use external link if passed in

* isExternal improved code

app/components/EmailSignup/EmailSignup.module.scss

@@ -3,8 +3,21 @@
 .emailSignupContainer {
   display: flex;
   width: 100%;
-  padding: $spacing-16 $spacing-32;
+  padding: $spacing-16 $general-spacing-md;
   flex-direction: column;
   align-items: center;
+  gap: $general-spacing-lg;
   background: $color-secondary;
+
+  h2 {
+    text-align: center;
+  }
+
+  @include r_max($break-tablet-s) {
+    padding: $general-spacing-xl $general-spacing-md;
+
+    h2 {
+      font-size: 26px;
+    }
+  }
 }

app/components/EmailSignup/Emailsignup.tsx

@@ -1,6 +1,15 @@
 import React from "react";
 import styles from "./EmailSignup.module.scss";
+import { Button } from "components/ui/inline/Button/Button";
 
 export const EmailSignup = () => (
-  <div className={styles.emailSignupContainer} />
+  <div className={styles.emailSignupContainer}>
+    <h2>Join our mailing list to get updates</h2>
+    <Button
+      isExternalLink={false}
+      href="javascript:void( window.open( 'https://dcyf.jotform.com/242708128943966', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) "
+    >
+      Sign up today
+    </Button>
+  </div>
 );

app/components/ui/inline/Button/Button.tsx

@@ -34,6 +34,7 @@ export const Button = ({
   href,
   mobileFullWidth = true,
   isVisualOnly = false,
+  isExternalLink,
 }: {
   children: string | JSX.Element;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
@@ -50,6 +51,7 @@ export const Button = ({
   href?: string;
   mobileFullWidth?: boolean;
   isVisualOnly?: boolean; // Maintains button styling as visual cue clickable cards but hidden to screen readers
+  isExternalLink?: boolean;
 }) => {
   const buttonClass = classNames(
     styles.button,
@@ -86,9 +88,10 @@ export const Button = ({
 
   // Links that follow same visual guidelines as buttons
   if (href) {
-    const isExternalLink = !href.startsWith("/");
+    const isExternal = isExternalLink ?? !href?.startsWith("/");
+
+    const linkProps = isExternal && { target: "_blank", rel: "noreferrer" };
 
-    const linkProps = isExternalLink && { target: "_blank", rel: "noreferrer" };
     return (
       <a href={href} className={buttonClass} {...linkProps}>
         {content}