diff --git a/packages/web/components/patterns/PageMetaData.tsx b/packages/web/components/patterns/PageMetaData.tsx index d42233336..68a029f02 100644 --- a/packages/web/components/patterns/PageMetaData.tsx +++ b/packages/web/components/patterns/PageMetaData.tsx @@ -1,6 +1,7 @@ import { DetailedHTMLProps, MetaHTMLAttributes } from 'react' import Head from 'next/head' import { useDarkModeListener } from '../../lib/hooks/useDarkModeListener' +import { webBaseURL } from '../../lib/appConfig' type MetaTag = DetailedHTMLProps< MetaHTMLAttributes, @@ -35,11 +36,24 @@ export function PageMetaData(props: PageMetaDataProps): JSX.Element { href={`/static/icons/favicon-${isDarkMode ? 'dark' : 'light'}.ico`} /> + + + + + + + {props.ogImage && ( - + <> + + + )} {props.ogImage && ( @@ -55,15 +69,21 @@ export function PageMetaData(props: PageMetaDataProps): JSX.Element { /> )} {props.title && ( - + <> + + + )} {props.title && {props.title}} {props.description && ( - + <> + + + )} {props.path && ( ( ))} - - - - - - ) } diff --git a/packages/web/components/templates/LoginLayout.tsx b/packages/web/components/templates/LoginLayout.tsx index 421e6c8fe..552317723 100644 --- a/packages/web/components/templates/LoginLayout.tsx +++ b/packages/web/components/templates/LoginLayout.tsx @@ -2,7 +2,6 @@ import { Box, HStack, MediumBreakpointBox, - SpanBox, VStack, } from '../elements/LayoutPrimitives' import { LoginForm } from './LoginForm' @@ -97,18 +96,17 @@ function OmnivoreIllustration({ isLargeLayout }: OmnivoreIllustrationProps) { css={{ width: '100%', height: '100%', - marginRight: '57px', + marginLeft: 'auto', backgroundSize: 'cover', backgroundRepeat: 'no-repeat', - backgroundPositionY: '70px', backgroundImage: `-webkit-image-set( - url('/static/images/landing-illustration.png') 1x, - url('/static/images/landing-illustration@2x.png') 2x - )`, + url('/static/images/landingPage-feature@1x.png') 1x, + url('/static/landing/landingPage-feature@2x.png') 2x + )`, 'background-image': `image-set( - url('/static/images/landing-illustration.png') 1x, - url('/static/images/landing-illustration@2x.png') 2x - )`, + url('/static/images/landingPage-feature@1x.png') 1x, + url('/static/landing/landingPage-feature@2x.png') 2x + )`, }} /> ) diff --git a/packages/web/components/templates/landing/LandingHeader.tsx b/packages/web/components/templates/landing/LandingHeader.tsx index d50739b38..3c9866897 100644 --- a/packages/web/components/templates/landing/LandingHeader.tsx +++ b/packages/web/components/templates/landing/LandingHeader.tsx @@ -1,57 +1,56 @@ -import Link from 'next/link' -import { Box, SpanBox } from '../../elements/LayoutPrimitives' +import { Box } from '../../elements/LayoutPrimitives' import { OmnivoreNameLogo } from '../../elements/images/OmnivoreNameLogo' +import { Button } from '../../elements/Button' -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', +const LoginButton = (): JSX.Element => { + return ( + + ) } export function LandingHeader(): JSX.Element { return ( - + - - - - - Log in - - - - + ) } diff --git a/packages/web/components/templates/landing/LandingSectionsContainer.tsx b/packages/web/components/templates/landing/LandingSectionsContainer.tsx index 5a8b26f4f..759e59b8d 100644 --- a/packages/web/components/templates/landing/LandingSectionsContainer.tsx +++ b/packages/web/components/templates/landing/LandingSectionsContainer.tsx @@ -1,38 +1,28 @@ -import Link from 'next/link' import { VStack, Box } from '../../elements/LayoutPrimitives' import { Button } from '../../elements/Button' -import { ArrowRight } from 'phosphor-react' import { LandingSection } from './LandingSection' -const buttonStyles = { - display: 'flex', - borderRadius: 4, - px: 30, - background: 'rgb(255, 210, 52)', - color: '#3D3D3D', -} - -const arrowStyles = { - marginLeft: 10, - padding: 2, -} - export function GetStartedButton(): JSX.Element { return ( - ) } @@ -94,7 +84,6 @@ const callToActionText = { } export function LandingSectionsContainer(): JSX.Element { - // const iconColor = 'rgb(255, 210, 52)' return ( landingHero-1 diff --git a/packages/web/pages/about.tsx b/packages/web/pages/about.tsx index f05011a16..c1e3be3c7 100644 --- a/packages/web/pages/about.tsx +++ b/packages/web/pages/about.tsx @@ -7,7 +7,7 @@ import { LandingHeader } from '../components/templates/landing/LandingHeader' import { LandingFooter } from '../components/templates/landing/LandingFooter' import { PageMetaData } from '../components/patterns/PageMetaData' -const mobileContainerStyles = { +const containerStyles = { alignSelf: 'center', marginTop: 80, maxWidth: 960, @@ -44,7 +44,7 @@ export default function LandingPage(): JSX.Element { @@ -53,7 +53,7 @@ export default function LandingPage(): JSX.Element { alignment="center" css={{ background: '#FEFCF5', color: '#3D3D3D' }} > - + Omnivore is the free, open source, read-it-later app for serious readers. diff --git a/packages/web/pages/index.tsx b/packages/web/pages/index.tsx index 888be6ce6..3327f1af7 100644 --- a/packages/web/pages/index.tsx +++ b/packages/web/pages/index.tsx @@ -10,7 +10,7 @@ import { useRouter } from 'next/router' import { PageMetaData } from '../components/patterns/PageMetaData' import { LoadingView } from '../components/patterns/LoadingView' -const mobileContainerStyles = { +const containerStyles = { alignSelf: 'center', marginTop: 80, maxWidth: 960, @@ -54,7 +54,7 @@ export default function LandingPage(): JSX.Element { @@ -67,7 +67,7 @@ export default function LandingPage(): JSX.Element { @@ -76,7 +76,7 @@ export default function LandingPage(): JSX.Element { alignment="center" css={{ background: '#FEFCF5', color: '#3D3D3D' }} > - + Omnivore is the free, open source, read-it-later app for serious readers. diff --git a/packages/web/pages/login.tsx b/packages/web/pages/login.tsx index cc7de434a..955cb49ac 100644 --- a/packages/web/pages/login.tsx +++ b/packages/web/pages/login.tsx @@ -1,6 +1,5 @@ import { useRouter } from 'next/router' import Script from 'next/script' -import Head from 'next/head' import { useState, useEffect } from 'react' import { LoginLayout } from './../components/templates/LoginLayout' import { parseErrorCodes } from '../lib/queryParamParser' @@ -9,9 +8,8 @@ import { formatMessage } from '../locales/en/messages' export default function Login(): JSX.Element { const router = useRouter() - const [errorMessage, setErrorMessage] = useState( - undefined - ) + const [errorMessage, setErrorMessage] = + useState(undefined) useEffect(() => { if (!router.isReady) return @@ -39,7 +37,7 @@ export default function Login(): JSX.Element {
diff --git a/packages/web/pages/tools/import/matter-archive.tsx b/packages/web/pages/tools/import/matter-archive.tsx index 8b96b64e1..c9f4a872f 100644 --- a/packages/web/pages/tools/import/matter-archive.tsx +++ b/packages/web/pages/tools/import/matter-archive.tsx @@ -1,14 +1,7 @@ -import { ChangeEvent, useCallback, useMemo, useState } from 'react' -import { Toaster } from 'react-hot-toast' - -import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers' +import { useState } from 'react' import { applyStoredTheme } from '../../../lib/themeUpdater' -import { - Box, - HStack, - VStack, -} from '../../../components/elements/LayoutPrimitives' +import { Box, VStack } from '../../../components/elements/LayoutPrimitives' import 'antd/dist/antd.compact.css' import { StyledText } from '../../../components/elements/StyledText' @@ -18,7 +11,7 @@ import { UploadImportFileType, } from '../../../lib/networking/mutations/uploadImportFileMutation' import { Button } from '../../../components/elements/Button' -import Dropzone, { useDropzone } from 'react-dropzone' +import Dropzone from 'react-dropzone' import { SyncLoader } from 'react-spinners' import { theme } from '../../../components/tokens/stitches.config' @@ -30,10 +23,7 @@ export default function ImportUploader(): JSX.Element { applyStoredTheme(false) const [errorMessage, setErrorMessage] = useState() - const [file, setFile] = useState() - const [type, setType] = useState() const [uploadState, setUploadState] = useState('none') - const { acceptedFiles, getRootProps, getInputProps } = useDropzone() const onDropAccepted = async (acceptedFiles: File[]) => { const contentType = 'application/zip' diff --git a/packages/web/public/static/images/og-homepage-03.png b/packages/web/public/static/images/og-homepage-03.png new file mode 100644 index 000000000..232acac91 Binary files /dev/null and b/packages/web/public/static/images/og-homepage-03.png differ diff --git a/packages/web/public/static/landing/landingPage-1@2x.png b/packages/web/public/static/landing/landingPage-1@2x.png deleted file mode 100644 index d7f230ed2..000000000 Binary files a/packages/web/public/static/landing/landingPage-1@2x.png and /dev/null differ diff --git a/packages/web/public/static/landing/landingPage-1@3x.png b/packages/web/public/static/landing/landingPage-1@3x.png deleted file mode 100644 index ac747a701..000000000 Binary files a/packages/web/public/static/landing/landingPage-1@3x.png and /dev/null differ diff --git a/packages/web/public/static/landing/landingPage-feature@1x.png b/packages/web/public/static/landing/landingPage-feature@1x.png new file mode 100644 index 000000000..e1f3dd0c6 Binary files /dev/null and b/packages/web/public/static/landing/landingPage-feature@1x.png differ diff --git a/packages/web/public/static/landing/landingPage-feature@2x.png b/packages/web/public/static/landing/landingPage-feature@2x.png new file mode 100644 index 000000000..cd73842ad Binary files /dev/null and b/packages/web/public/static/landing/landingPage-feature@2x.png differ diff --git a/packages/web/public/static/landing/landingPage-feature@3x.png b/packages/web/public/static/landing/landingPage-feature@3x.png new file mode 100644 index 000000000..3061329cd Binary files /dev/null and b/packages/web/public/static/landing/landingPage-feature@3x.png differ