Landing page progress

mozilla · Oct 31, 2014 · a4c4afa · a4c4afa
1 parent 557116b
commit a4c4afa
Show file tree

Hide file tree

Showing 14 changed files with 488 additions and 29 deletions.
diff --git a/bedrock/firefox/templates/firefox/independent.html b/bedrock/firefox/templates/firefox/independent.html
@@ -30,30 +30,79 @@
 
 {% block body_id %}independent{% endblock %}
 
-{% block page_css %}{% endblock %}
+{% block page_css %}
+  {{ css('firefox_independent') }}
+{% endblock %}
 
 {% block site_header_nav %}{% endblock %}
 {% block site_header_logo %}{% endblock %}
 
 {% block content %}
-
-  <h1>{{ _('Choose Independent') }}</h1>
-
-  <p>{{ _('Watch the video') }}</p>
-
-  <p>{{ _('Replay the video') }}</p>
-
-  <p>{{ _('Share the video') }}</p>
-
-  <p>{{ _('Replay') }}</p>
-
-  <p>{{ _('Choose Firefox and stay in control of your online life') }}</p>
-
-  <p>{{ _('Download Firefox') }}</p>
-
-  <p>{{ _('Stay in control of your online life') }}</p>
-
-  <p>{{ _('See what’s new in Firefox') }}</p>
+<main role="main">
+
+  <article id="fx10-splash">
+    <div class="container">
+      <h1 class="main-title">{{ _('Choose Independent') }}</h1>
+      <p class="video">video goes here</p>
+    </div>
+
+    <div class="logo"></div>
+    <div class="tail-middle"></div>
+    <div class="tail-end"></div>
+  </article>
+
+  <section id="fx10-download">
+    <div class="container">
+      <div class="fx-tour">
+        <h2>{{ _('Stay in control of your online life') }}</h2>
+        <p>
+          {# TODO: Need a URL here. #}
+          <a href="#TODO" class="button">{{ _('See what’s new in Firefox') }}</a>
+        </p>
+      </div>
+
+      <div class="fx-download">
+        <h2>{{ _('Choose Firefox and stay in control of your online life') }}</h2>
+        <p>
+          <a href="{{ url('firefox.new') }}?scene=2#download-fx" class="button">{{ _('Download Firefox') }}</a>
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <section id="fx10-accolades">
+    <div class="container">
+
+      <div class="accolade pcworld">
+        {{ high_res_img('img/firefox/independent/logo-pcworld.png', {'alt': 'PC World', 'width': '230', 'height': '67'}) }}
+        {# L10n: This will be used for image alt text. #}
+        <p class="stars stars-four">{{ _('Four stars') }}</p>
+        <p class="quote">{{ _('“Magnificent”') }}</p>
+      </div>
+
+      <div class="accolade trusted">
+        {% include 'firefox/desktop/_trust_badge.html' %}
+      </div>
+
+      <div class="accolade cnet">
+        {{ high_res_img('img/firefox/independent/logo-cnet.png', {'alt': 'C|Net', 'width': '147', 'height': '147'}) }}
+        {# L10n: This will be used for image alt text. #}
+        <p class="stars stars-five">{{ _('Five stars') }}</p>
+        <p class="quote">{{ _('“Spectacular”') }}</p>
+      </div>
+
+    </div>
+  </section>
+
+  <aside id="fx10-community">
+    <p class="container">
+    {% trans link=url('mozorg.contribute') %}
+      Spread the word. Share our story. <a href="{{ link }}">Find out how</a>
+    {% endtrans %}
+    </p>
+  </aside>
+
+<div style="display:none;">
 
   {# L10n: This will be used for image alt text. "PC Magazine" is a proper name and should not be translated. #}
   <p>{{ _('PC Magazine Editor’s Choice') }}</p>
@@ -63,24 +112,23 @@ <h1>{{ _('Choose Independent') }}</h1>
 
   <p>{{ _('“Beautiful”') }}</p>
 
-  {# L10n: This will be used for image alt text. #}
-  <p>{{ _('Five stars') }}</p>
+  <p>{{ _('Watch the video') }}</p>
 
-  <p>{{ _('“Spectacular”') }}</p>
+  <p>{{ _('Replay the video') }}</p>
 
-  <p>{% include 'firefox/desktop/_trust_badge.html' %}</p>
+  <p>{{ _('Share the video') }}</p>
 
-  <p>
-  {% trans link=url('mozorg.contribute') %}
-    Spread the word. Share our story. <a href="{{ link }}">Find out how</a>
-  {% endtrans %}
-  </p>
+  <p>{{ _('Replay') }}</p>
 
   {# L10n: This will be used in tweets, followed by a short URL. The '#ChooseIndependent' hashtag should not be translated.  #}
   <p>{{ _('Keep the passion for a free and open Internet burning bright! #ChooseIndependent. Choose Firefox:') }}</p>
+</div>
 
+</main>
 {% endblock %}
 
-{% block js %}{% endblock %}
+{% block js %}
+  {{ js('firefox_independent') }}
+{% endblock %}
 
 {% block email_form %}{% endblock %}
diff --git a/bedrock/mozorg/templates/mozorg/home/home-new.html b/bedrock/mozorg/templates/mozorg/home/home-new.html
@@ -366,6 +366,8 @@ <h3>{{ _('Help us celebrate 10 years of Firefox.') }}</h3>
 
     <p>{{ _('Replay') }}</p>
 
+    <p>{{ _('Continue to mozilla.org') }}</p>
+
   </div>
   {% endif %}
 

diff --git a/bedrock/settings/base.py b/bedrock/settings/base.py
@@ -305,6 +305,9 @@ def JINJA_CONFIG():
         'firefox_sync_anim': (
             'css/firefox/sync-animation.less',
         ),
+        'firefox_independent': (
+            'css/firefox/independent.less',
+        ),
         'installer_help': (
             'css/base/mozilla-modal.less',
             'css/firefox/template-resp.less',
@@ -596,6 +599,9 @@ def JINJA_CONFIG():
             'js/libs/modernizr.custom.csstransitions.js',
             'js/firefox/new.js',
         ),
+        'firefox_independent': (
+            'js/firefox/independent.js',
+        ),
         'firefox_os': (
             'js/base/mozilla-modal.js',
             'js/libs/jquery.waypoints.min.js',