improve(home): modernize hero section layout, accessibility and i18n

i18n/en.yaml

@@ -1,10 +1,36 @@
 # header
-header_login: Login
-header_signup: Sign Up
+header_login: Sign in
+header_signup: Create a free account
 header_pricing: Pricing
+header_menu_features: Features
+header_menu_resources: Resources
+
+header_feature_email_aliases: Email Aliases
+header_feature_email_aliases_desc: Protect your inbox with anonymous email addresses
+header_feature_custom_domains: Custom Domains
+header_feature_custom_domains_desc: Use your own domain to create aliases
+header_feature_browser_extensions: Browser Extensions
+header_feature_browser_extensions_desc: Create aliases in one click from Chrome, Firefox, Edge, or Safari
+header_feature_signin_with_sl: Sign in with SimpleLogin
+header_feature_signin_with_sl_desc: Privacy-first login button for your app or website
+
+header_resource_blog: Blog
+header_resource_blog_desc: Stories, tips and privacy guides from our team
+header_resource_documentation: Documentation
+header_resource_documentation_desc: Get the most out of SimpleLogin
+header_resource_faq: FAQ
+header_resource_faq_desc: Answers to the most common questions
+header_resource_forum: Forum
+header_resource_forum_desc: Discuss features, ask questions, share best practices
+header_resource_github: GitHub
+header_resource_github_desc: Review our open-source code and contribute
+header_resource_status: Status
+header_resource_status_desc: Check service uptime and incidents
+header_resource_comparisons: Comparisons
 
 # hero section
 hero: Receive and send emails anonymously
+hero_highlight_word: anonymously
 
 # script
 seo_script_product: >
@@ -17,12 +43,17 @@ seo_script_howto: >
   </script>
 
 hero_desc: >
-  With  <em data-toggle="tooltip" data-html="true"
-  title="An email alias (or alias for short) is an email address that <b>doesn't store</b> emails: all emails sent to an alias are forwarded to your personal email.">email aliases</em>, you can be anonymous online and protect your inbox
-  against spams and phishing.
-  <a href="https://github.com/simple-login/">Open source</a>. Based in Switzerland.
+  With <em data-toggle="tooltip" data-html="true"
+  title="An email alias (or alias for short) is an email address that <b>doesn't store</b> emails: all emails sent to an alias are forwarded to your personal email.">email aliases</em>, you can stay anonymous online and protect your inbox
+  against spam and phishing.
+  <a href="https://github.com/simple-login/" target="_blank" rel="noopener noreferrer">Open source</a>. Based in Switzerland.
 
-hero_cta: Get your aliases for free >>
+
+hero_cta: Get your aliases for free
+hero_cta_secondary: How it works
+
+hero_stat_value: 1,000,000+
+hero_stat_label: happy users
 
 hero_button_underline: <b>1,000,000+</b> happy users
 

layouts/index.html

@@ -11,54 +11,55 @@
 <main id="content" role="main">
   <div class="bg-white">
     <!-- Hero Section -->
-    <div class="container mb-3">
-      <div class="row justify-content-lg-between mb-1">
-
-        <!-- Hero text & CTA-->
-        <div class="col-lg-6 mb-1 mb-lg-0 space-top-3">
-
-          <div class="mb-5">
-
-
-            <h1 class="h4 font-weight-semi-bold mb-2" style="color: #ea319f">
-              {{ i18n "hero" }}
+    <section class="container sl-hero-section">
+      <div class="row align-items-lg-center justify-content-lg-between">
+
+        <!-- Hero text & CTA -->
+        <div class="col-lg-6 sl-hero-copy-col">
+          <div class="sl-hero-copy-wrap">
+            <h1 class="sl-hero-headline mb-3">
+              {{ replace (i18n "hero") (i18n "hero_highlight_word") (print "<span class=\"sl-hero-headline-highlight\">" (i18n "hero_highlight_word") "</span>") | safeHTML }}
             </h1>
 
             <div>
               {{ i18n "seo_script_product" | safeHTML }}
             </div>
 
-            <p class="mb-2">
+            <p class="sl-hero-description mb-2">
               {{ i18n "hero_desc" | safeHTML }}
             </p>
 
-          </div>
-
-          <div class="mb-3">
-            <a href="https://app.simplelogin.io/auth/register" class="btn btn-primary btn-wide transition-3d-hover mb-2 mb-sm-0 mr-3">
-              <span style="font-weight: 400;">
+            <div class="sl-hero-cta-row d-flex flex-wrap align-items-center mt-4">
+              <a href="https://app.simplelogin.io/auth/register"
+                 class="btn sl-hero-btn sl-hero-btn-primary rounded-pill">
                 {{ i18n "hero_cta" }}
-              </span>
-            </a>
-          </div>
+              </a>
+              <a href="#how-it-works"
+                 class="btn sl-hero-btn sl-hero-btn-secondary rounded-pill">
+                {{ i18n "hero_cta_secondary" }}
+              </a>
+            </div>
 
-          <div class="mt-2 d-flex" style="height: 18px">
-            <img src="/images/5-stars.svg" style="max-width: 100px;" alt="Five stars">
-            <span class="text-secondary ml-2 align-center" style="font-size: 12px; font-weight: 400">
-              {{ i18n "hero_button_underline" | safeHTML }}
-            </span>
+            <div class="sl-hero-social-proof d-flex align-items-center mt-4">
+              <img src="/images/5-stars.svg" class="sl-hero-stars" alt="" aria-hidden="true">
+              <div class="sl-hero-stat">
+                <div class="sl-hero-stat-value">{{ i18n "hero_stat_value" }}</div>
+                <div class="sl-hero-stat-label">{{ i18n "hero_stat_label" }}</div>
+              </div>
+            </div>
           </div>
-
         </div>
         <!-- End Hero text & CTA -->
 
-        <div class="col-lg-6 mt-3">
-          <!-- SVG Illustration -->
-          <img src="/images/hero.svg" class="w-100" alt="Hero Image - Different email address for each website">
+        <div class="col-lg-6 d-none d-md-block sl-hero-media-col">
+          <div class="sl-hero-illustration-bg">
+            <div class="sl-hero-illustration-card">
+              <img src="/images/hero.svg" class="w-100 sl-hero-illustration" alt="" aria-hidden="true">
+            </div>
+          </div>
         </div>
       </div>
-
-    </div>
+    </section>
   </div>
   <!-- End Hero Section -->
 
@@ -150,7 +151,7 @@ <h2 class="u-divider u-divider--text" style="font-weight: 500">{{ i18n "seen_on"
   <!-- End SVG Top Shape -->
 
   <!-- How it works Section -->
-  <div class="bg-light" style="min-height: 50vh;">
+  <div id="how-it-works" class="bg-light" style="min-height: 50vh;">
     <div class="container space-md-1 pt-4 pb-7">
       <!-- Title -->
       <div class="w-md-80 w-lg-70 text-center mx-md-auto mb-2 py-5">

layouts/partials/footer.html

@@ -228,14 +228,6 @@ <h3 class="h6 text-white">Downloads</h3>
 <!-- JS Plugins Init. -->
 <script>
   $(window).on('load', function () {
-    // initialization of HSMegaMenu component
-    $('.js-mega-menu').HSMegaMenu({
-      event: 'hover',
-      pageContainer: $('.container'),
-      breakpoint: 767.98,
-      hideTimeOut: 0
-    });
-
     // initialization of svg injector module
     $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
   });
@@ -267,6 +259,133 @@ <h3 class="h6 text-white">Downloads</h3>
     $.HSCore.components.HSGoTo.init('.js-go-to');
   });
 </script>
+
+<script>
+  (function () {
+    'use strict';
+
+    var navBar    = document.getElementById('navBar');
+    var closeBtn  = document.querySelector('.sl-drawer-close');
+    var hamburger = document.querySelector('.navbar-toggler');
+    var BREAKPOINT = navBar ? parseInt(navBar.getAttribute('data-breakpoint'), 10) : 1278;
+
+    if (!navBar || !hamburger) return;
+
+    function openDrawer() {
+      navBar.classList.add('is-open');
+      document.body.style.overflow = 'hidden';
+      hamburger.setAttribute('aria-expanded', 'true');
+    }
+
+    function closeDrawer() {
+      navBar.classList.remove('is-open');
+      document.body.style.overflow = '';
+      hamburger.setAttribute('aria-expanded', 'false');
+    }
+
+    hamburger.addEventListener('click', function () {
+      navBar.classList.contains('is-open') ? closeDrawer() : openDrawer();
+    });
+
+    if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
+
+    window.addEventListener('resize', function () {
+      if (window.innerWidth >= BREAKPOINT) closeDrawer();
+    });
+  }());
+</script>
+
+<script>
+  (function () {
+    'use strict';
+
+    var navBar = document.getElementById('navBar');
+    var BREAKPOINT = navBar ? parseInt(navBar.getAttribute('data-breakpoint'), 10) : 1278;
+    var overlay    = document.getElementById('sl-nav-overlay');
+    var panels     = Array.from(document.querySelectorAll('.sl-mega-panel'));
+
+    if (!panels.length) return;
+
+    // Remember original DOM positions so panels can be restored after mobile use
+    var origins = new Map(panels.map(function (p) {
+      return [p, { parent: p.parentNode, next: p.nextSibling }];
+    }));
+
+    var active = { panel: null, trigger: null };
+
+    function isDesktop() {
+      return window.innerWidth >= BREAKPOINT;
+    }
+
+    function restoreOrigin(panel) {
+      var o = origins.get(panel);
+      if (panel.parentNode !== o.parent) {
+        o.parent.insertBefore(panel, o.next);
+      }
+    }
+
+    function positionPanel(panel, trigger) {
+      var rect = trigger.getBoundingClientRect();
+      var left = Math.min(rect.left, window.innerWidth - panel.offsetWidth - 16);
+      panel.style.top  = rect.bottom + 'px';
+      panel.style.left = Math.max(0, left) + 'px';
+    }
+
+    function close() {
+      if (!active.panel) return;
+      active.panel.classList.remove('is-open');
+      active.panel.style.top  = '';
+      active.panel.style.left = '';
+      active.trigger.setAttribute('aria-expanded', 'false');
+      restoreOrigin(active.panel);
+      if (overlay) overlay.classList.remove('is-visible');
+      active.panel = active.trigger = null;
+    }
+
+    function open(panel, trigger) {
+      if (active.panel === panel) { close(); return; }
+      if (active.panel) close();
+
+      if (!isDesktop()) {
+        // Slot panel into the drawer directly after its trigger's <li>
+        trigger.closest('li').insertAdjacentElement('afterend', panel);
+      }
+
+      panel.classList.add('is-open');
+      trigger.setAttribute('aria-expanded', 'true');
+      active.panel   = panel;
+      active.trigger = trigger;
+
+      if (isDesktop()) {
+        positionPanel(panel, trigger);
+        if (overlay) overlay.classList.add('is-visible');
+      }
+    }
+
+    document.addEventListener('click', function (e) {
+      var trigger = e.target.closest('#header [aria-haspopup="true"][aria-controls]');
+
+      if (trigger) {
+        var panel = document.getElementById(trigger.getAttribute('aria-controls'));
+        if (panel && panel.classList.contains('sl-mega-panel')) {
+          e.stopPropagation();
+          open(panel, trigger);
+          return;
+        }
+      }
+
+      if (active.panel && !active.panel.contains(e.target)) close();
+    });
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') close();
+    });
+
+    if (overlay) overlay.addEventListener('click', close);
+
+    window.addEventListener('resize', close);
+  }());
+</script>
 <script src="/local-storage-polyfill.js"></script>
 
 <!--<script type="text/javascript"