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',
     },
   });
 

inertia/i18n/locales/en/about.json

@@ -19,6 +19,10 @@
     "title": "Browser extension",
     "text": "Enhance your experience with the official MyLinks browser extension."
   },
+  "share": {
+    "title": "Share your collections",
+    "text": "Share your collections with anyone"
+  },
   "contribute": {
     "title": "Contribute to MyLinks",
     "text": "Suggest improvements you would like to see on MyLinks."

inertia/i18n/locales/fr/about.json

@@ -19,6 +19,10 @@
     "title": "Extension de navigateur",
     "text": "Améliorez votre expérience avec l'extension de navigateur officielle MyLinks."
   },
+  "share": {
+    "title": "Partagez vos collections",
+    "text": "Partagez vos collections à n'importe qui"
+  },
   "contribute": {
     "title": "Contribuer à MyLinks",
     "text": "Proposez des améliorations que vous souhaiteriez voir sur MyLinks."

inertia/pages/home.tsx

@@ -1,7 +1,64 @@
-import type { InferPageProps } from '@adonisjs/inertia/types';
+import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
+import { AiFillFolderOpen } from 'react-icons/ai';
+import { FaUser } from 'react-icons/fa';
+import { IoIosLink, IoIosSearch, IoIosShareAlt } from 'react-icons/io';
+import { IoExtensionPuzzleOutline } from 'react-icons/io5';
+import AboutItem from '~/components/home/about/about_item';
+import AboutList from '~/components/home/about/about_list';
+import HeroHeader from '~/components/home/hero_header';
+import WebsitePreview from '~/components/home/website_preview';
 import ContentLayout from '~/components/layouts/content_layout';
-import type AppsController from '../../app/controllers/apps_controller';
 
-export default function Home(_: InferPageProps<AppsController, 'index'>) {
-  return <ContentLayout>blablabla welcome to MyLinks</ContentLayout>;
+const PageContent = styled.div({
+  marginBottom: '4em',
+  textAlign: 'center',
+  display: 'flex',
+  gap: '2em',
+  flex: 1,
+  flexDirection: 'column',
+});
+
+export default function Home() {
+  const { t } = useTranslation();
+  return (
+    <ContentLayout>
+      <HeroHeader />
+      <PageContent>
+        <AboutList>
+          <AboutItem
+            icon={AiFillFolderOpen}
+            title={t('about:collection.title')}
+            text={t('about:collection.text')}
+          />
+          <AboutItem
+            icon={IoIosLink}
+            title={t('about:link.title')}
+            text={t('about:link.text')}
+          />
+          <AboutItem
+            icon={IoIosSearch}
+            title={t('about:search.title')}
+            text={t('about:search.text')}
+          />
+          <AboutItem
+            icon={IoExtensionPuzzleOutline}
+            title={t('about:extension.title')}
+            text={t('about:extension.text')}
+          />
+          <AboutItem
+            icon={IoIosShareAlt}
+            title={t('about:share.title')}
+            text={t('about:share.text')}
+          />
+          <AboutItem
+            icon={FaUser}
+            title={t('about:contribute.title')}
+            text={t('about:contribute.text')}
+          />
+        </AboutList>
+        <WebsitePreview />
+      </PageContent>
+    </ContentLayout>
+  );
 }

inertia/styles/theme.ts

@@ -7,6 +7,7 @@ export const primaryDarkColor = '#005aa5';
 const lightestBlue = '#d3e8fa';
 const lightBlue = '#82c5fede';
 const darkBlue = primaryDarkColor;
+const darkestBlue = '#1f2937';
 
 const lightRed = '#FF5A5A';
 
@@ -44,6 +45,7 @@ export const lightTheme: Theme = {
     lightBlue,
     blue: primaryColor,
     darkBlue,
+    darkestBlue,
 
     lightRed,
 
@@ -74,6 +76,7 @@ export const darkTheme: Theme = {
     lightBlue,
     blue: '#4fadfc',
     darkBlue,
+    darkestBlue,
 
     lightRed,
 

inertia/types/emotion.d.ts

@@ -18,6 +18,7 @@ declare module '@emotion/react' {
       lightBlue: string;
       blue: string;
       darkBlue: string;
+      darkestBlue: string;
 
       lightRed: string;