back to all posts

Creating an Agency Site in GatsbyJS-2

by Nabendu Biswas / August 22nd, 2019

#gatsby #react #webdev
Series: Gatsby-agency

Welcome to part-2 of the series. We will start with Section Four here.

We will have the usual Heading and paragraph, followed by six sections containing some details about the technologies.

We are adding SectionFour in the index.js

index.jsindex.js

Now, let’s add CSS for the same in IndexStyles.js. Also, don’t forget to export the newly created Styled component.

The CSSThe CSS

Now, we will create the Grid which will contain the six sections. The six sections will be exactly the same, only the background will be different.

CSS gridCSS grid

Now, we will add the CSS to our IndexStyles.jsfile, inside the SectionFour styled component.

StylesStyles

We also need to install a new fontawesome library, as we are using some brand icons here. So, in the terminal stop gatsby and install this via npm

    npm install @fortawesome/free-brands-svg-icons

The changes made to the header of our index.js is below.

Including Font-awesomeIncluding Font-awesome

Now, our Section Four looks like

Section FourSection Four

The next section, will have a parallax image with an Contact Us form. We will be reusing the Banner styled component used in Section 1 here.

index.js updateindex.js update

But, we need to update the Banner styled component to contain the parallax effect.

Parallax effect.Parallax effect.

Next, lets add a form on top of the image.

The formThe form

Next, let’s add some Styles in IndexStyles.js

Some stylesSome styles

Let’s add some more styles for the form.

More StylesMore Styles

This will result in the below section.

Contact UsContact Us

Now, we will create the footer section. But our Footer will be common to all our pages. So, we will put it in the layout component.

Create a folder components inside src and a file called layout.js inside it. The content contains a simple footer with different icons. Here the {children} will show the components, which we will soon wrap Layout component with.

FooterFooter

Let’s put some styles in IndexStyles.js for Footer.

The Footer StylesThe Footer Styles

Now, let’s wrap our HomePage with this Layout component.

index.jsindex.js

Now, our homepage is almost complete with the Footer.

FooterFooter

We have one more thing left in the Home Page and that is the Menu. We will create that also in the Layout component as it will be shared with our Our Work and About Us page.

Nabendu Biswas