使用 React 构建 Sunnyside Agency 网站

介绍

欢迎来到 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 项目，请按照以下步骤操作：

1. 克隆存储库：

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

1. 导航到项目目录：

   cd sunnyside-agency

1. 安装依赖项：

   npm install

1. 启动开发服务器：

   npm start

1. 打开浏览器并访问：

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;

Footer.js 组件包括社交媒体图标和版权声明。

现场演示

要查看 Sunnyside Agency 网站的运行情况，请访问现场演示。

结论

Sunnyside Agency 网站证明了 React 在创建现代响应式 Web 应用程序方面的多功能性。通过利用 React 基于组件的架构，我们构建了一个干净、专业的网站，可以有效地展示该机构的服务和项目。

请随意探索代码并对其进行自定义以满足您的需求。快乐编码！

制作人员

• React：用于提供本项目中使用的框架。
• Google 字体： 用于排版。
• 反应滚动：用于平滑滚动功能。

作者

Abhishek Gurjar 是一位专注的 Web 开发人员，热衷于创建实用且功能性的 Web 应用程序。在 GitHub 上查看他的更多项目。

以上是使用 React 构建 Sunnyside Agency 网站的详细内容。更多信息请关注PHP中文网其他相关文章！