React Router > React Simple Landing Page

React Simple Landing Page

We're now going to flesh out the homepage a bit more. We're going to first pull the Home component out into it's own file. In App.js, you can see that we've removed the Home function and replace it with an import at the top to our new file.

Inside of Home, we're going to use styled-components to create a header, description and centered content components.

We're going to use a Link from React Router to link to our missions page. You always want a CTA, or call to action on your homepage. In our case, we're going to direct them to the missions page to start creating a mission. Ideally, we may want this to actually be a signup button, but that can come later.

Your mission

Now we're going to start adding a little more branding to our app. Try to add a Button where the Link is. Color the button to how you want your app to look- just go with it!

Lesson 4/26

import styled from "styled-components";
import { Link } from "react-router-dom";

const HeroHeader = styled.h1`
  font-size: 60px;
`;

const HeroDescription = styled.h2`
  font-size: 22px;
  font-weight: 400;
`;

const CenteredContent = styled.div`
  text-align: center; 
`;

function Home() {
  return (
    <>
      <CenteredContent>
        <HeroHeader> The Captain's Log </HeroHeader>
        <HeroDescription>
          Build your mission, one note at a time.
        </HeroDescription>
        <Link to="/missions"> Get Started </Link>
      </CenteredContent>
    </>
  );
}

export default Home;

Open Sandbox