template-landing-bkp

gistfile1.txt

<?php
/*
Template Name: Landing Page
*/ ?>

<?php get_header(); ?>

<section class="hero-section">
  <div class="container">
    <article>
      <h1 class="hero-header">
        Better Business Reporting
      </h1>

      <div class="hero-description">
        <p>
          Visible connects to apps you already use, crafts beautiful business updates and shares them with the stakeholders that matter.
        </p>
      </div>

      <div class="sign-up-box bg-light-grey padding-md">
        <p class="sign-up-text">Join 1,600 companies already on Visible. It's free to start!</p>
        <input input[type="email"] placeholder="Your email">
        <button type="submit" class="btn btn-primary">
          Create Account
        </button>
      </div>
    </article>

    <img class="hero-image" src="http://placehold.it/302x357">

  </div>
</section>

<section class="how-it-works-section bg-light-grey">
  <div class="container">
    <div class="how-it-works-step">
      <div class="how-it-works-illustration">
        <img src="/wp-content/themes/visible/dist/images/illustrations/integrations.svg">
      </div>

      <h3>Connect your data</h3>

      <p>
        Connect to the apps you’re already using and keep your most important
        data up to date.
      </p>
    </div>

    <div class="how-it-works-step">
      <div class="how-it-works-illustration">
        <img src="/wp-content/themes/visible/dist/images/illustrations/update-editor.svg">
      </div>

      <h3>Create beautiful Updates</h3>

      <p>
        Visible’s update editor makes it easy to craft rich updates & share
        them with the people that matter.
      </p>
    </div>

    <div class="how-it-works-step">
      <div class="how-it-works-illustration">
        <img src="/wp-content/themes/visible/dist/images/illustrations/updates.svg">
      </div>

      <h3>Engage your Stakeholders</h3>

      <p>
        Send updates to all your key stakeholders and engage them in your
        business’s activities.
      </p>
    </div>
  </div>
</section>

<section class="video-section">
  <img
    src=""
    data-1x="/wp-content/themes/visible/dist/images/video.png"
    data-2x="/wp-content/themes/visible/dist/images/video@2x.png"
    alt="How Visible Works"
  >
</section>


<section class="app-showcase-section bg-light-grey">
  <div class="container">
    <div class="section-title">
      <h1 class="text-center">
        Create awesome updates
      </h1>

      <p class="text-center">
        Create beautiful updates with our feature rich update editor and create
        rich, contextual updates with interactive charts.
      </p>
    </div>

    <img
      src=""
      data-1x="/wp-content/themes/visible/dist/images/browser.png"
      data-2x="/wp-content/themes/visible/dist/images/browser@2x.png"
      alt="How Visible Works"
    >
  </div>
</section>

<section class="feature-showcase-section">
  <div class="feature feature-text-right">
    <div class="container">
      <img
        class="feature-image"
        src=""
        data-1x="/wp-content/themes/visible/dist/images/feature-automate.png"
        data-2x="/wp-content/themes/visible/dist/images/feature-automate@2x.png"
        alt=""
      >

      <div class="feature-text">
        <h3 class="feature-heading">
          Automate your reporting
        </h3>

        <p class="feature-description">
          Schedule updates to send when you need them and never miss an
          update again.
        </p>
      </div>
    </div>
  </div>

  <div class="feature feature-text-left">
    <div class="container">
      <div class="feature-text">
        <h3 class="feature-heading">
          See who is engaged
        </h3>

        <p class="feature-description">
          Get instant stats on updates you send and quickly see who is
          engaging with your updates.
        </p>
      </div>

      <img
        class="feature-image"
        src=""
        data-1x="/wp-content/themes/visible/dist/images/feature-stats.png"
        data-2x="/wp-content/themes/visible/dist/images/feature-stats@2x.png"
        alt=""
      >
    </div>
  </div>

  <div class="feature feature-text-right">
    <div class="container">
      <img
        class="feature-image"
        src=""
        data-1x="/wp-content/themes/visible/dist/images/feature-automate.png"
        data-2x="/wp-content/themes/visible/dist/images/feature-automate@2x.png"
        alt=""
      >

      <div class="feature-text">
        <h3 class="feature-heading">
          Collaborate
        </h3>

        <p class="feature-description">
          Allow anyone in your team to own their data and collaborate in
          creating reports.
        </p>
      </div>
    </div>
  </div>
</section>

<section class="personas bg-light-grey">
  <div class="container">
    <div class="section-title">
      <h1 class="section-title-heading">
        A solution for every need
      </h1>

      <p class="section-title-description">
        Visible makes it easy to keep your stakeholders informed no
        matter what reason.
      </p>
    </div>

    <div class="squares">
      <div class="square">
        <img src="/wp-content/themes/visible/dist/images/illustrations/update-sm.svg">
        <h4>Investor Reporting</h4>
      </div>
      <div class="square">
        <img src="/wp-content/themes/visible/dist/images/illustrations/finance.svg">
        <h4>Investor Reporting</h4>
      </div>
      <div class="square">
        <img src="/wp-content/themes/visible/dist/images/illustrations/update-sm.svg">
        <h4>Investor Reporting</h4>
      </div>
      <div class="square">
        <img src="/wp-content/themes/visible/dist/images/illustrations/update-sm.svg">
        <h4>Investor Reporting</h4>
      </div>
    </div>

    <div class="squares">
      <div class="square">
        <img src="/wp-content/themes/visible/dist/images/illustrations/board-meetings.svg">
        <h4>Investor Reporting</h4>
      </div>
      <div class="square">
        <img src="/wp-content/themes/visible/dist/images/illustrations/update-sm.svg">
        <h4>Investor Reporting</h4>
      </div>
      <div class="square">
        <img src="/wp-content/themes/visible/dist/images/illustrations/update-sm.svg">
        <h4>Investor Reporting</h4>
      </div>
      <div class="square">
        <img src="/wp-content/themes/visible/dist/images/illustrations/update-sm.svg">
        <h4>Investor Reporting</h4>
      </div>
    </div>
  </div>
</section>

<section class="sign-up-section">
  <div class="container">
    <div class="section-title">
      <h1 class="section-title-heading">
        Join 1,600 companies already on Visible
      </h1>

      <p class="section-title-description">
        Visible is free for 1 editor and $29/month per editor on our per seat plan.
      </p>
    </div>

    <div class="sign-up-box bg-light-grey padding-md centered">
      <p class="sign-up-text">Join 1,600 companies already on Visible. It's free to start!</p>

      <input input[type="email"] placeholder="Your email">

      <button type="submit" class="btn btn-primary">
        Create Account
      </button>
    </div>
  </div>

  <div class="bg-chart">
   <img src="/wp-content/themes/visible/dist/images/illustrations/bg-chart.svg">
  </div>
</section>

<section class="testimonials-section bg-light-grey">
  <div class="container">
    <div class="testimonials">
      <div class="testimonial">
        <div class="testimonial-quote padding-md bg-white">
          <p>
            Investors love it --  because it gives me an easy way to show them thorough updates
          </p>
        </div>

        <img
          src=""
          data-1x="/wp-content/themes/visible/dist/images/testimonial-john.png"
          data-2x="/wp-content/themes/visible/dist/images/testimonial-john@2x.png"
          alt="Author Name"
          class="testimonial-author-pic"
        >

        <span class="testimonial-author-name">
          Elizabeth Namelse
        </span>
        <br>
        <span class="testimonial-author-role">
          Bitpesa.co
        </span>
      </div>

      <div class="testimonial">
        <div class="testimonial-quote padding-md bg-white">
          <p>
            Because I have a crush on Mike. And I dig my weekly updates using Visible.
          </p>
        </div>

        <img
          src=""
          data-1x="/wp-content/themes/visible/dist/images/testimonial-john.png"
          data-2x="/wp-content/themes/visible/dist/images/testimonial-john@2x.png"
          alt="Author Name"
          class="testimonial-author-pic"
        >

        <span class="testimonial-author-name">
          Eric Neamon
        </span>
        <br>
        <span class="testimonial-author-role">
          Zylo
        </span>
      </div>

      <div class="testimonial">
        <div class="testimonial-quote padding-md bg-white">
          <p>
            Visible.vc is just f*cking badass through and through. I wish we could pay for it right now, as I literally want to support the team for doing such great stuff!
          </p>
        </div>

        <img
          src=""
          data-1x="/wp-content/themes/visible/dist/images/testimonial-john.png"
          data-2x="/wp-content/themes/visible/dist/images/testimonial-john@2x.png"
          alt="Author Name"
          class="testimonial-author-pic"
        >

        <span class="testimonial-author-name">
          John Yo
        </span>
        <br>
        <span class="testimonial-author-role">
          Noots.co
        </span>
      </div>
    </div>
  </div>
</section>

<section class="eBook">
  <div class="container">
    <div class="description">
      <h2>
        <?php the_field('ebook_download_title'); ?>
      </h2>
      <p><?php the_field('ebook_download_body'); ?></p>
      <div class="form-rounded">
        <script>
         hbspt.forms.create({
           css: '',
           portalId: '467766',
           formId: '0f903f49-713b-4137-b777-1a6d7006e0a8'
         });
        </script>
      </div>
    </div>
    <div class="graphic">
      <img
        src=""
        data-1x="/wp-content/themes/visible/dist/images/The-Utlimate-Guide-to-Startup-Data-Distribution.jpg"
        data-2x="/wp-content/themes/visible/dist/images/The-Utlimate-Guide-to-Startup-Data-Distribution@2x.jpg"
        alt="Sentiment Index"
      >
    </div>
  </div>
</section>
<?php get_footer(); ?>