joinpeertube/src/views/Home.vue

<template>
  <main>

    <section class="presentation">
      <div class="first-row">
        <img class="brand" :src="buildImgUrl('brand.png')" alt="PeerTube logo"/>

        <div class="description" v-translate>A free software to take back control of your videos</div>
      </div>

      <div class="marketing" v-translate>
        With more than 100 000 hosted videos, viewed more than 6 millions times and 20 000 users,
        PeerTube is the decentralized free software alternative to videos platforms developed by Framasoft
      </div>

      <div class="buttons-row">
        <a href="#what-is-peertube" class="jpt-button jpt-big-button-icon">
          <icon-instance></icon-instance>

          <span v-translate>What is PeerTube?</span>
        </a>

        <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="jpt-button jpt-big-button-icon instances-list">
          <icon-instance></icon-instance>

          <translate>See the instances list</translate>
        </router-link>
      </div>
    </section>

    <section class="content-selections">
      <div class="section-title">
        <div v-translate>Discover our content selection</div>
        <div class="border-title"></div>
      </div>

      <content-selections :sample-size-each="2"></content-selections>

      <div class="bottom-link-wrapper">
        <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="bottom-link">
          <span class="text" v-translate>Discover PeerTube instances</span>
          <icon-right></icon-right>
        </router-link>
      </div>
    </section>

    <section id="what-is-peertube">
      <div class="section-title">
        <div v-translate>
          What is
          <img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
          ?
        </div>
        <div class="border-title"></div>
      </div>

      <div class="ambition">
        <img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen"/>

        <div>
          <div class="citation">
            <div class="text" v-translate>
              PeerTube aspire to be a <strong>decentralized and free/libre alternative</strong> to video broadcasting services.
            </div>
          </div>

          <p v-translate>
            Our aim is not to replace them, but rather to simultaneously offer something else, with different values.
          </p>
        </div>
      </div>

      <div class="federation one-column">
        <div class="subtitle" v-translate>A federation of interconnected hosting services</div>

        <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema"/>

        <div class="citation">
          <div class="left-bar"></div>

          <div class="text" v-translate>
            PeerTube is not meant to become a huge platform that would centralize videos from all around the world.
            Rather, it is <strong>a network of inter-connected small videos hosters</strong>.
          </div>
        </div>

        <p v-translate>
          Anyone with a modicum of technical skills can host a PeerTube server, aka an instance.
          Each instance hosts its users and their videos.
          In this way, <strong>every instance is created, moderated and maintained independently by various administrators.</strong>
        </p>

        <div class="bottom-link-wrapper">
          <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="bottom-link">
            <span class="text" v-translate>Discover PeerTube instances</span>
            <icon-right></icon-right>
          </router-link>
        </div>

        <img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/>

        <p v-translate>
          You can still watch from your account videos hosted by other instances though
          if the administrator of your instance had previously connected it with other instances.
        </p>

        <div class="citation">
          <div class="left-bar"></div>

          <div class="text v-translate">This is just how a <strong>federation</strong> works!</div>
        </div>

        <img :src="buildImgUrl('peertube-mastodon-federation.png')" alt="Federation with Mastodon funny schema"/>

        <p v-translate>
          And there's more! PeerTube uses Activity Pub, a federating protocol that <strong>allows you to interact with other software</strong>,
          provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected:
          <strong>you can follow a PeerTube user from Mastodon</strong> (the latest videos from the PeerTube account you follow will appear in your feed),
          <strong>and even comment on a PeerTube-hosted video directly from your Mastodon's account.</strong>
        </p>

<!--        TODO: find interesting resource regarding federation-->
<!--        <div class="bottom-link-wrapper">-->
<!--          <a href="#" class="bottom-link">-->
<!--            <span class="text" v-translate>Learn more about the federation</span>-->
<!--            <icon-right></icon-right>-->
<!--          </a>-->
<!--        </div>-->
      </div>

      <div class="free-software one-column">
        <div class="subtitle" v-translate>An open-source, free/libre licence code</div>

        <img :src="buildImgUrl('peertube-free-software.png')" alt="PeerTube is a free software funny schema"/>

        <p v-translate>
          Mainstream online video broadcasting services make money off of your data by analyzing your interactions
          so that they can then bombard your with targeted advertising.
        </p>

        <div class="citation">
          <div class="left-bar"></div>

          <div class="text" v-translate>
            Peertube is not subject to any corporate monopoly, does not rely on ads and <strong>does not track you.</strong>
          </div>
        </div>

        <p v-translate>
          Most importantly, <strong>you are a person to PeerTube, not a product in need of profiling so as to be stuck in video loops.</strong>
          For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end.
        </p>

        <p v-translate>
          All of this is made possible by Peertube's free/libre license (GNU-AGPL).
          Its code is a digital "common", that belongs to everybody, instead of a secret formula that belongs to Google
          (in the case of Youtube) or to Vivendi/Bolloré (Dailymotion).
          This free/libre license <strong>guarantees our fundamental freedoms as users and allows many contributors to offer evolutions and new features.</strong>
        </p>

<!--        TODO: find interesting resource regarding free softwares -->
<!--        <div class="bottom-link-wrapper">-->
<!--          <a href="#" class="bottom-link">-->
<!--            <span class="text" v-translate>Learn more about free/libre software </span>-->
<!--            <icon-right></icon-right>-->
<!--          </a>-->
<!--        </div>-->
      </div>

      <div id="you-are-a-video-maker" class="one-column">
        <div class="subtitle" v-translate>Are you a video maker?</div>

        <img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration"/>

        <div class="citation">
          <div class="left-bar"></div>

          <div class="text" v-translate>
            With PeerTube, chose <strong>your hosting company and the rules you believe in.</strong>
          </div>
        </div>

        <div v-translate>
          YouTube has clearly gone astray: its hoster, Google-Alphabet, can enforce its ContentID system (the infamous "Robocopyright")
          or its videos recommendation system, all of which appear to be as obscure as unfair.
        </div>

        <div class="citation">
          <div class="left-bar"></div>

          <div class="text" v-translate>
            Direct contact with a human-scale hoster allows for two things: you no longer are the client of a huge tech company,
            and <strong>you can nurture a special relationship with your hoster, who distributes your data.</strong>
          </div>
        </div>

        <div v-translate>
          With PeerTube, you get to choose your hosting provider according to their terms of use, such as their disk space limit per user,
          their moderation policy, who they chose to federate with... You are not speaking with a huge tech company, so you can
          talk it out in case of any issue, need, desire...
        </div>

        <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="jpt-button discover-instances">
          <translate>Browse/discover PeerTube instances</translate>
        </router-link>
      </div>

      <div class="p2p one-column">
        <div class="subtitle" v-translate>About peer-to-peer broadcasting and watching</div>

        <img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration"/>

        <div class="citation">
          <div class="left-bar"></div>

          <div class="text" v-translate>
            The PeerTube software can, whenever necessary, use a peer-to-peer protocol (P2P) to broadcast viral videos,
            <strong>lowering the load of their hosts.</strong>
          </div>
        </div>

        <p v-translate>
          In this way, when you watch a video, your computer contributes to its broadcast.
          If a lot of people are watching the same video at the same time, their browser automatically send smalls pieces of the
          video to the other viewers.
          <strong>The server resources are not over-exploited</strong>: the stream is split, the network optimized.
        </p>

        <p v-translate>
          It might not look like it, but thanks to peer-to-peer broadcasting, popular video makers and their videos are no longer
          forced to be hosted by big companies, whose infrastructure can stand thousands of views at the same time... or to pay for a
          robust but extremely expensive independent video host.
        </p>
      </div>

      <div id="you-play">
        <div class="one-column">
          <div class="subtitle" v-translate>Your move!</div>

          <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="PeerTube you play illustration"/>
        </div>

        <div class="buttons-row explore-create-account">
          <router-link to="/content-selections" class="jpt-button">
            <span v-translate>Browse contents</span>
          </router-link>

          <div class="create-account-block">
            <router-link to="/instances" class="jpt-button">
              <span v-translate>Sign up</span>
            </router-link>
            <div class="jpt-button-legend" v-translate>
              Enjoy every feature: history, subscriptions, playlists, notifications...
            </div>
          </div>

        </div>
      </div>

      <div id="behind-peertube" class="one-column">
        <div class="subtitle" v-translate>Who is behind PeerTube?</div>

        <img class="framasoft-logo" :src="buildImgUrl('framasoft-big-logo.png')" alt="Framasoft logo"/>

        <p v-translate>
          Peertube is a <strong>free/libre software funded by a French non-profit organization</strong>: Framasoft
        </p>

        <p v-translate>
          Our organization started in 2004, and now devotes itself <strong>to popular education about digital technology issues.</strong>
          We are a small structure of less than 40 members and under 10 employees, well-known for the De-google-ify Internet project,
          when we offered 34 ethical and alternative online tools. As a public interest organization, <strong>over 90% of our funding
          comes from donations</strong> (tax deductible for French taxpayers).
        </p>

        <p v-translate>
          Thanks to our <a href="/hall-of-fame" target="_blank">crowdfunding (from March to July 2018)</a>,
          <strong>Framasoft were able to employ PeerTube's main developer.</strong>
          After a beta release in March 2018, release 1 came out in November 2018.
          Since then, several intermediary releases have brought many features along.
          Several collectives have already created PeerTube hosts, laying the foundation for the federation.
        </p>

        <p>
          <strong v-translate>
            The more people use, support, and contribute to PeerTube, the quicker it will become a concrete alternative to platforms like YouTube.
          </strong>
        </p>

        <a href="https://framasoft.org/#soutenir" target="_blank" rel="noopener noreferrer" class="jpt-button">
          <span v-translate>Donate to Framasoft</span>
        </a>
      </div>
    </section>
  </main>
</template>

<style scoped lang="scss">
  @import '../scss/_variables.scss';
  @import '../scss/_mixins.scss';

  .buttons-row {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;

    .jpt-button {
      width: 330px;
      min-height: 50px;
      height: fit-content;
    }

    @media screen and (max-width: $responsive-screen) {
      padding: 0;

      .jpt-button {
        margin: 0 3px 0 0;
      }

      &.explore-create-account {
        flex-direction: column;

        .create-account-block {
          margin-top: 50px;
        }
      }
    }

    @media screen and (max-width: $small-screen) {
      .jpt-button {
        width: 100%;
      }
    }
  }

  .jpt-button-legend {
    margin-top: 5px;
    max-width: 330px;
    font-size: 13px;
    text-align: center;
  }

  .presentation {
    .first-row {
      display: flex;
      align-items: center;
      padding: 70px;
      margin: auto;

      .brand {
        height: 47px;
      }

      div {
        flex-basis: 100%;
      }

      .description {
        margin-left: 60px;
        font-size: 24px;
        font-weight: 600;
      }

      @media screen and (max-width: $small-screen) {
        padding: 15px 0;

        .brand {
          height: 25px !important
        }

        .description {
          font-size: 20px;
          margin-left: 20px;
        }
      }
    }

    .marketing {
      font-size: 16px;
      margin: 50px auto;
      width: 500px;

      @media screen and (max-width: $small-screen) {
        width: 100%;
      }
    }
  }

  #what-is-peertube {
    .ambition {
      display: flex;

      @media screen and (max-width: $responsive-screen) {
        @include one-column;
      }

      & > img,
      & > div {
        flex-basis: 100%;
      }

      img {
        margin-right: 30px;
        height: 231px;
        width: 416px;
      }
    }
  }

  #you-are-a-video-maker {
    .discover-instances {
      min-width: 420px;
      height: 50px;
      margin: 50px 0;
      font-size: 20px;
    }
  }

  #you-play {
    .buttons-row {
      margin-top: 60px;

      .jpt-button {
        font-size: 20px;
      }
    }
  }

  #behind-peertube {
    .framasoft-logo {
      margin: 100px 0;
    }

    .jpt-button {
      height: 50px;
      min-width: 420px;
      margin: 60px 0;
      font-size: 20px;
    }
  }
</style>

<script>
  import IconInstance from '../components/icons/IconInstance.vue'
  import IconRight from '../components/icons/IconRight.vue'
  import ContentSelections from '../components/ContentSelections'

  export default {
    components: {
      ContentSelections,
      IconInstance,
      IconRight
    },

    metaInfo: {
      title: 'JoinPeerTube',
      titleTemplate: null
    }
  }
</script>