Created landing page with new designs

packages/web/components/elements/images/CurvedUnderlineIcon.tsx

@@ -0,0 +1,25 @@
+type CurvedUnderlineIconProps = {
+    size?: string
+    fillColor?: string
+  }
+  
+  export function CurvedUnderlineIcon({
+    fillColor = '#FF9B3E',
+    size,
+  }: CurvedUnderlineIconProps): JSX.Element {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 174 8"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.4074 4.53965C0.600867 4.72886 0.100435 5.53608 0.28965 6.3426C0.478865 7.14913 1.28608 7.64957 2.0926 7.46035L1.4074 4.53965ZM171.907 7.46035C172.714 7.64957 173.521 7.14913 173.71 6.3426C173.9 5.53608 173.399 4.72886 172.593 4.53965L171.907 7.46035ZM161.594 3.5L161.251 4.96035L161.594 3.5ZM2.0926 7.46035L12.7489 4.96035L12.0636 2.03965L1.4074 4.53965L2.0926 7.46035ZM161.251 4.96035L171.907 7.46035L172.593 4.53965L161.936 2.03965L161.251 4.96035ZM140.624 4.96035C147.408 3.36887 154.467 3.36887 161.251 4.96035L161.936 2.03965C154.702 0.34244 147.173 0.342439 139.939 2.03965L140.624 4.96035ZM97.9989 4.96035C104.783 3.36887 111.842 3.36887 118.626 4.96035L119.311 2.03965C112.077 0.342439 104.548 0.342439 97.3136 2.03965L97.9989 4.96035ZM55.3739 4.96035C62.1575 3.36887 69.2175 3.36887 76.0011 4.96035L76.6864 2.03965C69.452 0.342439 61.923 0.342439 54.6886 2.03965L55.3739 4.96035ZM12.7489 4.96035C19.5325 3.36887 26.5925 3.36887 33.3761 4.96035L34.0614 2.03965C26.827 0.342439 19.298 0.342439 12.0636 2.03965L12.7489 4.96035ZM118.626 4.96035C125.861 6.65756 133.389 6.65756 140.624 4.96035L139.939 2.03965C133.155 3.63113 126.095 3.63113 119.311 2.03965L118.626 4.96035ZM33.3761 4.96035C40.6105 6.65756 48.1395 6.65756 55.3739 4.96035L54.6886 2.03965C47.905 3.63113 40.845 3.63113 34.0614 2.03965L33.3761 4.96035ZM76.0011 4.96035C83.2355 6.65756 90.7645 6.65756 97.9989 4.96035L97.3136 2.03965C90.53 3.63113 83.47 3.63113 76.6864 2.03965L76.0011 4.96035Z"
+        fill={fillColor}
+      />
+      </svg>      
+    )
+  }
+  

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

@@ -0,0 +1,115 @@
+import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo';
+import { Box, HStack } from '../../elements/LayoutPrimitives';
+
+const containerStyles = {
+  padding: '5vw',
+  background: '#252525',
+  py: 60,
+  pb: 105,
+  width: '100%',
+  '@md': {
+    paddingLeft: '6vw',
+  },
+  '@xl': {
+    paddingLeft: '140px',
+  }
+}
+
+const titleStyles = {
+  maxWidth: 330,
+  fontWeight: 'normal',
+  fontSize: 18,
+  lineHeight: '27px',
+  color: '#FFFFFF',
+  mb: 45,
+  '@mdDown': {
+    fontSize: '3vw'
+  }
+}
+
+const socialsContainerStyles = {
+  maxWidth: 140,
+  marginBottom: 77
+}
+
+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'
+  }
+}
+
+const imageStyles = {
+  maxWidth: 180,
+  width: '100%',
+}
+
+export function LandingFooter(): JSX.Element {
+  return (
+    <HStack css={containerStyles}>
+      <Box css={sectionOne}>
+        <OmnivoreNameLogo color='white' />
+        <Box css={titleStyles}>Everything you read. Safe, organized, and easy to share.</Box>
+        <HStack distribution='between' css={socialsContainerStyles}>
+          <a href='#'>
+            <img src='/static/media/twitter.png' alt='twitter'/>
+          </a>
+          <a href='#'>
+            <img src='/static/media/github.png' alt='github'/>
+          </a>
+          <a href='#'>
+            <img src='/static/media/discord.png' alt='discord'/>
+          </a>
+        </HStack>
+        <Box css={copyrightStyles}>© 2022 Omnivore</Box>
+      </Box>
+      <Box css={sectionTwo}>
+        <Box css={{height: 215}}>
+          <a href='#'>
+            <img src='/static/media/appStoreBadge.png' alt='app-store' style={{
+              marginBottom: 24,
+              ...imageStyles,
+            }} />
+          </a>
+          <br />
+          <a href='#'>
+            <img src='/static/media/googlePlayBadge.png' alt='play-store' style={imageStyles} />
+          </a>
+        </Box>
+        <Box css={contactStyles}>
+          Contact
+        </Box>
+        <Box css={supportStyles}>
+          support@omnivore.com
+        </Box>
+      </Box>
+    </HStack>
+  )
+}

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

@@ -0,0 +1,48 @@
+import { Box, SpanBox } from '../../elements/LayoutPrimitives'
+import { theme } from '../../tokens/stitches.config'
+import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo'
+
+const containerStyles = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  p: '0px 15px 0px 15px',
+  height: '68px',
+  minHeight: '68px',
+  display: 'flex',
+  alignItems: 'center',
+  '@md': { width: '50%' },
+  '@xsDown': { height: '48px' },
+  justifyContent: 'space-between',
+  width: '100%',
+}
+
+const linkStyles = {
+  marginLeft: 'auto',
+  verticalAlign: 'middle',
+  cursor: 'pointer',
+  lineHeight: '100%',
+}
+
+const textStyles = {
+  pt: '5px',
+  pr: '6px',
+  fontSize: 24,
+  lineHeight: '24px',
+  fontWeight: 'normal'
+}
+
+export function LandingHeader(): JSX.Element {
+  return (
+    <Box css={containerStyles}>
+      <OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} href='/login' />
+      <Box css={linkStyles}>
+        <Box>
+          <a href="/login" style={{textDecoration: 'none', color: 'black'}}>
+            <SpanBox css={textStyles}>Log in</SpanBox>
+          </a>
+        </Box>
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,90 @@
+import { HStack, VStack, Box } from '../../elements/LayoutPrimitives'
+import { CSS, styled } from '@stitches/react'
+
+type LandingSectionProps = {
+  titleText: string,
+  descriptionText: string,
+  icon: React.ReactElement,
+  image: React.ReactElement,
+  containerStyles?: CSS,
+}
+
+const MainContainer = styled(HStack, {
+  width: '100%',
+})
+
+const titleTextStyles = {
+  fontWeight: '700',
+  color: '$omnivoreGray',
+  lineHeight: '53px',
+  '@mdDown': {
+    fontSize: 24,
+  },
+  '@md': {
+    fontSize: '$5',
+  },
+  '@xl': {
+    fontSize: 45,
+  }
+}
+
+const descriptionTextStyles = {
+  color: '$omnivoreLightGray',
+}
+
+const iconContainerStyles = {
+  width: 56,
+  height: 56,
+  background: 'white',
+  border: '1px solid rgba(61, 61, 61, 0.08)',
+  boxSizing: 'border-box',
+  borderRadius: '50%',
+  '@mdDown': {
+    width: 32,
+    height: 32,
+    padding: 5,
+  },
+}
+
+const imageContainerStyles = {
+  width: '50%',
+  '@mdDown': {
+    width: 0,
+    display: 'none',
+  }
+}
+
+const layoutStyles = {
+  width: '50%',
+  padding: 10,
+  '@mdDown': {
+    width: '100%',
+  }
+}
+
+const innerLayoutStyles = {
+  maxWidth: 480,
+  alignSelf: 'center',
+  '@mdDown': {
+    alignItems: 'center',
+  },
+}
+  
+export function LandingSection(props: LandingSectionProps): JSX.Element {
+    return (
+      <MainContainer distribution='start' alignment='center' css={props.containerStyles}>
+        <VStack distribution='center' css={layoutStyles}>
+          <VStack css={innerLayoutStyles}>
+            <VStack distribution='center' alignment='center' css={iconContainerStyles}>
+              {props.icon}
+            </VStack>
+            <Box css={titleTextStyles}>{props.titleText}</Box>
+            <Box css={descriptionTextStyles}>{props.descriptionText}</Box>
+          </VStack>
+        </VStack>
+        <HStack distribution='center' css={imageContainerStyles}>
+          {props.image}
+        </HStack>
+      </MainContainer>
+    )
+}

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

@@ -0,0 +1,182 @@
+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 { LandingSection } from './LandingSection'
+import { theme } from '../../tokens/stitches.config'
+
+const buttonStyles = {
+  display: 'flex',
+  borderRadius: 4,
+  px: 30,
+}
+
+const arrowStyles = {
+  marginLeft: 10, 
+  padding: 2,
+}
+
+export function GetStartedButton(): JSX.Element {
+  return (
+    <Button style='ctaDarkYellow' css={buttonStyles}>
+      <Box>
+        Get Started
+      </Box>
+      <ArrowRight size={18} style={arrowStyles} color='white' fontWeight='700' />
+    </Button>
+  )
+}
+
+const containerStyles = {
+  px: '2vw',
+  pt: 100,
+  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))',
+  '@mdDown': {
+    pt: 50,
+  },
+  '@md': {
+    px: '6vw',
+  },
+  '@xl': {
+    px: '100px',
+  }
+}
+
+const titleStyles = {
+  fontWeight: '600',
+  fontSize: '24',
+  textAlign: 'center',
+  lineHeight: '36px',
+  color: '$omnivoreOrange',
+  '@mdDown': {
+    fontSize: 16,
+    letterSpacing: '0.02em'
+  }
+}
+
+const subTitleText = {
+  fontSize: 64,
+  maxWidth: 590,
+  fontWeight: '700',
+  textAlign: 'center',
+  lineHeight: '70px',
+  mb: 30,
+  '@mdDown': {
+    maxWidth: 295,
+    fontSize: 32,
+    lineHeight: '40px',
+  }
+}
+
+const reversedSectionStyles = {
+  flexDirection: 'row-reverse',
+  marginBottom: 20
+}
+
+const callToActionStyles = {
+  background: 'white',
+  borderRadius: '24px',
+  boxSizing: 'border-box',
+  border: '1px solid #D8D7D5',
+  boxShadow: '0px 7px 8px rgba(32, 31, 29, 0.03), 0px 18px 24px rgba(32, 31, 29, 0.03)',
+  padding: 40,
+  height: 330,
+  '@mdDown': {
+    display: 'none',
+  },
+  '@md': {
+    width: '100%',
+  },
+  '@xl': {
+    width: '95%',
+  },
+}
+
+const callToActionText = {
+  color: '$omnivoreGray',
+  fontWeight: '700',
+  fontSize: 64,
+  lineHeight: '70px',
+  textAlign: 'center',
+  maxWidth: 500
+}
+
+const underlineIconStyles = {
+  height: '5px',
+  alignSelf: 'normal',
+  position: 'relative',
+  bottom: 20,
+}
+
+type LandingSectionsContainerProps = {
+  hideFirst?: boolean,
+  hideSecond?: boolean,
+  hideThird?: boolean,
+  hideFourth?: boolean,
+}
+
+export function LandingSectionsContainer({
+  hideFirst = false,
+  hideSecond = false,
+  hideThird = false,
+  hideFourth = false,
+}: LandingSectionsContainerProps): JSX.Element {
+  const iconColor = theme.colors.omnivoreCtaYellow.toString()
+  return (
+    <VStack alignment='center' distribution='start' css={containerStyles}>
+      <VStack distribution='center'>
+        <Box css={titleStyles}>
+          This is Omnivore
+        </Box>
+        <SpanBox css={underlineIconStyles}>
+          <CurvedUnderlineIcon />
+        </SpanBox>
+      </VStack>
+      <Box css={subTitleText}>
+        Collect and share the best of the web
+      </Box>
+      {!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.'
+          image={<img src='/static/landing/landing-1.png' alt='landing-1' style={{height: '50vw', maxHeight: 560}} />}
+          icon={<MagnifyingGlass size={32} color={iconColor} weight='duotone' />}
+        />
+      )}
+      {!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.'
+          image={<img src='/static/landing/landing-2.png' alt='landing-2' style={{width: '100%', marginRight: 40}} />}
+          icon={<Palette size={32} color={iconColor} weight='duotone' />}
+          containerStyles={reversedSectionStyles}
+        />  
+      )}
+      {!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.'
+          image={<img src='/static/landing/landing-3.png' alt='landing-3' style={{height: '50vw', maxHeight: 560}} />}
+          icon={<MegaphoneSimple 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.'
+          image={<img src='/static/landing/landing-4.png' alt='landing-4' style={{width: '100%', marginRight: 40}} />}
+          icon={<Binoculars size={32} color={iconColor} weight='duotone' />}
+          containerStyles={reversedSectionStyles}
+        />
+      )}
+      <VStack alignment='center' css={callToActionStyles}>
+        <Box css={callToActionText}>
+          Get started with Omnivore today
+        </Box>
+        <GetStartedButton />
+      </VStack>
+    </VStack>
+  )
+}

packages/web/pages/landing.tsx

@@ -0,0 +1,51 @@
+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'
+
+const mobileContainerStyles = {
+  maxWidth: 430,
+  alignSelf: 'center',
+  px: 10,
+  display: 'none',
+  marginTop: 60,
+  '@mdDown': {
+    display: 'flex',
+  }
+}
+
+const headingStyles = {
+  fontWeight: '700',
+  fontSize: 42,
+  lineHeight: '46px',
+  mb: 16
+}
+
+const subHeadingStyles = {
+  fontWeight: '700',
+  fontSize: 24,
+  lineHeight: '36px',
+  color: '#5F5E58',
+  mb: 32,
+}
+
+export default function LandingPage(): JSX.Element {
+  return (
+    <>
+      <LandingHeader />
+      <VStack>
+        <VStack css={mobileContainerStyles}>
+          <Box css={headingStyles}>Collect and share the best of the web</Box>
+          <Box css={subHeadingStyles}>
+            Everything you read. Safe, organized, and easy to share.
+          </Box>
+          <Box css={{mb: 40}}>
+            <GetStartedButton />
+          </Box>
+        </VStack>
+        <LandingSectionsContainer />
+      </VStack>
+      <LandingFooter />
+    </>
+  )
+}