feat: Search and BAT copy updates

src/basic-attention-token/BasicAttentionTokenLandingPage.tsx

@@ -5,9 +5,11 @@ import {
 import { Box, Button, Link, Stack, Typography } from "@mui/material";
 import { Link as RouterLink } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import basicattentiontoken from "@/assets/images/bat-logo-white.svg";
+import basicattentiontoken from "@/assets/images/basic-attention-token.svg";
 import { LandingPageAppBar } from "@/components/AppBar/LandingPageAppBar";
 import { Background } from "@/components/Background/Background";
+import { BottomSwoop } from "@/components/Assets/BottomSwoop";
+import { TopSwoop } from "@/components/Assets/TopSwoop";
 
 export function BasicAttentionTokenLandingPage() {
   useTrackMatomoPageView({
@@ -17,47 +19,47 @@ export function BasicAttentionTokenLandingPage() {
     <Background>
       <LandingPageAppBar />
 
-      <Box display="flex" justifyContent="center" mt={5}>
-        <Stack maxWidth={1000} spacing={3}>
+      <Box mt={2} />
+      <TopSwoop />
+      <Box display="flex" justifyContent="center" bgcolor="white" width="100%">
+        <Stack maxWidth={1000} spacing={3} mb={1}>
           <Box alignSelf="center">
             <Box
               component="img"
               src={basicattentiontoken}
               width={{ xs: "300px", md: "500px" }}
             />
           </Box>
-          <Typography
-            variant="h4"
-            textAlign="center"
-            fontWeight={400}
-            color="white"
-          >
+          <Typography variant="h4" textAlign="center" fontWeight={400}>
             <Trans>
               Pay with BAT to get <strong>50% off</strong> your first
               self-managed campaign.
             </Trans>
           </Typography>
 
-          <Typography variant="subtitle1" textAlign="center" color="white">
+          <Typography variant="subtitle1" textAlign="center">
             <Trans>
-              Brave is place where early adopters thrive. We’re celebrating our
-              crypto roots by offering new and returning customers half off
-              their first self-managed campaign when they check-out with BAT
-              <strong>*</strong>.
+              Brave is where early adopters thrive. We’re celebrating our crypto
+              roots by offering new and returning Brave Ads customers half off
+              their first self-managed campaign if they buy with BAT
+              <strong>*</strong>
             </Trans>
           </Typography>
 
-          <Typography variant="caption" textAlign="center" color="white">
+          <Typography variant="caption" textAlign="center">
             <Trans>
               *Limited time only. Available to new advertisers, and those who
-              ran campaigns before September 30, 2023. Eligible for Push
-              Notification and Newsfeed ads only.
+              ran campaigns prior to September 30, 2023. Eligible for Push
+              Notification and Newsfeed ads.
             </Trans>
           </Typography>
 
           <LaunchCampaignButton />
         </Stack>
       </Box>
+      <BottomSwoop />
+
+      <WhatIsBAT />
     </Background>
   );
 }
@@ -77,24 +79,78 @@ function LaunchCampaignButton() {
           trackMatomoEvent("basic-attention-token", "launch-campaign")
         }
         sx={{
-          width: "180px",
+          width: "250px",
           maxHeight: { xs: "40px", md: "60px" },
           mb: 1,
-          fontSize: "18px",
+          fontSize: "16px",
         }}
       >
-        <Trans>Get started</Trans>
+        <Trans>Start a campaign with BAT</Trans>
       </Button>
-      <Link
-        color="secondary"
-        sx={{ cursor: "pointer" }}
-        onClick={() => {
-          trackMatomoEvent("basic-attention-token", "learn-about-bat");
-          window.open("https://basicattentiontoken.org/", "_blank", "noopener");
-        }}
-      >
-        <Trans>Learn more about BAT</Trans>
-      </Link>
     </Stack>
   );
 }
+
+function WhatIsBAT() {
+  const { trackMatomoEvent } = useTrackMatomoEvent();
+
+  return (
+    <Box display="flex" justifyContent="center" pb={5}>
+      <Stack maxWidth={1000} spacing={3}>
+        <Typography
+          variant="h4"
+          textAlign="center"
+          fontWeight={600}
+          color="white"
+        >
+          <Trans>What’s BAT?</Trans>
+        </Typography>
+
+        <Typography variant="subtitle1" textAlign="center" color="white">
+          <Trans>
+            The{" "}
+            <Link
+              color="secondary"
+              sx={{ cursor: "pointer" }}
+              onClick={() => {
+                trackMatomoEvent("basic-attention-token", "learn-about-bat");
+                window.open(
+                  "https://basicattentiontoken.org/",
+                  "_blank",
+                  "noopener",
+                );
+              }}
+            >
+              Basic Attention Token (BAT)
+            </Link>{" "}
+            is Brave’s native crypto token. Brave Browser users who opt into{" "}
+            <Link
+              color="secondary"
+              sx={{ cursor: "pointer" }}
+              onClick={() => {
+                trackMatomoEvent("brave-rewards", "learn-about-brave-rewards");
+                window.open(
+                  "https://brave.com/brave-rewards/",
+                  "_blank",
+                  "noopener",
+                );
+              }}
+            >
+              Brave Rewards
+            </Link>{" "}
+            can earn BAT just for opting into viewing ads from the Brave Ads
+            network. Earners can hold BAT like any other crypto asset, trade it,
+            cash it in, or even donate it to their favorite creators.
+          </Trans>
+        </Typography>
+
+        <Typography variant="subtitle1" textAlign="center" color="white">
+          <Trans>
+            BAT holders can now also cash in their tokens to advertise their
+            companies or products on the Brave Ads network.
+          </Trans>
+        </Typography>
+      </Stack>
+    </Box>
+  );
+}