Add newsletter form

activitypods · Aug 2, 2023 · 5a6b344 · 5a6b344
1 parent 4154d0d
commit 5a6b344
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 47 deletions.
diff --git a/website/src/components/Footer.astro b/website/src/components/Footer.astro
@@ -12,6 +12,36 @@ const { noMarginTop = false } = Astro.props;
 ---
 
 <footer class={`${noMarginTop ? "" : "mt-auto"}`}>
+  <Hr noPadding />
+  <div class="pb-6 pt-12">
+    <h2 class="text-2xl font-semibold tracking-wide">Newsletter</h2>
+    <p class="mt-4">
+      Stay informed about the ActivityBadges project. One mailing per month max.
+    </p>
+    <form
+      method="POST"
+      action="https://b144bca4.sibforms.com/serve/MUIFANV_7g8WKGbIxo1ZjVV4E4oXyFOxkHW-IFDOvl8cyvFn1hdFqIXT-ffp4fGSt4SaSqymz6Fg-NZ6jGNH5H_xMqZis4Ax2URKeYsRaxCnWUqEnIsMOMejowzM-_qretX5YJiBfoRDf7TfQDK9LVRdHyLv2ncvUqh0IwSakpykgath3W6HUsyGlygG0qSpclC6s3RrYjs80sDY"
+    >
+      <div class="mb-4 mt-4 flex flex-row">
+        <input
+          type="text"
+          name="EMAIL"
+          autocomplete="off"
+          placeholder="Your email address"
+          required
+          class="basis-3/4 rounded-l-lg border border-skin-fill border-opacity-40 bg-skin-fill p-3 placeholder:italic placeholder:text-opacity-75 focus:border-skin-accent focus:outline-none"
+        />
+        <input type="hidden" name="email_address_check" value="" />
+        <input type="hidden" name="locale" value="en" />
+        <input type="hidden" name="html_type" value="simple" />
+        <button
+          type="submit"
+          class="basis-1/4 rounded-r-lg bg-skin-accent px-5 py-3 font-bold"
+          >Subscribe</button
+        >
+      </div>
+    </form>
+  </div>
   <Hr noPadding />
   <div class="footer-wrapper">
     <Socials centered />

diff --git a/website/src/components/Header.astro b/website/src/components/Header.astro
@@ -63,15 +63,6 @@ const { activeNav } = Astro.props;
               News
             </a>
           </li>
-          <li>
-            <a
-              href="https://b144bca4.sibforms.com/serve/MUIFALM1yypdXQMiMCSOA9pkk9bL6aEMz1zxqUtpIVY9dH_OJDmFvdQq0aOlFkjjdDjzAgDj7Qsl_Pg42qSWkStt8CKptJjCzHJ4ccyNOeonyJxQwPSoUsrRArS29PdkZovgRv0r3acGv1GxRh_g17V1Pq3sv3A0tn7Pxr8kmMpp9n65mvr0Qz8zRbBAKAGnxnORH68hAu9i1BBe"
-              target="_blank"
-              }
-            >
-              Newsletter
-            </a>
-          </li>
           <!-- <li>
             <a href="/about" class={activeNav === "about" ? "active" : ""}>
               About

diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
@@ -62,10 +62,10 @@ const socialCount = SOCIALS.filter(social => social.active).length;
         <img
           src="/assets/presentation.png"
           alt="ActivityBadges presentation"
-          class="mb-6 mt-6 w-full"
+          class="mb-4 mt-6 w-full"
         />
       </a>
-      <p>
+      <p class="mb-6">
         Click the image to open the presentation. French version available <a
           href="https://www.canva.com/design/DAFbDso-59U/KCvXDOgFOEgD_cwYT8qWTA/view"
           target="_blank"
@@ -146,7 +146,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
       @apply my-2;
     }
     .social-wrapper {
-      @apply mt-4 flex flex-col sm:flex-row sm:items-center;
+      @apply mb-4 mt-6 flex flex-col sm:flex-row sm:items-center;
     }
     .social-links {
       @apply mb-1 mr-2 whitespace-nowrap sm:mb-0;

diff --git a/website/src/styles/base.css b/website/src/styles/base.css
@@ -18,7 +18,7 @@
     --color-accent: 164, 228, 115;
     --color-card: 52, 63, 96;
     --color-card-muted: 138, 51, 2;
-    --color-border: 171, 75, 8;
+    --color-border: 0, 70, 81;
   }
   #sun-svg,
   html[data-theme="dark"] #moon-svg {
@@ -114,6 +114,8 @@
   ::-webkit-scrollbar-thumb:hover {
     @apply bg-skin-card-muted;
   }
+
+
 }
 
 @layer components {

diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
@@ -20,46 +20,46 @@ module.exports = {
     // Uncomment the following extend
     // if existing Tailwind color palette will be used
 
-    // extend: {
-    textColor: {
-      skin: {
-        base: withOpacity("--color-text-base"),
-        accent: withOpacity("--color-accent"),
-        inverted: withOpacity("--color-fill"),
+    extend: {
+      textColor: {
+        skin: {
+          base: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-accent"),
+          inverted: withOpacity("--color-fill"),
+        },
       },
-    },
-    backgroundColor: {
-      skin: {
-        fill: withOpacity("--color-fill"),
-        accent: withOpacity("--color-accent"),
-        inverted: withOpacity("--color-text-base"),
-        card: withOpacity("--color-card"),
-        "card-muted": withOpacity("--color-card-muted"),
+      backgroundColor: {
+        skin: {
+          fill: withOpacity("--color-fill"),
+          accent: withOpacity("--color-accent"),
+          inverted: withOpacity("--color-text-base"),
+          card: withOpacity("--color-card"),
+          "card-muted": withOpacity("--color-card-muted"),
+        },
       },
-    },
-    outlineColor: {
-      skin: {
-        fill: withOpacity("--color-accent"),
+      outlineColor: {
+        skin: {
+          fill: withOpacity("--color-accent"),
+        },
       },
-    },
-    borderColor: {
-      skin: {
-        line: withOpacity("--color-border"),
-        fill: withOpacity("--color-text-base"),
-        accent: withOpacity("--color-accent"),
+      borderColor: {
+        skin: {
+          line: withOpacity("--color-border"),
+          fill: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-accent"),
+        },
       },
-    },
-    fill: {
-      skin: {
-        base: withOpacity("--color-text-base"),
-        accent: withOpacity("--color-accent"),
+      fill: {
+        skin: {
+          base: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-accent"),
+        },
+        transparent: "transparent",
+      },
+      fontFamily: {
+        mono: ["IBM Plex Mono", "monospace"],
       },
-      transparent: "transparent",
-    },
-    fontFamily: {
-      mono: ["IBM Plex Mono", "monospace"],
     },
-    // },
   },
   plugins: [require("@tailwindcss/typography")],
 };