Valorant-inspired React Website

We include a custom auto-play slideshow and custom navigation bar.

We’ll build this webpage in 5 main sections.

1. Section 1 — our product logo and an image gallery

2. Section 2 — information about our product

3. Section 3 — accolades about our product

4. Section 4 — opportunities to buy our product

5. Section 5 — contact information for our business

We’ll create a Home.js component to hold all of this code.

Section 1.

All we’re going to do here is create containers for our product logo & button, and image gallery.

We’ll deal with the details of the image gallery implementation later.

For now we position our logo and button on the page and place our image gallery behind everything.

<div className=”section1">
  <div className=”container”>
    <img src=”./images/reyna.png” alt=”” className=”splash_img” />
    <img src=”./images/val-logo.png” alt=”” className=”splash_logo” 
     />
    <div className=”sign_up”>
      <a href=”https://localhost" target=”_blank” 
      rel=”noreferrer”>Sign Up</a>
    </div>
  </div>
  <div ref={galleryRef} className=”gallery”>
    {
      loaded ?
        <Deck gallery={gallery} /> : null
    }
  </div>
</div>

This is our result:

Section 2.

For this section we’ll create a container for a grid of items.

Our grid will be 2x4 and centered in the screen.

Each item of the grid will be a ‘Point’ component (a “point” about our product)

Our ‘Point’ component will consist of an icon, name, and brief description.

function Point(props) {
  return (
    <div className=”point”>
      <div className=”point_icon”>
        <img src={props.img} alt=””/>
      </div>
      <div className=”point_title”>
        <div className=”point_name”>In the Crosses</div>
        <div className=”point_description”>Rewards accuracy and 
        skill</div>
      </div>
    </div>
  )
}

Our Section 2 code is very simple.

<div className=”section2">
  <div className=”marketing_points”>
    <Point img=”./images/icons/val-symbol.png” />
    <Point img=”./images/icons/bladestorm.png” />
    <Point img=”./images/icons/dimensional-drift.png” />
    <Point img=”./images/icons/empress.png” />
    <Point img=”./images/icons/shock-bolt.png” />
    <Point img=”./images/icons/turret.png” />
  </div>
</div>

This is our result:

Section 3.

A simple flexbox of items.

<div className=”section3">
  <div className=”accolades”>
    <div className=”accolade”>
      <i className=”fas fa-award”></i>
    </div>
    <div className=”accolade”>
      <i className=”fas fa-flag”></i>
    </div>
    <div className=”accolade”>
      <i className=”fas fa-gamepad”></i>
    </div>
  </div>
</div>

This is our result:

Section 4.

For this section we’ll create a container for a flexbox of items.

Each item of the flexbox will be a ‘Package’ component.

Our ‘Package’ component will consist of background image, title, description, price, purchase button, and feature list.

For now, we’ll just use dummy information.

<div className=”package” style={{ backgroundColor: props.color }}>
  <img src={props.image} alt=”” className=”package_image” />
  <div className=”package_information”>
    <div className=”package_head”>
      <div className=”package_name”>{props.name}</div>
      <div className=”package_description”>{props.description}</div>
    </div>
    <div className=”package_body”>
      <div className=”package_price”>{`$${props.price}`}</div>
      <div className=”package_purchase”>
        <a href=”https://localhost" target=”_blank” 
           rel=”noreferrer”>Select</a>
      </div>
    </div>
    <div className=”package_foot”>
      Includes all base features:
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
       <li>Feature 3</li>
        <li>Feature 4</li>
      </ul>
    </div>
  </div>
</div>

Our Section 4 code is very simple.

<div className=”section4">
  <div className=”packages_container”>
    <Package color=”#2db634" img=”./images/viper.png” />
    <Package color=”#fb6c32" img=”./images/phoenix.png” />
    <Package color=”#3694f5" img=”./images/jett.png” />
  </div>
</div>

This is our result:

Section 5.

For this section we’ll have a series of unordered lists.

This is just basic contact information organized into lists positioned horizontally. Nothing special here.

<div className=”section5">
  <section className=”contact_section” >
    <ul>
      <li>Affiliates</li>
      <li>Careers</li>
      <li>Privacy</li>
    </ul>
  </section>
  <section className=”contact_section” >
  <ul>
      <li>Telephone <i className=”fas fa-phone-square-alt”></i> 
      </li>
      <li>Email <i className=”fas fa-envelope-square”></i> </li>
  </ul>
  </section>
  <section className=”contact_section” >
    <ul>
      <li>Instagram <i className=”fab fa-instagram-square”></i> 
      </li>
      <li>Twitter <i className=”fab fa-twitter-square”></i> </li>
      <li>Facebook <i className=”fab fa-facebook-square”></i> </li>
    </ul>
  </section>
</div>

This is our result:

Let’s get our image gallery up and running.

We created this component in a separate tutorial.

You can find it here.

We’re simply going to import and modify it to fit our project.

We don’t need the left and right navigation buttons for this gallery so we can strip those out.

Then we just modify some color schemes and we’re good to go.

<div ref={galleryRef} className=”gallery”>
  {
    loaded ?
      <Deck gallery={gallery} /> : null
  }
</div>

Let’s implement a navigation bar.

We created this component in a separate tutorial.

You can find it here.

We’re simply going to import and modify it to fit our project.

All we really need to do is change the color scheme and icon being used.

This is our result:

There is much more nuance to this project.

You can view our video tutorial down below.

You can get the source files here.

All contact image icons we’re gathered from Font Awesome.

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Be sure to follow us on Instagram and Twitter to keep up with our latest Web Development tutorials.

Valorant-inspired React Website