Minor fix

hschne · Dec 11, 2023 · 81cbc44 · 81cbc44
1 parent d44d2ae
commit 81cbc44
Showing 1 changed file with 22 additions and 21 deletions.
diff --git a/app/views/application/home.html.erb b/app/views/application/home.html.erb
@@ -8,7 +8,7 @@
       <h1 class="text-2xl font-extrabold sm:text-5xl">
         Simple Data Sharing.
         <strong class="font-extrabold text-red-600 sm:block mt-2">
-          For Humans and Machines
+          For Humans and Machines.
         </strong>
       </h1>
 
@@ -54,7 +54,7 @@
     >
     <div class="bg-white p-6">
       <p class="text-8xl font-extrabold text-gray-300 mb-4">01</p>
-      <h3 class="text-2xl font-semibold text-red-500 mb-2">Upload your data</h3>
+      <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
         <%= link_to(
           "Web UI",
@@ -100,28 +100,29 @@
       </code>
     </div>
 
-    <div class="bg-white p-6 rounded-lg shadow-md">
-      <p class="text-8xl font-extrabold text-gray-300 mb-4">02</p>
-      <h3 class="text-2xl font-semibold text-red-500 mb-2">Get a link</h3>
-      <p class="text-gray-700 mb-4">We'll hand 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=""
       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">
+      <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 md:column-start-3"
+      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-2xl font-semibold text-red-500 mb-2">Grab your data</h3>
+      <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>
 
@@ -161,24 +162,24 @@
       </code>
     </div>
 
-    <div class="bg-white p-6 rounded-lg shadow-md">
+    <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>
-      <h3 class="text-2xl font-semibold text-red-500 mb-2">Incinerate!</h3>
+      <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
         destroyed 🔥</p>
 
     </div>
-    <img
-      src="https://via.placeholder.com/400"
-      alt="Download your Data"
-      class="w-full h-64 object-cover mb-4 rounded-lg"
-    >
   </div>
 </section>
 
-<section id="how-it-works" class="container mx-auto max-w-screen-xl p-8">
-  <h2 class="text-3xl font-extrabold text-center text-gray-900 mb-8 sm:text-5xl">FAQ</h2>
+<section id="how-it-works" class="container mx-auto max-w-screen-xl py-32">
+  <h2 class="text-3xl font-extrabold text-red-600 mb-8 sm:text-5xl">FAQ</h2>
 
   <details class="group [&_summary::-webkit-details-marker]:hidden" open>
     <summary