Merge pull request #1254 from omnivore-app/fix/landing-page-fixes

Update copy and some screenshots on the about page

packages/web/components/templates/LoginForm.tsx

@@ -38,7 +38,7 @@ export function LoginForm(props: LoginFormProps): JSX.Element {
       }}
     >
       <StyledTextHeadline>
-        A read-it-later app for serious readers.
+        Read-it-later for serious readers.
       </StyledTextHeadline>
       <StyledText css={{ fontStyle: 'normal',
         fontWeight: '400',

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

@@ -3,7 +3,7 @@ import { CSS, styled } from '@stitches/react'
 
 type LandingSectionProps = {
   titleText: string,
-  descriptionText: string,
+  descriptionText: React.ReactElement,
   icon: React.ReactElement,
   image: React.ReactElement,
   containerStyles?: CSS,
@@ -16,7 +16,7 @@ const MainContainer = styled(HStack, {
 const titleTextStyles = {
   fontWeight: '700',
   color: '#3D3D3D',
-  lineHeight: '53px',
+  lineHeight: 1.5,
   '@mdDown': {
     fontSize: 24,
   },

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

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { VStack, Box, SpanBox } from '../../elements/LayoutPrimitives'
 import { CurvedUnderlineIcon } from '../../elements/images/CurvedUnderlineIcon'
 import { Button } from '../../elements/Button'
-import { MagnifyingGlass, Palette, MegaphoneSimple, Binoculars, ArrowRight } from 'phosphor-react'
+import { MagnifyingGlass, Palette, EnvelopeSimple, FloppyDisk, ArrowRight } from 'phosphor-react'
 import { LandingSection } from './LandingSection'
 
 const buttonStyles = {
@@ -23,7 +23,7 @@ export function GetStartedButton(): JSX.Element {
     <Button style='ctaDarkYellow' css={buttonStyles}>
       <Link passHref href='/login'>
         <a style={{textDecoration: 'none', color: '#3D3D3D'}}>
-          Get Started
+          Sign Up
         </a>
       </Link>
       <ArrowRight size={18} width={18} height={18} style={arrowStyles} color='white' fontWeight='700' />
@@ -33,7 +33,7 @@ export function GetStartedButton(): JSX.Element {
 
 const containerStyles = {
   px: '2vw',
-  pt: 100,
+  pt: 32,
   pb: 100,
   width: '100%',
   background: 'linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), linear-gradient(0deg, rgba(253, 250, 236, 0.7), rgba(253, 250, 236, 0.7))',
@@ -125,16 +125,23 @@ type LandingSectionsContainerProps = {
 export function LandingSectionsContainer({
   hideFirst = false,
   hideSecond = false,
-  hideThird = true,
-  hideFourth = true,
+  hideThird = false,
+  hideFourth = false,
 }: LandingSectionsContainerProps): JSX.Element {
   const iconColor = 'rgb(255, 210, 52)'
   return (
     <VStack alignment='center' distribution='start' css={containerStyles}>
       {!hideFirst && (
         <LandingSection
-          titleText='Simply reader-friendly'
-          descriptionText='With a single click using Omnivore’s extension or mobile app, save any link you come across on the Internet. Your links are saved forever, so you will never lose anything. We also strip out the unnecessary content to give you a reader-friendly view of your saved pages.'
+          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/landing-1.png, /static/landing/landing-1@2x.png 2x"
@@ -148,8 +155,20 @@ export function LandingSectionsContainer({
       )}
       {!hideSecond && (
         <LandingSection
-          titleText='Make it your own'
-          descriptionText='Curate your own personal collection of saved links and annotate these links with your thoughts. Omnivore lets you highlight any text you find inspiring and attach personal notes to these highlights.'
+          titleText='Go ahead, mark it up.'
+          descriptionText={
+          <>
+            <p>
+              Read 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>
+            <p>
+              Fun fact: research shows that highlighting while you read
+              improves retention and makes you a more effective reader.
+            </p>
+          </>
+          }
           image={
             <img
               srcSet="/static/landing/landing-2.png, /static/landing/landing-2@2x.png 2x"
@@ -164,38 +183,54 @@ export function LandingSectionsContainer({
       )}
       {!hideThird && (
         <LandingSection
-          titleText='A better way to share'
-          descriptionText='With Omnivore’s highlight and notes feature, you can share specific snippets from a link with your friends. Our share feature is integrated with top social media sites so sharing with your friends is just one click away.'
+          titleText='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.
+            </p>
+          }
           image={
             <img
-              srcSet="/static/landing/landing-3.png, /static/landing/landing-3@2x.png 2x"
+              srcSet="/static/landing/landing-4.png, /static/landing/landing-4@2x.png 2x"
               alt='landing-3'
-              style={{height: '50vw', maxHeight: 560}}
+              style={{height: '38vw', maxHeight: 480}}
               sizes="auto 50vw, auto 50vw"
             />
           }
-          icon={<MegaphoneSimple size={32} color={iconColor} weight='duotone' />}
+          icon={<EnvelopeSimple size={32} color={iconColor} weight='duotone' />}
         />
       )}
       {!hideFourth && (
         <LandingSection
-          titleText='Discover new content'
-          descriptionText='Follow friends and people you admire and see what they are reading. With our highlight and notes feature, you can read through the eyes of others and see what others have highlighted and commented.'
+          titleText='Save links from anywhere. Forever.'
+          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.
+              </p>
+            </>
+          }
           image={
             <img
-              srcSet="/static/landing/landing-4.png, /static/landing/landing-4@2x.png 2x"
+              srcSet="/static/landing/landing-3.png, /static/landing/landing-3@2x.png 2x"
               alt='landing-4'
               style={{width: '100%', marginRight: 40}}
               sizes="auto 50vw, auto 50vw"
             />
           }
-          icon={<Binoculars size={32} color={iconColor} weight='duotone' />}
+          icon={<FloppyDisk size={32} color={iconColor} weight='duotone' />}
           containerStyles={reversedSectionStyles}
         />
       )}
       <VStack alignment='center' css={callToActionStyles}>
         <Box css={callToActionText}>
-          Get started with Omnivore today
+          Sign up for free
         </Box>
         <GetStartedButton />
       </VStack>

packages/web/pages/about.tsx

@@ -4,10 +4,17 @@ import { LandingHeader } from '../components/templates/landing/LandingHeader'
 import { LandingFooter } from '../components/templates/landing/LandingFooter'
 
 const mobileContainerStyles = {
-  maxWidth: 430,
   alignSelf: 'center',
   marginTop: 80,
-  padding: '10px',
+  maxWidth: 960,
+
+  px: '2vw',
+  '@md': {
+    px: '6vw',
+  },
+  '@xl': {
+    px: '120px',
+  }
 }
 
 const headingStyles = {
@@ -16,12 +23,12 @@ const headingStyles = {
   fontSize: 45,
   lineHeight: '53px',
   padding: '10px',
+  paddingBottom: '0px',
 }
 
 
 const subHeadingStyles = {
   color: 'rgb(125, 125, 125)',
-  mb: 32,
   padding: '10px',
 }
 
@@ -31,12 +38,16 @@ export default function LandingPage(): JSX.Element {
       <LandingHeader />
       <VStack css={{ background: '#FEFCF5', color: '#3D3D3D' }}>
         <VStack css={mobileContainerStyles}>
-          <Box css={headingStyles}>A read-it-later app for serious readers.</Box>
+          <Box css={headingStyles}>Omnivore is the read-it-later app for serious readers.</Box>
           <Box css={subHeadingStyles}>
-            Omnivore is a privacy focused, open-source read-it-later app.
-            Use it to save interesting articles and read distraction free.
-            Add notes and highlights.
-            Organise your reading queue the way you want and sync it across all your devices.
+          Distraction free. Privacy focused. Open source.
+          </Box>
+          
+          <Box css={subHeadingStyles}>
+            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' }}>
             <GetStartedButton />