1 files changed, 25 insertions, 23 deletions
diff --git a/templates/index.html b/templates/index.html
index 2126007..08cce9c 100755
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,26 +4,26 @@
 <section class="section" id="home-section">
   <div>
 
-    <div class="flex flex-col items-center justify-center py-12">
+    <div class="flex flex-col items-center justify-center py-12 px-12 xl:px-0">
       <img src="{{ config.extra.organization.logo }}" width="220px" class="" />
-      <p class="text-gray-500 leading-10 pt-4 text-xl">{{ config.extra.organization.description }}</p>
-      <div class="max-w-7xl mx-auto grid grid-cols-3 gap-x-24 py-12">
-          <div class="flex flex-col items-start justify-center p-2">
-            <img src="{{ get_url(path='images/host2.png') }}">
-            <span class="text-xl text-gray-700 font-semibold mt-4">Host a Website</span>
+      <p class="text-gray-500 leading-10 pt-4 text-xl text-center">{{ config.extra.organization.description }}</p>
+      <div class="max-w-7xl mx-auto grid-cols-1 md:grid grid-cols-3 gap-x-32 py-12">
+          <div class="group flex flex-col items-start justify-center p-2">
+            <img src="{{ get_url(path='images/host2.png') }}" class="transform group-hover:translate-y-4 transition duration-500">
+            <span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-2 transition duration-500">Host a Website</span>
           </div>
-          <div class="flex flex-col items-center justify-center p-2">
-            <img src="{{ get_url(path='images/store.png') }}">
-            <span class="text-xl text-gray-700 font-semibold mt-4">Store Media</span>
+          <div class="group flex flex-col items-center justify-center p-2">
+            <img src="{{ get_url(path='images/store.png') }}" class="transform group-hover:translate-y-4 transition duration-500">
+            <span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-2 transition duration-500">Store Media</span>
           </div>
-          <div class="flex flex-col items-end justify-center p-2">
-            <img src="{{ get_url(path='images/backup.png') }}">
-            <span class="text-xl text-gray-700 font-semibold mt-4">Backup Target</span>
+          <div class="group flex flex-col items-end justify-center p-2">
+            <img src="{{ get_url(path='images/backup.png') }}" class="transform group-hover:translate-y-4 transition duration-500">
+            <span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-2 transition duration-500">Backup Target</span>
           </div>
       </div>
     </div>
 
-    <div class="grid grid-cols-2 gap-x-12 gap-y-32 text-garage-gray font-light bg-gray-100 py-12 w-full shadow-inner">
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-x-0 xl:gap-x-12 gap-y-24 text-garage-gray font-light bg-gray-100 py-12 w-full shadow-inner">
 
       <div class="flex flex-col items-center justify-center space-y-2">
         <h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Our Goals</h2>
@@ -64,36 +64,36 @@
         <p class="text-center leading-5 italic">
           We worked hard to keep requirements as low as possible<br>as we target the largest possible public.
         </p>
-        <ul class="text-center list-style-none flex flex-col items- space-y-2 justify-start py-4">
-          <li class="flex items-center justify-start">
+        <ul class="text-center list-style-none flex flex-col space-y-2 justify-start py-4">
+          <li class="flex flex-col md:flex-row items-center justify-start">
             <div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
               <img src="{{ get_url(path='icons/cpu.svg') }}" width="24px">
               <span class="font-semibold">CPU</span>
             </div>
             <span class="px-2">Any x86_64 CPU from the last 10 years, ARMv7 or ARMv8</span>
           </li>
-          <li class="flex items-center justify-start">
+          <li class="flex flex-col md:flex-row items-center justify-start">
             <div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
               <img src="{{ get_url(path='icons/ram.svg') }}" width="24px">
               <span class="font-semibold">RAM</span>
             </div>
             <span class="px-2">1 GB</span>
           </li>
-          <li class="flex items-center justify-start">
+          <li class="flex flex-col md:flex-row items-center justify-start">
             <div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
               <img src="{{ get_url(path='icons/disk.svg') }}" width="24px">
               <span class="font-semibold">Disk space</span>
             </div>
             <span class="px-2">At least 16 GB</span>
           </li>
-          <li class="flex items-center justify-start">
+          <li class="flex flex-col md:flex-row items-center justify-start">
             <div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
               <img src="{{ get_url(path='icons/network.svg') }}" width="24px">
               <span class="font-semibold">Network</span>
             </div>
             <span class="px-2">200 ms or less, 50 Mbps or more</span>
           </li>
-          <li class="flex flex-col items-start justify-center">
+          <li class="flex flex-col items-center md:items-start justify-center">
             <div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
               <img src="{{ get_url(path='icons/hardware.svg') }}" width="24px">
               <span class="font-semibold">Heterogeneous hardware</span>
@@ -103,11 +103,11 @@
         </ul>
       </div>
 
-      <div class="flex flex-col items-center justify-center space-y-2">
+      <div class="flex flex-col items-center justify-center space-y-2 px-6 xl:px-0">
         <h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Data resiliency for everyone</h2>
         <div class="w-8 h-1 bg-garage-orange"></div>
         <p class="text-center leading-5 italic pb-4">
-          Blabla bla bla bla.
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
         </p>
         <p class="font-normal">
           Garage implements the Amazon S3 API<br>and thus is already compatible with many applications.
@@ -146,10 +146,12 @@
         </ul>
       </div>
 
-      <div class="flex flex-col items-center justify-center space-y-2">
+      <div class="flex flex-col items-center justify-center space-y-2 px-6 xl:px-0">
         <h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Built on the shoulder of giants</h2>
         <div class="w-8 h-1 bg-garage-orange"></div>
-        <p class="text-center leading-5 italic">Which means thats you have to be very tall to get it.</p>
+        <p class="text-center leading-5 italic">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </p>
         <ul class="text-center list-style-none flex flex-col items-center py-4">
           <li>
             <a href="#" class="font-semibold hover:text-garage-orange">Dynamo: Amazon’s Highly Available Key-value Store</a>