Création de Loop Studio à l'aide de React

Introduction

Loop Studio est un site Web immersif conçu pour présenter divers projets de réalité virtuelle (VR). Grâce à React, nous pouvons gérer et restituer efficacement différents composants pour créer une expérience utilisateur cohérente et interactive. Ce projet présente un design épuré avec un en-tête de navigation, une section VR détaillée, une galerie de créations et un pied de page avec des liens vers les réseaux sociaux.

Aperçu du projet

Le site Web Loop Studio comprend les sections clés suivantes :

• En-tête :Navigation et titre principal
• Section VR :Informations sur l'expertise VR de l'entreprise
• Galerie de créations :Vitrine de différentes créations VR
• Pied de page : Liens vers les réseaux sociaux et informations supplémentaires

Caractéristiques

• Conception réactive : Garantit que le site Web s'affiche parfaitement sur tous les appareils.
• Éléments interactifs : Effets de survol et affichage de contenu dynamique.
• Mise en page épurée : Sections organisées et design visuellement attrayant.

Technologies utilisées

• React : Bibliothèque JavaScript pour créer des interfaces utilisateur
• CSS : Style pour la mise en page et le design
• Webpack : Bundler de modules pour la gestion des actifs (si nécessaire)

Installation

Pour démarrer ce projet, clonez le référentiel et installez les dépendances nécessaires :

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

Utilisation*

Pour exécuter le projet localement, utilisez la commande suivante :

npm start

Cela démarrera le serveur de développement et ouvrira l'application dans votre navigateur Web par défaut.

Structure du projet

Voici une répartition de la structure du projet :

App.js

Le composant principal qui restitue tous les autres composants.

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

En-tête.js

Affiche le menu de navigation et le titre principal.

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

Montre l'expertise VR de 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;

Création.js

Affiche une galerie de différents projets VR.

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;

Pied de page.js

Contient des liens vers les réseaux sociaux et des informations de pied de page.

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;

Explication du code

• Composant d'en-tête : Utilise flexbox pour la mise en page, inclut des liens de navigation et affiche un titre avec une image d'arrière-plan.
• Composant VR : Affiche une image et un texte sur le leadership VR de Loop Studio.
• Composant de création : Affiche une grille de cartes, chacune représentant un projet VR différent.
• Composant de pied de page : Contient des liens vers les réseaux sociaux et un texte de pied de page.

Démo en direct

Vous pouvez voir la démo en direct du site Loop Studio ici .

Conclusion

Construire le site Web Loop Studio avec React permet d'avoir une structure modulaire et maintenable. En décomposant le projet en composants réutilisables, vous pouvez gérer et mettre à jour chaque section indépendamment. Cette approche améliore non seulement l'efficacité du développement, mais garantit également une conception épurée et professionnelle.

Crédits

• Documentation React : Site officiel de React
• Sources d'images : [Stock Images/Ressources de conception]

Auteur

Abhishek Gurjar est un développeur Web dévoué et passionné par la création d'applications Web pratiques et fonctionnelles. Découvrez plus de ses projets sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!