Let’s decorate, adding CSS.

We’ll start with the global styling, inside your utilities.css add the following content.

/*CSS variables for colors*/
:root {
  --primary-blue: #83b4c4;
  --logo-blue: #046c8c;
  --hover-blue: #348ca4;
  --night-black: #2f2e41;
  --sun-red: #ff6884;
  --cloud-gray: #e6e6e6;
}

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: var(--night-black);
  box-sizing: border-box;
  overflow-x: hidden;   /*we don't want to scroll left and right on our pages*/
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  display: none;    /*To hide the native scroll bar*/
}

img {
  width: 100%;   /*This makes an image adjust its size to its container */
}

.logo {
  margin: 2rem 0;  
}

button {
  display: flex;
  align-items: start;
  width: max-content;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  margin: 0.8rem 0;
  border-radius: 0.6rem;
  color: var(--night-black);
  font-weight: 500;
  font-size: 1.2rem;
  border: none;
  background-color: white;
}

button:active {
  background-color: whitesmoke;
}
button:hover {
  padding: 0.57rem 0.95rem;
  cursor: pointer;
}

.links {
  text-decoration: none;
}

@media screen and (min-width: 1500px) {
  body {
    font-size: 20px;
  }
}

To understand this please go through the comments I have added or look up the terms or concepts you’re unfamiliar with.

For buttons, I have used flex-box because like I mentioned before we are going to have text as well as icons inside buttons, altho you can use <span> and wrap the plain text and the icon inside it like <button><span> Start <FiArrowRight size="1.2rem" /> </span></button>, you won’t have to write the long CSS with flexbox, but by this method text and icon will appear on the same line but they won’t be aligned well. (Try out for yourself.)

without flexbox

with flexbox

Now you need to add this CSS file to the top-level component so that every component below it can use this CSS, import utilities.css inside the app component.

import React from "react";
import Home from "./pages/Home";
import "./utilities.css";

const App = () => {
    return (
        <div>
            <Home />
        </div>
    )
}
export default App;

Your website should look like this after adding utilities

Comparing this to the header image here everything is stacked, we need to arrange the hero-image and HomePanel side by side, and we’ll achieve that with CSS flexbox, Let’s write the specific CSS for the Home.jsx.

Home.css

Please add the following CSS to your Home.css file, and import it inside Home.jsx using import "./Home.css";

/*Turn t
he home-container div into a flexbox*/
.home-container {
  display: flex;
  width: 100%;
  height: 100vh;
}

/*hero image should take up 60% of the width of its container*/
.hero-image {
  width: 60%;
  height: 100%;
  position: relative;
}
/*to make it stick to the bottom*/
.hero-image > img {
  position: absolute;
  bottom: 0;
}

/*HomePanel takes up 40% of the width of its container*/
.home-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  width: 40%;
  height: max-content;
  margin: 0 1rem 1rem 1rem;
  border-radius: 0 0 5rem 5rem;
  background-color: var(--primary-blue);
  box-shadow: 1px 1px 10px 2px grey;
  padding: 4rem;
}
/*To align everything other than Logo, on the start (left side) */
.start {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.plan-image {
  width: 60%;
}

.start-button {
  display: flex;
  align-items: start;
  width: max-content;  /*otherwise it will take full length of the container*/
  gap: 0.4rem;
} 

/*adding media query for both tabs and phone screens*/
@media screen and (max-width: 800px) {
  .home-container {
    flex-direction: column; /*to stack hero image and homepanel rather than side by side*/
    align-items: center;
  }
  .hero-image {
    order: 2; /*To change the order of the hero image from left to lower one when arranged in a column*/
    width: 100%;
  }
  .hero-image > img {
    position: relative; /*To take it's regular order inside the parent container rather than sticking to bottom*/
    bottom: 0;
  }
  .home-panel {
    width: 70%;
  }
}

I have added the necessary comments to understand why I wrote certain properties, note that you can do it differently than I did, try playing around with the property values to understand this better. CSS is not the scope of this course, so we’ll not discuss styling in detail :(

Perfect!

After adding Home.css to Home.jsx. Note: My screen is zoomed in, yours might look a little different according to your screen dims.

We are almost there with our home page, let’s move on to the next one.