Text and design improvements

Author: RoyalIcing

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

@@ -19,7 +19,8 @@
 <div class="bg-purple-100 text-purple-700">
   <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 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">
       <%#= "Learn the techniques that have worked best across a range of component systems." %>
@@ -35,25 +36,40 @@
 </div>
 <% end %>
 
-<div class="bg-purple-800">
-  <section class="pt-12 pb-12 flex items-center justify-center">
-    <a href="/swiftui" class="inline-block mx-1 mb-3 px-8 py-4 text-3xl font-bold bg-orange-100 text-orange-700 border border-orange-800 hover:bg-orange-600 hover:text-white rounded shadow-xl">
-      <%= "Learn SwiftUI" %>
+<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>
   </section>
-  <section class="pt-12 pb-12 flex items-center justify-center">
-    <a href="#" class="inline-block mx-1 mb-3 px-8 py-4 text-3xl font-bold bg-red-100 text-red-700 border border-red-800 hover:bg-red-600 hover:text-white rounded shadow-xl">
-      <%= "Learn Combine" %>
+  <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="pt-12 pb-12 flex items-center justify-center">
-    <a href="#" class="inline-block mx-1 mb-3 px-8 py-4 text-3xl font-bold bg-blue-100 text-blue-700 border border-blue-800 hover:bg-blue-600 hover:text-white rounded shadow-xl">
-      <%= "Learn React" %>
+  <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="pt-12 pb-12 flex items-center justify-center">
-    <a href="#" class="inline-block mx-1 mb-3 px-8 py-4 text-3xl font-bold bg-indigo-100 text-indigo-700 border border-indigo-800 hover:bg-indigo-600 hover:text-white rounded shadow-xl">
-      <%= "Learn TypeScript" %>
+  <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>
+  </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>
 </div>

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

@@ -17,69 +17,69 @@
 </div>
 
 <div class="bg-white">
-  <section class="container pt-8 pb-16">
+  <section class="container pt-8 pb-16 text-2xl">
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Atomic design</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Atomic design</h2>
       <p>
         Learn how to name components. Apply the single responsibility principle. Find the indivisible component units, and compose them together into larger molecules.
       </p>
     </article>
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Styling approaches</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Styling approaches</h2>
       <p>
         Extract common styles. Define a style guide. How do you keep styles consistent?
       </p>
     </article>
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Reusability trade-offs</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Reusability trade-offs</h2>
       <p>
         What sort of components should be resuable? How granular should you go?
       </p>
     </article>
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Pattern libraries</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Pattern libraries</h2>
       <p>
         When do you need a pattern library? Who are they for? How should you manage them?
       </p>
     </article>
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Testing components</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Testing components</h2>
       <p>
         Unit test components. Test the behaviours that matter first. Use type-safety to remove impossible states.
       </p>
     </article>
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Testing data flow</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Testing data flow</h2>
       <p>
         Test your data flow in isolation. Use test-driven design. Mock APIs and other sources.
       </p>
     </article>
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Composable component patterns</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Composable component patterns</h2>
       <p>
         Components are <em>really</em> composable. Can we reduce boilerplate? What useful component utilities can we make?
       </p>
     </article>
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Handling errors</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Handling errors</h2>
       <p>
         Handle errors from publishers. What and when should you show users?
       </p>
     </article>
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Caching data</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Caching data</h2>
       <p>
         Learn how to name components. Apply the single responsibility principle. Find the atomic units, and compose them together.
       </p>
     </article>
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Improving performance in the right areas</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Improving performance in the right areas</h2>
       <p>
         Learn when you should focus on performance. Measure to be informed. Apply optimization techniques.
       </p>
     </article>
     <article class="mb-8">
-      <h2 class="mb-2 text-2xl leading-normal text-purple-800">Automating repetitive tasks</h2>
+      <h2 class="mb-2 text-4xl leading-normal text-purple-800">Automating repetitive tasks</h2>
       <p>
         Produce screenshots across many devices.
       </p>