Convert DiscordCTA to ContactUs (#739)

components/Governance/DiscordCTA/DiscordCTA.tsx → components/ContactUs/ContactUs.tsx

@@ -1,20 +1,19 @@
 import { Box, Text, Container, ArrowButton, Flex } from "@/lib/ui";
-import Link from "next/link";
 import { defineMessages, useIntl } from "react-intl";
-import { CONSTANTS } from "../../../shared/constants";
+import { CONSTANTS } from "../../shared/constants";
 
 const messages = defineMessages({
   heading: {
-    id: "joinCommunity.heading",
-    defaultMessage: "Join Our Diverse Community",
+    id: "ContactUs.heading",
+    defaultMessage: "Want to say hello?",
   },
-  button: {
-    id: "joinCommunity.button",
-    defaultMessage: "Dive into Discord",
+  emailLink: {
+    id: "ContactUs.contact",
+    defaultMessage: "Drop us a line",
   },
 });
 
-export function DiscordCTA() {
+export function ContactUs() {
   const { formatMessage } = useIntl();
   return (
     <Box
@@ -50,20 +49,16 @@ export function DiscordCTA() {
           sm: "row",
         }}
         justifyContent="center"
-        gap={{
-          base: 6,
-          sm: 8,
-        }}
       >
         <ArrowButton
           as="a"
-          href={CONSTANTS.SOCIAL_LINKS.discord}
+          href={`mailto:${CONSTANTS.CONTACT_US_EMAIL}`}
           target="_blank"
           rel="noreferrer"
           size="sm"
           colorScheme="white"
         >
-          {formatMessage(messages.button)}
+          {formatMessage(messages.emailLink)}
         </ArrowButton>
       </Flex>
     </Box>

pages/community/foundation/index.tsx

@@ -10,7 +10,7 @@ import {
   Text,
   chakra,
 } from "@/lib/ui";
-import { DiscordCTA } from "@/components/Governance/DiscordCTA/DiscordCTA";
+import { ContactUs } from "@/components/ContactUs/ContactUs";
 import flower from "../../../assets/heroImages/foundation/flower.svg";
 import key from "../../../assets/heroImages/foundation/key.svg";
 import weather from "../../../assets/heroImages/foundation/weather.svg";
@@ -222,7 +222,7 @@ export default function Governance() {
           }}
         />
       </Box>
-      <DiscordCTA />
+      <ContactUs />
     </Box>
   );
 }

pages/community/governance/index.tsx

@@ -11,7 +11,7 @@ import {
 import Head from "next/head";
 import { GovernanceStructure } from "@/components/Governance/GovernanceStructure/GovernanceStructure";
 import { GovernanceFAQ } from "@/components/Governance/GovernanceFAQ/GovernanceFAQ";
-import { DiscordCTA } from "@/components/Governance/DiscordCTA/DiscordCTA";
+import { ContactUs } from "@/components/ContactUs/ContactUs";
 import { defineMessages, useIntl } from "react-intl";
 import betta from "../../../assets/heroImages/governance/betta.svg";
 import angler from "../../../assets/heroImages/governance/angler.svg";
@@ -147,7 +147,7 @@ export default function Governance() {
 
       <GovernanceStructure />
       <GovernanceFAQ />
-      <DiscordCTA />
+      <ContactUs />
     </Box>
   );
 }

shared/constants.ts

@@ -5,8 +5,11 @@ const SOCIAL_LINKS = {
   telegram: "https://t.me/ironfishcryptochat",
 };
 
+const CONTACT_US_EMAIL = "[email protected]";
+
 export const CONSTANTS = {
   SOCIAL_LINKS,
+  CONTACT_US_EMAIL,
 };
 
 export const GRANTS_FORM_URL =