fix: SEO

Fix some SEO violations and link from footer

Author: igeligel

src/chakra-starter/marketing-ui/footer/index.tsx

@@ -71,7 +71,41 @@ export const Footer = () => {
                 <Link href={"#"}>Pricing</Link>
                 <Link href={"#"}>Releases</Link>
           </Stack> */}
-          <Stack align={"flex-start"}></Stack>
+          <Stack align={"flex-start"}>
+            <ListHeader>Office Utilization Reports</ListHeader>
+            <Link asChild>
+              <NextLink href={"/office-utilization/new-york"}>
+                New York
+              </NextLink>
+            </Link>
+            <Link asChild>
+              <NextLink href={"/office-utilization/london"}>London</NextLink>
+            </Link>
+            <Link asChild>
+              <NextLink href={"/office-utilization/tokyo"}>Tokyo</NextLink>
+            </Link>
+            <Link asChild>
+              <NextLink href={"/office-utilization/shanghai"}>
+                Shanghai
+              </NextLink>
+            </Link>
+            <Link asChild>
+              <NextLink href={"/office-utilization/singapore"}>
+                Singapore
+              </NextLink>
+            </Link>
+            <Link asChild>
+              <NextLink href={"/office-utilization/san-francisco"}>
+                San Francisco
+              </NextLink>
+            </Link>
+            <Link asChild>
+              <NextLink href={"/office-utilization/paris"}>Paris</NextLink>
+            </Link>
+            <Link asChild>
+              <NextLink href={"/office-utilization/beijing"}>Beijing</NextLink>
+            </Link>
+          </Stack>
           {/* <Stack align={"flex-start"}>
             <ListHeader>Company</ListHeader>
             <Text>Coming soon</Text>

src/pages/office-utilization/[location]/index.tsx

@@ -8,6 +8,7 @@ import {
   Grid,
   Heading,
   Icon,
+  Link,
   List,
   Stack,
   Text,
@@ -72,7 +73,8 @@ const OfficeUtilizationPage = (
   );
 
   const t = useTranslations("OfficeUtilization");
-  const { locationData, comparisonCities } = props;
+  const { locationData, comparisonCities: comparisonCitiesFromProps } = props;
+  const comparisonCities = comparisonCitiesFromProps as LocationData[];
   let [sortedBlogArticles] = createShuffle([
     sortedBlogArticlesButNotShuffled,
     locationData.city,
@@ -85,12 +87,10 @@ const OfficeUtilizationPage = (
     ],
   });
 
-  const comparisonCitiesData = (comparisonCities as LocationData[]).map(
-    (city) => ({
-      allocation: parseInt(city.attendance_high_percentage),
-      name: city.city,
-    }),
-  );
+  const comparisonCitiesData = comparisonCities.map((city) => ({
+    allocation: parseInt(city.attendance_high_percentage),
+    name: city.city,
+  }));
 
   const mainCityData = {
     allocation: parseInt(locationData.attendance_high_percentage),
@@ -145,14 +145,18 @@ const OfficeUtilizationPage = (
     Util_Peak_High: locationData.util_peak_high_percentage,
   });
 
+  const kebabCasedLocation = kebabCase(locationData.city.toLowerCase());
+
+  const fullUrl = `${url}/office-utilization/${kebabCasedLocation}`;
+
   return (
     <>
       <NextSeo
         title={title}
         description={description}
-        canonical={`${url}/office-utilization/${locationData.city.toLowerCase()}`}
+        canonical={fullUrl}
         openGraph={{
-          url,
+          url: fullUrl,
           type: "website",
           title: title,
           description,
@@ -182,7 +186,7 @@ const OfficeUtilizationPage = (
       >
         <Container maxW="3xl" paddingTop={4} colorPalette={"orange"}>
           <Stack direction="row" justify="space-between" align="center">
-            <Heading size="3xl" color={"orange.1000"} marginTop={4}>
+            <Heading size="3xl" color={"orange.1000"} marginTop={4} as={"h1"}>
               Office Utilization — {City} • 2025
             </Heading>
             <Box>
@@ -418,6 +422,32 @@ const OfficeUtilizationPage = (
         </Container>
       </Box>
 
+      <Box marginTop={6}>
+        <Container maxW="4xl">
+          <Heading as={"h2"} fontWeight={500}>
+            Related Office Utilization Pages
+          </Heading>
+          <Stack direction="row" gap={2}>
+            {comparisonCities.map((city, index) => (
+              <>
+                <Box key={city.city}>
+                  <Link colorPalette="orange" asChild>
+                    <NextLink
+                      href={`/office-utilization/${kebabCase(city.city.toLowerCase())}`}
+                    >
+                      <Text textWrap={"nowrap"}>{city.city}</Text>
+                    </NextLink>
+                  </Link>
+                </Box>
+                {index < comparisonCities.length - 1 && (
+                  <Box borderWidth={0}>{"•"}</Box>
+                )}
+              </>
+            ))}
+          </Stack>
+        </Container>
+      </Box>
+
       <Container maxW="5xl" py={16}>
         {/* CTA */}
         <CtaActionContainer