Merge pull request #1702 from omnivore-app/fix/landing-page-tweaks

Update landing page layout and graphics

packages/web/components/elements/StyledText.tsx

@@ -169,6 +169,15 @@ const textVariants = {
       fontWeight: 'bold',
       color: '$textSubtle',
     },
+    aboutFooter: {
+      pt: '0px',
+      m: '0px',
+      fontSize: 24,
+      fontFamily: 'inter',
+      lineHeight: 'unset',
+      fontWeight: 'bold',
+      color: 'white',
+    },
     error: {
       color: '$error',
       fontSize: '$2',

packages/web/components/templates/About.tsx

@@ -0,0 +1,87 @@
+import { VStack, Box } from '../elements/LayoutPrimitives'
+import { LandingHeader } from './landing/LandingHeader'
+import {
+  GetStartedButton,
+  LandingSectionsContainer,
+} from './landing/LandingSectionsContainer'
+import { LandingFooter } from './landing/LandingFooter'
+
+export function About(): JSX.Element {
+  return (
+    <>
+      <LandingHeader />
+      <VStack
+        alignment="center"
+        css={{ background: '#FEFCF5', color: '#3D3D3D' }}
+      >
+        <VStack
+          css={{
+            alignSelf: 'center',
+            marginTop: 80,
+            maxWidth: 960,
+            px: '2vw',
+            '@md': {
+              px: '6vw',
+            },
+            '@xl': {
+              px: '120px',
+            },
+          }}
+        >
+          <Box
+            css={{
+              fontWeight: '700',
+              color: '#3D3D3D',
+              fontSize: 45,
+              lineHeight: '53px',
+              padding: '10px',
+              paddingBottom: '0px',
+              textAlign: 'center',
+            }}
+          >
+            Omnivore is the free, open source, read-it-later app for serious
+            readers.
+          </Box>
+          <Box
+            css={{
+              color: 'rgb(125, 125, 125)',
+              padding: '10px',
+              textAlign: 'center',
+              width: '100%',
+              fontWeight: '600',
+            }}
+          >
+            Distraction free. Privacy focused. Open source. Designed for
+            knowledge workers and lifelong learners.
+          </Box>
+
+          <Box
+            css={{
+              color: 'rgb(125, 125, 125)',
+              padding: '10px',
+              textAlign: 'center',
+            }}
+          >
+            Save articles, newsletters, 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 />
+    </>
+  )
+}

packages/web/components/templates/landing/LandingFooter.tsx

@@ -1,7 +1,8 @@
 import Link from 'next/link'
-import { Box, HStack } from '../../elements/LayoutPrimitives'
+import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
 import { GithubLogo, DiscordLogo, TwitterLogo } from 'phosphor-react'
-import { theme } from '../../tokens/stitches.config'
+import { styled, theme } from '../../tokens/stitches.config'
+import { StyledText } from '../../elements/StyledText'
 
 const containerStyles = {
   padding: '5vw',
@@ -17,131 +18,90 @@ const containerStyles = {
   },
 }
 
-const titleStyles = {
-  maxWidth: 330,
-  fontWeight: 'normal',
-  fontSize: 18,
-  lineHeight: '27px',
-  color: '#FFFFFF',
-  mb: 45,
-  '@mdDown': {
-    fontSize: '3vw',
-  },
-}
-
-const socialsContainerStyles = {
-  maxWidth: 140,
-  marginBottom: 79,
-}
-
-const copyrightStyles = {
-  maxWidth: 330,
-  fontWeight: 'normal',
-  fontSize: 18,
-  lineHeight: '27px',
-  color: '#5F5E58',
-}
-
-const sectionOne = {
-  width: '60%',
-}
-const sectionTwo = {
-  width: '40%',
-  pt: 10,
-}
-
-const contactStyles = {
-  fontWeight: '700',
-  fontSize: 36,
-  lineHeight: '39px',
-  color: 'white',
-  '@mdDown': {
-    fontSize: 26,
-  },
-}
-const supportStyles = {
-  fontSize: 24,
-  lineHeight: '36px',
-  color: 'white',
-  '@mdDown': {
-    fontSize: '3vw',
-  },
-  a: {
-    color: theme.colors.omnivoreCtaYellow.toString(),
-  },
-}
-
-const imageStyles = {
-  maxWidth: 190,
-  width: '100%',
-}
-
-const socialIconContainerStyles = {
-  maxWidth: 32,
-  maxHeight: 32,
-}
-
 export function LandingFooter(): JSX.Element {
+  const FooterList = styled('ul', {
+    listStyle: 'none',
+    paddingLeft: '0',
+    li: {
+      pt: '15px',
+    },
+    a: {
+      color: '$omnivoreCtaYellow',
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    },
+  })
+
   return (
     <HStack css={containerStyles}>
-      <Box css={sectionOne}>
-        <Box css={titleStyles}>
-          Everything you read. Safe, organized, and easy to share.
-        </Box>
-        <HStack distribution="between" css={socialsContainerStyles}>
-          <Box style={socialIconContainerStyles}>
-            <Link passHref href="https://twitter.com/OmnivoreApp">
-              <a>
-                <TwitterLogo width={32} height={32} color="white" />
+      <HStack css={{ width: '100%', maxWidth: '1224px' }}>
+        <VStack>
+          <StyledText style="aboutFooter">Install</StyledText>
+          <FooterList>
+            <li>
+              <a href="https://omnivore.app/install/ios">iOS</a>
+            </li>
+            <li>
+              <a href="https://omnivore.app/install/macos">macOS</a>
+            </li>
+            <li>
+              <a href="https://omnivore.app/install/android">
+                Android (preview release)
               </a>
-            </Link>
-          </Box>
-          <Box style={socialIconContainerStyles}>
-            <Link passHref href="https://github.com/omnivore-app/omnivore">
-              <a>
-                <GithubLogo width={32} height={32} color="white" />
+            </li>
+            <li>
+              <a href="https://omnivore.app/install/chrome">Chrome Extension</a>
+            </li>
+            <li>
+              <a href="https://omnivore.app/install/firefox">
+                Firefox Extension
               </a>
-            </Link>
-          </Box>
-          <Box style={socialIconContainerStyles}>
-            <Link passHref href="https://discord.gg/h2z5rppzz9">
-              <a>
-                <DiscordLogo width={32} height={32} color="white" />
+            </li>
+            <li>
+              <a href="https://omnivore.app/install/safari">Safari Extension</a>
+            </li>
+            <li>
+              <a href="https://omnivore.app/install/edge">Edge Extension</a>
+            </li>
+          </FooterList>
+        </VStack>
+        <VStack>
+          <StyledText style="aboutFooter">Get Help</StyledText>
+          <FooterList>
+            <li>
+              <a href="mailto:feedback@omnivore.app">Contact us via email</a>
+            </li>
+            <li>
+              <a href="https://discord.gg/h2z5rppzz9">
+                Join our community on Discord
               </a>
-            </Link>
-          </Box>
-        </HStack>
-        <Box css={copyrightStyles}>© 2023 Omnivore</Box>
-      </Box>
-      <Box css={sectionTwo}>
-        <Box css={{ height: 215 }}>
-          <Box style={{ marginBottom: 5, ...imageStyles }}>
-            <a
-              href="https://omnivore.app/install/ios"
-              target="_blank"
-              rel="noreferrer"
-              style={{ display: 'inlineBlock', overflow: 'hidden' }}
-            >
-              <img
-                src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=90x37&amp;releaseDate=1628121600&h=2bbc629b0455dbea136257c9f518e4b3"
-                alt="Download on the App Store"
-                style={{}}
-              />
-            </a>
-          </Box>
-          {/* <Box style={imageStyles}>
-            <Link passHref href="https://play.google.com/store/apps/details?id=app.omnivore.omnivore">
-              <a>
-                <Image src='/static/media/googlePlayBadge.png' alt='app-store' width={120} height={40} layout='intrinsic'/>
-              </a>
-            </Link>
-          </Box> */}
-        </Box>
-        <Box css={contactStyles}>Contact</Box>
-        <Box css={supportStyles}>
-          <a href="mailto:support@omnivore.app">support@omnivore.app</a>
-        </Box>
-      </Box>
+            </li>
+            <li>
+              <a href="https://docs.omnivore.app">Read our Docs</a>
+            </li>
+          </FooterList>
+        </VStack>
+
+        <VStack>
+          <StyledText style="aboutFooter">Follow</StyledText>
+          <FooterList>
+            <li>
+              <a href="https://twitter.com/OmnivoreApp">Twitter</a>
+            </li>
+            <li>
+              <a href="https://pkm.social/@omnivore">Mastodon</a>
+            </li>
+            <li>
+              <a href="https://blog.omnivore.app">Blog</a>
+            </li>
+            <li>
+              <a href="https://github.com/omnivore-app/omnivore">GitHub</a>
+            </li>
+          </FooterList>
+        </VStack>
+      </HStack>
     </HStack>
   )
 }

packages/web/components/templates/landing/LandingSection.tsx

@@ -1,22 +1,16 @@
 import { HStack, VStack, Box } from '../../elements/LayoutPrimitives'
-import { CSS, styled } from '@stitches/react'
 
 type LandingSectionProps = {
   titleText: string
   descriptionText: React.ReactElement
   icon?: React.ReactElement
   image: React.ReactElement
-  containerStyles?: CSS
 }
 
-const MainContainer = styled(HStack, {
-  width: '100%',
-})
-
 const titleTextStyles = {
   fontWeight: '700',
   color: '#3D3D3D',
-  lineHeight: 1.5,
+  lineHeight: 1.25,
   '@mdDown': {
     fontSize: 24,
   },
@@ -28,37 +22,55 @@ const titleTextStyles = {
   },
 }
 
-const descriptionTextStyles = {
-  color: 'rgb(125, 125, 125)',
-}
-
 const imageContainerStyles = {
-  width: '50%',
+  display: 'flex',
+  width: '49%',
   alignSelf: 'center',
+  justifyContent: 'center',
+  '@md': {
+    marginBottom: '60px',
+  },
   '@mdDown': {
     width: '100%',
   },
 }
 
 const layoutStyles = {
-  width: '50%',
-  alignSelf: 'center',
-  padding: 20,
+  width: '49%',
+  alignSelf: 'start',
   '@mdDown': {
     width: '100%',
+    paddingTop: '30px',
   },
+  paddingLeft: '30px',
+  paddingRight: '30px',
+  paddingBottom: '30px',
 }
 
 export function LandingSection(props: LandingSectionProps): JSX.Element {
   return (
-    <MainContainer css={{ flexWrap: 'wrap', ...props.containerStyles }}>
+    <HStack
+      css={{
+        width: '100%',
+        flexWrap: 'wrap',
+        flexDirection: 'row-reverse',
+        marginBottom: 20,
+        '@mdDown': {
+          width: '100%',
+        },
+      }}
+    >
       <VStack distribution="center" alignment={'center'} css={layoutStyles}>
-        <VStack>
-          <Box css={titleTextStyles}>{props.titleText}</Box>
-          <Box css={descriptionTextStyles}>{props.descriptionText}</Box>
-        </VStack>
+        <Box css={titleTextStyles}>{props.titleText}</Box>
+        <Box
+          css={{
+            color: 'rgb(125, 125, 125)',
+          }}
+        >
+          {props.descriptionText}
+        </Box>
       </VStack>
       <Box css={imageContainerStyles}>{props.image}</Box>
-    </MainContainer>
+    </HStack>
   )
 }

packages/web/components/templates/landing/LandingSectionsContainer.tsx

@@ -46,14 +46,6 @@ const containerStyles = {
   },
 }
 
-const reversedSectionStyles = {
-  flexDirection: 'row-reverse',
-  marginBottom: 20,
-  '@mdDown': {
-    width: '100%',
-  },
-}
-
 const callToActionStyles = {
   background: 'white',
   borderRadius: '24px',
@@ -78,9 +70,12 @@ const callToActionText = {
   color: '#3D3D3D',
   fontWeight: '700',
   fontSize: 64,
-  lineHeight: '70px',
+  lineHeight: '1.25',
   textAlign: 'center',
-  padding: '20px',
+  paddingBottom: '20px',
+  '@mdDown': {
+    fontSize: '32px',
+  },
 }
 
 export function LandingSectionsContainer(): JSX.Element {
@@ -111,66 +106,41 @@ export function LandingSectionsContainer(): JSX.Element {
       </Box>
 
       <LandingSection
-        titleText="Unclutter your reading."
-        descriptionText={
-          <p>
-            Omnivore strips away the ads, trackers, and clutter and formats
-            pages for easy reading without distractions. The text-focused view
-            also makes articles smaller and quicker to load.
-          </p>
-        }
-        image={
-          <img
-            srcSet="/static/landing/landingPage-2.png,
-                      /static/landing/landingPage-2@2x.png 2x,
-                      /static/landing/landingPage-2@3x.png 3x"
-            alt="landing-2"
-            style={{ maxWidth: '100%' }}
-          />
-        }
-      />
-
-      <LandingSection
-        titleText="Save links from anywhere. Forever."
+        titleText="Save it now. Read it later."
         descriptionText={
           <>
             <p>
-              With the Omnivore app for iOS and Android and extensions for all
-              major web browsers, you can add to your reading list any time.
-            </p>
-            <p>
-              Saved articles remain in your Omnivore library forever — even if
-              the site where you found them goes away. Access them any time in
-              our reader view or in their original format.
+              Save articles, PDFs, and Twitter threads as you come across them
+              using Omnivore&aposs mobile apps and browser extensions. Read them
+              later using our distraction free reader.
             </p>
           </>
         }
         image={
           <img
-            srcSet="/static/landing/landingPage-3.png,
-                      /static/landing/landingPage-3@2x.png,
-                      /static/landing/landingPage-3@3x.png 3x"
+            srcSet="/static/landing/landingPage-03@1x.png,
+                      /static/landing/landingPage-03@2x.png,
+                      /static/landing/landingPage-03@3x.png 3x"
             alt="landing-3"
             style={{ maxWidth: '100%' }}
           />
         }
-        containerStyles={reversedSectionStyles}
       />
 
       <LandingSection
-        titleText="All your newsletters in one place."
+        titleText="Get all your newsletters in one place."
         descriptionText={
           <p>
-            Send subscriptions directly to your Omnivore library, and read them
-            on your own time, away from the constant distractions and
-            interruptions of your email inbox.
+            Send newsletters directly to your Omnivore library rather than
+            scattered across multiple inboxes. Read them on your own time, away
+            from the constant distractions and interruptions of your email.
           </p>
         }
         image={
           <img
-            srcSet="/static/landing/landingPage-4.png,
-                      /static/landing/landingPage-4@2x.png 2x,
-                      /static/landing/landingPage-4@3x.png 3x"
+            srcSet="/static/landing/landingPage-04.png,
+                      /static/landing/landingPage-04@2x.png 2x,
+                      /static/landing/landingPage-04@3x.png 3x"
             alt="landing-4"
             style={{ maxWidth: '100%' }}
           />
@@ -178,67 +148,107 @@ export function LandingSectionsContainer(): JSX.Element {
       />
 
       <LandingSection
-        titleText="Stay organized and in control."
+        titleText="Keep your reading organized, whatever that means to you."
         descriptionText={
           <p>
-            Read what you want, not what some algorithm says you should. Keep
-            your reading organized and easily available with labels, filters,
-            and fully indexed text searches.
+            Keep your reading organized and easily available with labels,
+            filters, rules, and fully indexed text searches. We&aposre not here
+            to tell you how to stay organized — our job is to give you the tools
+            to build a system that works for you.
           </p>
         }
         image={
           <img
-            srcSet="/static/landing/landingPage-5.png,
-                      /static/landing/landingPage-5@2x.png 2x,
-                      /static/landing/landingPage-5@3x.png 3x"
+            srcSet="/static/landing/landingPage-05@1x.png,
+                      /static/landing/landingPage-05@2x.png 2x,
+                      /static/landing/landingPage-05@3x.png 3x"
             alt="landing-5"
             style={{ maxWidth: '100%' }}
           />
         }
-        containerStyles={reversedSectionStyles}
       />
 
       <LandingSection
-        titleText="Built for advanced users."
+        titleText="Add highlights and notes."
         descriptionText={
           <p>
-            The intuitive command palette puts basic and advanced functionality
-            at your fingertips. Keyboard shortcuts for all features mean your
-            hands never have to leave the keyboard. Our open-source app allows
-            integrations with knowledge bases and note-taking apps, using
-            plug-ins or by triggering webhooks.
+            Become a better reader — engage your brain and improve retention by
+            reading actively, not passively. Highlight key sections and add
+            notes as you read. You can access your highlights and notes any time
+            — they stay with your articles forever.
           </p>
         }
         image={
           <img
-            srcSet="/static/landing/landingPage-6.png,
-                    /static/landing/landingPage-6@2x.png 2x,
-                    /static/landing/landingPage-6@3x.png 3x"
+            srcSet="/static/landing/landingPage-06@1x.png,
+                      /static/landing/landingPage-06@2x.png 2x,
+                      /static/landing/landingPage-06@3x.png 3x"
             alt="landing-6"
             style={{ maxWidth: '100%' }}
           />
         }
       />
+
       <LandingSection
-        titleText="Listen to what you're reading."
+        titleText="Sync with your second brain."
         descriptionText={
           <p>
-            Omnivore for iOS features realistic humanlike text-to-speech. So you
-            can give your eyes a break and listen to any article saved to your
-            library.
+            Omnivore syncs with popular Personal Knowledge Management systems
+            including Logseq and Obsidian, so you can pull all your saved
+            reading, highlights, and notes into your second brain.
           </p>
         }
         image={
           <img
-            srcSet="/static/landing/landingPage-7.png,
-            /static/landing/landingPage-7@2x.png 2x,
-            /static/landing/landingPage-7@3x.png 3x"
+            srcSet="/static/landing/landingPage-07.png,
+                    /static/landing/landingPage-07@2x.png 2x,
+                    /static/landing/landingPage-07@3x.png 3x"
             alt="landing-7"
             style={{ maxWidth: '100%' }}
           />
         }
-        containerStyles={reversedSectionStyles}
       />
+
+      <LandingSection
+        titleText="Listen to your reading with text-to-speech."
+        descriptionText={
+          <p>
+            Work through your to-be-read list and give your eyes a break with
+            TTS, exclusively in the Omnivore app for iOS. Realistic,
+            natural-sounding AI voices will read any saved article aloud.
+          </p>
+        }
+        image={
+          <img
+            srcSet="/static/landing/landingPage-08.png,
+            /static/landing/landingPage-08@2x.png 2x,
+            /static/landing/landingPage-08@3x.png 3x"
+            alt="landing-8"
+            style={{ maxWidth: '85%' }}
+          />
+        }
+      />
+
+      <LandingSection
+        titleText="Open source means you're in control."
+        descriptionText={
+          <p>
+            Reading is a lifetime activity, and you shouldn&apos;t have to worry
+            you&apos;ll lose your library after you&apos;ve spent years building
+            it. Our open-source platform ensures your reading won&apos;t be held
+            prisoner in a proprietary system.
+          </p>
+        }
+        image={
+          <img
+            srcSet="/static/landing/landingPage-09.png,
+            /static/landing/landingPage-09@2x.png 2x"
+            alt="landing-9"
+            style={{ maxWidth: '100%' }}
+          />
+        }
+      />
+
       <VStack alignment="center" css={callToActionStyles}>
         <Box css={callToActionText}>Get Started With Omnivore Today</Box>
         <GetStartedButton />

packages/web/pages/about.tsx

@@ -6,6 +6,7 @@ import {
 import { LandingHeader } from '../components/templates/landing/LandingHeader'
 import { LandingFooter } from '../components/templates/landing/LandingFooter'
 import { PageMetaData } from '../components/patterns/PageMetaData'
+import { About } from '../components/templates/About'
 
 const containerStyles = {
   alignSelf: 'center',
@@ -48,47 +49,7 @@ export default function LandingPage(): JSX.Element {
         description="Omnivore is the free, open source, read-it-later app for serious readers."
       />
 
-      <LandingHeader />
-      <VStack
-        alignment="center"
-        css={{ background: '#FEFCF5', color: '#3D3D3D' }}
-      >
-        <VStack css={containerStyles}>
-          <Box css={headingStyles}>
-            Omnivore is the free, open source, 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 />
+      <About />
     </>
   )
 }

packages/web/pages/index.tsx

@@ -9,6 +9,7 @@ import { useGetViewerQuery } from '../lib/networking/queries/useGetViewerQuery'
 import { useRouter } from 'next/router'
 import { PageMetaData } from '../components/patterns/PageMetaData'
 import { LoadingView } from '../components/patterns/LoadingView'
+import { About } from '../components/templates/About'
 
 const containerStyles = {
   alignSelf: 'center',
@@ -71,47 +72,7 @@ export default function LandingPage(): JSX.Element {
         description="Omnivore is the free, open source, read-it-later app for serious readers."
       />
 
-      <LandingHeader />
-      <VStack
-        alignment="center"
-        css={{ background: '#FEFCF5', color: '#3D3D3D' }}
-      >
-        <VStack css={containerStyles}>
-          <Box css={headingStyles}>
-            Omnivore is the free, open source, 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 />
+      <About />
     </>
   )
 }

packages/web/pages/zh/index.tsx

@@ -6,6 +6,7 @@ import {
 import { LandingHeader } from '../../components/templates/landing/LandingHeader'
 import { LandingFooter } from '../../components/templates/landing/LandingFooter'
 import { PageMetaData } from '../../components/patterns/PageMetaData'
+import { About } from '../../components/templates/About'
 
 const containerStyles = {
   alignSelf: 'center',
@@ -48,47 +49,7 @@ export default function LandingPage(): JSX.Element {
         description="Omnivore is the free, open source, read-it-later app for serious readers."
       />
 
-      <LandingHeader />
-      <VStack
-        alignment="center"
-        css={{ background: '#FEFCF5', color: '#3D3D3D' }}
-      >
-        <VStack css={containerStyles}>
-          <Box css={headingStyles}>
-            Omnivore is the free, open source, 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 />
+      <About />
     </>
   )
 }