SHARE
TWEET

Untitled

a guest Dec 12th, 2019 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import { Helmet } from "react-helmet-async";
  3. import Oction, { Pencil, Markdown, Pin, GitBranch, Flame, Eye, Sync } from "@primer/octicons-react";
  4. import Link from "../components/Link";
  5. import Button from "../components/Button";
  6. import LoginForm from "../components/LoginForm";
  7.  
  8. const Intro = () => (
  9.     <>
  10.         <Helmet>
  11.             <title>MindNote - Intro page</title>
  12.         </Helmet>
  13.  
  14.         <header className="header">
  15.             <div className="container container--header">
  16.                 <div className="header__logo">
  17.                     <Oction icon={Pencil} size={20} />
  18.                     <h1 className="header__text">MindNote</h1>
  19.                 </div>
  20.                 <nav className="nav">
  21.                     <ul className="nav__list">
  22.                         <li className="nav__item">
  23.                             <Link
  24.                                 className="link"
  25.                                 rel="noopener noreferrer nofollow"
  26.                                 target="_blank"
  27.                                 href="https://github.com/youhosi/mind-note"
  28.                             >
  29.                                 Github
  30.                             </Link>
  31.                         </li>
  32.  
  33.                         <li className="nav__item">
  34.                             <Button onClick={() => console.log("show modal with form")}>Sign in</Button>
  35.                         </li>
  36.                     </ul>
  37.                 </nav>
  38.             </div>
  39.         </header>
  40.  
  41.         <main>
  42.             <section className="hero">
  43.                 <div className="container container--hero">
  44.                     <div className="hero__meta">
  45.                         <h1 className="hero__title">Note App for developers</h1>
  46.  
  47.                         <span className="hero__description">
  48.                             Light, clean, and simple. MindNote is a free, plain-text note-taking app for the web. All the features you
  49.                             need, and nothing you don&apos;t.
  50.                         </span>
  51.                     </div>
  52.  
  53.                     <div className="hero__login-form">
  54.                         <LoginForm />
  55.                     </div>
  56.                 </div>
  57.             </section>
  58.  
  59.             <section className="features">
  60.                 <div className="container container--features">
  61.                     <h1 className="features__header features__header--big">What makes MindNote is great?</h1>
  62.  
  63.                     <div className="features__container">
  64.                         <div className="features__item">
  65.                             <div className="features__header">
  66.                                 <Oction icon={Pin} size={18} />
  67.                                 Stay organized
  68.                             </div>
  69.                             <div className="features__meta">Find notes quickly with instant searching and simple tags.</div>
  70.                         </div>
  71.  
  72.                         <div className="features__item">
  73.                             <div className="features__header">
  74.                                 <Oction icon={GitBranch} size={18} />
  75.                                 Work together
  76.                             </div>
  77.                             <div className="features__meta">Share a list, post some instructions, or publish your notes online.</div>
  78.                         </div>
  79.  
  80.                         <div className="features__item">
  81.                             <div className="features__header">
  82.                                 <Oction icon={Flame} size={18} />
  83.                                 It’s free
  84.                             </div>
  85.                             <div className="features__meta">Backups, syncing, sharing — it’s all completely free.</div>
  86.                         </div>
  87.  
  88.                         <div className="features__item">
  89.                             <div className="features__header">
  90.                                 <Oction icon={Markdown} size={18} />
  91.                                 Markdown support
  92.                             </div>
  93.                             <div className="features__meta">Write, preview, and publish your notes in Markdown format.</div>
  94.                         </div>
  95.  
  96.                         <div className="features__item">
  97.                             <div className="features__header">
  98.                                 <Oction icon={Eye} size={18} />
  99.                                 Beautiful
  100.                             </div>
  101.                             <div className="features__meta">
  102.                                 Enjoy a beautiful, clean design reminiscent of your IDE with light and dark themes.
  103.                             </div>
  104.                         </div>
  105.  
  106.                         <div className="features__item">
  107.                             <div className="features__header">
  108.                                 <Oction icon={Sync} size={18} />
  109.                                 Go back in time
  110.                             </div>
  111.                             <div className="features__meta">
  112.                                 Your notes are backed up when you change them. Just drag the version slider to go back in time.
  113.                             </div>
  114.                         </div>
  115.                     </div>
  116.                 </div>
  117.             </section>
  118.         </main>
  119.  
  120.         <footer className="footer container--hero">
  121.             <div className="footer__copy">2019 &copy; MindNote</div>
  122.  
  123.             <ul className="footer__technologies">
  124.                 <li className="footer__item">React</li>
  125.                 <li className="footer__item">Redux</li>
  126.                 <li className="footer__item">NodeJs</li>
  127.                 <li className="footer__item">Express</li>
  128.                 <li className="footer__item">MongoDB</li>
  129.             </ul>
  130.         </footer>
  131.     </>
  132. );
  133.  
  134. export default Intro;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top