Rumah >hujung hadapan web >tutorial css >Membina Laman Web Agensi Sunnyside dengan React
Selamat datang ke pecahan terperinci tapak web Agensi Sunnyside, tapak moden dan bergaya yang dibina menggunakan React. Projek ini mempamerkan kuasa React dalam mencipta aplikasi web yang dinamik dan responsif. Mari kita selami pelbagai komponen yang membentuk projek ini dan terokai cara mereka bersatu untuk mencipta pengalaman pengguna yang menarik.
Tapak web Agensi Sunnyside direka untuk menyerlahkan perkhidmatan, projek dan testimoni agensi kreatif. Ia menampilkan reka bentuk yang bersih dan profesional dengan tatal lancar dan susun atur responsif. Laman web ini merangkumi bahagian berikut:
Projek ini disusun dalam pelbagai komponen React, masing-masing bertanggungjawab untuk bahagian tertentu tapak web:
Untuk bermula dengan projek Agensi Sunnyside, ikut langkah berikut:
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;
Fail App.js ialah komponen utama yang mengimport dan memaparkan semua komponen lain, membentuk struktur teras tapak web.
import React from "react"; import Membina Laman Web Agensi Sunnyside dengan React from "../assets/images/Membina Laman Web Agensi Sunnyside dengan React.svg"; import { Link as ScrollLink } from 'react-scroll'; const Navbar = () => { return ( <div classname="Navbar"> <div classname="Membina Laman Web Agensi Sunnyside dengan React"> <img src="%7BMembina" laman web agensi sunnyside dengan react alt="Membina Laman Web Agensi Sunnyside dengan 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;
Komponen Navbar.js menyediakan bar navigasi dengan pautan tatal lancar ke bahagian tapak web yang berbeza.
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 menampilkan bahagian pengenalan dengan tajuk dan imej utama, menetapkan nada untuk tapak web yang lain.
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;
Komponen About.js menyerlahkan misi dan perkhidmatan agensi dengan bahagian yang menarik secara visual.
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 mempersembahkan perkhidmatan yang ditawarkan oleh agensi dengan imej dan penerangan.
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;
Komponen Projects.js memaparkan galeri imej yang mempamerkan hasil kerja agensi.
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 menyerlahkan maklum balas pelanggan, menambahkan kredibiliti kepada perkhidmatan agensi.
import React from "react"; import LogoImage from "../assets/images/Membina Laman Web Agensi Sunnyside dengan 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="Membina Laman Web Agensi Sunnyside dengan 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;
Komponen Footer.js termasuk ikon media sosial dan notis hak cipta.
Untuk melihat tapak web Agensi Sunnyside sedang beraksi, lawati Demo Langsung .
Die Website der Sunnyside Agency ist ein Beweis für die Vielseitigkeit von React bei der Erstellung moderner, reaktionsfähiger Webanwendungen. Durch die Nutzung der komponentenbasierten Architektur von React haben wir eine saubere, professionelle Website erstellt, die die Dienstleistungen und Projekte der Agentur effektiv präsentiert.
Zögern Sie nicht, den Code zu erkunden und ihn an Ihre Bedürfnisse anzupassen. Viel Spaß beim Codieren!
Abhishek Gurjar ist ein engagierter Webentwickler, der sich mit der Entwicklung praktischer und funktionaler Webanwendungen beschäftigt. Schauen Sie sich weitere seiner Projekte auf GitHub an.
Atas ialah kandungan terperinci Membina Laman Web Agensi Sunnyside dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!