[Omn-382] - Updated landing page

[gitstart-omnivore]

Spec Checklist

• Does the figma design fit the ticket description ?

Description

Based on Figma design here we have an updated landing page. This page should be built as /landing for now.

Figma designs:

-- Desktop: https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=287%3A31514
-- Mobile: https://www.figma.com/file/ILgs6aXrPfukXOMf5Yibra/Omnivore---Deliverables?node-id=287%3A34213

Desktop:

Screen Shot 2022-04-04 at 22 21 38

Mobile:

Screen Shot 2022-04-04 at 22 21 51

Note how the design is divided into sections:

Simply reader-friendly
Make it your own
A better way to share
Discover new content
We will want to be able to enable/disable some of these sections, so they should be treated as separate pieces as we build.

#382

House Keeping

• Added Loom video ?
• Is Deployment Link passing ?
• Have you assinged PR to yourself ?
• Is Github action passing ?
• Updated the appropriate tag ?

Ticket link (if applicable)

Task Link

How has this been tested?

Go to "localhost:3000/landing" page.

Types of changes

• Bug fix
• New feature
• Refactor
• Others

Checklist:

• I have confirmed design matches Spec specified on Figma.

Loom Video

https://www.loom.com/share/5c3f51dc22174eff8e6b390c3600032e

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

omnivore-demo – ./

🔍 Inspect: https://vercel.com/omnivore/omnivore-demo/GGgDWDuuVaHAVToYALkmfwnsftTd
✅ Preview: https://omnivore-demo-git-omn-382-omnivore.vercel.app

omnivore-prod – ./

🔍 Inspect: https://vercel.com/omnivore/omnivore-prod/GNk1vRJ2dJunVWMLFGC3uDKoTC4E
✅ Preview: https://omnivore-prod-git-omn-382-omnivore.vercel.app

[jacksonh]

It looks like there are some linting failures on this one. Can you test with yarn lint --fix

[gitstart-omnivore]

@jacksonh Apologies, This has been fixed. Thanks!

[jacksonh]

It seems like the main colours are a little off. Here is a screenshot of ours on the left, and figma on the right. The main background colour looks different, the top header color is white instead of black

[jacksonh]

One thing we need to be careful of on the landing page is to not use any theme colours, since a user could have the theme set to dark/light but this design doesn't have any theming.

[jacksonh]

For these icons on the bottom, lets use the phosphor icons instead of PNGs. They look a little blurry here because the PNGs aren't available in multiple resolutions.

[jacksonh]

Four links to add here (don't have the Android one yet)

1. /login
2. https://twitter.com/OmnivoreApp
3. https://github.com/omnivore-app/omnivore
4. https://discord.gg/h2z5rppzz9
5. https://omnivore.app/install/ios

[gitstart-omnivore]

Hi @jacksonh, We have removed the theme colors, added phosphor icons and links. The google play button has been commented out.

[jacksonh]

Ah I figured out the colour issue I was seeing is because of light/dark theme. We have this css color-scheme: light dark; which causes the issue. Looking into a fix.

[jacksonh]

Sorry two last small things on this one:

1. with figma i think we can export two resolutions of images, so we have the 1x and 2x versions. Usually we want both versions in the report and then the <img should look something like below. That will choose the appropriate version based on the user's screen density.

  <img srcSet="/static/images/mobile-app-preview.png, /static/images/mobile-app-preview@2x.png 2x" />

2. There are a few images we can remove from the PR now, the social ones (discord, github, twitter) are all included via phosphur so we don't need the PNGs

[gitstart-omnivore]

@jacksonh This has been done as well, Thanks!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
omnivore-demo	✅ Ready (Inspect)	Visit Preview	Apr 19, 2022 at 5:48PM (UTC)
omnivore-prod	✅ Ready (Inspect)	Visit Preview	Apr 19, 2022 at 5:48PM (UTC)