5 min read

Build Hero Section With Nextjs & Material-UI v5

Build Hero Section With Nextjs & Material-UI v5

The hero section gives an excellent impression to the visitor when they first visit your website. You never have a second chance to give your visitor a first impression. Hence, the hero section is one of the most element of a website.

We need a relevant and beautiful image to attract the visitor. A big and stand out title and subtitle to tell the visitor whether they're landing on the correct website they are searching.

Tutorial 3: Build A Hero Section

We'll use the "Next image" component for better image optimization.

Note: If you direct land on this page from searches, you may want to visit:-

Let's get started!

Initial the Hero component

Create the file:

touch components/Hero.jsx

Add the code:

import * as React from 'react';

const Hero = ( ) => {
    return ( );
}
 
export default Hero;

Define the hero container

import Grid from "@material-ui/core/Grid";

Add the code:

<Grid
  component="section"
  container
  sx={{
    position: `relative`,
    height: "100vh",
    width: `100vw`,
    overflow: `hidden`,
    zIndex: -100,
    mb: 15,
  }}
></Grid>
  • The position set to "relative" is to add a filter layer and set its position later.
  • Set to z index to negative so that the hero section will not block the back to top button.
  • Overflow set to hidden is to hide the picture which flows out from the container.

The hero image

I am going to use an image by Pablo Merchán Montes from Unsplash. If you want to use the same image, you can download it with this link.

  • Resize the photo to 1920 x 1080px.
  • Add to public folder and rename it to "home-hero".

Define the image props

De-structure the props we want to use for the Hero component.

{imgSrc, imgAlt}

📝 You can name it whatever you want

Render hero image with Next image component

import Image from "next/image";

Add the code:

<Image src={imgSrc} alt={imgAlt} layout="fill" objectFit="cover" />
  • The image container's relative position is important to use "Next image". Next Image is using absolute position by default. Without the relative position, the image will flow out of container. Especially the layout is set to fill.

Add the Hero component to homepage

Open ./pages/index.js

import Hero from '../components/Hero'

Wrap the Hero & Container component with React fragment.

Add the code:

<Hero
  imgSrc="/homepage-hero.jpg"
  imgAlt="satified woman eating in restaurant"
/>

Save all the files, start the development server

npm run dev

Start the development server and visit http://localhost:3000/, you shall see:

Hero Image

Add filter layer

Add the code below the Image component:

<Grid
  container
  sx={{
    position: "absolute",
    inset: 0,
    backgroundColor: "rgba(0,0,0, .7)",
  }}
></Grid>
  • Use the inset property to set the background covering the whole image container.
  • Set the background to black colour with 30% transparency.

Save the file, and you shall see:

Add overlay title & subtitle

import Typography from "@material-ui/core/Typography";

De-structure the title & subtitle props:

Add title and subtitle code:

<Grid
  container
  item
  flexDirection="column"
  justifyContent="center"
  alignItems="center"
>
  <Typography
    variant="h1"
    align="center"
    gutterBottom
    sx={{
      color: "secondary.main",
      fontWeight: 400,
    }}
  >
    {title}
  </Typography>
  <Typography
    component="p"
    variant="h3"
    align="center"
    color="common.white"
    sx={{
      mb: 10,
    }}
  >
    {subtitle}
  </Typography>
</Grid>

Nest it inside the filter layer:

  • The Grid container set the flex-direction to column to display the content vertically.
  • If you are not sure what is align-items, check out this flexbox cheat sheet from CSS-Trick.
  • Setting colour in sx prop and Typography API shows that we can use two different methods to style the colour.

Add title and subtitle content

Open ./pages/index.js

Add title & subtitle to Hero component:

<Hero
  imgSrc="/home-hero.jpg"
  imgAlt="satified woman eating in restaurant"
  title="De West Sakura"
  subtitle="Best Western &amp; Japanese Fusion Restaurant In Town"
/>

Save all the files, you shall see:

Add a hint to scroll

Setting the hero section height to "100vh" cover up the whole device's screen. The visitor might not know they can scroll down. Hence, we'll add a text and icon to tell the visitor there are content below.

import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";

Add the code:

<Typography component="p" variant="h6" color="secondary" gutterBottom>
  Scroll
</Typography>
<ArrowDownwardIcon fontSize="large" color="secondary" />

Save the file, you shall see:

We successfully create a Hero component with Material-UI & Nextjs.

ctrl + c to close the development server

Take a rest!

Next~

We're going to create the about section on the homepage.

Build A Homepage’s About Section With Nextjs & Material-UI v5
This section provides a short introduction about the restaurant, chef or other value proposition. Then, the visitor can click a call to action button to navigate to the about page if they’re interested and would like to know more about us. Tutorial 4: Build An About Section On HomepageNote: If

Feel free to tweet me if you have any feedback, improvement, suggestion or error.

Something to say about this tutorial? Comment on the Tweet below: