feat: bring back previous home page

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>
+    </>
+  );
+}