Change landing text

Author: RoyalIcing

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

@@ -2,18 +2,18 @@
 
 heading = "Great apps start with great components"
 heading = "Want to learn more of the why than the how?"
-heading = "Want to learn more of the why than the how?"
+heading = raw("Improve the user experience <em>and</em> developer experience of your components")
 
-subhead = "Learn more of the why than the how."
+subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the latest browser features."
 
 %>
 
-<div class="text-white" style="<%= header_styles(2) %>">
+<div class="text-white" style="<%= header_styles(3) %>">
   <section class="container px-6 pt-12 pb-8">
     <h1 class="mx-auto max-w-4xl px-2 text-3xl sm:text-4xl md:text-6xl text-center leading-tight font-bold text-shadow">
       <%= heading %>
     </h1>
-    <p class="mt-6 mb-8 mx-auto max-w-3xl text-2xl sm:text-3xl md:text-4xl text-center leading-snug italic text-red-100 text-shadow">
+    <p class="mt-6 mb-8 mx-auto max-w-3xl text-2xl sm:text-3xl md:text-4xl text-center leading-snug italic text-gray-100 text-shadow">
       <%= subhead %>
     </p>
     <p hidden class="mx-auto py-2 max-w-4xl text-base md:text-xl text-center">

apps/components_guide_web/lib/components_guide_web/views/landing_view.ex

@@ -71,6 +71,20 @@ defmodule ComponentsGuideWeb.LandingView do
     "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
   end
 
+  def header_styles(3) do
+    color = {:lab, 30, -20, -80} |> Styling.to_css()
+
+    l = 20
+
+    gradient = Styling.linear_gradient("150grad", [
+      {:lab, l + 20, -40, -40},
+      {:lab, l, -20, -80},
+      {:lab, l - 10, 20, -80},
+    ])
+
+    "background-color: #{color}; background-image: #{gradient};"
+  end
+
   def sections_styles(:cool) do
     color = {:lab, 30, -20, -80} |> Styling.to_css()