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.
Top comments (0)