使用 React 构建 Fylo 云存储网站

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

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

   cd fylo-cloud-storage-website   npm install

   npm start

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 = () =&gt; {  return (          <navbar></navbar><home></home><features></features><working></working><testimonials></testimonials><footer></footer>&gt;  );};export default app;

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;

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;

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;

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;

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