3 min read

Build A Homepage's About Section With Nextjs & Material-UI v5

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 Homepage

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

Let's get started!

Initial the component

import { Container, Grid } from "@material-ui/core";
import * as React from "react";

const SectionAbout = () => {
  return (
    <Container component="section" maxWidth="md" sx={{ mb: 15 }}>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6}></Grid>
        <Grid item xs={12} sm={6}></Grid>
      </Grid>
    </Container>
  );
};

export default SectionAbout;
  • The section has an image column and a paragraph column.
  • The image on top, paragraph on the bottom on a mobile device.
  • The image on the left, paragraph on the right on a tablet device and above.

unDraw SVG image

If you want to use the same photo:

  1. Visit unDraw
  2. Search for "chef"
  3. Change the colour #673AB7 to match the theme
  4. Download the SVG version
  5. Rename it to "chef"
  6. Add to "public" directory

The image column

import Image from "next/image";
<Image
  src="/chef.svg"
  alt="A Chef"
  layout="responsive"
  width={800}
  height={600}
/>;

Add the code:

  • In this tutorial, I use the Next image responsive layout. Using a "layout responsive" is overkill for the image not changing dramatically. However, I want to show the example of using the Next image with another approach.
  • W800px x H600px is to set the image ratio at 4:3. You can use a smaller figure (W400px xH300px) in this case or a different ratio.

The paragraph column

import { Typography } from "@material-ui/core";
  <Typography component="h2" variant="h4" textAlign="center" gutterBottom>
    A Japanese Chef Who Love Western Food
  </Typography>
  <Typography textAlign="center" sx={{ mb: 5 }}>
    We mix Japanese and Western ingredients and cooking methods. Provide you
    with a different tasting dimension with the fusion food in our restaurant.
    Don't miss the chance to surprise your tongue!
  </Typography>

Add the code to the second Grid item:

Call to action (CTA) button

import MuiNextLink from "../components/MuiNextLink";
import Button from "@material-ui/core/Button";
<MuiNextLink href="/about-us">
  <Button variant="outlined" size="large">
    About Us
  </Button>
</MuiNextLink>;

Ops~ the paragraph content is not positioned correctly.

Adjust the paragraph's positioning

Add these attributes to second Grid:

container flexDirection="column" justifyContent="center" alignItems="center"

Adjust CTA White Space

The CTA button is close to the Typography. Add margin-bottom at second Typography.

We successfully built the homepage's about section with Nextjs & Material-UI V5

Next~

We are going to build an image section for a section transition purpose.

Build An Image Transition Section with Nextjs & Material-UI v5
Build an beautiful image transition section with Nextjs & Material-UI to separate the content.

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