Improve home page

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/templates/page/index.html.eex

@@ -1,11 +1,11 @@
 <%= if true do %>
-<div class="bg-purple-700 text-white" style="background: linear-gradient(-32deg, #840000 0%, #E0003C 30%, #FF493F 50%, #FF584A 50%, #FF6F86 90%, #FF584A 120%);">
+<div class="text-white" style="background: linear-gradient(-32deg, #840000 0%, #E0003C 30%, #FF493F 50%, #FF584A 50%, #FF6F86 90%, #FF584A 120%);">
   <section class="container px-6 pt-12 pb-16">
     <h1 class="mx-auto max-w-4xl text-5xl text-center leading-snug font-bold text-shadow">
       <%#= "Great apps need great components. Learn how to make them in SwiftUI and React." %>
       <%= "Great apps need great components. Learn by making in SwiftUI or React." %>
     </h1>
-    <p class="mt-6 mb-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-purple-100 text-shadow">
+    <p class="mt-6 mb-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-red-100 text-shadow">
       <%= "Learn the techniques that work best across a range of component systems." %>
     </p>
     <p class="mx-auto py-2 max-w-4xl text-xl text-center">
@@ -17,13 +17,13 @@
   </section>
 </div>
 <% else %>
-<div class="bg-purple-100 text-purple-700" style="background: linear-gradient(-60deg, #006DB1 -20%, #AB29CF 50%, #00C6FF 120%);">
+<div class="text-white"  style="background: linear-gradient(-32deg, #840000 0%, #E0003C 30%, #FF493F 50%, #FF584A 50%, #FF6F86 90%, #FF584A 120%);">
   <section class="container px-6 pt-12 pb-16">
     <h1 class="mx-auto max-w-5xl text-5xl text-center leading-snug font-bold">
       <%#= "Great apps need great components. Learn how to make them in SwiftUI & React." %>
       <%= "Great apps need great components. Learn how in SwiftUI, Combine, React & RxJS." %>
     </h1>
-    <p class="mt-6 mb-8 mx-auto max-w-3xl text-4xl text-center italic leading-snug text-purple-700">
+    <p class="mt-6 mb-8 mx-auto max-w-3xl text-4xl text-center italic leading-snug text-orange-100">
       <%#= "Learn the techniques that have worked best across a range of component systems." %>
       <%= "Learn the techniques that have worked best for modern component systems." %>
     </p>
@@ -37,40 +37,62 @@
 </div>
 <% end %>
 
-<div class="py-4 bg-purple-900">
-  <section class="m-8 flex items-center justify-center">
-    <a href="/swiftui" class="block max-w-md w-full mx-1 mb-3 px-8 py-4 font-bold bg-orange-100 text-orange-700 border border-orange-800 hover:bg-white hover:text-orange-600 hover:border-white rounded shadow-xl hover:shadow-lg">
-      <span class="text-3xl"><%= "Learn SwiftUI" %></span>
-      <br>
-      The future of UI from Apple
-    </a>
+<div class="py-4 bg-white">
+  <% if false do %>
+  <section class="mt-8 flex flex-col items-center justify-center">
+    <div class="w-full max-w-md border border-gray-900 rounded overflow-hidden shadow-lg">
+      <a href="/swiftui" class="block w-full px-8 py-4 font-bold bg-orange-800 text-white hover:bg-white hover:text-orange-600 hover:border-white shadow-xl hover:shadow-lg">
+        <span class="text-3xl"><%= "Learn SwiftUI" %></span>
+        <br>
+        The future of UI from Apple
+      </a>
+      <a href="#" class="block max-w-md w-full px-8 py-4 font-bold bg-red-800 text-white border-t border-red-900 hover:bg-white hover:text-red-600 shadow-xl hover:shadow-lg">
+        <span class="text-3xl"><%= "Learn Combine" %></span>
+        <br>
+        Swift async data flow refined
+      </a>
+    </div>
   </section>
-  <section class="m-8 flex items-center justify-center">
-    <a href="#" class="block max-w-md w-full mx-1 mb-3 px-8 py-4 font-bold bg-red-100 text-red-700 border border-red-800 hover:bg-white hover:text-red-600 hover:border-white rounded shadow-xl hover:shadow-lg">
-      <span class="text-3xl"><%= "Learn Combine" %></span>
-      <br>
-      Swift async data flow refined
-    </a>
-  </section>
-  <section class="m-8 flex items-center justify-center">
-    <a href="#" class="block max-w-md w-full mx-1 mb-3 px-8 py-4 font-bold bg-blue-100 text-blue-700 border border-blue-800 hover:bg-white hover:text-blue-600 hover:border-white rounded shadow-xl hover:shadow-lg">
-      <span class="text-3xl"><%= "Learn React" %></span>
-      <br>
-      The venerable component library
-    </a>
-  </section>
-  <section class="m-8 flex items-center justify-center">
-    <a href="#" class="block max-w-md w-full mx-1 mb-3 px-8 py-4 font-bold bg-indigo-100 text-indigo-700 border border-indigo-800 hover:bg-white hover:text-indigo-600 hover:border-white rounded shadow-xl hover:shadow-lg">
-      <span class="text-3xl"><%= "Learn TypeScript" %></span>
-      <br>
-      Safer, more expressive code
-    </a>
+  <% end %>
+
+  <section class="mt-8">
+    <header class="mb-8 mx-auto max-w-4xl text-center">
+      <h2 class="text-4xl font-bold">Learn to make modern iOS and macOS apps using components, async data flow.</h2>
+    </header>
+    <div class="w-full max-w-md mx-auto border border-gray-300 rounded overflow-hidden shadow-lg">
+      <a href="/swiftui" class="block w-full px-8 py-4 font-bold bg-orange-100 text-orange-700 hover:bg-white hover:text-orange-600 hover:border-white shadow-xl hover:shadow-lg">
+        <span class="text-3xl"><%= "Learn SwiftUI" %></span>
+        <br>
+        The future of UI from Apple
+      </a>
+      <a href="#" class="block max-w-md w-full px-8 py-4 font-bold bg-red-100 text-red-700 border-t border-red-200 hover:bg-white hover:text-red-600 shadow-xl hover:shadow-lg">
+        <span class="text-3xl"><%= "Learn Combine" %></span>
+        <br>
+        Swift async data flow refined
+      </a>
+    </div>
   </section>
-  <section class="m-8 flex items-center justify-center">
-    <a href="#" class="block max-w-md w-full mx-1 mb-3 px-8 py-4 font-bold bg-pink-100 text-pink-700 border border-pink-800 hover:bg-white hover:text-pink-600 hover:border-white rounded shadow-xl hover:shadow-lg">
-      <span class="text-3xl"><%= "Learn RxJS" %></span>
-      <br>
-      Reusable, testable data models
-    </a>
+
+  <section class="m-16">
+    <header class="mb-8 mx-auto max-w-4xl text-center">
+      <h2 class="text-4xl font-bold">Learn to make modern web apps using components, hooks, async data flow.</h2>
+    </header>
+    <div class="w-full max-w-md mx-auto border border-gray-300 rounded overflow-hidden shadow-lg">
+      <a href="#" class="block max-w-md w-full px-8 py-4 font-bold bg-blue-100 text-blue-700 hover:bg-white hover:text-blue-600 shadow-xl hover:shadow-lg">
+        <span class="text-3xl"><%= "Learn React" %></span>
+        <br>
+        The venerable component-first library
+      </a>
+      <a href="#" class="block max-w-md w-full px-8 py-4 font-bold bg-indigo-100 text-indigo-700 border-t border-indigo-200 hover:bg-white hover:text-indigo-600 shadow-xl hover:shadow-lg">
+        <span class="text-3xl"><%= "Learn TypeScript" %></span>
+        <br>
+        Safer, more expressive code
+      </a>
+      <a href="#" class="block max-w-md w-full px-8 py-4 font-bold bg-pink-100 text-pink-700 border-t border-pink-200 hover:bg-white hover:text-pink-600 shadow-xl hover:shadow-lg">
+        <span class="text-3xl"><%= "Learn RxJS" %></span>
+        <br>
+        Reusable, testable data models
+      </a>
+    </div>
   </section>
 </div>