Building Loop Studio Using React

Introduction

Loop Studio is an immersive website designed to showcase various virtual reality (VR) projects. Using React, we can efficiently manage and render different components to build a cohesive and interactive user experience. This project features a clean design with a navigation header, a detailed VR section, a gallery of creations, and a footer with social media links.

Project Overview

The Loop Studio website includes the following key sections:

Header: Navigation and main title
VR Section: Information about the company's VR expertise
Creation Gallery: Showcase of different VR creations
Footer: Social media links and additional information

Features

Responsive Design: Ensures the website looks great on all devices.
Interactive Elements: Hover effects and dynamic content display.
Clean Layout: Organized sections and visually appealing design.

Technologies Used

React: JavaScript library for building user interfaces
CSS: Styling for layout and design
Webpack: Module bundler for asset management (if needed)

Installation

To get started with this project, clone the repository and install the necessary dependencies:

git clone https://github.com/abhishekgurjar-in/Loop-Studio.git
cd easybank-landing-page
npm install

Usage*

To run the project locally, use the following command:

npm start

This will start the development server and open the application in your default web browser.

Project Structure

Here’s a breakdown of the project structure:

`App.js`

The main component that renders all other components.

import React from 'react'
import "./App.css"
import Header from './components/Header'
import VR from './components/VR'
import Creation from './components/Creation'
import Footer from './components/Footer'

const App = () => {
  return (
    <>
      <Header/>
      <VR/>
      <Creation/>
      <Footer/>
    </>
  )
}

export default App

`Header.js`

Displays the navigation menu and main title.

import React from "react";
import Logo from "../assets/images/logo.svg";
const Header = () => {
  return (
    <div className="header">
   <div className="opacity">
   <div className="nav">
        <div className="left-nav">
          <img src={Logo} alt="" />
        </div>
        <div className="right-nav">
          <a href="">About</a>
          <a href="">Career</a>
          <a href="">Events</a>
          <a href="">Products</a>
          <a href="">Support</a>
        </div>
      </div>
      <div className="title-box">
        <h1 className="title">IMMERSIVE EXPERIENCES THAT DELIVER</h1>
      </div>
   </div>
    </div>
  );
};

export default Header;

`VR.js`

Shows the VR expertise of Loop Studio.

import React from "react";
import Vr from "../assets/images/desktop/image-interactive.jpg";
const VR = () => {
  return (
    <div className="vr">
      <div className="vr-text">
        <h1>THE LEADER IN INTERACTIVE VR</h1>
        <p>
          Founded in 2011, Loopstudios has been producing world-class virtual
          reality projects for some of the best companies around the globe. Our
          award-winning creations have transformed businesses through digital
          experiences that bind to their brand.
        </p>
      </div>
      <div className="vr-image">
        <img src={Vr} alt="" />
      </div>
    </div>
  );
};

export default VR;

`Creation.js`

Displays a gallery of different VR projects.

import React from "react";

const Creation = () => {
  return (
    <div className="creation">
      <div className="title-creation">
        <h4>OUR CREATIONS</h4>
        <h5>SEE ALL</h5>
      </div>
      <div className="cards">
        <div className="card-1">
          <h1>
            DEEP <br /> EARTH
          </h1>
        </div>
        <div className="card-2">
          <h1>
            NIGHT <br /> ARCADE
          </h1>
        </div>
        <div className="card-3">
          <h1>
            SOCCER <br /> TEAM <br /> VR
          </h1>
        </div>
        <div className="card-4">
          <h1>
            THE <br />
            GRID
          </h1>
        </div>
      </div>
      <div className="cards">
        <div className="card-5">
          <h1>
          FROM <br /> UP <br /> ABOVE <br /> VR
          </h1>
        </div>
        <div className="card-6">
          <h1>
          POCKET <br /> BOREALIS
          </h1>
        </div>
        <div className="card-7">
          <h1>
          THE <br /> CURIOSITY
          </h1>
        </div>
        <div className="card-8">
          <h1>
          MAKE <br /> IT <br /> FISHEYE
          </h1>
        </div>
      </div>
    </div>
  );
};

export default Creation;

`Footer.js`

Contains social media links and footer information.

import React from "react";
import logo from "../assets/images/logo.svg";
import fb from "../assets/images/icon-facebook.svg";
import tw from "../assets/images/icon-twitter.svg";
import pt from "../assets/images/icon-pinterest.svg";
import ig from "../assets/images/icon-instagram.svg";

const Footer = () => {
  return (
    <div className="footer">
      <div className="left-footer">
        <img src={logo} alt="" />
        <div className="left-link">
          <a href="">About</a>
          <a href="">Career</a>
          <a href="">Events</a>
          <a href="">Products</a>
          <a href="">Support</a>
        </div>
      </div>
      <div className="right-footer">
        <div className="social-logo">
          <img src={fb} alt="" />
          <img src={tw} alt="" />
          <img src={pt} alt="" />
          <img src={ig} alt="" />
        </div>
        <p>© 2021 Loopstudios. All rights reserved.</p>
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
};

export default Footer;

Code Explanation

Header Component: Utilizes flexbox for layout, includes navigation links, and displays a title with a background image.
VR Component: Shows an image and text about Loop Studio’s VR leadership.
Creation Component: Displays a grid of cards, each representing a different VR project.
Footer Component: Contains social media links and footer text.

Live Demo

You can view the live demo of the Loop Studio website here .

Conclusion

Building the Loop Studio website with React allows for a modular and maintainable structure. By breaking down the project into reusable components, you can manage and update each section independently. This approach not only improves development efficiency but also ensures a clean and professional design.

Credits

React Documentation: React Official Site
Image Sources: [Stock Images/Design Resources]

Author

Abhishek Gurjar is a dedicated web developer passionate about creating practical and functional web applications. Check out more of his projects on GitHub.

Blog