Add mobile app badges and tiktok to landing page

app/web/components/Footer/Footer.tsx

@@ -9,7 +9,7 @@ import {
   styled,
   Typography,
 } from "@mui/material";
-import { BlueSkyIcon } from "components/Icons";
+import { BlueSkyIcon, TikTokIcon } from "components/Icons";
 import ReportButton from "components/Navigation/ReportButton";
 import StyledLink from "components/StyledLink";
 import AntibotNote from "features/antibot/AntibotNote";
@@ -21,6 +21,8 @@ import {
   blogRoute,
   builtWithRoute,
   contactRoute,
+  couchersAppStoreURL,
+  couchersGooglePlayURL,
   donationsRoute,
   eventsRoute,
   facebookURL,
@@ -133,6 +135,7 @@ const StyledButtonContainer = styled("div")({
   display: "flex",
   flexDirection: "column",
   justifySelf: "flex-start",
+  alignItems: "center",
 });
 
 const StyledSocialIconsContainer = styled("div")({
@@ -155,10 +158,10 @@ const StyledButton = styled(Button)<ButtonProps>(({ theme }) => ({
   },
 }));
 
-const VersionLink = styled(Link)(({ theme }) => ({
+const VersionLink = styled(Link)({
   fontWeight: 700,
   color: "inherit",
-}));
+});
 
 export default function Footer({ bottomMargin }: { bottomMargin?: string }) {
   const {
@@ -237,6 +240,38 @@ export default function Footer({ bottomMargin }: { bottomMargin?: string }) {
             >
               {t("nav.volunteer")}
             </StyledButton>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: "8px",
+                marginBottom: "8px",
+              }}
+            >
+              <a
+                href={couchersAppStoreURL}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img
+                  src="/img/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg"
+                  alt={t("download_on_app_store")}
+                  style={{ height: "26px", width: "auto", display: "block" }}
+                />
+              </a>
+              <a
+                href={couchersGooglePlayURL}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img
+                  src="/img/GetItOnGooglePlay_Badge_Web_color_English.svg"
+                  alt={t("get_it_on_google_play")}
+                  style={{ height: "39px", width: "auto", display: "block" }}
+                />
+              </a>
+            </div>
             <StyledSocialIconsContainer>
               <MuiLink
                 href={githubURL}
@@ -274,6 +309,15 @@ export default function Footer({ bottomMargin }: { bottomMargin?: string }) {
               >
                 <BlueSkyIcon />
               </MuiLink>
+              <MuiLink
+                href="https://www.tiktok.com/@couchersorg"
+                target="_blank"
+                rel="noopener"
+                aria-label="TikTok"
+                color="inherit"
+              >
+                <TikTokIcon />
+              </MuiLink>
               <MuiLink
                 href={facebookURL}
                 target="_blank"

app/web/components/Icons/TikTokIcon.tsx

@@ -0,0 +1,13 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+export default function TikTokIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <title>TikTok</title>
+      <path
+        fill="currentColor"
+        d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"
+      />
+    </SvgIcon>
+  );
+}

app/web/components/Icons/index.ts

@@ -4,6 +4,7 @@ export { default as AccountSecurityIcon } from "@mui/icons-material/VerifiedUser
 export { default as AccountSettingsIcon } from "@mui/icons-material/SettingsApplications";
 export { default as CommentIcon } from "@mui/icons-material/Comment";
 export { default as BlueSkyIcon } from "./BlueSkyIcon";
+export { default as TikTokIcon } from "./TikTokIcon";
 export { default as EventIcon } from "./EventIcon";
 export { default as NotificationNewIcon } from "./NotificationNewIcon";
 

app/web/features/landing/CouchersIntroduction.tsx

@@ -3,9 +3,57 @@ import Button from "components/Button";
 import { Trans, useTranslation } from "i18n";
 import { GLOBAL, LANDING } from "i18n/namespaces";
 import { useRouter } from "next/router";
-import { signupRoute, whatIsCouchSurfingRoute } from "routes";
+import {
+  couchersAppStoreURL,
+  couchersGooglePlayURL,
+  signupRoute,
+  whatIsCouchSurfingRoute,
+} from "routes";
 import { theme } from "theme";
 
+function AppStoreBadges({ appStoreHeight = 38 }: { appStoreHeight?: number }) {
+  const { t } = useTranslation(GLOBAL);
+  // App Store SVG is naturally 40px tall; Google Play SVG is naturally 60px tall.
+  // Use a 1:1.5 ratio so both badges appear the same visual size.
+  const googlePlayHeight = appStoreHeight * 1.5;
+  return (
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{
+        marginTop: 2,
+        flexWrap: "wrap",
+        width: "fit-content",
+        alignItems: "center",
+        mx: { xs: "auto", md: 0 },
+      }}
+    >
+      <a href={couchersAppStoreURL} target="_blank" rel="noopener noreferrer">
+        <img
+          src="/img/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg"
+          alt={t("download_on_app_store")}
+          style={{
+            height: `${appStoreHeight}px`,
+            width: "auto",
+            display: "block",
+          }}
+        />
+      </a>
+      <a href={couchersGooglePlayURL} target="_blank" rel="noopener noreferrer">
+        <img
+          src="/img/GetItOnGooglePlay_Badge_Web_color_English.svg"
+          alt={t("get_it_on_google_play")}
+          style={{
+            height: `${googlePlayHeight}px`,
+            width: "auto",
+            display: "block",
+          }}
+        />
+      </a>
+    </Stack>
+  );
+}
+
 const StyledIntroduction = styled("div")(({ theme }) => ({
   flexDirection: "column",
   display: "flex",
@@ -74,44 +122,50 @@ const CouchersIntroduction = () => {
           {t("landing:introduction_subtitle2")}
         </Typography>
         {!isMobile && (
-          <Stack direction="row" spacing={2} sx={{ marginTop: 4 }}>
-            <Button
-              onClick={routeToSignupPage}
-              size="large"
-              color="primary"
-              sx={{
-                minWidth: theme.spacing(20),
-                fontSize: "1.2rem",
-                paddingX: theme.spacing(3),
-              }}
-            >
-              {t("global:join_us")}
-            </Button>
+          <>
+            <Stack direction="row" spacing={2} sx={{ marginTop: 4 }}>
+              <Button
+                onClick={routeToSignupPage}
+                size="large"
+                color="primary"
+                sx={{
+                  minWidth: theme.spacing(20),
+                  fontSize: "1.2rem",
+                  paddingX: theme.spacing(3),
+                }}
+              >
+                {t("global:join_us")}
+              </Button>
+              <Button
+                onClick={routeToLearnMore}
+                size="large"
+                variant="outlined"
+                color="primary"
+                sx={{
+                  minWidth: theme.spacing(20),
+                  fontSize: "1.2rem",
+                  paddingX: theme.spacing(3),
+                }}
+              >
+                {t("global:learn_more")}
+              </Button>
+            </Stack>
+            <AppStoreBadges appStoreHeight={42} />
+          </>
+        )}
+        {isMobile && (
+          <>
             <Button
               onClick={routeToLearnMore}
-              size="large"
-              variant="outlined"
+              size="medium"
+              variant="text"
               color="primary"
-              sx={{
-                minWidth: theme.spacing(20),
-                fontSize: "1.2rem",
-                paddingX: theme.spacing(3),
-              }}
+              sx={{ mt: 2 }}
             >
               {t("global:learn_more")}
             </Button>
-          </Stack>
-        )}
-        {isMobile && (
-          <Button
-            onClick={routeToLearnMore}
-            size="medium"
-            variant="text"
-            color="primary"
-            sx={{ mt: 2 }}
-          >
-            {t("global:learn_more")}
-          </Button>
+            <AppStoreBadges />
+          </>
         )}
       </>
     </StyledIntroduction>

app/web/resources/locales/en.json

@@ -6,6 +6,8 @@
   "retract": "Retract",
   "couchers": "Couchers.org",
   "learn_more": "Learn more",
+  "download_on_app_store": "Download on the App Store",
+  "get_it_on_google_play": "Get it on Google Play",
   "legal_name": "Couchers, Inc.",
   "login": "Log in",
   "sign_up": "Sign up",

app/web/routes.ts

@@ -21,6 +21,11 @@ export const newsletterSignupURL =
 
 export const translateJobURL = "https://couchers.org/volunteer/translator";
 
+export const couchersAppStoreURL =
+  "https://apps.apple.com/us/app/couchers-org/id6623776751";
+export const couchersGooglePlayURL =
+  "https://play.google.com/store/apps/details?id=org.couchers.android";
+
 export const landingRoute = "/landing";
 export const dashboardRoute = "/dashboard";
 export const blogRoute = "/blog";