Merge pull request #85 from lbryio/tube_land

youtube campaign page

content/bio/reilly-smith-youtube.md

@@ -0,0 +1,10 @@
+---
+name: Reilly Smith
+role: Community Manager
+email: reilly@lbry.io
+---
+Reilly holds a BA in Film and Media Studies from the University of Oklahoma and consequently has spent a significant amount of time washing dishes.
+
+His films have shown at Sundance, SXSW, Dallas IFF, and LA Film Fest and he has produced series for Zero Day Fox and Disney.
+
+Reilly is passionate about eliminating middlemen in show business.

controller/Controller.class.php

@@ -97,6 +97,8 @@ class Controller
 
     $router->any('/dmca', 'ReportActions::executeDmca');
 
+    $router->any('/youtube/sub', 'ReportActions::executeYoutubeSub');
+
     $router->post('/set-culture', 'i18nActions::setCulture');
 
     $permanentRedirects = [

controller/action/ReportActions.class.php

@@ -38,4 +38,24 @@ class ReportActions extends Actions
 
     return ['report/dmca', ['errors' => $errors, 'values' => $values]];
   }
+
+  public static function executeYouTubeSub()
+  {
+    if (!Request::isPost())
+    {
+      return Controller::redirect('/youtube');
+    }
+
+    $email = Request::getPostParam('email');
+
+    if (!filter_var($email, FILTER_VALIDATE_EMAIL))
+    {
+      Session::setFlash('error', 'Please enter a valid email.');
+      return Controller::redirect('/youtube');
+    }
+
+    Mailgun::sendYouTubeWarmLead(['email' => $email]);
+    
+    return Controller::redirect(Request::getRelativeUri(), 303);
+  }
 }

lib/thirdparty/Mailgun.class.php

@@ -43,6 +43,20 @@ class Mailgun
     return $status == 200;
   }
 
+  public static function sendYouTubeWarmLead($data)
+  {
+    list($status, $headers, $body) = static::post('/lbry.io/messages', [
+      'from'              => 'LBRY <mail@lbry.io>',
+      'to'                => 'jeremy@lbry.io',
+      'subject'           => 'Interested YouTuber',
+      'html'              => '<pre>' . var_export($data, true) . '</pre>',
+      'o:tracking-clicks' => 'no',
+      'o:tracking-opens'  => 'no'
+    ]);
+
+    return $status == 200;
+  }
+
   public static function sendSubscriptionConfirmation($email)
   {
     $confirmHash = static::getConfirmHash($email);

view/template/page/youtube.php

@@ -0,0 +1,91 @@
+<?php Response::setMetaDescription('description.publish') ?>
+<?php Response::setMetaTitle(__('YouTubers! Teak back control.')) ?>
+<?php echo View::render('nav/_header', ['isDark' => true, 'isAbsolute' => true]) ?>
+<main >
+  <?php //if you change the image, change it on download/_publish too! ?>
+  <div class="cover cover-dark cover-center cover-full" style="padding-top: 80px; background-image: url('/img/youtube/tanks3.jpg')" >
+    <div style="max-width: 700px; text-align: center">
+      <h1 class="cover-title">
+        YouTubers!<br/>
+        Take Back Control.
+      </h1>
+      <div class="cover-subtitle" style="font-weight: bold">
+        Join thousands of other creators in a world where your content is made available directly to your audience, free of censorship and corporate influence.
+      </div>
+    </div>
+  </div>
+  <div class="content content-light">
+    <h2 class="spacer2" style="text-align: center">
+      <img src="/img/lbry-dark-1600x528.png" style="max-height: 80px" alt="LBRY"/>
+    </h2>
+    <div class="column-fluid" >
+      <?php foreach([
+        'icon-group' => ['Community Run', 'Share (and optionally monetize) your content via a network powered entirely by users themselves.'],
+        'icon-cubes' => ['Blockchain', 'The power of decentralized consensus allows your content to be discovered and accessed by anyone in the world -- on your terms.'],
+        'icon-thumbs-up' => ['Take Control', 'Publish your content with whatever terms, price, and quality you desire. Update, re-release, and unpublish at any time.'],
+        'icon-money' => ['Make More', 'You control whether your content is free or paid. If paid, you get 100% of the price.'],
+        'icon-lock' => ['Secure', 'Made with encryption and love by dozens of bright contributors from MIT, CMU, RPI, Udacity, Dyn and more.'],
+        'icon-code' => ['Open Source', 'Entirely open-source and permissively licensed (MIT). Maintained by stewards, not overlords.'],
+        //Easy
+      ] as $iconClass => $copyTuple): ?>
+        <?php list($title, $body) = $copyTuple ?>
+        <div class="span4 spacer2">
+          <div class="content content-light content-tile">
+            <div class="text-center spacer-half">
+              <div class="icon-in-circle">
+                <span class="<?php echo $iconClass ?>"></span>
+              </div>
+            </div>
+            <h3><?php echo $title ?></h3>
+            <p>
+              <?php echo $body ?>
+            </p>
+          </div>
+        </div>
+        <?php endforeach ?>
+    </div>
+  </div>
+  <div class="column-fluid" >
+    <div class="span6" id="yes">
+      <div class="cover cover-dark cover-dark-grad">
+        <div class="content content-dark content-tile">
+          <h3 class="cover-title cover-title-tile cover-title-flat">I'm In</h3>
+          <ol>
+            <li>
+              Clicking below will authenticate with YouTube and grant permission for your content be available on the decentralized LBRY network.
+              You may revoke this permission and unpublish* your content at any time.
+            </li>
+            <li>
+              Our team will automate publishing your content to LBRY. When it's done, you'll receive a notification and a login to review, update, and manage it.
+            </li>
+          </ol>
+          <div class="text-center spacer2">
+              <a href="https://api.lbry.io/yt/connect" class="btn-alt">Let's Do This</a>
+          </div>
+          <div class="meta">*Unpublishing means removing the ability to decrypt and accessing your content via LBRY, but we cannot guarantee the deletion of all encrypted data.</div>
+        </div>
+      </div>
+    </div>
+    <div class="span6">
+      <div class="cover cover-light-alt cover-light-alt-grad">
+      <div class="content content-light content-tile">
+        <h3  class="cover-title cover-title-tile cover-title-flat">I Have Questions</h3>
+        <p>
+          Schedule a meeting with Reilly, one of LBRY's founders and an experienced producer.
+          Or, <a class="link-primary" href=mailto:reilly@lbry.io?subject=YouTube+Freedom">email him directly</a>.
+        </p>
+        <form action="/youtube/sub" method="POST" class="spacer2">
+          <?php echo View::render('form/_formRow', [
+            'field'    => 'email',
+            'type'     => 'email',
+            'label'    => 'Email',
+            'required' => true,
+          ]) ?>
+          <input type="submit" value="Let's Talk" class="btn-primary">
+        </form>
+        <?php echo View::render('content/_bio', ['person' => 'reilly-smith-youtube', 'orientation' => 'horizontal']) ?>
+      </div>
+    </div>
+  </div>
+</main>
+<?php echo View::render('nav/_footer') ?>

web/scss/_cover.scss

@@ -16,8 +16,9 @@
 }
 .cover-full
 {
-  height: 100vh;
+  min-height: 100vh;
   font-size: 1.2em;
+  background-position: center;
 }
 @media (max-width: $mobile-width-threshold) {
   .cover { padding: $spacing-vertical $spacing-vertical * 2 / 3; }

web/scss/_grid.scss

@@ -54,18 +54,6 @@ $gutter_fluid: 4;
   }
 }
 
-.column-fluid {
-  @include display-flex();
-  @include flex-wrap(wrap);
-  > [class*="span"] {
-    @include display-flex();
-    @include flex-wrap(wrap);
-    @include flex(1 0 auto);
-    overflow: hidden;
-    @include justify-content(center);
-  }
-}
-
 .column-fluid-constrained
 {
   max-width: 1400px;
@@ -80,6 +68,18 @@ $gutter_fluid: 4;
 @media (min-width: $mobile-width-threshold) {
   .pull-left { float: left; }
   .pull-right { float: right; }
+
+  .column-fluid {
+    @include display-flex();
+    @include flex-wrap(wrap);
+    > [class*="span"] {
+      @include display-flex();
+      @include flex-wrap(wrap);
+      @include flex(1 0 auto);
+      overflow: hidden;
+      @include justify-content(center);
+    }
+  }
 }
 
 @media (max-width: $mobile-width-threshold) {
@@ -95,7 +95,9 @@ $gutter_fluid: 4;
     width: 100% !important;
     margin-left: 0 !important;
     display: block !important;
-    &:not(:last-child)
+  }
+  .row-fluid, .tile-fluid {
+    [class*="span"]:not(:last-child)
     {
       margin-bottom: $spacing-vertical;
     }

web/scss/_icons.scss

@@ -36,6 +36,30 @@
     line-height: 1;
 }
 
+.icon-in-circle
+{
+  font-size: 100px;
+  color: $color-primary;
+  border-radius: 50%;
+  border: 2px solid $color-primary;
+  height: 150px;
+  width: 150px;
+  line-height: 150px;
+  margin: 0 auto;
+  /* hack fixes for weird icon placement on youtube page*/
+  .icon-cubes
+  {
+    position: relative;
+    left: 5px;
+    top: -5px;
+  }
+  .icon-code
+  {
+    position: relative;
+    top: -5px;
+  }
+}
+
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .icon-glass:before {