Add CountMore-branded banner to voter registration page. (#2)

* Who built the site * Branded banner on voter registration form. * Maybe some updates * remove 'below'
front-seat · Mar 12, 2024 · c7705d5 · c7705d5
1 parent e6b2def
commit c7705d5
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 12 deletions.
diff --git a/src/components/MoreAndText.tsx b/src/components/MoreAndText.tsx
@@ -75,6 +75,29 @@ const MoreAndText: React.FC<{ handler: RegistrationHandler }> = ({
             vote rather than the electoral college &mdash; and each person's
             vote would count the same no matter where they lived.
           </p>
+          <p className="font-cabinet font-extrabold text-[24px] pt-8">
+            Who built this site?
+          </p>
+          <p className="font-satoshi font-medium text-[20px] leading-[30px] pt-2">
+            Hi. We're{" "}
+            <a
+              href="https://frontseat.org/"
+              target="_blank"
+              className="underline cursor-pointer md:hover:text-gray-600 transition-colors duration-200"
+            >
+              Front Seat
+            </a>
+            , a group of civic tech builders based in sunny Seattle, Washington.
+            We built this site in partnership with{" "}
+            <a
+              href="https://voteamerica.com/"
+              target="_blank"
+              className="underline cursor-pointer md:hover:text-gray-600 transition-colors duration-200"
+            >
+              VoteAmerica
+            </a>
+            , a trusted name in online voter registration.
+          </p>
         </div>
       )}
     </>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import MoreAndText from "../components/MoreAndText.tsx";
 ---
 
-<Layout title="Count More">
+<Layout title="Count More" className="bg-murk">
   <main
     class="md:max-w-[768px] lg:max-w-[960px] mx-3 md:mx-auto flex flex-row flex-wrap md:pt-12 font-cabinet font-bold"
   >
@@ -31,11 +31,12 @@ import MoreAndText from "../components/MoreAndText.tsx";
           ©2024 Count More
         </div>
         <div class="flex-grow"></div>
-        <a
+        <aI
+          t
           class="font-cabinet font-regular text-[18px] leading-[20px] underline hover:text-gray-700 transition-colors duration-200"
           href="mailto:Dave Peck <dave@frontseat.org>, Matt Lerner <matt@frontseat.org>?subject=Count%20More"
         >
-          Contact</a
+          Contact</aI
         >
       </div>
     </div>
@@ -52,7 +53,7 @@ import MoreAndText from "../components/MoreAndText.tsx";
         class="font-cabinet font-regular text-[18px] leading-[20px] underline hover:text-gray-700 transition-colors duration-200"
         href="mailto:Dave Peck <dave@frontseat.org>, Matt Lerner <matt@frontseat.org>?subject=Count%20More"
       >
-        Contact</a
+        Contact us</a
       >
     </div>
   </main>

diff --git a/src/pages/va-register.astro b/src/pages/va-register.astro
@@ -3,18 +3,52 @@ import Layout from "../layouts/Layout.astro";
 import VoteAmericaAnalytics from "../components/VoteAmericaAnalytics";
 ---
 
-<Layout title="Count More: Register To Vote" className="!bg-white">
+<Layout title="Count More: Register To Vote">
   {/* Add VoteAmerica+ Embed Tools To <head> section of page. */}
   <script slot="head" src="https://cdn.voteamerica.com/embed/tools.js" async
   ></script>
 
-  {/* Embed the primary voteamerica area */}
-  <main class="md:max-w-[768px] lg:max-w-[960px] mx-3 md:mx-auto py-12">
-    <div
-      class="voteamerica-embed"
-      data-subscriber="countmore"
-      data-tool="register"
-    >
+  <main>
+    <div class="bg-murk py-6 border-b-4 border-black">
+      <div class="max-w-[664px] mx-auto">
+        <div
+          class="mx-[12px] va:mx-[4px] flex flex-row space-x-10 va:space-y-0 justify-between items-center"
+        >
+          <div class="flex flex-col">
+            <p
+              class="uppercase font-black text-[10px] va:text-[12px] leading-[10px] ml-[2px]"
+            >
+              Make&nbsp;your&nbsp;vote
+            </p>
+            <h1
+              class="font-cabinet font-extrabold pt-2 text-[32px] va:text-[38px] leading-[30px] va:leading-[35px] tracking-tight cursor-pointer transition-colors duration-200"
+              onclick="window.history.back()"
+            >
+              Count<br /><span class="pl-[1px]">More</span>
+            </h1>
+          </div>
+          <p
+            class="font-satoshi font-medium text-[15px] leading-[20px] va:text-[16px] va:leading-[23px]"
+          >
+            Register to vote with our trusted partner, <a
+              href="https://voteamerica.com/"
+              target="_blank"
+              class="underline"
+              rel="noopener noreferrer">VoteAmerica</a
+            >.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    {/* Embed the primary voteamerica area */}
+    <div class="bg-white pt-10 pb-20">
+      <div
+        class="voteamerica-embed"
+        data-subscriber="countmore"
+        data-tool="register"
+      >
+      </div>
     </div>
   </main>
 

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -4,6 +4,8 @@ export default {
   theme: {
     screens: {
       sm: '376px',
+      // The VoteAmerica breakpoint is 664px
+      va: '664px',
       md: '768px',
       lg: '960px',
       xl: '1280px',