Improve accessibility on enablement group page (#1993)

pokey · web-flow · commit 9fc9f0e67c41 · 2023-11-03T20:25:51.000Z
- Addressing accessibility problems [flagged by lighthouse](https://pagespeed.web.dev/analysis/https-www-cursorless-org-enablement-group/xkwxy177xt) - See [deploy preview](https://deploy-preview-1993--cursorless.netlify.app/enablement-group) ## Checklist - [-] I have added [tests](https://www.cursorless.org/docs/contributing/test-case-recorder/) - [-] I have updated the [docs](https://github.com/cursorless-dev/cursorless/tree/main/docs) and [cheatsheet](https://github.com/cursorless-dev/cursorless/tree/main/cursorless-talon/src/cheatsheet) - [-] I have not broken the cheatsheet
diff --git a/packages/cursorless-org/src/components/Layout.tsx b/packages/cursorless-org/src/components/Layout.tsx
@@ -13,21 +13,21 @@ const components: MDXComponents = {
     </h1>
   ),
   h2: ({ children }) => (
-    <h2 className="uppercase text-[1.4em] mt-8 mb-4 sm:mb-8 font-semibold tracking-[0.08em]">
+    <h2 className="uppercase text-[1.5em] mt-8 mb-4 sm:mb-8 leading-[1.2] font-semibold tracking-[0.08em]">
       {children}
     </h2>
   ),
   h3: ({ children }) => (
-    <h3 className="uppercase text-[1.5rem] mt-6 mb-3 sm:mb-6 font-medium tracking-[0.08em]">
+    <h3 className="uppercase text-[1.25rem] mt-6 mb-3 sm:mb-6 leading-tight font-medium tracking-[0.08em]">
       {children}
     </h3>
   ),
   h4: ({ children }) => (
-    <h4 className="uppercase text-[1.5rem] mt-11 mb-3 sm:mb-6 font-medium tracking-[0.08em]">
+    <h4 className="uppercase text-[1.125rem] mt-11 mb-3 sm:mb-6 font-medium tracking-[0.08em]">
       {children}
     </h4>
   ),
-  hr: () => <hr className="my-8 border-teal-400" />,
+  hr: () => <hr className="my-8 border-white" />,
   ul: ({ children }) => <ul className="list-disc ml-8">{children}</ul>,
   ol: ({ children }) => <ol className="list-decimal ml-8">{children}</ol>,
   li: ({ children }) => <li className="my-2">{children}</li>,
@@ -51,16 +51,8 @@ const components: MDXComponents = {
       style={{ maxWidth: "100%" }}
     />
   ),
-  CalloutParent: ({ children }) => (
-    <div className="border-teal-400 border rounded-sm px-7 my-12">
-      {children}
-    </div>
-  ),
-  CalloutBox: ({ title, children }) => (
-    <div className="my-6">
-      <h4 className="uppercase text-[1.5rem] mb-3 sm:mb-6 leading-tight font-medium tracking-[0.08em]">
-        {title}
-      </h4>
+  CalloutBox: ({ children }) => (
+    <div className="border-teal-400 border rounded-sm px-7 my-12 pb-6">
       {children}
     </div>
   ),
@@ -95,12 +87,12 @@ const components: MDXComponents = {
     </div>
   ),
   Tier: ({ emoji, type, price, address, subject, body }) => (
-    <div className="flex gap-3 leading-8">
-      <span className="">{emoji}</span>
-      <span className="uppercase">{type}</span>
-      <span>{"-"}</span>
+    <div className="grid grid-cols-2 gap-2 leading-8">
+      <span className="uppercase">
+        {emoji} {type}
+      </span>
       <SpamProofEmailLink address={address} subject={subject} body={body}>
-        {price} / year
+        <span className="text-[24px]">{price}</span>
       </SpamProofEmailLink>
     </div>
   ),
diff --git a/packages/cursorless-org/src/components/SpamProofEmailLink.tsx b/packages/cursorless-org/src/components/SpamProofEmailLink.tsx
@@ -56,13 +56,16 @@ export function SpamProofEmailLink({
   }
 
   return (
-    <a href={href} className="text-teal-400 underline underline-offset-4">
+    <a
+      href={href}
+      className="text-teal-600 hover:text-teal-500 dark:text-teal-500 hover:dark:text-teal-300 underline underline-offset-4"
+    >
       {children ?? (
-        <>
+        <span className="text-[18px]">
           {`${username}@`}
           <span className="hidden">Die spam!</span>
           {domain}
-        </>
+        </span>
       )}
     </a>
   );
diff --git a/packages/cursorless-org/src/content/enablement-group.mdx b/packages/cursorless-org/src/content/enablement-group.mdx
@@ -1,7 +1,7 @@
 export const meta = {
   title: "Cursorless Enablement Group",
   description:
-    "Help enable the adoption of Cursorless by accelerating its development.",
+    "Help enable the adoption of Cursorless by accelerating its development",
 };
 
 import { SpamProofEmailLink } from "../components/SpamProofEmailLink";
@@ -35,7 +35,7 @@ Your support will help Cursorless founder, Pokey Rule, and his team develop the
 - Launch Cursorless in other IDEs, such as JetBrains, emacs, etc, as well as in a web browser, and even work globally using OCR / accessibility APIs to operate anywhere on the screen.
 - Further improvements to the Cursorless execution engine to advance the state of the art in voice coding.
 
-### 🫶 Developers love Cursorless
+## Developers love Cursorless
 
 <Testimonials>
 <Testimonial
@@ -86,7 +86,7 @@ Your support will help Cursorless founder, Pokey Rule, and his team develop the
 
 </Testimonials>
 
-### 🎯 Goals
+## Goals
 
 Cursorless needs a dedicated, full-time software engineer on staff. This will cost $5,000 USD per month. The Enablement Group guides development and the participation fees contribute to this crucial funding. Cursorless will always be open source.
 
@@ -102,50 +102,54 @@ The Enablement Group consists of stakeholders whose talents, lived experiences,
   body={emailBody}
 />
 
-<CalloutParent>
+## benefits
 
-<CalloutBox title="Become a Distinguished Accessibility Champion">
-  By joining the Enablement Group, you solidify your position as a dedicated
-  advocate for accessible technology and inclusion. Your active involvement
-  showcases your commitment to driving positive change and making technology
-  more accessible for everyone.
-</CalloutBox>
+Members of the Cursorless Enablement Group enjoy the following benefits:
 
-<CalloutBox title="Gain Prominent Visibility Online">
-  As a valued member of the Enablement Group, you gain increased visibility
-  within both the open source and accessible technology communities. Your
-  participation will be recognized on all web properties including GitHub Repo,
-  cursorless.org, social media, via any other acknowledgments in project
-  updates, newsletters, and events to cement your role as a key player in
-  advancing Cursorless.
-</CalloutBox>
+<CalloutBox>
 
-<CalloutBox title="Empower Future Accessibility">
-  Your commitment to the Enablement Group supports the long-term vision of
-  creating a full-time staff engineer dedicated to developing Cursorless. As the
-  group grows, the possibility of achieving this goal becomes more tangible,
-  contributing to a sustainable and impactful initiative for accessible
-  technology.
-</CalloutBox>
+### Become a Distinguished Accessibility Champion
 
-<CalloutBox title="Join a Collaboration with Industry Leaders">
-  Joining the Enablement Group provides an opportunity to collaborate with
-  like-minded individuals and industry leaders who share your passion for
-  accessible technology. This network allows you to exchange insights, share
-  best practices, and collectively drive the advancement of inclusive digital
-  solutions.
-</CalloutBox>
+By joining the Enablement Group, you solidify your position as a dedicated
+advocate for accessible technology and inclusion. Your active involvement
+showcases your commitment to driving positive change and making technology
+more accessible for everyone.
 
-<CalloutBox title="Obtain Collective Influence on Development">
-  While the development of Cursorless is guided by its community of users, your
-  annual fee directly contributes to the development of these feature requests!
-  Use your expertise and experience to help prioritize and comment on effective
-  solutions around feature requests. You're ensuring that development directly
-  aligns with the needs of users who value inclusive and accessible technology
-  and rely on it to succeed in their lives.
-</CalloutBox>
+### Gain Prominent Visibility Online
+
+As a valued member of the Enablement Group, you gain increased visibility
+within both the open source and accessible technology communities. Your
+participation will be recognized on all web properties including GitHub Repo,
+cursorless.org, social media, via any other acknowledgments in project
+updates, newsletters, and events to cement your role as a key player in
+advancing Cursorless.
+
+### Empower Future Accessibility
+
+Your commitment to the Enablement Group supports the long-term vision of
+creating a full-time staff engineer dedicated to developing Cursorless. As the
+group grows, the possibility of achieving this goal becomes more tangible,
+contributing to a sustainable and impactful initiative for accessible
+technology.
+
+### Join a Collaboration with Industry Leaders
 
-</CalloutParent>
+Joining the Enablement Group provides an opportunity to collaborate with
+like-minded individuals and industry leaders who share your passion for
+accessible technology. This network allows you to exchange insights, share
+best practices, and collectively drive the advancement of inclusive digital
+solutions.
+
+### Obtain Collective Influence on Development
+
+While the development of Cursorless is guided by its community of users, your
+annual fee directly contributes to the development of these feature requests!
+Use your expertise and experience to help prioritize and comment on effective
+solutions around feature requests. You're ensuring that development directly
+aligns with the needs of users who value inclusive and accessible technology
+and rely on it to succeed in their lives.
+
+</CalloutBox>
 
 ### All participants also enjoy the following benefits
 
@@ -174,6 +178,8 @@ Members of the Cursorless Enablement Group enjoy several privileges. The access
 
 Your participation will help Cursorless maintain its growth trajectory and uphold its cutting-edge quality and esteemed 5-star reputation in coding by voice. And you'll make a lasting impact on the direction of accessible technology.
 
+## Annual Membership Rates
+
 <Tiers>
   <Tier
     emoji="😍️"
@@ -201,6 +207,10 @@ Your participation will help Cursorless maintain its growth trajectory and uphol
   />
 </Tiers>
 
+_All prices listed are per annum._
+
+---
+
 To join, send an email to Cursorless founder Pokey Rule
 
 <SpamProofEmailLink
diff --git a/packages/cursorless-org/tailwind.config.js b/packages/cursorless-org/tailwind.config.js
@@ -91,6 +91,8 @@ module.exports = {
           200: "#CDFFF9",
           300: "#99FFF3",
           400: "#00907F",
+          500: "#47D4C3",
+          600: "#0F776B",
           700: "#005349",
           800: "#00443C",
           900: "#00110F",
