TheLazy.Dev
Portfolio GitHub

Blog

react |webdev |website |frontend

Build a landing page using a react template

smolthing

smolthing

Posted on August 5, 2024

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,
    ...
};
Enter fullscreen mode Exit fullscreen mode 
// 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;
  }
`;
Enter fullscreen mode Exit fullscreen mode

2 Adjust Transitions

// Slide transition without the ability to change transition distance
import { Slide, Zoom } from "react-awesome-reveal";
...
return (
    <Slide direction="left">
      <Row> content </Row>
    </Slide>
);
Enter fullscreen mode Exit fullscreen mode 
// 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>
);
Enter fullscreen mode Exit fullscreen mode

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;
  }
`;
Enter fullscreen mode Exit fullscreen mode 
// after
export const Language = styled("h4")`
  font-size: 20px;
  text-transform: capitalize;
  color: #18216d;

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

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
`;
Enter fullscreen mode Exit fullscreen mode

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;
  }
`;
Enter fullscreen mode Exit fullscreen mode

6 Change images

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

7 Add scroll transition to images

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
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
smolthing
smolthing

Posted on August 5, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Build a landing page using a react template
react Build a landing page using a react template

August 5, 2024