From 589cdec14fa2459bb55d91556af492a61b0b0b11 Mon Sep 17 00:00:00 2001
From: Aaron Wright <aaronmw@gmail.com>
Date: Sun, 15 Dec 2024 16:33:56 -0500
Subject: [PATCH] Add newsletter signp form

---
 docs/components/NewsletterSignupBanner.tsx    | 152 ++++++++++++++
 docs/components/atomic-ui-elements/button.tsx |  59 ++++++
 docs/components/atomic-ui-elements/input.tsx  |  36 ++++
 docs/components/home/index.tsx                | 187 +++++++++++-------
 docs/tailwind.config.js                       |  15 +-
 5 files changed, 364 insertions(+), 85 deletions(-)
 create mode 100644 docs/components/NewsletterSignupBanner.tsx
 create mode 100644 docs/components/atomic-ui-elements/button.tsx
 create mode 100644 docs/components/atomic-ui-elements/input.tsx

diff --git a/docs/components/NewsletterSignupBanner.tsx b/docs/components/NewsletterSignupBanner.tsx
new file mode 100644
index 000000000..c481da27d
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/docs/components/atomic-ui-elements/button.tsx b/docs/components/atomic-ui-elements/button.tsx
new file mode 100644
index 000000000..572d9e00d
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/docs/components/atomic-ui-elements/input.tsx b/docs/components/atomic-ui-elements/input.tsx
new file mode 100644
index 000000000..0a8def8fb
--- /dev/null
+++ b/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}
+      `}
+    />
+  )
+}
diff --git a/docs/components/home/index.tsx b/docs/components/home/index.tsx
index 8a660e35d..94455410b 100644
--- a/docs/components/home/index.tsx
+++ b/docs/components/home/index.tsx
@@ -1,47 +1,56 @@
-import { Code, Pre } from "nextra/components"
+import { Code, Pre } from 'nextra/components'
 
-import React from "react";
-import { useState, useEffect } from 'react'
-import { useTheme } from 'nextra-theme-docs'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useTheme } from 'nextra-theme-docs'
+import { useEffect, useState } from 'react'
 import CodeSample from './code_sample.mdx'
 import ViolationSample from './violation_sample.mdx'
 
 import Image from 'next/image'
 
-import { classNames } from "./classNames";
-import { ProsOrConsList } from "./ProsOrConsList";
+import { Button } from '../atomic-ui-elements/button'
+import { NewsletterSignupBanner } from '../NewsletterSignupBanner'
+import { classNames } from './classNames'
+import { ProsOrConsList } from './ProsOrConsList'
 
 const benefits = [
   [
-    "Executable",
-    ["Quint", ["checked names and types", "executable"]],
-    ["English & Markdown", ["not checked", "not executuable"]],
+    'Executable',
+    ['Quint', ['checked names and types', 'executable']],
+    ['English & Markdown', ['not checked', 'not executuable']],
   ],
   [
-    "Abstract",
-    ["Specification Languages", ["define only what you care about"]],
-    ["Programming Languages", ["define how things happen, in detail"]],
+    'Abstract',
+    ['Specification Languages', ['define only what you care about']],
+    ['Programming Languages', ['define how things happen, in detail']],
   ],
   [
-    "Modern",
-    ["Quint", ["familiar syntax", "CLI and your editor"]],
-    ["Existing Spec Languages", ["math-y syntax", "old GUI tools"]],
+    'Modern',
+    ['Quint', ['familiar syntax', 'CLI and your editor']],
+    ['Existing Spec Languages', ['math-y syntax', 'old GUI tools']],
   ],
-] as const;
-
+] as const
 
 function informalSystemsLogo() {
-  const { resolvedTheme } = useTheme();
-  const [theme, setTheme] = useState(null);
-    useEffect(() => {
-    setTheme(resolvedTheme);
-  }, [resolvedTheme]);
+  const { resolvedTheme } = useTheme()
+  const [theme, setTheme] = useState(null)
+  useEffect(() => {
+    setTheme(resolvedTheme)
+  }, [resolvedTheme])
 
   return (
     <a href="https://informal.systems">
-      <Image src={theme == "dark" ? "/informal-systems-white.png" : "/informal-systems.png"} alt="Informal Systems" width={200} height={200} />
+      <Image
+        src={
+          theme == 'dark'
+            ? '/informal-systems-white.png'
+            : '/informal-systems.png'
+        }
+        alt="Informal Systems"
+        width={200}
+        height={200}
+      />
     </a>
   )
 }
@@ -52,67 +61,95 @@ const components = {
 }
 
 export function Home() {
-  const [isViolationVisible, setViolationVisible] = useState(false);
+  const [isViolationVisible, setViolationVisible] = useState(false)
 
   const handleToggleVisibility = () => {
-    setViolationVisible(true);
-  };
-
-  return (<div>
-    <section className="relative py-12 sm:py-16 lg:pb-80">
-      <div className="absolute bottom-0 right-0 overflow-hidden">
-        <img className="h-full w-auto origin-bottom-right transform lg:w-auto lg:mx-auto lg:object-cover" src="./background-pattern-gradient-mini.png" alt="" />
-      </div>
+    setViolationVisible(true)
+  }
 
-      <div className="relative px-4 mx-auto max-w-7xl sm:px-6 lg:px-2">
-        <h1 className="text-4xl text-center 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-2xl text-center 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 className="grid grid-cols-1 py-8 gap-y-4 gap-x-8 lg:mt-8 lg:items-start lg:grid-cols-2 xl:grid-cols-2">
-          <div className="xl:col-span-1">
-            <div className={classNames.container}>
-              {benefits.map(([label, [prosLabel, pros], [consLabel, cons]]) => (
-                <div className={classNames.benefitContainer}>
-                  <h1 className={classNames.benefitTitle}>
-                    <div className={classNames.benefitIcon}>
-                      <FontAwesomeIcon icon={faCheckCircle} />
+  return (
+    <div className="overflow-x-hidden">
+      <section className="relative py-12 sm:py-16 lg:pb-20">
+        <div className="relative px-4 mx-auto max-w-7xl sm:px-6 lg:px-2">
+          <h1 className="text-4xl text-center 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-2xl text-center 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 className="grid grid-cols-1 py-8 gap-y-4 gap-x-8 lg:mt-8 lg:items-start lg:grid-cols-2 xl:grid-cols-2">
+            <div className="xl:col-span-1">
+              <div className={classNames.container}>
+                {benefits.map(
+                  ([label, [prosLabel, pros], [consLabel, cons]]) => (
+                    <div className={classNames.benefitContainer}>
+                      <h1 className={classNames.benefitTitle}>
+                        <div className={classNames.benefitIcon}>
+                          <FontAwesomeIcon icon={faCheckCircle} />
+                        </div>
+                        {label}
+                      </h1>
+
+                      <div className={classNames.prosAndConsContainer}>
+                        <ProsOrConsList
+                          items={pros}
+                          label={prosLabel}
+                          type="pro"
+                        />
+                        <ProsOrConsList
+                          items={cons}
+                          label={consLabel}
+                          type="con"
+                        />
+                      </div>
                     </div>
-                    {label}
-                  </h1>
-
-                  <div className={classNames.prosAndConsContainer}>
-                    <ProsOrConsList items={pros} label={prosLabel} type="pro" />
-                    <ProsOrConsList items={cons} label={consLabel} type="con" />
-                  </div>
-                </div>
-              ))}
+                  ),
+                )}
+              </div>
+
+              <div className="mt-4 mb-8 flex justify-center">
+                <Button
+                  as="a"
+                  href="/docs/getting-started"
+                  className="mt-8 sm:mt-10"
+                  role="button"
+                >
+                  Get started
+                </Button>
+              </div>
             </div>
 
-            <div className="mt-4 mb-8 flex justify-center">
-              <a href="/docs/getting-started" title="" className="inline-flex px-8 py-4 mt-8 text-lg font-bold transition-all duration-200 bg-quint-purple text-black rounded sm:mt-10 font-pj hover:bg-[#2d0075] hover:text-quint-purple focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900" role="button">
-                Get started
-              </a>
+            <div className="xl:col-span-1 text-lg">
+              <CodeSample components={components} />
+              <div className="flex justify-center">
+                <Button
+                  as="button"
+                  className={isViolationVisible ? 'hidden' : 'visible'}
+                  variant="secondary"
+                  onClick={handleToggleVisibility}
+                >
+                  Find bug
+                </Button>
+              </div>
+              <div
+                className={`transition-all duration-1000 ease-out overflow-hidden ${
+                  isViolationVisible
+                    ? 'opacity-100 max-h-screen'
+                    : 'opacity-0 max-h-0'
+                }`}
+              >
+                <ViolationSample components={components} />
+              </div>
             </div>
           </div>
 
-          <div className="xl:col-span-1 text-lg">
-            <CodeSample components={components} />
-            <div className="flex justify-center">
-              <button onClick={handleToggleVisibility} className={`transition-all duration-500 ease-out overflow-hidden ${isViolationVisible ? 'hidden' : 'visible'} inline-flex px-4 py-2 font-bold transition-all duration-200 bg-quint-purple text-black rounded font-pj hover:bg-[#2d0075] hover:text-quint-purple focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900`}>
-                Find bug
-              </button>
-            </div>
-            <div className={`transition-all duration-1000 ease-out overflow-hidden ${isViolationVisible ? 'opacity-100 max-h-screen' : 'opacity-0 max-h-0'}`} >
-              <ViolationSample components={components} />
-            </div>
-          </div>
-        </div>
+          <NewsletterSignupBanner />
 
-        <div className="mt-8 mb-8 flex justify-center">
-          {informalSystemsLogo()}
+          <div className="mt-8 mb-8 flex justify-center">
+            {informalSystemsLogo()}
+          </div>
         </div>
-      </div>
-    </section >
-  </div >
-
+      </section>
+    </div>
   )
 }
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
index 5b09bc485..1f042333c 100644
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -1,22 +1,17 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    colors: {
-      primary: {
-        600: '#9d6ce5',
-      }
-    },
     extend: {
       colors: {
         'quint-purple': '#9d6ce5',
         'quint-orange': '#ffab70',
       },
-    }
+    },
   },
   plugins: [],
-};
+}