youtube landing page

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

@@ -1,55 +1,29 @@
 <?php Response::setMetaDescription('description.publish') ?>
-<?php Response::setMetaTitle(__('title.publish')) ?>
+<?php Response::setMetaTitle(__('YouTubers! Teak back control.')) ?>
 <?php echo View::render('nav/_header', ['isDark' => true, 'isAbsolute' => true]) ?>
-<?php /*
-       <div class="cover-subtitle">
-          Join thousands of YouTubers on the first
-          community&#x2011;controlled video sharing site. <?php //&#x2011; = non breaking hyphen ?>
-      </div>
- */ ?>
 <main >
   <?php //if you change the image, change it on download/_publish too! ?>
-  <div class="cover cover-dark cover-center cover-full" style="background-color: green;" >
+  <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">
-        <?php echo Request::getParam('cta') ?: 'Do you want to say yes to this leading question about YouTube?' ?></h1>
+        YouTubers!<br/>
-      <div class="spacer2">
+        Take Back Control.
-        (and get $50?)
+      </h1>
-      </div>
+      <div class="cover-subtitle" style="font-weight: bold">
-      <div class="control-group spacer2">
+        Join thousands of other creators in a world where your content is made available directly to your audience, free of censorship and corporate influence.
-        <a href="#yes" class="btn-primary control-item">Yes</a>
-        <a href="#maybe" class="btn-alt control-item">Maybe</a>
-        <a href="https://www.youtube.com/watch?v=vjXNvLDkDTA" class="btn-alt control-item">No</a>
       </div>
     </div>
   </div>
-  <div id="maybe"  class="content content-light">
+  <div class="content content-light">
-    <?php /*
+    <h2 class="spacer2" style="text-align: center">
- <div class="content content-light content-tile">
+      <img src="/img/lbry-dark-1600x528.png" style="max-height: 80px" alt="LBRY"/>
-          <h2 class="cover-title cover-title-tile cover-title-flat">{{publish.partner}}</h2>
+    </h2>
-          <h3>{{publish.how}}</h3>
-          <ul>
-            <li>
-              Publish five pieces of content with the LBRY app.
-              <div class="meta">Existing content is okay, so long as it's content you created.</div>
-            </li>
-            <li>Set any price per view — from zero to a dime to one million dollars — you’re in control.</li>
-            <li>Receive 100% of your list price in real time as it is streamed.</li>
-            <li>
-              Receive approximately $1,000.<br/>
-              <div class="meta">See <a href="#what-you-get" class="link-primary">What You Get</a>.</div>
-            </li>
-            <li>Answer our beta feedback survey about your experience.</li>
-          </ul>
-          </div>
-        </div> */ ?>
-    <h2 class="spacer2">Meet 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 $50', 'If you have a YouTube channel with at least, 250 followers or a video with 50,000 views, receive $50 for publishing. But everyone is welcome!'],
+        '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
@@ -58,7 +32,9 @@
         <div class="span4 spacer2">
           <div class="content content-light content-tile">
             <div class="text-center spacer-half">
-              <span class="icon-mega <?php echo $iconClass ?>"></span>
+              <div class="icon-in-circle">
+                <span class="<?php echo $iconClass ?>"></span>
+              </div>
             </div>
             <h3><?php echo $title ?></h3>
             <p>
@@ -71,7 +47,7 @@
   </div>
   <div class="column-fluid" >
     <div class="span6" id="yes">
-      <div class="cover cover-dark cover-dark-grad cover-full">
+      <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>
@@ -82,12 +58,9 @@
             <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>
-            <li>
-              If you meet the sponsorship program criteria, you will receive $50 in network credit.
-            </li>
           </ol>
           <div class="text-center spacer2">
-              <a href="/youtube?success=1" class="btn-alt">Let's Do This</a>
+              <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>
@@ -96,11 +69,21 @@
     <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">Questions?</h3>
+        <h3  class="cover-title cover-title-tile cover-title-flat">I Have Questions</h3>
-        <p>Say hello to Reilly.
+        <p>
-          If you're a creator, please email <a  class="link-primary" href=mailto:reilly@lbry.io?subject=Fixing+YouTube">Reilly</a> with your questions or to schedule a call.</p>
+          Schedule a meeting with Reilly, one of LBRY's founders and an experienced producer.
-          <?php echo View::render('content/_bio', ['person' => 'reilly-smith-youtube', 'orientation' => 'horizontal']) ?>
+          Or, <a class="link-primary" href=mailto:reilly@lbry.io?subject=YouTube+Freedom">email him directly</a>.
-        </div>
+        </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>

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 {