New Firefox Sync page for Bug 729329

Also add redirect from /mobile/sync/

bedrock/firefox/templates/firefox/sync.html

@@ -0,0 +1,46 @@
+{# 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 %}{{ _('Keep Your Firefox in Sync') }}{% endblock %}
+{% block body_id %}firefox-sync{% endblock %}
+
+{% block extrahead %}
+  {{ css('firefox_sync') }}
+{% endblock %}
+
+{% block content %}
+
+<div class="intro container">
+  <h1>{{ self.page_title() }}</h1>
+  <p>{{ _('Instantly make Firefox your own wherever you use it. Seamlessly sync your bookmarks, history, passwords and more and access them from any device.') }}</p>
+</div>
+
+<div class="main-content billboard">
+  <div class="primary">
+    <h4>{{ _('Get started with Sync. It’s fast, safe and easy:') }}</h4>
+    <ol>
+      <li>{% trans url='https://support.mozilla.org/kb/learn-more-about-the-design-of-new-firefox#w_a-handy-new-menu' %}
+        Open the <a href="{{ url }}">menu</a> menu in the top right of Firefox and select “Sign in to Sync.”
+      {% endtrans %}</li>
+      <li>{{ _('Click “Get started” in the tab that opens.') }}</li>
+      <li>{{ _('Enter an email address and password to “Create a Firefox Account.”') }}</li>
+      <li>{{ _('Click “Next” to get a verification sent to your email.') }}</li>
+    </ol>
+    <p>{{ _('Check your email and click the verification link.') }}</p>
+    <p>{{ _('You’re all set! Firefox will automatically sync in the background from now on.') }}</p>
+    <ul class="unstyled">
+      <li><a href="https://support.mozilla.org/kb/how-do-i-set-up-firefox-sync">{{ _('Get more detailed instructions.') }}</a></li>
+      <li><a href="https://support.mozilla.org/kb/how-to-update-to-the-new-firefox-sync">{{ _('Using an older version of Sync?') }}</a></li>
+    </ul>
+  </div>
+  <div class="android">
+    <h4>{{ _('Have an Android phone or tablet?') }}</h4>
+    <p>{{ _('Download Firefox for Android to sync between your desktop and mobile devices.') }}</p>
+    <p><a class="button" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}">{{ _('Get it free from Google Play') }}</a></p>
+  </div>
+</div>
+
+{% endblock %}

bedrock/firefox/urls.py

@@ -45,6 +45,7 @@ urlpatterns = patterns('',
     page('firefox/os/faq', 'firefox/os/faq.html'),
     url('^firefox/sms/$', views.sms_send, name='firefox.sms'),
     page('firefox/sms/sent', 'firefox/mobile/sms-thankyou.html'),
+    page('firefox/sync', 'firefox/sync.html'),
     page('firefox/new', 'firefox/new.html'),
     page('firefox/organizations/faq', 'firefox/organizations/faq.html'),
     page('firefox/organizations', 'firefox/organizations/organizations.html'),

bedrock/settings/base.py

@@ -279,6 +279,9 @@ MINIFY_BUNDLES = {
         'firefox_releasenotes': (
             'css/firefox/releasenotes.less',
         ),
+        'firefox_sync': (
+            'css/firefox/sync.less',
+        ),
         'installer_help': (
             'css/base/mozilla-modal.less',
             'css/firefox/template-resp.less',

etc/httpd/global.conf

@@ -144,6 +144,9 @@ RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?apps(.*)$ /b/$1apps$2 [PT]
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?persona(.*)$ /b/$1persona$2 [PT]
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?b2g(.*)$ /b/$1b2g$2 [PT]
 
+# bug 729329
+RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?mobile/sync.*$ /$1firefox/sync/ [L,R=301]
+
 # bug 931042
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?collusion.*$ /$1lightbeam/ [L,R=301]
 

media/css/firefox/sync.less

@@ -0,0 +1,106 @@
+// 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/.
+
+@import "../sandstone/lib.less";
+
+#wrapper:before {
+    content: " ";
+    background: url(/media/img/firefox/sync/sync.png) no-repeat;
+    background-size: contain;
+    position: absolute;
+    top: 80px;
+    right: 100px;
+    height: 250px;
+    width: 250px;
+    z-index: 2;
+}
+
+.intro {
+    .span(8);
+    margin-bottom: (@baseLine);
+    p {
+        font-size: @largeFontSize;
+    }
+}
+
+.main-content {
+    clear: both;
+    h4 {
+        font-size: 20px;
+    }
+}
+
+.primary {
+    .span(8);
+}
+
+.android {
+    .span(4);
+    padding-top: 40px;
+    .button {
+        .trailing-arrow();
+    }
+}
+
+.newsletter-form {
+    clear: both;
+}
+
+/* Tablet Layout: 760px */
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+
+    #wrapper:before {
+        top: 120px;
+        right: 20px;
+        height: 175px;
+        width: 175px;
+        z-index: 2;
+    }
+
+    .intro {
+        .span_narrow(8);
+        h1 {
+            font-size: 42px;
+        }
+        p {
+            font-size: @baseFontSize;
+        }
+    }
+
+    .primary {
+        .span_narrow(8);
+    }
+
+    .android {
+        padding-top: 0;
+        .span_narrow(4);
+    }
+}
+
+/* Mobile layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+
+    #wrapper:before {
+        content: "";
+        background: none;
+    }
+
+    .intro {
+        .span-all();
+        p {
+            font-size: @baseFontSize;
+        }
+    }
+
+
+    .primary {
+        .span-all();
+    }
+
+    .android {
+        padding-top: 0;
+        .span-all();
+    }
+
+}

media/css/sandstone/lib.less

@@ -343,3 +343,10 @@
     white-space: nowrap;
     overflow: hidden;
 }
+
+// Add chevron character after text (with space)
+.trailing-arrow() {
+    &:after {
+        content: " »";
+    }
+}