link boxes, [conditionally] hide them, use localizable strings, raise modal to z index 3

index.html

@@ -6,21 +6,29 @@ layout: default
 
 <div class="container">
   <div class="content">
-    <div class="card">
-        <img src="/assets/images/explore-icon.png" alt="Explore Icon" class="card-icon-big">
-        Explore
-    </div>
-    <div class="card">
+    <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
+    <a href="/usb-butter/" id="usb-butter" style="display: none;">
+      <div class="card">
+          <img src="/assets/images/explore-icon.png" alt="Explore Icon" class="card-icon-big">
+          {% t explore %}
+      </div>
+    </a>
+    <a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}">
+      <div class="card">
         <img src="/assets/images/message-icon.png" alt="Message Icon" class="card-icon">
-        Message Board
-    </div>
-    <div class="card">
-        <img src="/assets/images/appstore-icon.png" alt="App Store Icon" class="card-icon">
-        App store
-    </div>
-    <div class="card">
+        {% t message_board %}
+      </div>
+    </a>
+    <a class="btn-modal" href="#" data-micromodal-trigger="product-modal">
+      <div class="card">
+          <img src="/assets/images/appstore-icon.png" alt="App Store Icon" class="card-icon">
+          {% t app_store %}
+      </div>
+    </a>
+    <!-- Hidden until we have a design ready to implement. -->
+    <div class="card" style="display: none;"> 
         <img src="/assets/images/maps-icon.png" alt="Maps Icon" class="card-icon">
-        Offline maps
+        {% t offline_maps %}
     </div>
   </div>
 </div>