Add a homepage tagline

Author: rossta

app/content/pages/index.html.erb

@@ -3,16 +3,24 @@ title: Joy of Rails
 ---
 
 <% articles = Page.all.published.order(published_at: :desc) %>
-<section style="min-height: 51vh">
-  <div class="main-content container py-gap lg:py-3xl">
-    <% articles.take(3).zip(%w[left right].cycle).each do |(page, side)| %>
-      <%= render Pages::Summary.from_page(page, side: side) %>
+<%= render Pages::Header::Container.new do |c| %>
+  <div class="hero">
+    <%= c.title do %>
+      Experience the<br><span class="text-gradient">Joy of Ruby on Rails</span>
     <% end %>
-
-    <h3 class="mt-16">More articles</h3>
-    <%= render Pages::List.new(articles.drop(3).take(6)) %>
+    <p>
+      Interactive lessons to learn the framework that will make you fall in love with building web apps all over again 💜
+    </p>
   </div>
-</section>
+<% end %>
+<div class="main-content container py-gap lg:py-3xl">
+  <% articles.take(3).zip(%w[left right].cycle).each do |(page, side)| %>
+    <%= render Pages::Summary.from_page(page, side: side) %>
+  <% end %>
+
+  <h3 class="mt-16">More articles</h3>
+  <%= render Pages::List.new(articles.drop(3).take(6)) %>
+</div>
 <section>
   <%= render "users/newsletter_subscriptions/banner" %>
 </section>

app/javascript/css/components/page-header.css

@@ -1,9 +1,44 @@
 .page-header {
+  --gradient-from: rgb(86 55 251 / 85%);
+  --gradient-from: var(--joy-text-theme);
+  --gradient-to: rgb(255 0 0 / 85%);
+  --gradient-stops: var(--gradient-from), var(--gradient-to);
+
   background-color: var(--joy-background-header);
   padding-block-start: var(--grid-gutter);
   padding-block-end: var(--grid-gutter);
+
+  & .text-gradient {
+    color: var(--gradient-from);
+  }
+
+  & .hero {
+    max-width: 718px;
+
+    & h1 {
+      font-family: var(--sans-serif-thick);
+      font-weight: normal;
+      font-size: var(--step-5);
+    }
+
+    & p {
+      text-wrap: balance;
+      font-size: var(--step-1);
+      font-weight: 300;
+    }
+  }
 }
 
 .extend-page-header-bg {
   background-color: var(--joy-background-header);
 }
+
+@supports (background-clip: text) or (-webkit-background-clip: text) {
+  .page-header {
+    & .text-gradient {
+      background-clip: text;
+      -webkit-text-fill-color: rgba(0, 0, 0, 0);
+      background-image: linear-gradient(to right, var(--gradient-stops));
+    }
+  }
+}

app/javascript/css/config/theme.css

@@ -123,7 +123,7 @@
   --joy-text-subtle: var(--color-stone-700);
   --joy-text-heading: var(--joy-color-200);
   --joy-text-emphasis: var(--joy-color-500);
-  --joy-text-theme: var(--joy-text);
+  --joy-text-theme: var(--joy-color-400);
 
   --joy-link-primary: var(--joy-link-4);
   --joy-link-visited: var(--joy-link-3);

app/javascript/css/utilities/tailwind.css

@@ -1139,3 +1139,8 @@ focus\:ring-0:focus {
 .list-decimal {
   list-style-type: decimal;
 }
+
+.bg-clip-text {
+  -webkit-background-clip: text;
+  background-clip: text;
+}

app/views/components/pages/header.rb

@@ -26,12 +26,12 @@ def view_template(&)
         end
       end
 
-      def title(&)
-        h1(class: "mb-4", &)
+      def title(**attributes, &)
+        h1(**mix(attributes, class: "mb-4"), &)
       end
 
-      def description(&)
-        p(class: "description", &)
+      def description(**attributes, &)
+        p(**mix(attributes, class: "description"), &)
       end
 
       def actions(&)