Merge remote-tracking branch 'mozilla/bug-1101984-hello-product-page'…

… into hello-demo2
mozilla · Jan 6, 2015 · b640594 · b640594
2 parents c925d78 + 2dbd438
commit b640594
Show file tree

Hide file tree

Showing 10 changed files with 1,736 additions and 0 deletions.
diff --git a/bedrock/firefox/templates/firefox/hello.html b/bedrock/firefox/templates/firefox/hello.html
@@ -0,0 +1,212 @@
+{# This Source Code Form is subject to the terms of the Mozilla Public
+ # License, v. 2.0. If a copy of the MPL was not distributed with this
+ # file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
+
+{% extends "firefox/base-resp.html" %}
+
+{% block page_title_prefix %}{% endblock %}
+{% block page_title %}{{ _('Firefox Hello — Free, easy video conversations') }}{% endblock %}
+{% block page_desc %}{{ _('Learn all about Firefox Hello and see for yourself how easy it is to have a free video conversation with anyone, anywhere, right from your browser') }}{% endblock %}
+{% block body_id %}firefox-hello{% endblock %}
+
+{% block site_css %}
+  {{ css('firefox_hello') }}
+{% endblock %}
+
+{% block js %}
+  {{ js('firefox_hello') }}
+{% endblock %}
+
+{% block site_header %}
+  <header id="masthead">
+    <div class="container">
+      <a href="{{ url('mozorg.home') }}" id="tabzilla" data-infobar="{{ settings.TABZILLA_INFOBAR_OPTIONS }}">Mozilla</a>
+
+      {% block site_header_nav %}
+        {% include 'firefox/includes/top-menu.html' %}
+      {% endblock %}
+
+      {% block site_header_logo %}
+        {{ super() }}
+      {% endblock %}
+    </div>
+  </header>
+{% endblock %}
+
+{% block content %}
+
+<div id="share-wrapper">
+  {% include 'firefox/includes/social-share.html' %}
+</div>
+
+<main role="main">
+  <section id="intro">
+    <div class="container">
+      <div id="animation-stage">
+        <!--[if gt IE 9]><!-->
+        <div class="svg-wrapper" id="intro-face-wrapper">
+          <div id="intro-face">
+            <div class="intro-face-eye" id="intro-face-eye-left">
+              <div class="intro-face-eyelid"></div>
+              <div class="intro-face-eyeball"></div>
+            </div>
+
+            <div class="intro-face-eye" id="intro-face-eye-right">
+              <div class="intro-face-eyelid"></div>
+              <div class="intro-face-eyeball"></div>
+            </div>
+
+            <div class="anim-sprite" id="intro-face-mouth"></div>
+
+            <svg version="1.1" class="actor" id="intro-face-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374 357" style="enable-background:new 0 0 374 357;" xml:space="preserve">
+              <g>
+                <path id="intro-face-bubble" d="M187,2C84.8,2,2,74.8,2,164.5c0,44.7,20.5,85.1,53.7,114.5C50,299.3,38.6,326.9,16,353.8
+                  c3.8,6.8,67.4-17.2,112.2-35.3c18.5,5.4,38.2,8.4,58.8,8.4c102.2,0,185-72.7,185-162.5C372,74.8,289.2,2,187,2z"/>
+              </g>
+            </svg>
+          </div>{#-- /#intro-face --#}
+        </div>{#-- /#intro-face-wrapper --#}
+
+        <div class="anim-sprite" id="laptop">
+          <div class="anim-sprite" id="laptop-camera-on"></div>
+        </div>
+
+        <div class="anim-sprite" id="browser">
+          <div id="hello-panel">
+            <div id="hello-panel-contents">
+              <div class="hello-panel-text" id="hello-panel-text1"></div>
+              <div class="hello-panel-text" id="hello-panel-text2"></div>
+              <div class="hello-panel-text last" id="hello-panel-text3"></div>
+              <div id="hello-panel-button"></div>
+            </div>
+          </div>{#-- /#hello-panel --#}
+
+          <div class="chat-window" id="chat-window-green">
+            <div class="anim-sprite green-face" id="chatter-green"></div>
+          </div>
+
+          <div class="chat-window" id="chat-window-blue">
+            <div class="anim-sprite blue-face" id="chatter-blue"></div>
+          </div>
+        </div>{#-- /#browser --#}
+
+        <div id="conversation">
+          <div class="anim-sprite message" id="message-blue1"></div>
+          <div class="anim-sprite message" id="message-green1"></div>
+          <div class="anim-sprite message" id="message-blue2"></div>
+          <div class="anim-sprite message" id="message-green2"></div>
+          <div class="anim-sprite message" id="message-blue3"></div>
+          <div class="anim-sprite message" id="message-green3"></div>
+          <div class="anim-sprite message" id="message-blue4"></div>
+          <div class="anim-sprite message" id="message-green4"></div>
+          <div class="anim-sprite message blue-face" id="message-blue-face"></div>
+          <div class="anim-sprite message green-face" id="message-green-face"></div>
+        </div>
+
+        <div class="anim-sprite" id="wordmark"></div>
+        <!--<![endif]-->
+      </div>{#-- /#animation-stage --#}
+
+      <h1 class="h1">{{ _('As easy as saying hello') }}</h1>
+
+      <h2 class="h3">
+        {{ _('Meet Firefox Hello, the easiest way to connect for free over video with anyone, anywhere.') }}
+      </h2>
+
+      <button class="try-hello" id="try-hello-intro">{{ _('Try Firefox Hello') }}</button>
+    </div>{# /.container #}
+  </section>
+
+  <section id="features">
+    <div class="container">
+      <ul>
+        <li id="feature-simple">
+          <h3 class="h3">{{ _('All you need is Firefox') }}</h3>
+
+          <p>
+            {{ _('If you have the latest version of Firefox, you already have Hello.') }}
+            {{ _('There’s no account or sign-in required and nothing extra to download.') }}
+            {{ _('Just start a conversation, send your friend a link and ask them to click it.') }}
+            {{ _('Simple.') }}
+          </p>
+        </li>
+        <li id="feature-invite">
+          <h3 class="h3">{{ _('Invite anyone, anywhere') }}</h3>
+
+          <p>
+            {{ _('Hello is super easy to use and your friends and family don’t even need Firefox to join your conversation.') }}
+            {{ _('As long as they have a compatible browser, they’re good to go.') }}
+          </p>
+
+          <a rel="external" href="https://support.mozilla.org/kb/which-browsers-will-work-firefox-hello-video-chat">{{ _('Learn more about compatible browsers') }}</a>
+        </li>
+        <li id="feature-secure">
+          <h3 class="h3">{{ _('Safe, secure, protected') }}</h3>
+
+          <p>
+            {{ _('Because Hello is built right into Firefox, you can rest easy knowing that your conversations and information will remain private and secure.') }}
+            {{ _('That’s part of our mission, and it’s behind everything we do around here.') }}
+          </p>
+        </li>
+        <li id="feature-account">
+          <h3 class="h3">{{ _('Do more with a Firefox Account') }}</h3>
+
+          <p>
+            {{ _('To start a conversation with someone directly, simply create a free Firefox Account or sign in if you have one already &mdash; it’s the same account you use with Sync.') }}
+            {{ _('You can then add contacts to keep them close at hand.') }}
+          </p>
+        </li>
+        <li id="feature-getfx">
+          <h3 class="h3">{{ _('Get Firefox to get started') }}</h3>
+
+          <p>
+            {{ _('Want to start using Hello?') }}
+            {{ _('All you need is Firefox &mdash; the open source browser that helps you stay in control of your online life while you stay connected with friends and family.') }}
+            {{ _('Download Firefox to start your first conversation.') }}
+          </p>
+        </li>
+      </ul>
+    </div>{# /.container #}
+  </section>
+
+  <section id="download-try">
+    <div class="container">
+      <div class="ctacopy-wrapper">
+        <h2 class="dltry-copy h2" id="ctacopy-nonfx">{{ _('Get Firefox and start your first conversation') }}</h2>
+        <h2 class="dltry-copy h2" id="ctacopy-oldfx">{{ _('Update your Firefox to start using Hello') }}</h2>
+        <h2 class="dltry-copy h2" id="ctacopy-hellofx">{{ _('Start your first conversation today') }}</h2>
+      </div>
+
+      <div class="cta-wrapper">
+        {{ download_firefox(simple=True, dom_id='download-fx') }}
+        <button class="try-hello" id="try-hello-footer">{{ _('Try Hello now') }}</button>
+      </div>
+    </div>{# /.container #}
+  </section>
+
+  <section id="video">
+    <div class="container">
+      <div class="ctacopy-wrapper">
+        <h2 class="h2">{{ _('Get to know Hello') }}</h2>
+
+        <p>
+          {{ _('Want to reconnect with friends around the world?') }}
+          {{ _('Celebrate a birthday when you can’t be there in person?') }}
+          {{ _('Learn more about Firefox Hello and see for yourself how easy it is to have a free video conversation with anyone, anywhere, right from your browser.') }}
+        </p>
+
+        <p>
+          {{ _('Questions?') }}
+          <a rel="external" href="https://support.mozilla.org/kb/firefox-hello-video-and-voice-conversations-online">{{ _('Visit Mozilla Support') }}</a>
+        </p>
+      </div>
+      <div class="cta-wrapper">
+        <video src=""></video>
+      </div>
+    </div>{# /.container #}
+  </section>
+</main>
+
+{% endblock %}
+
+{% block email_form %}{% endblock %}
diff --git a/bedrock/firefox/urls.py b/bedrock/firefox/urls.py
@@ -39,6 +39,7 @@
     page('firefox/desktop/trust', 'firefox/desktop/trust.html'),
     page('firefox/developer', 'firefox/developer.html'),
     page('firefox/geolocation', 'firefox/geolocation.html'),
+    page('firefox/hello', 'firefox/hello.html'),
     page('firefox/interest-dashboard', 'firefox/interest-dashboard.html'),
     page('firefox/android', 'firefox/android/index.html'),
     page('firefox/android/faq', 'firefox/android/faq.html'),

diff --git a/bedrock/settings/base.py b/bedrock/settings/base.py
@@ -420,6 +420,12 @@ def JINJA_CONFIG():
         'firefox_sync_anim': (
             'css/firefox/sync-animation.less',
         ),
+        'firefox_hello': (
+            'css/sandstone/sandstone-resp.less',
+            'css/firefox/menu-resp.less',
+            'css/libs/socialshare/socialshare.less',
+            'css/firefox/hello.less',
+        ),
         'firefox_independent': (
             'css/sandstone/sandstone-resp.less',
             'css/firefox/independent-splash.less',
@@ -801,6 +807,11 @@ def JINJA_CONFIG():
             'js/firefox/sync-animation.js',
             'js/firefox/sync-old.js',
         ),
+        'firefox_hello': (
+            'js/firefox/australis/australis-uitour.js',
+            'js/libs/socialshare.min.js',
+            'js/firefox/hello.js',
+        ),
         'firefox_privacy_tour': (
             'js/base/mozilla-modal.js',
             'js/base/mozilla-share-cta.js',

diff --git a/etc/httpd/global.conf b/etc/httpd/global.conf
@@ -225,6 +225,9 @@ RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/geolocation(/?)$ /b/$1firefox/geoloc
 RewriteRule ^/en-US/firefox/releases(/?)$ /b/en-US/firefox/releases$1 [PT]
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/sync(/?)$ /b/$1firefox/sync$2 [PT]
 
+# bug 1101984
+RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/hello(/?)$ /b/$1firefox/hello$2 [PT]
+
 # bug 1071074
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/channel(/?)$ /b/$1firefox/channel$2 [PT]