hermanya / react-landing-page

🛬 Everything you need for a modern landing page, built with React & Styled Components

React Landing Page

This React UI component library for building Landing Pages is deprecated for the time being.

I deprecated it because a lot has changed in the industry over the past few years and my vision of the problem this repo was trying to solve has changed as well.

On one hand, there is no need to couple your app to your landing page. If your app is using react, it does not mean your landing page should. If anything, react is slowing down your landing page.

JavaScript bundle size reduced by 200kB by switching from React and other client-side libraries to vanilla JavaScript. React was still used server-side.

A Netflix web performance study

On the other hand, you may be tempted to re-use the UI library you used to build your app to have the same look. This makes a lot of sense. Except you should not build your app before you build your landing page :D

In this case, you either have your custom-built UI library and you are basically on your own to build your landing page. Or you chose to go with an off-npm UI library, such as Material UI, React Bootstrap, Reactstrap, or Antd.

Material UI has an official store and there is one landing page template. Someone should make more :D

React Bootstrap does not have a store or anything. They migrated to Bootstrap v4 not that long ago. Someone should make a react-bootstrap.store (even domain name is available) :D

As I said, it took React Bootstrap a few years to migrate to Bootstrap v4, and in the meantime, Reactstrap came to life. There is a Reactstrap templates page and link to a third party store.

And finally, there is Ant.design, which has a whole collection of landing pages, make sure to check it out. It's cool! There really should be something like this for every other UI lib.

Hopefully, this was useful. Star it if you found it useful :D

react-landing-page's Issues

Unhandled Rejection (Error): Cannot create styled-component for component: [object Object]

Hello good afternoon

Can you help me

See error as images

The error occurs when using

import {Hero, CallToAction, ScrollDownIndicator} from 'react-landing-page'

Attempted import error: 'Provider' is not exported from 'rebass'.

This seems to be out of date. Provider is no longer a component of rebass. Neither is Subhead.

Attempted import error: 'Provider' is not exported from 'rebass'.

I've use create-react-app to init my app. Then I added react-landing-page and rebase. Here is my App.js code:

import React from 'react'
import { Provider, Heading, Subhead } from 'rebass'
import {
  Hero, CallToAction, ScrollDownIndicator
} from 'react-landing-page'

const App = props => (
  <Provider>
    <Hero
      color="black"
      bg="white"
      backgroundImage="https://source.unsplash.com/jxaj-UrzQbc/1600x900"
    >
        <Heading>Name of your app</Heading>
        <Subhead>a couple more words</Subhead>
        <CallToAction href="/getting-started" mt={3}>Get Started</CallToAction>
        <ScrollDownIndicator/>
    </Hero>
  </Provider>
)

export default App;

I get this error:
Attempted import error: 'Provider' is not exported from 'rebass'.

Sandbox code is broken

styled-components is a missing dependency. codesandbox.io lets me add it in with one click but once it does load it the visual doesn't seem to match the code as the heading, subheading, and call to action are missing.

Can I add a video as a background image?

There's Hero component with backgroundImage prop.
How can I show a video instead of image?