From cac8e16449d8b68e128fe65314ad3f0f00070043 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 16 Dec 2022 16:25:08 +0800
Subject: [PATCH] Flip the landing and about page so non-logged in users hit
 the landing page

---
 packages/web/pages/about.tsx |   9 +++
 packages/web/pages/index.tsx | 107 ++++++++++++++++++++++++++++++-----
 2 files changed, 101 insertions(+), 15 deletions(-)

diff --git a/packages/web/pages/about.tsx b/packages/web/pages/about.tsx
index 6b50cf2bc..29c5c310b 100644
--- a/packages/web/pages/about.tsx
+++ b/packages/web/pages/about.tsx
@@ -5,6 +5,9 @@ import {
 } from '../components/templates/landing/LandingSectionsContainer'
 import { LandingHeader } from '../components/templates/landing/LandingHeader'
 import { LandingFooter } from '../components/templates/landing/LandingFooter'
+import { useGetViewerQuery } from '../lib/networking/queries/useGetViewerQuery'
+import { useRouter } from 'next/router'
+import { PageMetaData } from '../components/patterns/PageMetaData'
 
 const mobileContainerStyles = {
   alignSelf: 'center',
@@ -40,6 +43,12 @@ const subHeadingStyles = {
 export default function LandingPage(): JSX.Element {
   return (
     <>
+      <PageMetaData
+        title="Omnivore"
+        path="/about"
+        ogImage="/static/images/og-homepage.png"
+      />
+
       <LandingHeader />
       <VStack
         alignment="center"
diff --git a/packages/web/pages/index.tsx b/packages/web/pages/index.tsx
index 93788cd39..be41ddd16 100644
--- a/packages/web/pages/index.tsx
+++ b/packages/web/pages/index.tsx
@@ -1,28 +1,105 @@
-import { LoadingView } from '../components/patterns/LoadingView'
+import { VStack, Box } from './../components/elements/LayoutPrimitives'
+import {
+  LandingSectionsContainer,
+  GetStartedButton,
+} from '../components/templates/landing/LandingSectionsContainer'
+import { LandingHeader } from '../components/templates/landing/LandingHeader'
+import { LandingFooter } from '../components/templates/landing/LandingFooter'
 import { useGetViewerQuery } from '../lib/networking/queries/useGetViewerQuery'
-import { PageMetaData } from '../components/patterns/PageMetaData'
 import { useRouter } from 'next/router'
+import { PageMetaData } from '../components/patterns/PageMetaData'
+import { LoadingView } from '../components/patterns/LoadingView'
 
-export default function Home(): JSX.Element {
+const mobileContainerStyles = {
+  alignSelf: 'center',
+  marginTop: 80,
+  maxWidth: 960,
+  px: '2vw',
+  '@md': {
+    px: '6vw',
+  },
+  '@xl': {
+    px: '120px',
+  },
+}
+
+const headingStyles = {
+  fontWeight: '700',
+  color: '#3D3D3D',
+  fontSize: 45,
+  lineHeight: '53px',
+  padding: '10px',
+  paddingBottom: '0px',
+  textAlign: 'center',
+}
+
+const subHeadingStyles = {
+  color: 'rgb(125, 125, 125)',
+  padding: '10px',
+  textAlign: 'center',
+  width: '100%',
+  fontWeight: '600',
+}
+
+export default function LandingPage(): JSX.Element {
   const router = useRouter()
   const { viewerData, viewerDataError, isLoading } = useGetViewerQuery()
 
-  if (!isLoading && router.isReady) {
-    if (viewerDataError || !viewerData?.me) {
-      router.push('/login')
-      return <LoadingView />
-    }
-
-    if (viewerData?.me) {
-      router.push('/home')
-      return <LoadingView />
-    }
+  if (!isLoading && router.isReady && viewerData?.me) {
+    router.push('/home')
+    return <></>
+  } else if (isLoading) {
+    return <LoadingView bgColor="#FEFCF5" />
   }
 
   return (
     <>
-      <PageMetaData title='Omnivore' path='/' ogImage='/static/images/og-homepage.png' />
-      <LoadingView />
+      <PageMetaData
+        title="Omnivore"
+        path="/"
+        ogImage="/static/images/og-homepage.png"
+      />
+
+      <LandingHeader />
+      <VStack
+        alignment="center"
+        css={{ background: '#FEFCF5', color: '#3D3D3D' }}
+      >
+        <VStack css={mobileContainerStyles}>
+          <Box css={headingStyles}>
+            Omnivore is the read-it-later app for serious readers.
+          </Box>
+          <Box css={subHeadingStyles}>
+            Distraction free. Privacy focused. Open source.
+          </Box>
+
+          <Box
+            css={{
+              color: 'rgb(125, 125, 125)',
+              padding: '10px',
+              textAlign: 'center',
+            }}
+          >
+            Save interesting articles, newsletter subscriptions, and documents
+            and read them later — focused and distraction free. Add notes and
+            highlights. Organize your reading list the way you want and sync it
+            across all your devices.
+          </Box>
+          <Box
+            css={{
+              mb: 40,
+              padding: '10px',
+              width: '100%',
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
+            <GetStartedButton />
+          </Box>
+        </VStack>
+        <LandingSectionsContainer />
+      </VStack>
+      <LandingFooter />
     </>
   )
 }