From d6bbc85b5a78e39b28676a706f04557599a4aa55 Mon Sep 17 00:00:00 2001
From: Matthew Landauer <mlandauer@gmail.com>
Date: Fri, 30 Aug 2024 02:51:53 +0000
Subject: [PATCH] Improve plan layout on mobile

---
 app/views/documentation/api_landing.html.erb | 162 ++++++++++---------
 1 file changed, 84 insertions(+), 78 deletions(-)

diff --git a/app/views/documentation/api_landing.html.erb b/app/views/documentation/api_landing.html.erb
index 31fd76a09..78ff8e632 100644
--- a/app/views/documentation/api_landing.html.erb
+++ b/app/views/documentation/api_landing.html.erb
@@ -46,28 +46,30 @@
   </div>
 </section>
 
-<div id="plans" class="grid justify-center grid-cols-1 gap-4 py-16 text-xl border-t md:grid-cols-3 border-t-light-grey text-navy">
-  <section class="p-10 my-8 text-center bg-light-grey">
-    <%= render HeadingComponent.new(tag: :h2, extra_classes: "mb-8") do %>
-      Community Plan
-    <% end %>
-    <div class="pb-4 md:min-h-[27rem]">
-      <p>
-        API data for strictly non-commercial use for public benefit.
-      </p>
-      <p class="my-8">
-        <span class="text-3xl font-bold font-display">$0</span>
-        AUD
-        <span class="block mt-1">/ month</span>
-      </p>
-      <div class="text-left">
-        <%= render BulletListComponent.new do |c| %>
-          <%= c.with_item do %>
-            Return up to
-            <%= number_with_delimiter(ApiKey.default_daily_limit_community * Application.max_per_page) %>
-            applications per day
+<div id="plans" class="flex flex-col items-center gap-4 py-16 text-xl border-t lg:items-stretch lg:grid lg:grid-cols-3 border-t-light-grey text-navy">
+  <section class="flex flex-col justify-between max-w-lg p-10 my-8 text-center bg-light-grey">
+    <div>
+      <%= render HeadingComponent.new(tag: :h2, extra_classes: "mb-8") do %>
+        Community Plan
+      <% end %>
+      <div class="pb-4">
+        <p>
+          API data for strictly non-commercial use for public benefit.
+        </p>
+        <p class="my-8">
+          <span class="text-3xl font-bold font-display">$0</span>
+          AUD
+          <span class="block mt-1">/ month</span>
+        </p>
+        <div class="text-left">
+          <%= render BulletListComponent.new do |c| %>
+            <%= c.with_item do %>
+              Return up to
+              <%= number_with_delimiter(ApiKey.default_daily_limit_community * Application.max_per_page) %>
+              applications per day
+            <% end %>
           <% end %>
-        <% end %>
+        </div>
       </div>
     </div>
     <p class="my-4">
@@ -75,33 +77,35 @@
     </p>
   </section>
 
-  <section class="py-10 text-center px-14 bg-light-grey">
-    <%= render HeadingComponent.new(tag: :h2, extra_classes: "mb-8") do %>
-      Standard Plan
-    <% end %>
-    <div class="pb-4 md:min-h-[27rem]">
-      <p>
-        Set and forget reliable API service, effortlessly integrated into your application.
-      </p>
-      <p class="my-8">
-        <span class="text-3xl font-bold font-display">$3499</span>
-        AUD
-        <span class="block mt-1">+ GST / month</span>
-      </p>
-      <div class="text-left">
-        <%= render BulletListComponent.new do |c| %>
-          <%= c.with_item do %>
-            Return up to
-            <%= number_with_delimiter(ApiKey.default_daily_limit_commercial * Application.max_per_page) %>
-            applications per day
-          <% end %>
-          <%= c.with_item do %>
-            1 product
-          <% end %>
-          <%= c.with_item do %>
-            Priority email support
+  <section class="flex flex-col justify-between max-w-lg py-10 text-center px-14 bg-light-grey">
+    <div>
+      <%= render HeadingComponent.new(tag: :h2, extra_classes: "mb-8") do %>
+        Standard Plan
+      <% end %>
+      <div class="pb-4">
+        <p>
+          Set and forget reliable API service, effortlessly integrated into your application.
+        </p>
+        <p class="my-8">
+          <span class="text-3xl font-bold font-display">$3499</span>
+          AUD
+          <span class="block mt-1">+ GST / month</span>
+        </p>
+        <div class="text-left">
+          <%= render BulletListComponent.new do |c| %>
+            <%= c.with_item do %>
+              Return up to
+              <%= number_with_delimiter(ApiKey.default_daily_limit_commercial * Application.max_per_page) %>
+              applications per day
+            <% end %>
+            <%= c.with_item do %>
+              1 product
+            <% end %>
+            <%= c.with_item do %>
+              Priority email support
+            <% end %>
           <% end %>
-        <% end %>
+        </div>
       </div>
     </div>
     <p class="my-4">
@@ -110,38 +114,40 @@
     </p>
   </section>
 
-  <section class="p-10 my-8 text-center bg-light-grey">
-    <%= render HeadingComponent.new(tag: :h2, extra_classes: "mb-8") do %>
-      Premium Plan
-    <% end %>
-    <div class="pb-4 md:min-h-[27rem]">
-      <p>
-        More power and flexibility. Talk to us for pricing.
-      </p>
-      <p class="mt-8 mb-4 text-left">
-        Potential add ons can include:
-      </p>
-      <div class="text-left">
-        <%= render BulletListComponent.new do |c| %>
-          <%= c.with_item do %>
-            <%# TODO: Add documentation for bulk data API %>
-            Access to bulk data API
-          <% end %>
-          <%= c.with_item do %>
-            Multiple products
-          <% end %>
-          <%= c.with_item do %>
-            Return more than
-            <%= number_with_delimiter(ApiKey.default_daily_limit_commercial * Application.max_per_page) %>
-            applications per day
-          <% end %>
-          <%= c.with_item do %>
-            Search for applications by description
-          <% end %>
-          <%= c.with_item do %>
-            Customised integration options
+  <section class="flex flex-col justify-between max-w-lg p-10 my-8 text-center bg-light-grey">
+    <div>
+      <%= render HeadingComponent.new(tag: :h2, extra_classes: "mb-8") do %>
+        Premium Plan
+      <% end %>
+      <div class="pb-4">
+        <p>
+          More power and flexibility. Talk to us for pricing.
+        </p>
+        <p class="mt-8 mb-4 text-left">
+          Potential add ons can include:
+        </p>
+        <div class="text-left">
+          <%= render BulletListComponent.new do |c| %>
+            <%= c.with_item do %>
+              <%# TODO: Add documentation for bulk data API %>
+              Access to bulk data API
+            <% end %>
+            <%= c.with_item do %>
+              Multiple products
+            <% end %>
+            <%= c.with_item do %>
+              Return more than
+              <%= number_with_delimiter(ApiKey.default_daily_limit_commercial * Application.max_per_page) %>
+              applications per day
+            <% end %>
+            <%= c.with_item do %>
+              Search for applications by description
+            <% end %>
+            <%= c.with_item do %>
+              Customised integration options
+            <% end %>
           <% end %>
-        <% end %>
+        </div>
       </div>
     </div>
     <p class="my-4">