Merge pull request #393 from omnivore-app/OMN-382

[Omn-382] - Updated landing page
omnivore-app · Apr 19, 2022 · 48e36c8 · 48e36c8 · vercel · Apr 19, 2022
2 parents 04708ad + 69cd3df
commit 48e36c8
Show file tree

Hide file tree

Showing 16 changed files with 563 additions and 0 deletions.
diff --git a/packages/api/src/utils/usernamePolicy.ts b/packages/api/src/utils/usernamePolicy.ts
@@ -82,6 +82,7 @@ const RESERVED_NAMES = new Set([
   'jobs',
   'join',
   'json',
+  'landing',
   'language',
   'languages',
   'lists',

diff --git a/packages/web/components/elements/images/CurvedUnderlineIcon.tsx b/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>      
+    )
+  }
+
diff --git a/packages/web/components/templates/landing/LandingFooter.tsx b/packages/web/components/templates/landing/LandingFooter.tsx
@@ -0,0 +1,136 @@
+import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo';
+import Link from 'next/link'
+import Image from 'next/image'
+import { Box, HStack } from '../../elements/LayoutPrimitives';
+import { GithubLogo, DiscordLogo, TwitterLogo } from 'phosphor-react'
+
+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: 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'
+  }
+}
+
+const imageStyles = {
+  maxWidth: 190,
+  width: '100%',
+}
+
+const socialIconContainerStyles = {
+  maxWidth: 32,
+  maxHeight: 32,
+}
+
+export function LandingFooter(): JSX.Element {
+  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' />
+              </a>
+            </Link>
+          </Box>
+          <Box style={socialIconContainerStyles}>
+            <Link passHref href="https://github.com/omnivore-app/omnivore">
+              <a>
+                <GithubLogo width={32} height={32} color='white' />
+              </a>
+            </Link>
+          </Box>
+          <Box style={socialIconContainerStyles}>
+            <Link passHref href="https://discord.gg/h2z5rppzz9">
+              <a>
+                <DiscordLogo width={32} height={32} color='white' />
+              </a>
+            </Link>
+          </Box>
+        </HStack>
+        <Box css={copyrightStyles}>© 2022 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="#">
+              <a>
+                <Image src='/static/media/googlePlayBadge.png' alt='app-store' width={190} height={60} 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>
+    </HStack>
+  )
+}
diff --git a/packages/web/components/templates/landing/LandingHeader.tsx b/packages/web/components/templates/landing/LandingHeader.tsx
@@ -0,0 +1,50 @@
+import Link from 'next/link'
+import { Box, SpanBox } from '../../elements/LayoutPrimitives'
+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={'#3D3D3D'} href='/login' />
+      <Box css={linkStyles}>
+        <Box>
+          <Link passHref href="/login">
+            <a style={{textDecoration: 'none', color: '#3D3D3D', fontFamily: 'Inter', fontWeight: 500 }}>
+              <SpanBox css={textStyles}>Log in</SpanBox>
+            </a>
+          </Link>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
diff --git a/packages/web/components/templates/landing/LandingSection.tsx b/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: '#3D3D3D',
+  lineHeight: '53px',
+  '@mdDown': {
+    fontSize: 24,
+  },
+  '@md': {
+    fontSize: '$5',
+  },
+  '@xl': {
+    fontSize: 45,
+  }
+}
+
+const descriptionTextStyles = {
+  color: 'rgb(125, 125, 125)',
+}
+
+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>
+    )
+}