Merge pull request #1189 from omnivore-app/fix/copy-and-og-cleanup
Copy clean up and new default open graph image
This commit is contained in:
Jackson Harper
@ -1,148 +0,0 @@
|
||||
import { HStack, VStack } from '../elements/LayoutPrimitives'
|
||||
import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
|
||||
import Image from 'next/image'
|
||||
import { StyledText } from '../elements/StyledText'
|
||||
import { Button } from '../elements/Button'
|
||||
import { theme } from '../tokens/stitches.config'
|
||||
|
||||
export function About(): JSX.Element {
|
||||
return (
|
||||
<VStack css={{ width: '100%' }}>
|
||||
<HStack
|
||||
distribution="start"
|
||||
css={{ px: '$4', py: '0', bg: '#FFEA9F', width: '100%' }}
|
||||
>
|
||||
<VStack css={{ width: '20em', my: '$3' }}>
|
||||
<OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} />
|
||||
<StyledText style="subHeadline" css={{ color: 'black' }}>
|
||||
Everything you read. Safe, organized, and easy to share.
|
||||
</StyledText>
|
||||
|
||||
<Button style="ctaPill">Get started</Button>
|
||||
</VStack>
|
||||
<VStack
|
||||
css={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '224px',
|
||||
'@md': {
|
||||
height: '442px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/static/images/about/header-illustration.png"
|
||||
alt="Illustration of Woman Reading"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
objectPosition="50% 50%"
|
||||
/>
|
||||
</VStack>
|
||||
</HStack>
|
||||
<VStack alignment="center" distribution="center" css={{ width: '100%' }}>
|
||||
<StyledText
|
||||
style="body"
|
||||
css={{ color: 'black', fontSize: '$3', mb: '0', mt: '6em' }}
|
||||
>
|
||||
This is Omnivore
|
||||
</StyledText>
|
||||
<StyledText
|
||||
style="headline"
|
||||
css={{
|
||||
mt: '$1',
|
||||
mb: '2em',
|
||||
color: 'black',
|
||||
fontSize: '3em',
|
||||
maxWidth: '10em',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
Collect and share the best of the web
|
||||
</StyledText>
|
||||
</VStack>
|
||||
<AboutSection
|
||||
title="Simply reader-friendly."
|
||||
description="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."
|
||||
imageAltText="image of omnivore share extension"
|
||||
imageSource="/static/images/about/save-article.png"
|
||||
leadWithImage={false}
|
||||
/>
|
||||
<AboutSection
|
||||
title="Make it your own."
|
||||
description="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."
|
||||
imageAltText="image of omnivore user library"
|
||||
imageSource="/static/images/about/library.png"
|
||||
leadWithImage
|
||||
/>
|
||||
<AboutSection
|
||||
title="A better way to share."
|
||||
description="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."
|
||||
imageAltText="image of omnivore highlight and annotation"
|
||||
imageSource="/static/images/about/sharing.png"
|
||||
leadWithImage={false}
|
||||
/>
|
||||
<AboutSection
|
||||
title="Discover new content."
|
||||
description="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."
|
||||
imageAltText="image of omnivore shared article feed"
|
||||
imageSource="/static/images/about/profile.png"
|
||||
leadWithImage
|
||||
/>
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
|
||||
type AboutSectionProps = {
|
||||
title: string
|
||||
description: string
|
||||
imageSource: string
|
||||
imageAltText: string
|
||||
leadWithImage: boolean
|
||||
}
|
||||
|
||||
function AboutSection(props: AboutSectionProps): JSX.Element {
|
||||
return (
|
||||
<HStack
|
||||
alignment="center"
|
||||
distribution="center"
|
||||
css={{
|
||||
flexDirection: props.leadWithImage ? 'row-reverse' : 'row',
|
||||
width: '100%',
|
||||
gap: '$6',
|
||||
bg: props.leadWithImage ? '#FBFAF9' : '#FFFFFF',
|
||||
}}
|
||||
>
|
||||
<VStack
|
||||
alignment={props.leadWithImage ? 'start' : 'end'}
|
||||
css={{ width: '50%' }}
|
||||
>
|
||||
<StyledText
|
||||
style="headline"
|
||||
css={{ color: 'black', textAlign: 'center', maxWidth: '25em' }}
|
||||
>
|
||||
{props.title}
|
||||
</StyledText>
|
||||
<StyledText style="body" css={{ color: 'black', maxWidth: '25em' }}>
|
||||
{props.description}
|
||||
</StyledText>
|
||||
</VStack>
|
||||
<VStack css={{ width: '50%', height: '300px' }}>
|
||||
<VStack
|
||||
css={{
|
||||
position: 'relative',
|
||||
height: '224px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={props.imageSource}
|
||||
alt={props.imageAltText}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
objectPosition={props.leadWithImage ? 'right 50%' : 'left 50%'}
|
||||
/>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</HStack>
|
||||
)
|
||||
}
|
||||
@ -18,9 +18,9 @@ export type LoginFormProps = {
|
||||
export function LoginForm(props: LoginFormProps): JSX.Element {
|
||||
const StyledTextHeadline = styled('h1', {
|
||||
fontStyle: 'normal',
|
||||
fontWeight: '400',
|
||||
fontSize: '50px',
|
||||
lineHeight: '100%',
|
||||
fontWeight: '700',
|
||||
fontSize: '45px',
|
||||
lineHeight: '53px',
|
||||
color: '$omnivoreGray',
|
||||
m: '0px',
|
||||
})
|
||||
@ -38,7 +38,7 @@ export function LoginForm(props: LoginFormProps): JSX.Element {
|
||||
}}
|
||||
>
|
||||
<StyledTextHeadline>
|
||||
Never miss a great read.
|
||||
A read it later app for serious readers.
|
||||
</StyledTextHeadline>
|
||||
<StyledText css={{ fontStyle: 'normal',
|
||||
fontWeight: '400',
|
||||
|
||||
@ -116,13 +116,13 @@ export function LandingFooter(): JSX.Element {
|
||||
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=90x37&releaseDate=1628121600&h=2bbc629b0455dbea136257c9f518e4b3" alt="Download on the App Store" style={{ }} />
|
||||
</a>
|
||||
</Box>
|
||||
{/* <Box style={imageStyles}>
|
||||
<Link passHref href="#">
|
||||
<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={190} height={60} layout='intrinsic'/>
|
||||
<Image src='/static/media/googlePlayBadge.png' alt='app-store' width={120} height={40} layout='intrinsic'/>
|
||||
</a>
|
||||
</Link>
|
||||
</Box> */}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box css={contactStyles}>
|
||||
Contact
|
||||
|
||||
@ -131,17 +131,6 @@ export function LandingSectionsContainer({
|
||||
const iconColor = 'rgb(255, 210, 52)'
|
||||
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'
|
||||
|
||||
@ -6,27 +6,23 @@ import { LandingFooter } from '../components/templates/landing/LandingFooter'
|
||||
const mobileContainerStyles = {
|
||||
maxWidth: 430,
|
||||
alignSelf: 'center',
|
||||
px: 10,
|
||||
display: 'none',
|
||||
marginTop: 60,
|
||||
'@mdDown': {
|
||||
display: 'flex',
|
||||
}
|
||||
marginTop: 80,
|
||||
padding: '10px',
|
||||
}
|
||||
|
||||
const headingStyles = {
|
||||
fontWeight: '700',
|
||||
fontSize: 42,
|
||||
lineHeight: '46px',
|
||||
mb: 16
|
||||
color: '#3D3D3D',
|
||||
fontSize: 45,
|
||||
lineHeight: '53px',
|
||||
padding: '10px',
|
||||
}
|
||||
|
||||
|
||||
const subHeadingStyles = {
|
||||
fontWeight: '700',
|
||||
fontSize: 24,
|
||||
lineHeight: '36px',
|
||||
color: '#5F5E58',
|
||||
color: 'rgb(125, 125, 125)',
|
||||
mb: 32,
|
||||
padding: '10px',
|
||||
}
|
||||
|
||||
export default function LandingPage(): JSX.Element {
|
||||
@ -35,11 +31,14 @@ export default function LandingPage(): JSX.Element {
|
||||
<LandingHeader />
|
||||
<VStack css={{ background: '#FEFCF5', color: '#3D3D3D' }}>
|
||||
<VStack css={mobileContainerStyles}>
|
||||
<Box css={headingStyles}>Collect and share the best of the web</Box>
|
||||
<Box css={headingStyles}>A read it later app for serious readers.</Box>
|
||||
<Box css={subHeadingStyles}>
|
||||
Everything you read. Safe, organized, and easy to share.
|
||||
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.
|
||||
</Box>
|
||||
<Box css={{mb: 40}}>
|
||||
<Box css={{ mb: 40, padding: '10px' }}>
|
||||
<GetStartedButton />
|
||||
</Box>
|
||||
</VStack>
|
||||
@ -49,3 +48,5 @@ export default function LandingPage(): JSX.Element {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ export default function Home(): JSX.Element {
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageMetaData title='Omnivore' path='/' ogImage='/static/images/og-homepage.jpg' />
|
||||
<PageMetaData title='Omnivore' path='/' ogImage='/static/images/og-homepage.png' />
|
||||
<LoadingView />
|
||||
</>
|
||||
)
|
||||
|
||||
@ -38,7 +38,7 @@ export default function Login(): JSX.Element {
|
||||
src="https://accounts.google.com/gsi/client"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<PageMetaData title="Welcome to Omnivore" path="/login" ogImage='/static/images/og-homepage.jpg' />
|
||||
<PageMetaData title="Welcome to Omnivore" path="/login" ogImage='/static/images/og-homepage.png' />
|
||||
<LoginLayout {...loginFormProps} />
|
||||
<div data-testid="login-page-tag" />
|
||||
</>
|
||||
|
||||
BIN
packages/web/public/static/images/og-homepage.png
Normal file
BIN
packages/web/public/static/images/og-homepage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
Reference in New Issue
Block a user