Maison > Article > interface Web > Créer le site Web de l'agence Sunnyside avec React
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.
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 :
Le projet est organisé en différents composants React, chacun responsable d'une partie spécifique du site :
Pour démarrer le projet Sunnyside Agency, suivez ces étapes :
git clone https://github.com/abhishekgurjar-in/SunnySide-Agency.git
cd sunnyside-agency
npm install
npm start
http://localhost:3000
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.
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.
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.
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.
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.
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.
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.
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.
Pour voir le site Web de Sunnyside Agency en action, visitez Live Demo .
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!
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!