footer; fix linkbox titles (#1237)

* footer; fix linkbox titles

* remove console log

frontend/components/NewLayout/Common/LinkBox.tsx

@@ -79,7 +79,6 @@ const LinkBoxTitleImageContainer = styled("div")`
 
 const LinkBoxTitleImage = styled(Image)`
   object-fit: contain;
-  position: absolute;
 `
 
 const LinkBoxTextContainer = styled("div")`
@@ -93,7 +92,6 @@ const LinkBoxTitle = styled(Typography)(
   color: ${theme.palette.common.brand.nearlyBlack};
   letter-spacing: -0.42px;
   hyphens: auto;
-  word-break: break-word;
   margin: 0 0 16px;
 
   ${theme.breakpoints.up("desktop")} {

frontend/components/NewLayout/Common/PartnerDivider.tsx

@@ -0,0 +1,53 @@
+import { PropsOf } from "@emotion/react"
+import { styled } from "@mui/material/styles"
+
+import { useTranslator } from "/hooks/useTranslator"
+import { fontSize } from "/src/theme/util"
+import CommonTranslations from "/translations/common"
+
+const PartnerDividerText = styled("span")(
+  ({ theme }) => `
+  ${fontSize(14)}
+  color: ${theme.palette.common.grayscale.mediumDark};
+  text-transform: uppercase;
+  display: block;
+  text-align: center;
+
+  margin: 0 auto;
+  background-color: ${theme.palette.common.grayscale.white};
+  padding: 0 0.5rem;
+  z-index: 100;
+  left: 50%;
+  right: 50%;
+`,
+)
+
+const PartnerDividerWrapper = styled("section")(
+  ({ theme }) => `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  &::before {
+    content: "";
+    height: 1px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    background-color: ${theme.palette.common.grayscale.mediumDark};
+    z-index: 1;
+  }
+`,
+)
+
+function PartnerDivider(props: PropsOf<typeof PartnerDividerWrapper>) {
+  const t = useTranslator(CommonTranslations)
+
+  return (
+    <PartnerDividerWrapper {...props}>
+      <PartnerDividerText>{t("partners")}</PartnerDividerText>
+    </PartnerDividerWrapper>
+  )
+}
+
+export default PartnerDivider