Add sweet gradients

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/templates/layout/app.html.eex

@@ -16,8 +16,9 @@
         <nav role="navigation" class="flex-grow px-16 text-lg">
           <ul class="flex flex-row justify-around">
             <li><a href="/swiftui" class="block py-4 font-bold"><%= "SwiftUI + Combine" %></a></li>
-            <li><a href="/react+typescript" class="block py-4 font-bold"><%= "React + TypeScript" %></a></li>
-            <li><a href="/rxjs" class="block py-4 font-bold">RxJS</a></li>
+            <li><a href="/rxjs" class="block py-4 font-bold"><%= "React + TS + RxJS" %></a></li>
+            <% if false do %><li><a href="/react+typescript" class="block py-4 font-bold"><%= "React + TypeScript" %></a></li><% end %>
+            <li><a href="/css+typescript" class="block py-4 font-bold"><%= "CSS + TypeScript" %></a></li>
           </ul>
         </nav>
       </section>

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

@@ -1,11 +1,12 @@
-<%= if false do %>
-<div class="bg-purple-700 text-white">
+<%= 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%);">
   <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 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">
-      <%= "Learn the techniques that have worked best across a range of component systems." %>
+      <%= "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">
       Topics include:
@@ -16,7 +17,7 @@
   </section>
 </div>
 <% else %>
-<div class="bg-purple-100 text-purple-700">
+<div class="bg-purple-100 text-purple-700" style="background: linear-gradient(-60deg, #006DB1 -20%, #AB29CF 50%, #00C6FF 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." %>

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

@@ -1,15 +1,15 @@
-<div class="bg-yellow-500 text-white">
+<div class="text-white" style="background: linear-gradient(-60deg, rgba(206,60,0,1) 0%, rgba(255,0,147,1) 50%, rgba(255,187,50,1) 100%);">
   <section class="container px-6 pt-12 pb-12">
     <h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
       <div class="pb-4 flex items-center justify-center">
         <img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=96 height=96>
-        <span class="mr-2 text-3xl">♥️</span>
+        <span class="mr-2 text-3xl">❤️</span>
         <img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=96 height=96>
       </div>
-      <%= "Learn React & TypeScript" %>
+      <%= "Learn React, RxJS & TypeScript" %>
     </h1>
     <p class="my-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-yellow-100 text-shadow">
-      <%= "Express clear components more robustly with the live feedback of TypeScript." %>
+      <%= "Express clear components and data flow more robustly with the live feedback of TypeScript." %>
     </p>
     <p class="py-2 text-xl text-center">
       Topics include:

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

@@ -1,4 +1,4 @@
-<div class="bg-purple-900 text-white">
+<div class="bg-purple-600 text-white" style="background: linear-gradient(-60deg, #006DB1 -20%, #AB29CF 50%, #00C6FF 120%);">
   <section class="container px-6 pt-12 pb-12">
     <h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
       <img class="inline-block mr-2" src="<%= Routes.static_path(@conn, "/images/swiftui-96x96_2x.png") %>" alt="SwiftUI logo" width=96 height=96>