---
layout: landing
title: Social Media Starter Kit
---

<div
  id="friendkit-demo-landing"
  class="hero is-fullheight landing-hero-wrapper"
>
  <div id="particles-js"></div>
  <div class="hero-body">
    <div class="container is-desktop">
      <div class="columns landing-caption is-vcentered">
        <div class="column is-7">
          <img src="assets/img/illustrations/characters/friends.svg" alt="" />
        </div>
        <div class="column is-5">
          <h2>Friendkit.</h2>
          <h3>Social Media UI Kit. v{{PACKAGE_VERSION}}</h3>
          <div class="buttons">
            <a href="#landing-start" class="button">Get Started</a>
            <button id="tour-start" class="button is-hidden-mobile">
              Take The Tour
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="landing-start" class="section landing-wrapper">
  <div class="container is-desktop">
    <div class="made-with">
      <div id="made-with-bulma" class="made-block">
        <div class="block-icon is-box-reveal">
          <img src="assets/img/vector/icons/logos/bulma.svg" alt="" />
        </div>
        <div class="block-title">
          <h3>Bulma 0.9.x</h3>
        </div>
      </div>
      <div class="made-block">
        <div class="block-icon is-box-reveal">
          <img src="assets/img/vector/icons/logos/gulp.svg" alt="" />
        </div>
        <div class="block-title">
          <h3>Gulp</h3>
        </div>
      </div>
      <div class="made-block">
        <div class="block-icon is-box-reveal">
          <img src="assets/img/vector/icons/logos/sass.svg" alt="" />
        </div>
        <div class="block-title">
          <h3>Sass</h3>
        </div>
      </div>
      <div class="made-block">
        <div class="block-icon is-box-reveal">
          <img src="assets/img/vector/icons/logos/html5.svg" alt="" />
        </div>
        <div class="block-title">
          <h3>Html5</h3>
        </div>
      </div>
    </div>

    <div class="screen-wrapper">
      <img src="assets/img/screenshots/hero-large.png" alt="" />
    </div>
  </div>
</div>

<div class="section landing-wrapper icons-section">
  <div class="container is-desktop">
    <div id="icon-features" class="columns">
      <div class="column is-hidden-mobile"></div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/code.svg" alt="" />
          <h3>Structured Code</h3>
          <p>For an optimized dev experience</p>
        </div>
      </div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/pages.svg" alt="" />
          <h3>100+ Prebuilt Pages</h3>
          <p>To help you kickstart your project</p>
        </div>
      </div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/draw.svg" alt="" />
          <h3>Illustrations</h3>
          <p>Included as svg and png files</p>
        </div>
      </div>
      <div class="column is-hidden-mobile"></div>
    </div>
    <div class="columns">
      <div class="column is-hidden-mobile"></div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/interactions.svg" alt="" />
          <h3>Micro Interactions</h3>
          <p>And attention to details</p>
        </div>
      </div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/responsive.svg" alt="" />
          <h3>Responsive Design</h3>
          <p>Mobile first UI framework</p>
        </div>
      </div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/updates.svg" alt="" />
          <h3>Lifetime Updates</h3>
          <p>With new content every time</p>
        </div>
      </div>
      <div class="column is-hidden-mobile"></div>
    </div>
    <div class="columns">
      <div class="column is-hidden-mobile"></div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/modern.svg" alt="" />
          <h3>Modern Design</h3>
          <p>Following the latest app trends</p>
        </div>
      </div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/elements.svg" alt="" />
          <h3>500+ UI Elements</h3>
          <p>Because we love our customers</p>
        </div>
      </div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/illustrations.svg" alt="" />
          <h3>Easy Theming</h3>
          <p>Branding won't be a problem</p>
        </div>
      </div>
      <div class="column is-hidden-mobile"></div>
    </div>
    <div class="columns">
      <div class="column is-hidden-mobile"></div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/support.svg" alt="" />
          <h3>Customer Support</h3>
          <p>Via email and support forum</p>
        </div>
      </div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/plugin.svg" alt="" />
          <h3>1 Premium Plugin</h3>
          <p>Save $30 on the Fancybox 3 plugin</p>
        </div>
      </div>
      <div class="column is-3">
        <div class="landing-icon-box">
          <img src="assets/img/icons/landing/docs.svg" alt="" />
          <h3>Detailed Documentation</h3>
          <p>To quickly get you started</p>
        </div>
      </div>
      <div class="column is-hidden-mobile"></div>
    </div>
  </div>
</div>

<div class="section side-feature is-grey">
  <div class="container is-desktop">
    <div class="columns is-vcentered">
      <div class="column is-5 is-offset-1">
        <h3>Handcrafted UI Elements</h3>
        <p>
          Friendkit provides a lot of reusable UI elements to build your app.
          Use this amazing set of components to create a unique web application
        </p>
      </div>
      <div class="column is-5">
        <img src="assets/img/illustrations/ui/components-block.png" alt="" />
      </div>
    </div>
  </div>
</div>

<div class="section side-feature">
  <div class="container is-desktop">
    <div class="columns is-vcentered">
      <div class="column is-6 is-hidden-mobile">
        <div class="screen-wrapper is-spaced has-plant">
          <img
            class="plant plant-1"
            src="assets/img/illustrations/plants/1.svg"
            alt=""
          />
          <img src="assets/img/screenshots/stories-main-large.png" alt="" />
        </div>
      </div>
      <div class="column is-5 is-offset-1">
        <h3>Awesome Layouts</h3>
        <p>
          You'll find a lot of different page layouts, and more will be coming
          wight each update. Leverage existing layouts or create your own the
          existing building blocks.
        </p>
      </div>
      <div class="column is-6 is-hidden-desktop">
        <div class="screen-wrapper is-spaced has-plant">
          <img
            class="plant plant-1"
            src="assets/img/illustrations/plants/1.svg"
            alt=""
          />
          <img src="assets/img/screenshots/stories-main-large.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>

<div class="section side-feature is-grey">
  <div class="container is-desktop">
    <div class="columns is-vcentered">
      <div class="column is-5 is-offset-1">
        <h3>Modern Design</h3>
        <p>
          Friendkit provides a very high quality UI design to jumpstart your
          project. Its clean and modern UI will help you build a memorable
          website seamlessly.
        </p>
      </div>
      <div class="column is-6">
        <div class="screen-wrapper is-spaced has-plant">
          <img
            class="plant plant-2"
            src="assets/img/illustrations/plants/2.svg"
            alt=""
          />
          <img src="assets/img/screenshots/profile-main-large.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>

<div class="section side-feature">
  <div class="container is-desktop">
    <div class="columns is-vcentered">
      <div class="column is-6 is-hidden-mobile">
        <div class="screen-wrapper is-spaced has-plant">
          <img
            class="plant plant-1"
            src="assets/img/illustrations/plants/1.svg"
            alt=""
          />
          <img src="assets/img/screenshots/signup-large.png" alt="" />
        </div>
      </div>
      <div class="column is-5 is-offset-1">
        <h3>Special Goodies</h3>
        <p>
          Additionally to the dozens of pages available out of the box,
          Friendkit also offers special page layouts that you might need in your
          project like inbox, chat, placeholders and much more...
        </p>
      </div>
      <div class="column is-6 is-hidden-desktop">
        <div class="screen-wrapper is-spaced has-plant">
          <img
            class="plant plant-1"
            src="assets/img/illustrations/plants/1.svg"
            alt=""
          />
          <img src="assets/img/screenshots/signup-large.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>

<div id="demos-section" class="section demos-wrapper">
  <div class="container is-desktop">
    <div class="header-logo">
      <img src="assets/img/vector/logo/friendkit-white.svg" alt="" />
    </div>
    <div class="demos-title has-text-centered">
      <h3>Prebuilt pages to start with</h3>
    </div>

    {{> demos-list}}
  </div>
</div>

<div id="buy" class="section cta-wrapper">
  <div class="container is-desktop">
    <div class="header-logo">
      <img src="assets/img/vector/logo/friendkit-white.svg" alt="" />
    </div>
    <div class="cta-title">
      <h3>Exclusively on Envato Market</h3>
      <a
        href="https://1.envato.market/c/1288816/275988/4415?subId1=shop&subId2=banner&subId3=https%3A%2F%2Fthemeforest.net%2Fitem%2Ffriendkit-social-media-ui-kit%2F24621825&u=https%3A%2F%2Fthemeforest.net%2Fitem%2Ffriendkit-social-media-ui-kit%2F24621825"
        target="_blank"
        class="custom-button is-single-reveal"
      >
        <img src="assets/img/icons/explore/envato.svg" alt="" />
        <span>Get It Now</span>
      </a>
    </div>
    <img
      class="people-img"
      src="assets/img/illustrations/characters/friends2.svg"
      alt=""
    />
  </div>
</div>

{{> footer}}