feat: bring back legal pages

inertia/components/common/dropdown/dropdown_label.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-const DropdownLabel = styled.p(({ theme }) => ({
+const DropdownLabel = styled.div(({ theme }) => ({
   height: 'auto',
   width: 'auto',
   color: theme.colors.font,

inertia/components/home/hero_header.tsx

@@ -8,7 +8,7 @@ const HeroStyle = styled.header(({ theme }) => ({
   height: '250px',
   minHeight: '250px',
   width: '100%',
-  backgroundColor: theme.colors.darkestBlue,
+  backgroundColor: theme.colors.secondary,
   marginTop: '0.5em',
   borderRadius: theme.border.radius,
   padding: '1em',
@@ -19,7 +19,6 @@ const HeroStyle = styled.header(({ theme }) => ({
   flexDirection: 'column',
 
   '& *': {
-    color: `${theme.colors.white} !important`,
     textAlign: 'center',
   },
 }));
@@ -35,6 +34,7 @@ const HeroQuote = styled(Quotes)({
 const LinkButton = styled(Link)(({ theme }) => ({
   fontSize: '1rem',
   width: 'fit-content',
+  color: theme.colors.white,
   backgroundColor: theme.colors.primary,
   borderRadius: '5rem',
   padding: '0.5em 1.5em',

inertia/components/layouts/legal_content_layout.tsx

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+import { ReactNode } from 'react';
+import ContentLayout from '~/components/layouts/content_layout';
+import LegalFooter from '~/components/legal/legal_footer';
+
+const LegalContentStyle = styled(ContentLayout)({
+  main: {
+    'h1, p': {
+      marginTop: '0.5em',
+    },
+    h2: {
+      marginTop: '1.5em',
+    },
+    h3: {
+      marginTop: '1em',
+    },
+    ul: {
+      marginLeft: '2em',
+    },
+  },
+});
+
+const LegalContentLayout = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => (
+  <LegalContentStyle className={className}>
+    {children}
+    <LegalFooter />
+  </LegalContentStyle>
+);
+
+export default LegalContentLayout;

inertia/components/legal/legal_footer.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next';
+import ExternalLink from '~/components/common/external_link';
+
+export default function LegalFooter() {
+  const { t } = useTranslation('legal');
+  return (
+    <>
+      <h2>{t('contact.title')}</h2>
+      <p>
+        {t('contact.description')}{' '}
+        <ExternalLink href="mailto:sonnyasdev@gmail.com" target="_blank">
+          sonnyasdev[at]gmail[dot]com
+        </ExternalLink>
+      </p>
+
+      <p>{t('footer.changes')}</p>
+      <p css={{ marginBottom: '2em' }}>{t('footer.thanks')}</p>
+    </>
+  );
+}