项目概况

该项目由多个部分组成，旨在展示云存储服务。每个部分都是用 react 组件构建的，以实现模块化和易于维护。我们将涵盖以下部分：

• 导航栏

• 首页

• 特点

• 如何运作

• 感言

• 页脚

特征

• 响应式设计：网站会根据不同的屏幕尺寸进行调整。

• 模块化组件：网站的每个部分都是一个单独的 react 组件，使其易于维护和扩展。

• 可重用资源：图像和其他资源导入一次并在组件之间重用。

• css 样式：网站使用自定义 css 来设置每个组件的样式。

使用的技术

• react：基于组件的前端库。

• css：用于设计布局和外观的样式。

• javascript：react 组件的核心逻辑。

• svg 图像：用于图标和图形以增强 ui。

fylo-cloud-storage-website/

│

├── public/

│   ├── index.html

│

├── src/

│   ├── assets/

│   │   ├── images/

│   │   │   ├── icon-access-anywhere.svg

│   │   │   ├── icon-security.svg

│   │   │   ├── illustration-intro.png

│   │   │   └── ...

│   ├── components/

│   │   ├── navbar.js

│   │   ├── home.js

│   │   ├── features.js

│   │   ├── working.js

│   │   ├── testimonials.js

│   │   └── footer.js

│   ├── app.js

│   ├── app.css

│   └── index.js

安装

1. 克隆存储库：

git clone https://github.com/abhishekgurjar-in/fylo-cloud-storage.git

1. 安装依赖项：

cd fylo-cloud-storage-website

   npm install

1. 运行应用程序：

npm start

该网站将在 http://localhost:3000/ 上提供。

代码说明

1. 应用程序.js

这是导入和渲染所有其他组件（导航栏、主页、功能、工作、推荐、页脚）的根组件。

import "./app.css"

import navbar from "./components/navbar";

import home from "./components/home";

import features from "./components/features";

import working from "./components/working";

import testimonials from "./components/testimonials";

import footer from "./components/footer";

const app = () => {

  return (

      <navbar></navbar><home></home><features></features><working></working><testimonials></testimonials><footer></footer>&gt;

  );

};

export default app;

2. 导航栏组件

导航栏包含徽标和三个可点击的链接：功能、团队和登录。

import logo from "../assets/images/logo.svg";

const navbar = () =&gt; {

  return (

    <div classname="navbar">

      <div classname="logo">

        @@##@@

      </div>

      <div classname="header">

        <a href="">features</a>

        <a href="">team</a>

        <a href="">sign in</a>

      </div>

    </div>

  );

};

export default navbar;

3. 主页组件

主页部分通过引人注目的背景图像和“开始”按钮介绍了该服务。

import bghome from "../assets/images/illustration-intro.png";

const home = () =&gt; {

  return (

    <div classname="home">

      <div classname="home-image">

        @@##@@

      </div>

      <div classname="home-text">

        <h1>all your files in one secure location, accessible anywhere.</h1>

        <p>

          fylo stores all your most important files in one secure location.

          access them wherever you need, share and collaborate with friends

          family, and co-workers.

        </p>

        <div classname="button">

          <h4>get started</h4>

        </div>

      </div>

    </div>

  );

};

export default home;

4. 功能组件

该组件重点介绍了云服务的四个关键功能，并附有相应的图标和说明。

import accessimage from "../assets/images/icon-access-anywhere.svg";

import securityimage from "../assets/images/icon-security.svg"

import collaborationimage from "../assets/images/icon-collaboration.svg"

import storageimage from "../assets/images/icon-any-file.svg"

const features = () =&gt; {

  return (

    <div classname="features">

      <div classname="cards">

        <div classname="card">

          @@##@@

          <h1>access your files, anywhere</h1>

          <p>

            the ability to use a smartphone, tablet, or computer to access your

            account means your files follow you everywhere.

          </p>

        </div>

        <div classname="card">

          @@##@@

          <h1>security you can trust</h1>

          <p>

          2-factor authentication and user-controlled encryption are just a couple of the security features we allow to help secure your files.

          </p>

        </div>

      </div>

      <div classname="cards">

        <div classname="card">

          @@##@@

          <h1>real-time collaboration</h1>

          <p>

          securely share files and folders with friends, family and colleagues for live collaboration. no email attachments required.

          </p>

        </div>

        <div classname="card">

          @@##@@

          <h1>store any type of file</h1>

          <p>

          whether you're sharing holidays photos or work documents, fylo has you covered allowing for all file types to be securely stored and shared.

          </p>

        </div>

      </div>

    </div>

  );

};

export default features;

6. 推荐部分

此部分包含满意用户的反馈及其个人资料图片。

import satish from "../assets/images/profile-1.jpg";

import bruce from "../assets/images/profile-2.jpg";

import iva from "../assets/images/profile-3.jpg"

const testimonials = () =&gt; {

  return (

    <div classname="testimonials">

      <div classname="t-cards">

        <div classname="t-card">

          <h4>

            fylo has improved our team productivity by an order of magnitude.

            since making the switch our team has become a well-oiled

            collaboration machine.

          </h4>

          <div classname="profile">

            <div classname="profile-image">

              @@##@@

            </div>

            <div classname="profile-text">

              <h1>satish patel</h1>

              <p>satish patel founder &amp; ceo, huddle</p>

            </div>

          </div>

        </div>

        <div classname="t-card">

          <h4>

            fylo has improved our team productivity by an order of magnitude.

            since making the switch our team has become a well-oiled

            collaboration machine.

          </h4>

          <div classname="profile">

            <div classname="profile-image">

              @@##@@

            </div>

            <div classname="profile-text">

              <h1>bruce mckenzie</h1>

              <p>bruce mckenzie founder &amp; ceo, huddle</p>

            </div>

          </div>

        </div>

        <div classname="t-card">

          <h4>

            fylo has improved our team productivity by an order of magnitude.

            since making the switch our team has become a well-oiled

            collaboration machine.

          </h4>

          <div classname="profile">

            <div classname="profile-image">

              @@##@@

            </div>

            <div classname="profile-text">

              <h1>iva boyd</h1>

              <p>iva boyd founder &amp; ceo, huddle</p>

            </div>

          </div>

        </div>

      </div>

      <div classname="contact-card">

        <h1>get early access today</h1>

        <p>it only takes a minute to sign up and our free starter tier is extremely generous. if you have any questions, our support team would be happy to help you.</p>

        <div classname="input-section">

          <div classname="input-box">

            <input type="text" placeholder=" email@example.com">

</div>

          <div classname="submit-button">

<p>get started for free </p>

          </div>

        </div>

      </div>

    </div>

  );

};

export default testimonials;

7. 页脚组件

页脚包含联系信息、社交链接和站点导航

import Logo from "../assets/images/logo.svg" 

import Location from "../assets/images/icon-location.svg"

import phone from "../assets/images/icon-phone.svg"

import email from '../assets/images/icon-email.svg'

const Footer = () =&gt; {

  return (

   <div classname="footer">

    <div classname="sec-1">

     <div classname="logo">

      @@##@@

     </div>

      <div classname="location">

@@##@@

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

      </div>

    </div>

    <div classname="sec-2">

      <div classname="phone">

        @@##@@

        <p>+1-543-123-4567</p>

      </div>

      <div classname="email">

        @@##@@

        <p>example@fylo.com</p>

 <p>Made with ❤️ by Abhishek Gurjar</p>

      </div>

    </div>

    <div classname="sec-3">

      <p>About Us</p>

      <p>Jobs</p>

      <p>Pres</p>

      <p>Blog</p>

    </div>

    <div classname="sec-4">

      <p>Contact Us</p>

      <p>Terms</p>

      <p>Privacy</p>

    </div>

   </div>

  )

}

export default Footer

现场演示

您可以在这里查看该项目的现场演示。

结论

在这篇文章中，我们使用 react 创建了一个功能丰富的响应式网站，展示了云存储服务。我们介绍了如何构建项目、分解组件以及使用 css 设计它们的样式。这种模块化方法可以轻松根据需要添加或更新功能。

制作人员

这个项目的灵感来自于fylo云存储服务设计。

作者

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