欢迎来到 Sunnyside Agency 网站的详细分解,这是一个使用 React 构建的现代而时尚的网站。该项目展示了 React 在创建动态和响应式 Web 应用程序方面的强大功能。让我们深入研究组成该项目的各个组件,并探索它们如何组合在一起以创建引人入胜的用户体验。
Sunnyside Agency 网站旨在突出创意机构的服务、项目和推荐。它具有干净、专业的设计、平滑的滚动和响应式布局。该网站包括以下部分:
该项目被组织成各种 React 组件,每个组件负责网站的特定部分:
要开始 Sunnyside Agency 项目,请按照以下步骤操作:
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;
App.js 文件是主要组件,它导入并渲染所有其他组件,构成网站的核心结构。
import React from "react"; import 使用 React 建立 Sunnyside Agency 網站 from "../assets/images/使用 React 建立 Sunnyside Agency 網站.svg"; import { Link as ScrollLink } from 'react-scroll'; const Navbar = () => { return ( <div classname="Navbar"> <div classname="使用 React 建立 Sunnyside Agency 網站"> <img src="%7B%E4%BD%BF%E7%94%A8" react sunnyside agency alt="使用 React 建立 Sunnyside Agency 網站"> </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;
Navbar.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 的介绍部分包含标题和主图片,为网站的其余部分定下了基调。
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;
About.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 通过图像和描述展示该机构提供的服务。
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;
Projects.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 强调客户反馈,增加该机构服务的可信度。
import React from "react"; import LogoImage from "../assets/images/使用 React 建立 Sunnyside Agency 網站.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="使用 React 建立 Sunnyside Agency 網站Image" 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;
Footer.js 组件包括社交媒体图标和版权声明。
要查看 Sunnyside Agency 网站的运行情况,请访问现场演示。
Sunnyside Agency 網站證明了 React 在創建現代響應式 Web 應用程式方面的多功能性。透過利用 React 基於元件的架構,我們建立了一個乾淨、專業的網站,可以有效地展示該機構的服務和專案。
隨意探索程式碼並對其進行自訂以滿足您的需求。快樂編碼!
Abhishek Gurjar 是一位專注的 Web 開發人員,熱衷於創建實用且功能性的 Web 應用程式。在 GitHub 上查看他的更多專案。
以上是使用 React 建立 Sunnyside Agency 網站的詳細內容。更多資訊請關注PHP中文網其他相關文章!