Nav and copy improvements

Author: RoyalIcing

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

@@ -1,18 +1,20 @@
 <header class="bg-gray-900 text-white">
   <section class="container flex flex-col md:flex-row items-center">
-    <a href="/" class="block py-4 text-right text-base font-bold italic uppercase text-red-100 leading-tight tracking-wide">
+    <a href="/" class="block px-3 py-4 text-right text-base font-bold italic uppercase text-red-100 leading-tight tracking-wide hover:bg-gray-800">
       <span>Components <br>·Guide</span>
     </a>
-    <nav role="navigation" class="flex-grow sm:pl-8 lg:px-16 text-base md:text-xl">
+    <nav role="navigation" class="flex-grow sm:pl-8 lg:px-16 text-base md:text-base">
       <ul class="flex flex-col md:flex-row justify-around pt-2 pb-2">
-        <li><a href="/lessons" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:border-red-400"><%= "Lessons" %></a></li>
-        <li><a href="/links" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:border-red-400"><%= "Links" %></a></li>
-        <li><a href="/about" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:border-red-400"><%= "About" %></a></li>
+        <li><a href="/react+typescript" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "React + TypeScript" %></a></li>
+        <li><a href="/swiftui" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "SwiftUI + Combine" %></a></li>
+        <li><a href="/links" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "Community Resources" %></a></li>
+        <% if false do %>
         <li class="py-1">
           <a href="/signin/github" class="inline-block md:block px-4 py-2 md:py-2 font-bold text-white bg-red-700 rounded" style="background: linear-gradient(0deg, #E0003C 0%, #FF493F 50%, #FF584A 100%);">
             <%= "Sign in with GitHub" %>
           </a>
         </li>
+        <% end %>
         <% if false do %>
           <li><a href="/swiftui" class="block py-4 font-bold"><%= "SwiftUI + Combine" %></a></li>
           <li><a href="/rxjs" class="block py-4 font-bold"><%= "React + TS + RxJS" %></a></li>

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

@@ -1,7 +1,7 @@
 <div class="text-white bg-purple-600" style2="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">
-      <%= "Links to Talks, Articles & Courses" %>
+      <%= "Links to Articles, Talks & Courses" %>
     </h1>
     <div class="mt-8 px-4 text-center">
       <input class="mb-4 md:mr-2 block w-full md:inline-block md:w-2/5 p-2 text-2xl leading-tight text-black rounded-lg md:mb-0 border-4 border-white focus:border-purple-300">
@@ -14,7 +14,7 @@
 
 <div class="bg-white">
   <section class="container pt-8 text-2xl italic text-purple-600">
-    <p>Fave the links you recommend. Create playlists and share with others.</p>
+    <p>Coming soon: Fave the links you recommend. Create playlists and share with others.</p>
   </section>
 
   <section class="container pt-8 pb-16 text-2xl">

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

@@ -1,12 +1,12 @@
-<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%);">
+<div class="text-white" style="background: linear-gradient(-60deg, rgba(206,60,0,1) 0%, rgba(255,40,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>
         <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, RxJS & TypeScript" %>
+      <%= "Learn React & 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 and data flow more robustly with the live feedback of TypeScript." %>