使用 React 建立 Sunnyside Agency 網站-css教學-PHP中文網

WE ARE CREATIVES

Transform your
brand

LEARN MORE

Stand out to the right
audience

Graphic Design

Photography

CLIENT TESTIMONIALS

We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always hit.

Emily R.

Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and enjoyable experience.

Thomas S.

Incredible end result! Our sales increased over 400% when we worked with Sunnyside.Highly recommended!

Jennie F.

首頁

web前端

css教學

使用 React 建立 Sunnyside Agency 網站

PHPz

Sep 11, 2024 am 10:30 AM

Building the Sunnyside Agency Website with React

介绍

欢迎来到 Sunnyside Agency 网站的详细分解，这是一个使用 React 构建的现代而时尚的网站。该项目展示了 React 在创建动态和响应式 Web 应用程序方面的强大功能。让我们深入研究组成该项目的各个组件，并探索它们如何组合在一起以创建引人入胜的用户体验。

项目概况

Sunnyside Agency 网站旨在突出创意机构的服务、项目和推荐。它具有干净、专业的设计、平滑的滚动和响应式布局。该网站包括以下部分：

首页
关于
服务
项目
感言
页脚

特征

响应式设计：适应各种屏幕尺寸，以获得最佳观看体验。
平滑滚动： 增强了导航功能，可在各部分之间平滑滚动。
动态内容： React 组件动态渲染网站的不同部分。
交互元素： 包括具有悬停效果和过渡效果的按钮和链接。

使用的技术

React： 用于构建用户界面和管理状态。
CSS： 用于设计组件样式并确保设计具有视觉吸引力。
Google 字体： 用于自定义排版以增强网站的美感。
反应滚动：用于在各部分之间平滑滚动。

项目结构

该项目被组织成各种 React 组件，每个组件负责网站的特定部分：

App.js： 渲染所有其他组件的主要组件。
Navbar.js： 包含导航栏，其中包含指向不同部分的链接。
Home.js: 显示介绍内容和主图。
About.js： 通过图像和文本提供有关机构的信息。
Services.js： 通过图像和说明展示该机构提供的服务。
Projects.js： 显示项目图像库。
Testimonials.js： 包含带有照片和引言的客户感言。
Footer.js：包含联系链接和社交媒体图标。

安装

要开始 Sunnyside Agency 项目，请按照以下步骤操作：

克隆存储库：

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

登入後複製

   cd sunnyside-agency

登入後複製

安装依赖项：

   npm install

登入後複製

启动开发服务器：

   npm start

登入後複製

打开浏览器并访问：

http://localhost:3000

代码说明

应用程序.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;

登入後複製

App.js 文件是主要组件，它导入并渲染所有其他组件，构成网站的核心结构。

导航栏.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 组件提供了一个导航栏，其中包含指向网站不同部分的平滑滚动链接。

主页.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 id="WE-ARE-CREATIVES">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 的介绍部分包含标题和主图片，为网站的其余部分定下了基调。

关于.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 id="Transform-your-br-brand">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 id="LEARN-MORE">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 id="Stand-out-to-the-right-br-audience">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 id="LEARN-MORE">LEARN MORE</h4>
    </div>
  </div>
  </div>;
};

export default About;

登入後複製

About.js 组件通过具有视觉吸引力的部分突出了该机构的使命和服务。

服务.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 id="Graphic-Design">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 id="Photography">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 通过图像和描述展示该机构提供的服务。

项目.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 组件显示展示该机构工作的图像库。

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

export default Testimonials

登入後複製

Testimonials.js 强调客户反馈，增加该机构服务的可信度。

页脚.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;

登入後複製