Add newsletter signp form

docs/components/NewsletterSignupBanner.tsx

@@ -0,0 +1,152 @@
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Button } from './atomic-ui-elements/button'
+import { Input } from './atomic-ui-elements/input'
+
+export function NewsletterSignupBanner() {
+  return (
+    <div
+      id="mc_embed_shell"
+      className="
+        relative
+        p-12
+        grid
+        md:grid-cols-2
+        gap-12
+        items-center
+      "
+    >
+      <div className="flex flex-col gap-3 items-start">
+        <h1
+          className="
+            text-2xl
+            font-bold
+            leading-tight
+            text-inherit
+            sm:text-5xl
+            sm:leading-tight
+            lg:text-6xl
+            lg:leading-tight
+            font-pj
+          "
+        >
+          Quint
+        </h1>
+
+        <h2
+          className="
+            text-quint-purple
+            text-lg
+            text-balance
+            font-bold
+            leading-tight
+            sm:text-2xl
+            sm:leading-tight
+            lg:text-3xl
+            lg:leading-tight
+            font-pj
+          "
+        >
+          A modern and executable specification language
+        </h2>
+      </div>
+
+      <form
+        action="https://systems.us4.list-manage.com/subscribe/post?u=0f6ea1a79dbcc56e2f4c22ec8&amp;id=06adecf928&amp;f_id=0018d4edf0"
+        method="post"
+        id="mc-embedded-subscribe-form"
+        name="mc-embedded-subscribe-form"
+        className="
+          flex
+          flex-col
+          gap-3
+          items-start
+        "
+        target="_blank"
+        noValidate
+      >
+        <FontAwesomeIcon
+          icon={faEnvelope}
+          className="text-quint-purple text-6xl"
+        />
+
+        <p className="text-2xl">
+          Subscibe to our newsletter for the latest
+          updates&nbsp;and&nbsp;features
+        </p>
+
+        <div className="flex items-center gap-3 w-full">
+          <label className="w-full">
+            <span className="sr-only">First Name</span>
+            <Input
+              type="text"
+              name="FNAME"
+              id="mce-FNAME"
+              placeholder="First Name"
+              className="w-full"
+              value=""
+            />
+          </label>
+
+          <label className="w-full">
+            <span className="sr-only">Email Address</span>
+            <Input
+              type="email"
+              name="EMAIL"
+              id="mce-EMAIL"
+              required
+              className="w-full"
+              placeholder="Email Address"
+              value=""
+            />
+          </label>
+        </div>
+
+        <div
+          style={{ position: 'absolute', left: '-5000px' }}
+          aria-hidden="true"
+        >
+          <input
+            type="checkbox"
+            id="gdpr_41607"
+            name="gdpr[41607]"
+            className="gdpr"
+            value="Y"
+            checked={true}
+          />
+          <input
+            type="text"
+            name="b_0f6ea1a79dbcc56e2f4c22ec8_06adecf928"
+            tabIndex={-1}
+            value=""
+          />
+        </div>
+
+        <Button
+          type="submit"
+          name="subscribe"
+          id="mc-embedded-subscribe"
+          variant="primary"
+          className="w-full"
+        >
+          Subscribe
+        </Button>
+      </form>
+
+      {/* The purple background */}
+      <div
+        className="
+          absolute
+          -z-10
+          top-1/2
+          left-1/2
+          w-[100vw]
+          h-full
+          bg-quint-purple/10
+          -translate-x-1/2
+          -translate-y-1/2
+        "
+      />
+    </div>
+  )
+}

docs/components/atomic-ui-elements/button.tsx

@@ -0,0 +1,59 @@
+import { ComponentProps, ElementType } from 'react'
+
+type ButtonProps<T extends 'a' | 'button'> = ComponentProps<T> & {
+  children: React.ReactNode
+  as?: T
+  variant?: keyof typeof classNamesByVariant
+}
+
+const classNamesByVariant = {
+  primary: `
+    bg-quint-purple
+    text-white
+    hover:bg-[#2d0075]
+    hover:text-quint-purple
+    px-8
+    py-4
+  `,
+  secondary: `
+    bg-quint-purple
+    text-white
+    hover:bg-[#2d0075]
+    hover:text-quint-purple
+    px-6
+    py-2
+  `,
+}
+
+export function Button<T extends 'a' | 'button'>({
+  as,
+  children,
+  className,
+  variant = 'primary',
+  ...props
+}: ButtonProps<T>) {
+  const Component = (as ?? 'button') as ElementType
+  return (
+    <Component
+      {...props}
+      role="button"
+      className={`
+        inline-flex
+        text-lg
+        font-bold
+        transition-all
+        duration-200
+        rounded
+        font-pj
+        focus:outline-none
+        focus:ring-2
+        focus:ring-offset-2
+        focus:ring-gray-900
+        ${classNamesByVariant[variant]}
+        ${className}
+      `}
+    >
+      {children}
+    </Component>
+  )
+}

docs/components/atomic-ui-elements/input.tsx

@@ -0,0 +1,36 @@
+import { ComponentProps, ElementType } from 'react'
+
+type InputProps<T extends 'input' | 'textarea'> = Omit<
+  ComponentProps<T>,
+  'children'
+> & {
+  as?: T
+  variant?: keyof typeof classNamesByVariant
+}
+
+const classNamesByVariant = {
+  text: `
+    px-8
+    py-4
+    bg-white
+    rounded
+  `,
+}
+
+export function Input<T extends 'input' | 'textarea' = 'input'>({
+  as,
+  className,
+  variant = 'text',
+  ...props
+}: InputProps<T>) {
+  const Component = (as ?? 'input') as ElementType
+  return (
+    <Component
+      {...props}
+      className={`
+        ${classNamesByVariant[variant]}
+        ${className}
+      `}
+    />
+  )
+}