import AppSecHome from "./AppSecHome";

function AppPages() {
  return (
    <div id="pages">
      <div className="top_shadow"></div>
      <AppSecHome />

      <div id="team" className="page">
        <h1>Team</h1>

        <div className="about_us content_box">
          <div className="one_half">
            <h2>About Us</h2>
            <p>
              The team at myFit by Flxuxtra LLC works with you to achieve your
              health objectives without getting in your way. Do your health your
              way to get the best result for you and your family. We are you,
              always ready and always engaged with the users to help get the
              best out of our solution.
            </p>
          </div>

          <div className="one_half column_last">
            <img src="/assets/images/about-main.png" alt="" />
          </div>
        </div>
      </div>

      <div id="features" className="page">
        <h1>Features</h1>

        <div className="feature_list content_box">
          <div className="one_half">
            <h2 className="icon chart">Health Plan</h2>
            <p>
              Your health plan your way - myFit assist you organizing your
              prescription, health routines, your providers treatment plans in
              one place.
            </p>
          </div>

          <div className="one_half column_last">
            <h2 className="icon cart">Health Tips</h2>
            <p>
              myFit continuously help you organize both general and the few
              health questions relevant to you. We can privately help you find
              answer in our communities to new questions.
            </p>
          </div>

          <div className="one_half">
            <h2 className="icon pencil">Reminders</h2>
            <p>
              Miss no appointment, medication schedule and more with myFit
              reminders. Allow your provider or simply set up whatever you
              needed reminding for.
            </p>
          </div>

          <div className="one_half column_last">
            <h2 className="icon graph">Health Stats</h2>
            <p>
              Collect your health statistics yourself, weight changes, blood
              pressure, blood glucose data all helps to ensure that your
              provider is creating plans that fits you specifically.
            </p>
          </div>

          <div className="one_half">
            <h2 className="icon briefcase">Health Record</h2>
            <p>
              Health record your way. With myFit health record you control your
              information. Add family record and decide how you want your
              providers to access your record.
            </p>
          </div>

          <div className="one_half column_last">
            <h2 className="icon help">Help &amp; Support</h2>
            <p>
              We are here to support you. let us know is there is anything we
              can do to make your personal care better - Contact us.
            </p>
          </div>
        </div>
      </div>

      <div id="screenshots" className="page">
        <h1>Screenshots</h1>

        <p>Some screenshots from myFitness app.</p>

        <div className="screenshot_grid content_box">
          <div className="one_third">
            <a
              href="/assets/images/screenshots/screen_1.jpg"
              className="fancybox"
              rel="group"
              title="Screenshot 1"
            >
              <img src="/assets/images/screenshots/screen_1.jpg" alt="" />
            </a>
          </div>

          <div className="one_third">
            <a
              href="/assets/images/screenshots/screen_2.jpg"
              className="fancybox"
              rel="group"
              title="Screenshot 2"
            >
              <img src="/assets/images/screenshots/screen_2.jpg" alt="" />
            </a>
          </div>

          <div className="one_third column_last">
            <a
              href="/assets/images/screenshots/screen_3.jpg"
              className="fancybox"
              rel="group"
              title="Screenshot 3"
            >
              <img src="/assets/images/screenshots/screen_3.jpg" alt="" />
            </a>
          </div>

          <div className="one_third">
            <a
              href="/assets/images/screenshots/screen_4.jpg"
              className="fancybox"
              rel="group"
              title="Screenshot 4"
            >
              <img src="/assets/images/screenshots/screen_4.jpg" alt="" />
            </a>
          </div>

          <div className="one_third">
            <a
              href="/assets/images/screenshots/screen_5.jpg"
              className="fancybox"
              rel="group"
              title="Screenshot 5"
            >
              <img src="/assets/images/screenshots/screen_5.jpg" alt="" />
            </a>
          </div>

          <div className="one_third column_last">
            <a
              href="/assets/images/screenshots/screen_6.jpg"
              className="fancybox"
              rel="group"
              title="Screenshot 6"
            >
              <img src="/assets/images/screenshots/screen_6.jpg" alt="" />
            </a>
          </div>

          <div className="one_third">
            <a
              href="/assets/images/screenshots/screen_7.jpg"
              className="fancybox"
              rel="group"
              title="Screenshot 7"
            >
              <img src="/assets/images/screenshots/screen_7.jpg" alt="" />
            </a>
          </div>

          <div className="one_third">
            <a
              href="/assets/images/screenshots/screen_8.jpg"
              className="fancybox"
              rel="group"
              title="Screenshot 8"
            >
              <img src="/assets/images/screenshots/screen_8.jpg" alt="" />
            </a>
          </div>

          <div className="one_third column_last">
            <a
              href="/assets/images/screenshots/screen_9.jpg"
              className="fancybox"
              rel="group"
              title="Screenshot 9"
            >
              <img src="/assets/images/screenshots/screen_9.jpg" alt="" />
            </a>
          </div>
        </div>
      </div>

      <div id="updates" className="page">
        <h1>Updates</h1>

        <div className="releases">
          <article className="release">
            <h2>Version 5.0</h2>
            <span className="date">Upcoming April 4, 2019</span>
            <ul>
              <li className="new">
                <span>
                  <b>New</b>
                </span>{" "}
                Initial release for IOS
              </li>
            </ul>
          </article>

          <article className="release">
            <h2>Version 1.0.2</h2>
            <span className="date">Released on March 13th, 2019</span>
            <ul>
              <li className="new">
                <span>
                  <b>New</b>
                </span>{" "}
                Full iOS 5.1 compatibility
              </li>
              <li className="fix">
                <span>
                  <b>Fix</b>
                </span>{" "}
                Push notifications update &amp; fixes
              </li>
              <li className="new">
                <span>
                  <b>New</b>
                </span>{" "}
                Added dashboard refresh button
              </li>
              <li className="fix">
                <span>
                  <b>fix</b>
                </span>{" "}
                Various UI enhancements
              </li>
            </ul>
          </article>

          <article className="release">
            <h2>Version 1.0.1</h2>
            <span className="date">Released on January 10th, 2019</span>
            <ul>
              <li className="new">
                <span>
                  <b>New</b>
                </span>{" "}
                Full iOS 5 compatibility
              </li>
              <li className="fix">
                <span>
                  <b>Fix</b>
                </span>{" "}
                Push notifications update &amp; fixes
              </li>
              <li className="new">
                <span>
                  <b>New</b>
                </span>{" "}
                Added dashboard refresh button
              </li>
              <li className="fix">
                <span>
                  <b>fix</b>
                </span>{" "}
                Various UI enhancements
              </li>
            </ul>
          </article>

          <article className="release">
            <h2>Version 1.0</h2>
            <span className="date">Released on Febuary 4th, 2019</span>
            <ul>
              <li className="new">
                <span>
                  <b>New</b>
                </span>{" "}
                Initial release for Android
              </li>
            </ul>
          </article>
        </div>
      </div>

      <div id="press" className="page">
        <h1>Press</h1>

        <div className="press_mentions">
          <ul>
            <li>
              <div className="logo">
                <img src="/assets/images/light-press.png" alt="" />
              </div>
              <div className="details">
                <p>"The best mobile app website you’ve ever seen!"</p>
                <address>
                  Jane Doe
                  <a href="#">http://website.com &#x2192;</a>
                </address>
              </div>
            </li>
            <li>
              <div className="logo">
                <img src="/assets/images/light-press.png" alt="" />
              </div>
              <div className="details">
                <p>"Cras mattis consectetur purus sit amet fermentum."</p>
                <address>
                  Jane Doe
                  <a href="#">http://website.com &#x2192;</a>
                </address>
              </div>
            </li>
            <li>
              <div className="logo">
                <img src="/assets/images/light-press.png" alt="" />
              </div>
              <div className="details">
                <p>
                  "Etiam porta sem malesuada magna mollis euismod. Nullam quis
                  risus eget urna mollis ornare vel eu leo."
                </p>
                <address>
                  Jane Doe
                  <a href="#">http://website.com &#x2192;</a>
                </address>
              </div>
            </li>
            <li>
              <div className="logo">
                <img src="/assets/images/light-press.png" alt="" />
              </div>
              <div className="details">
                <p>"Vivamus sagittis vel augue rutrum faucibus dolor."</p>
                <address>
                  Jane Doe
                  <a href="#">http://website.com &#x2192;</a>
                </address>
              </div>
            </li>
            <li>
              <div className="logo">
                <img src="/assets/images/light-press.png" alt="" />
              </div>
              <div className="details">
                <p>"Maecenas faucibus mollis interdum."</p>
                <address>
                  Jane Doe
                  <a href="#">http://website.com &#x2192;</a>
                </address>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div id="contact" className="page">
        <h1>Contact</h1>

        <p>
          For general questions, bug reports or press inquires please fill out
          the form below.
        </p>

        <div id="contact_form">
          <div className="validation">
            <p>Oops! Please correct the highlighted fields...</p>
          </div>

          <div className="success">
            <p>Thanks! I'll get back to you shortly.</p>
          </div>

          <form action="javascript:;" method="post">
            <div className="row">
              <p className="left">
                <label id="name">Name*</label>
                <input type="text" name="name" id="name" value="" />
              </p>
              <p className="right">
                <label id="email">Email*</label>
                <input type="text" name="email" id="email" value="" />
              </p>
            </div>

            <div className="row">
              <p className="left">
                <label id="website">Website</label>
                <input type="text" name="website" id="website" value="" />
              </p>
              <p className="right">
                <label id="subject">Subject</label>
                <input type="text" name="subject" id="subject" value="" />
              </p>
            </div>

            <p>
              <label id="message" className="textarea">
                Message
              </label>
              <textarea className="text" name="message" id="message"></textarea>
            </p>

            <input
              type="submit"
              className="button white"
              value="Send &#x2192;"
            />
          </form>
        </div>
      </div>

      <div id="terms" className="page">
        <div className="about_us content_box"></div>
      </div>

      <div id="privacy" className="page"></div>

      <div id="security" className="page"></div>

      <div id="styles" className="page">
        <h1>Styles</h1>

        <div className="full">
          <h1>h1. Nullam id dolor id nibh ultricies.</h1>
          <h2>h2. Nullam id dolor id nibh ultricies.</h2>
          <h3>h3. Nullam id dolor id nibh ultricies.</h3>
          <h4>h4. Nullam id dolor id nibh ultricies.</h4>
          <h5>h5. Nullam id dolor id nibh ultricies.</h5>
          <h6>h6. Nullam id dolor id nibh ultricies.</h6>
        </div>

        <h2>Blockquotes</h2>

        <div className="one_half">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam.
          </p>
        </div>

        <div className="one_half column_last">
          <blockquote>
            <p>This is a blockquote style example. It's cool.</p>
            <cite>Some Dude, Some Website</cite>
          </blockquote>
        </div>

        <div className="full">
          <h2>Small Buttons</h2>

          <a href="#" className="button black">
            Black
          </a>
          <a href="#" className="button white">
            White
          </a>
          <a href="#" className="button gray">
            Gray
          </a>
          <a href="#" className="button orange">
            Orange
          </a>
          <a href="#" className="button blue">
            Blue
          </a>
          <a href="#" className="button green">
            Green
          </a>
          <a href="#" className="button pink">
            Pink
          </a>
          <a href="#" className="button purple">
            Purple
          </a>
        </div>

        <div className="full">
          <h2>Large Buttons</h2>

          <a href="#" className="large_button" id="apple">
            <span className="icon"></span>
            <em>Download now for</em> iPhone
          </a>
          <a href="#" className="large_button" id="android">
            <span className="icon"></span>
            <em>Download now for</em> Android
          </a>
          <a href="#" className="large_button" id="windows">
            <span className="icon"></span>
            <em>Download now for</em> Windows
          </a>
          <a href="#" className="large_button" id="blackberry">
            <span className="icon"></span>
            <em>Download now for</em> Blackberry
          </a>
        </div>

        <h2>Columns</h2>

        <div className="one_half">
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
            sed diam eget risus varius blandit sit amet non magna. Morbi leo
            risus, porta ac consectetur ac, vestibulum at eros.
          </p>
        </div>

        <div className="one_half column_last">
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
            sed diam eget risus varius blandit sit amet non magna. Morbi leo
            risus, porta ac consectetur ac, vestibulum at eros.
          </p>
        </div>

        <div className="one_third">
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
            sed diam eget risus varius blandit sit amet non magna.
          </p>
        </div>

        <div className="one_third">
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
            sed diam eget risus varius blandit sit amet non magna.
          </p>
        </div>

        <div className="one_third column_last">
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
            sed diam eget risus varius blandit sit amet non magna.
          </p>
        </div>

        <div className="one_third">
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        </div>

        <div className="two_thirds column_last">
          <p>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
            eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.
            Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
            Curabitur blandit tempus porttitor. Donec sed odio dui. Morbi leo
            risus, porta ac consectetur ac, vestibulum.
          </p>
        </div>

        <h2>Tabs</h2>

        <div className="tabs">
          <ul className="nav">
            <li>
              <a href="javascript:;" className="tab_1">
                Tab 1
              </a>
            </li>
            <li>
              <a href="javascript:;" className="tab_2">
                Tab 2
              </a>
            </li>
            <li>
              <a href="javascript:;" className="tab_3">
                Tab 3
              </a>
            </li>
          </ul>
          <div id="tab_1" className="pane">
            <p>
              Proin elit arcu, rutrum commodo, vehicula tempus, commodo a,
              risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
              Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
              Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
              Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
              Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam
              molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut
              dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique
              tempus lectus.
            </p>
          </div>
          <div id="tab_2" className="pane">
            <p>
              Morbi tincidunt, dui sit amet facilisis feugiat, odio metus
              gravida ante, ut pharetra massa metus id nunc. Duis scelerisque
              molestie turpis. Sed fringilla, massa eget luctus malesuada, metus
              eros molestie lectus, ut tempus eros massa ut dolor. Aenean
              aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit
              aliquam. Praesent in eros vestibulum mi adipiscing adipiscing.
              Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel
              metus. Ut posuere viverra nulla. Aliquam erat volutpat.
              Pellentesque convallis. Maecenas feugiat, tellus pellentesque
              pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel
              felis. Mauris consectetur tortor et purus.
            </p>
          </div>
          <div id="tab_3" className="pane">
            <p>
              Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.
              Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum
              erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class
              aptent taciti sociosqu ad litora torquent per conubia nostra, per
              inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim
              commodo pellentesque. Praesent eu risus hendrerit ligula tempus
              pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a,
              lacus.
            </p>
            <p>
              Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
              semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent
              viverra justo vitae neque. Praesent blandit adipiscing velit.
              Suspendisse potenti. Donec mattis, pede vel pharetra blandit,
              magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam
              scelerisque. Donec non libero sed nulla mattis commodo. Ut
              sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor
              vitae, pede. Aenean vehicula velit eu tellus interdum rutrum.
              Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a
              libero vitae lectus hendrerit hendrerit.
            </p>
          </div>
        </div>

        <h2>Toggle Lists</h2>

        <div className="toggle_list">
          <ul>
            <li className="opened">
              <div className="title">
                <h3>
                  <span>Q.</span> What are the requirements for using this app?
                </h3>
                <a
                  href="javascript:;"
                  className="toggle_link"
                  data-open_text="+"
                  data-close_text="-"
                ></a>
              </div>
              <div className="content">
                <p>
                  Cum sociis natoque penatibus et magnis dis parturient montes,
                  nascetur ridiculus mus. Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit.
                </p>

                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                  auctor.
                </p>
              </div>
            </li>
            <li>
              <div className="title">
                <h3>
                  <span>Q.</span> How does it work?
                </h3>
                <a
                  href="javascript:;"
                  className="toggle_link"
                  data-open_text="+"
                  data-close_text="-"
                ></a>
              </div>
              <div className="content">
                <p>
                  Donec ullamcorper nulla non metus auctor fringilla. Maecenas
                  sed diam eget risus varius blandit sit amet non magna. Morbi
                  leo risus, porta ac consectetur ac, vestibulum at eros.
                </p>
              </div>
            </li>
            <li>
              <div className="title">
                <h3>
                  <span>Q.</span> How much does it cost?
                </h3>
                <a
                  href="javascript:;"
                  className="toggle_link"
                  data-open_text="+"
                  data-close_text="-"
                ></a>
              </div>
              <div className="content">
                <p>
                  Cum sociis natoque penatibus et magnis dis parturient montes,
                  nascetur ridiculus mus. Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit.
                </p>

                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                  auctor.
                </p>
              </div>
            </li>
          </ul>
        </div>

        <h2>Lightbox Images</h2>

        <div className="one_third">
          <a
            href="/assets/images/screenshots/screen_1.jpg"
            rel="screenshots"
            className="fancybox"
            title=""
          >
            <img src="/assets/images/screenshots/screen_1.jpg" alt="" />
          </a>
        </div>
        <div className="one_third">
          <a
            href="/assets/images/screenshots/screen_2.jpg"
            rel="screenshots"
            className="fancybox"
            title=""
          >
            <img src="/assets/images/screenshots/screen_2.jpg" alt="" />
          </a>
        </div>
        <div className="one_third column_last">
          <a
            href="/assets/images/screenshots/screen_3.jpg"
            rel="screenshots"
            className="fancybox"
            title=""
          >
            <img src="/assets/images/screenshots/screen_3.jpg" alt="" />
          </a>
        </div>

        <div className="full">
          <h2>Tooltips</h2>

          <p>
            Cras justo odio, dapibus ac{" "}
            <a href="javascript:;" rel="tipsy" title="Example Tooltip">
              facilisis
            </a>{" "}
            in, egestas eget quam. Donec ullamcorper nulla non metus auctor
            fringilla. Nullam quis risus eget urna{" "}
            <a
              href="javascript:;"
              rel="tipsy"
              title="An even longer tooltip! <br/> With more stuff!"
            >
              mollis ornare
            </a>{" "}
            vel eu leo.
          </p>
        </div>
      </div>

      <div className="bottom_shadow"></div>
    </div>
  );
}

export default AppPages;
