Build a landing page using a react template

Goal

In this exercise, you will customize your own landing page using the beautiful Landy template. Landy template is built on top of Create React App.

youtube.com

Visit the Demo Website.

Exercise

1 Change Colors

• Replace hardcoded colors with reusable colors.

// colors.ts
export const colors = {
    white: '#FFFFFF',
    blue: '#70D6FF',
    ...
}

export const theme = {
    primary: colors.blue,
    ...
};

// style.ts
import { theme } from '../../styles/colors';
export const Title = styled("h4")`
  font-size: 22px;
  text-transform: capitalize;
  color: ${theme.primary};

  @media screen and (max-width: 414px) {
    padding: 1.5rem 0;
  }
`;

2 Adjust Transitions

• Reduce transition distance from react-awesome-reveal library using custom logic.

// Slide transition without the ability to change transition distance
import { Slide, Zoom } from "react-awesome-reveal";
...
return (
    <Slide direction="left">
      <Row> content </Row>
    </Slide>
);

// Create custom transition using Reveal and keyframes
import { Reveal } from "react-awesome-reveal";
import { keyframes } from "@emotion/react";

const fade = keyframes`
  from {
    opacity: 0;
    transform: translate3d(50px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
`;

...
return ( 
    <Reveal keyframes={fade} duration={1500} triggerOnce={true}>
      <Row> content </Row>
    </Reveal>
);

3 Move Objects

• Use increments of 5 in position and size for consistency and predictability.

// before
export const Language = styled("h4")`
  font-size: 22px;
  text-transform: capitalize;
  color: #18216d;

  @media screen and (max-width: 414px) {
    padding: 1.234rem 0;
  }
`;

// after
export const Language = styled("h4")`
  font-size: 20px;
  text-transform: capitalize;
  color: #18216d;

  @media screen and (max-width: 415px) {
    padding: 1rem 0;
  }
`;

4 Change Hover States

• Use cursor: pointer to indicate clickable object.

export const MenuOutline = styled(MenuOutlined)<any>`
  cursor: pointer;
  font-size: 20px;
  padding: 15px; // increase click area
`;

5 Customize Shadows

• Use solid shadow with the darken method from polished library.

export const StyledButton = styled("button")<any>`
  ...
  box-shadow: `${darken(0.2, theme.button)} 6px 6px 0`;

  &:hover {
    ...
    box-shadow: ${theme.navActive} 6px 6px 0;
  }
`;

6 Change images

• Replace images in any format. Download free images from unsplash.

7 Add scroll transition to images

• Add scroll transition using CSS from wesbos's tutorial.

8 Deploy Website

• Deploy react app using github pages from this awesome tutorial.

Getting Started

Go to https://github.com/smolthing/landing-page-landy

before-landing folder

This folder contains the initial template and all the necessary files that you will work on.

after-landing folder

This folder contains the completed solution, which you can refer to if needed.

Running the app

1 Go into before-landing folder and run the app. The app runs on http://localhost:3000. Run the commands in the terminal:

cd before-landing
npm start

2 Make the necessary changes as per the exercise tasks.
3 Compare your work with the files in the after folder if you need any guidance or reference.
4 Deploy your website by running the command npm run deploy.

Comments

[Giovanni Proietta]

What if you would try using Polipo (polipo.io/) for that?