Créer le site Web de l'agence Sunnyside avec React

Introduction

Bienvenue sur la présentation détaillée du site Web de Sunnyside Agency, un site moderne et élégant construit avec React. Ce projet met en valeur la puissance de React dans la création d'applications Web dynamiques et réactives. Plongeons dans les différents composants qui composent ce projet et explorons comment ils s'assemblent pour créer une expérience utilisateur engageante.

Aperçu du projet

Le site Sunnyside Agency est conçu pour mettre en avant les services, projets et témoignages d'une agence créative. Il présente un design épuré et professionnel avec un défilement fluide et des mises en page réactives. Le site Web comprend les sections suivantes :

• Accueil
• À propos
• Services
• Projets
• Témoignages
• Pied de page

Caractéristiques

• Conception réactive : S'adapte à différentes tailles d'écran pour une expérience visuelle optimale.
• Défilement fluide : Navigation améliorée avec défilement fluide entre les sections.
• Contenu dynamique : Les composants React affichent dynamiquement différentes sections du site Web.
• Éléments interactifs : Comprend des boutons et des liens avec des effets de survol et des transitions.

Technologies utilisées

• React : Pour créer l'interface utilisateur et gérer l'état.
• CSS : Pour styliser les composants et garantir un design visuellement attrayant.
• Google Fonts : Pour une typographie personnalisée afin d'améliorer l'esthétique du site Web.
• React Scroll : Pour un défilement fluide entre les sections.

Structure du projet

Le projet est organisé en différents composants React, chacun responsable d'une partie spécifique du site :

• App.js : Le composant principal qui restitue tous les autres composants.
• Navbar.js : Contient la barre de navigation avec des liens vers différentes sections.
• Home.js : Affiche le contenu d'introduction et l'image principale.
• About.js : Fournit des informations sur l'agence avec des images et du texte.
• Services.js : Présente les services proposés par l'agence avec des images et des descriptions.
• Projects.js : Affiche une galerie d'images de projets.
• Testimonials.js : Présente des témoignages de clients avec des photos et des citations.
• Footer.js : Contient des liens de contact et des icônes de réseaux sociaux.

Installation

Pour démarrer le projet Sunnyside Agency, suivez ces étapes :

1. Cloner le référentiel :

   git clone https://github.com/abhishekgurjar-in/SunnySide-Agency.git

1. Accédez au répertoire du projet :

   cd sunnyside-agency

1. Installer les dépendances :

   npm install

1. Démarrez le serveur de développement :

   npm start

1. Ouvrez votre navigateur et visitez :

http://localhost:3000

Explication du code

App.js

import React from "react";
import "./App.css";
import Navbar from "./components/Navbar";
import About from "./components/About";
import Services from "./components/Services";
import Projects from "./components/Projects";
import Home from "./components/Home";
import Footer from "./components/Footer";
import Testimonials from "./components/Testimonials";

const App = () => {
  return (
    
      <navbar></navbar>
      <home></home>
      <about></about>
      <services></services>
      <projects></projects>
      <testimonials></testimonials>
      <footer></footer>
    >
  );
};

export default App;

Le fichier App.js est le composant principal qui importe et restitue tous les autres composants, formant la structure de base du site Web.

Barre de navigation.js

import React from "react";
import Créer le site Web de lagence Sunnyside avec React from "../assets/images/Créer le site Web de lagence Sunnyside avec React.svg";
import { Link as ScrollLink } from 'react-scroll';
const Navbar = () => {
  return (
    <div classname="Navbar">
     <div classname="Créer le site Web de lagence Sunnyside avec React">
     <img src="%7BCr%C3%A9er" le site web de lagence sunnyside avec react alt="Créer le site Web de lagence Sunnyside avec React">
     </div>
      <div classname="header">
      <scrolllink to="about" smooth="{true}" duration="{500}">
            About
          </scrolllink>
          <scrolllink to="services" smooth="{true}" duration="{500}">
            Services
          </scrolllink>
          <scrolllink to="projects" smooth="{true}" duration="{500}">
            Projects
          </scrolllink>
      <button>CONTACT</button>
      </div>
    </div>
  );
};

export default Navbar;

Le composant Navbar.js fournit une barre de navigation avec des liens à défilement fluide vers différentes sections du site Web.

Accueil.js

import React from 'react'
import headImage from "../assets/images/desktop/image-header.jpg"
import aero from "../assets/images/icon-arrow-down.svg"
const Home = () => {
  return (
    <div classname="home">
    <h1 classname="title">WE ARE CREATIVES</h1>
    <img classname="aero-image" src="%7Baero%7D" alt="">
    <img classname="head-image" src="%7BheadImage%7D" alt="">
    </div>
  )
}

export default Home

Home.js présente la section d'introduction avec un titre et une image principale, donnant le ton au reste du site Web.

À propos de.js

import React from "react";
import eggImage from '../assets/images/desktop/image-transform.jpg'
import cupImage from '../assets/images/desktop/image-stand-out.jpg'

const About = () => {
  return <div id="about" classname="about">
  <div classname="about-first">
    <div classname="text-about">
        <h1>Transform your <br> brand</h1>
        <p>We are a full-service creative agency specializing in helping brands grow fast. Engage your clients through compelling visuals that do most of the marketing for you.</p>
        <h4>LEARN MORE</h4>
    </div>
    <div classname="egg-section">
        <img src="%7BeggImage%7D" alt="">
    </div>
  </div>
  <div classname="about-second">
    <div classname="cup-section">
        <img src="%7BcupImage%7D" alt="">
    </div>
    <div classname="text-about">
        <h1>Stand out to the right <br> audience</h1>
        <p>Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters, we’ll build and extend your brand in digital places.</p>
        <h4>LEARN MORE</h4>
    </div>
  </div>
  </div>;
};

export default About;

Le composant About.js met en avant la mission et les services de l'agence avec des sections visuellement attrayantes.

Services.js

import React from "react";
import rightImage from "../assets/images/desktop/image-photography.jpg";
import leftImage from "../assets/images/desktop/image-graphic-design.jpg";

const Services = () => {
  return (
    <div id="services" classname="service-container">
      <div classname="services">
        <div classname="service-left">
          <div classname="text-service">
            <h1>Graphic Design</h1>
            <h4>
              Great design makes you memorable. We deliver artwork that
              underscores your brand message and captures potential clients’
              attention.
            </h4>
          </div>
          <img src="%7BleftImage%7D" alt="">
        </div>
        <div classname="service-right">
          <div classname="text-service">
            <h1>Photography</h1>
            <h4>
              Increase your credibility by getting the most stunning,
              high-quality photos that improve your business image.
            </h4>
          </div>
          <img src="%7BrightImage%7D" alt="">
        </div>
      </div>
      <div></div>
    </div>
  );
};

export default Services;

Services.js présente les services proposés par l'agence avec des images et des descriptions.

Projets.js

import React from "react";
import ProjectImage1 from "../assets/images/desktop/image-gallery-milkbottles.jpg";
import ProjectImage2 from "../assets/images/desktop/image-gallery-orange.jpg";
import ProjectImage3 from "../assets/images/desktop/image-gallery-cone.jpg";
import ProjectImage4 from "../assets/images/desktop/image-gallery-sugarcubes.jpg";


const Projects = () => {
  return (
      <div id="projects" classname="projects">
        <img classname="project" src="%7BProjectImage1%7D" alt="">
        <img classname="project" src="%7BProjectImage2%7D" alt="">
        <img classname="project" src="%7BProjectImage3%7D" alt="">
        <img classname="project" src="%7BProjectImage4%7D" alt="">
      </div>
  );
};

export default Projects;

Le composant Projects.js affiche une galerie d'images présentant le travail de l'agence.

Témoignages.js

import React from 'react'
import Emily from "../assets/images/image-emily.jpg"
import Jennie from "../assets/images/image-jennie.jpg"
import Thomas from "../assets/images/image-thomas.jpg"

const Testimonials = () => {
  return (
    <div classname="testimonials">
        <h3>CLIENT TESTIMONIALS</h3>
        <div classname="cards">
          <div classname="card">
            <img src="%7BEmily%7D" alt="">
            <h5>We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always hit.</h5>
            <h4>Emily R.</h4>
            <p>Marketing Director</p>
          </div>
          <div classname="card">
            <img src="%7BThomas%7D" alt="">
            <h5>Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and enjoyable experience.</h5>
            <h4>Thomas S.</h4>
            <p>Chief Operating Officer</p>
          </div>
          <div classname="card">
            <img src="%7BJennie%7D" alt="">
            <h5>Incredible end result! Our sales increased over 400% when we worked with Sunnyside.Highly recommended!</h5>
            <h4>Jennie F.</h4>
            <p>Business Owner</p>
          </div>
        </div>
      </div>
  )
}

export default Testimonials

Testimonials.js met en avant les retours des clients, ajoutant ainsi de la crédibilité aux services de l'agence.

Pied de page.js

import React from "react";
import LogoImage from "../assets/images/Créer le site Web de lagence Sunnyside avec React.svg";
import fb from "../assets/images/icon-facebook.svg";
import ig from "../assets/images/icon-instagram.svg";
import pt from "../assets/images/icon-pinterest.svg";
import tw from "../assets/images/icon-twitter.svg";

const Footer = () => {
  return (
    <div classname="footer">
      <img classname="Créer le site Web de lagence Sunnyside avec ReactImage" src="%7BLogoImage%7D" alt="">
      <div classname="link-bar">
        <a href="">About</a>
        <a href="">Services</a>
        <a href="">Projects</a>
      </div>
      <div classname="social-link">
        <a href="">
          {" "}
          <img src="%7Bfb%7D" alt="">
        </a>
        <a href="">
          {" "}
          <img src="%7Big%7D" alt="">
        </a>
        <a href="">
          {" "}
          <img src="%7Btw%7D" alt="">
        </a>
        <a href="">
          {" "}
          <img src="%7Bpt%7D" alt="">
        </a>
      </div>
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  );
};

export default Footer;

Le composant Footer.js comprend des icônes de réseaux sociaux et une mention de droit d'auteur.

Démo en direct

Pour voir le site Web de Sunnyside Agency en action, visitez Live Demo .

Conclusion

The Sunnyside Agency website is a testament to the versatility of React in creating modern, responsive web applications. By leveraging React’s component-based architecture, we have built a clean, professional site that effectively showcases the agency’s services and projects.

Feel free to explore the code and customize it to fit your needs. Happy coding!

Credits

• React: For providing the framework used in this project.
• Google Fonts: For typography.
• React Scroll: For smooth scrolling functionality.

Author

Abhishek Gurjar is a dedicated web developer passionate about creating practical and functional web applications. Check out more of his projects on 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!