Add illustrations

app/views/application/home.html.erb

@@ -1,9 +1,5 @@
 <section class="">
-  <div
-    class="
-      mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center
-    "
-  >
+  <div class="mx-auto max-w-screen-xl py-32 lg:flex lg:h-screen lg:items-center">
     <div class="mx-auto max-w-2xl text-center">
       <h1 class="text-2xl font-extrabold sm:text-5xl">
         Simple Data Sharing.
@@ -30,8 +26,9 @@
 
         <a
           class="
-            block w-full rounded px-12 py-3 text-sm font-medium text-red-600 shadow
-            hover:text-red-700 focus:outline-none focus:ring active:text-red-500 sm:w-auto
+            block w-full rounded px-12 py-3 text-sm background-white font-medium
+            text-red-600 shadow hover:text-red-700 focus:outline-none focus:ring
+            active:text-red-500 sm:w-auto
           "
           href="#how-it-works"
         >
@@ -47,12 +44,9 @@
   <h2 class="text-3xl font-extrabold text-red-600 sm:text-5xl mb-8">Drop data and grab data</h2>
 
   <div class="grid grid-cols-1 gap-8 items-center justify-between md:grid-cols-2">
-    <img
-      src="https://via.placeholder.com/400"
-      alt="Upload Data"
-      class="w-full h-64 object-cover mb-4 rounded-lg"
-    >
-    <div class="bg-white p-6">
+
+    <%= image_tag("upload.png", class: "w-full h-64 object-scale-down mb-4 rounded-lg") %>
+    <div class="bg-white p-6 rounded-lg shadow-md">
       <p class="text-8xl font-extrabold text-gray-300 mb-4">01</p>
       <h3 class="text-3xl font-semibold text-red-600 mb-2">Upload your data</h3>
       <p class="text-gray-700 mb-4">Drop some data in our
@@ -62,8 +56,8 @@
           class:
             " text-red-600 no-underline hover:text-red-700 hover:underline active:bg-red-500",
         ) %>
-        or upload data with your favorite command line client. Here's how you
-        do it with Curl.</p>
+        or upload data with your favorite command line client. In exchange,
+        you'll receive a secure link. Here's how you do it with Curl.</p>
       <code
         class="
           text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-gray-800
@@ -100,28 +94,12 @@
       </code>
     </div>
 
-    <img
-      src="https://via.placeholder.com/400"
-      alt=""
-      class="w-full h-64 object-cover mb-4 rounded-lg"
-    >
-    <div class="bg-white p-6 rounded-lg shadow-md md:col-start-1 md:row-start-2">
+    <%= image_tag(
+      "download.png",
+      class: "w-full h-64 object-scale-down mb-4 rounded-lg",
+    ) %>
+    <div class="bg-white p-6 rounded-lg shadow-md md:col-start-1 md:row-start-2 ">
       <p class="text-8xl font-extrabold text-gray-300 mb-4">02</p>
-      <h3 class="text-3xl font-semibold text-red-600 mb-2">Get a link</h3>
-      <p class="text-gray-700 mb-4">We'll give you a secure, easy to remember link to your data. Keep that
-        link safe, because we won't show to anybody ever again - including
-        you!
-      </p>
-    </div>
-
-    <img
-      src="https://via.placeholder.com/400"
-      alt="Download your Data"
-      class="w-full h-64 object-cover mb-4 rounded-lg row-start-3"
-    >
-
-    <div class="bg-white p-6 rounded-lg shadow-md">
-      <p class="text-8xl font-extrabold text-gray-300 mb-4">03</p>
       <h3 class="text-3xl font-semibold text-red-600 mb-2">Grab your data</h3>
       <p class="text-gray-700 mb-4">Use your link to download your data, either via your browser or your
         favorite command line client.</p>
@@ -162,13 +140,9 @@
       </code>
     </div>
 
-    <img
-      src="https://via.placeholder.com/400"
-      alt="Download your Data"
-      class="w-full h-64 object-cover mb-4 rounded-lg"
-    >
-    <div class="bg-white p-6 rounded-lg shadow-md md:col-start-1 md:row-start-4">
-      <p class="text-8xl font-extrabold text-gray-300 mb-4">04</p>
+    <%= image_tag("burn.png", class: "w-full h-64 object-scale-down mb-4 rounded-lg") %>
+    <div class="bg-white p-6 rounded-lg shadow-md">
+      <p class="text-8xl font-extrabold text-gray-300 mb-4">03</p>
       <h3 class="text-3xl font-semibold text-red-600 mb-2">Incinerate!</h3>
       <p class="text-gray-700 mb-4">After access, we destroy your data and keep no trace of it. If you
         don't grab your data after a set amount of time it will also be

app/views/layouts/application.html.erb

@@ -16,7 +16,7 @@
     <header class="bg-white">
       <div
         class="
-          mx-auto flex h-16 max-w-screen-xl items-center justify-between sm:px-6 lg:px-8
+          mx-auto flex h-16 max-w-screen-xl items-center justify-between px-4 lg:px-8
         "
       >
         <a class=" flex flex-row gap-1 items-center text-red-600 " href="/">
@@ -43,15 +43,14 @@
         </a>
       </div>
     </header>
-    <main class="">
+    <main class="px-4">
       <%= content_for?(:drops) ? yield(:drops) : yield %>
     </main>
 
     <footer class="bg-gray-50">
       <div class="mx-auto max-w-screen-xl py-8 sm:px-6 lg:px-8">
         <div class="sm:flex sm:items-center sm:justify-between">
           <div class="flex justify-center text-red-600 sm:justify-start">
-
             <%= inline_svg_tag "logo.svg", class: "h-12 w-12 p-2" %>
           </div>