feat: bring back previous home page

inertia/components/dashboard/collection/collection_container.tsx

@@ -33,7 +33,7 @@ export default function CollectionContainer({
     <CollectionContainerStyle>
       <CollectionHeader />
       <LinkList links={activeCollection.links} />
-      <Footer />
+      <Footer css={{ paddingBottom: 0 }} />
     </CollectionContainerStyle>
   );
 }

inertia/components/footer/footer.tsx

@@ -1,26 +1,26 @@
 import PATHS from '#constants/paths';
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
 import packageJson from '../../../package.json';
-import { route } from '@izzyjs/route/client';
 
 const FooterStyle = styled.footer(({ theme }) => ({
   fontSize: '0.9em',
   color: theme.colors.grey,
   textAlign: 'center',
-  paddingTop: '0.75em',
+  paddingBlock: '0.75em',
   '& a:hover': {
     textDecoration: 'underline',
   },
 }));
 
-export default function Footer() {
+export default function Footer({ className }: { className?: string }) {
   const { t } = useTranslation('common');
 
   return (
-    <FooterStyle>
+    <FooterStyle className={className}>
       <div className="row">
         <Link href={route('privacy').url}>{t('privacy')}</Link>
         {' • '}

inertia/components/home/about/about_item.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import { IconType } from 'react-icons/lib';
+
+const AboutItemStyle = styled.li(({ theme }) => ({
+  width: '350px',
+  display: 'flex',
+  gap: '1em',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+
+  '& svg': {
+    color: theme.colors.blue,
+  },
+
+  '& div': {
+    fontSize: '1.25rem',
+    fontWeight: '500',
+  },
+
+  '& p': {
+    height: '65px',
+    color: theme.colors.grey,
+  },
+}));
+
+const AboutItem = ({
+  title,
+  text,
+  icon: Icon,
+}: {
+  title: string;
+  text: string;
+  icon: IconType;
+}) => (
+  <AboutItemStyle>
+    <Icon size={60} />
+    <div>{title}</div>
+    <p>{text}</p>
+  </AboutItemStyle>
+);
+
+export default AboutItem;

inertia/components/home/about/about_list.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import UnstyledList from '~/components/common/unstyled/unstyled_list';
+
+const AboutList = styled(UnstyledList)({
+  margin: '4em 0 !important',
+  display: 'flex',
+  gap: '2em',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexWrap: 'wrap',
+});
+
+export default AboutList;

inertia/components/home/hero_header.tsx

@@ -0,0 +1,54 @@
+import styled from '@emotion/styled';
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { useTranslation } from 'react-i18next';
+import Quotes from '~/components/quotes';
+
+const HeroStyle = styled.header(({ theme }) => ({
+  height: '250px',
+  minHeight: '250px',
+  width: '100%',
+  backgroundColor: theme.colors.darkestBlue,
+  marginTop: '0.5em',
+  borderRadius: theme.border.radius,
+  padding: '1em',
+  display: 'flex',
+  gap: '1em',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+
+  '& *': {
+    color: `${theme.colors.white} !important`,
+    textAlign: 'center',
+  },
+}));
+
+const HeroTitle = styled.h1({
+  fontSize: '32px',
+});
+
+const HeroQuote = styled(Quotes)({
+  fontSize: '20px',
+});
+
+const LinkButton = styled(Link)(({ theme }) => ({
+  fontSize: '1rem',
+  width: 'fit-content',
+  backgroundColor: theme.colors.primary,
+  borderRadius: '5rem',
+  padding: '0.5em 1.5em',
+}));
+
+export default function HeroHeader() {
+  const { t } = useTranslation();
+  return (
+    <HeroStyle>
+      <HeroTitle>{t('about:hero.title')}</HeroTitle>
+      <HeroQuote>{t('common:slogan')}</HeroQuote>
+      <LinkButton href={route('dashboard').url}>
+        {t('about:hero.cta')}
+      </LinkButton>
+    </HeroStyle>
+  );
+}

inertia/components/home/website_preview.tsx

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
+
+const ScreenshotWrapper = styled.div({
+  position: 'relative',
+  height: '360px',
+  width: '640px',
+  maxWidth: '100%',
+  margin: '0 auto',
+});
+
+const Screenshot = styled.img(({ theme }) => ({
+  height: 'auto !important',
+  width: '100%',
+  boxShadow: theme.colors.boxShadow,
+  borderRadius: theme.border.radius,
+  overflow: 'hidden',
+}));
+
+export default function WebsitePreview() {
+  const { t } = useTranslation('about');
+  return (
+    <>
+      <h2>{t('look-title')}</h2>
+      <ScreenshotWrapper>
+        <Screenshot
+          src="/website-screenshot.png"
+          alt={t('website-screenshot-alt')}
+          title={t('website-screenshot-alt')}
+        />
+      </ScreenshotWrapper>
+    </>
+  );
+}

inertia/components/layouts/_theme_layout.tsx

@@ -75,7 +75,7 @@ function GlobalStyles() {
   const documentStyle = css({
     'html, body, #app': {
       height: '100svh',
-      width: '100svw',
+      width: '100%',
       fontFamily: "'Poppins', sans-serif",
       fontSize: '14px',
       color: localTheme.colors.font,
@@ -83,7 +83,6 @@ function GlobalStyles() {
       display: 'flex',
       alignItems: 'center',
       flexDirection: 'column',
-      overflow: 'hidden',
     },
   });