Merge pull request #327 from joyofrails/feat/joyful-homepage-header

Add pencil and bokeh to the homempage

app/content/pages/index.html.erb

@@ -3,16 +3,23 @@ title: Joy of Rails
 ---
 
 <% articles = Page.all.published.order(published_at: :desc) %>
-<%= 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 %>
-    <p>
-      Interactive lessons in the framework that will make you fall in love with building web apps all over again 💜
-    </p>
-  </div>
-<% end %>
+<div class="bokeh__background">
+  <%= render Pages::Header::Container.new(class: "background-gradient") do |c| %>
+    <div class="grid grid-gap lg:grid-cols-3 lg:grid-flow-col">
+      <div class="hero grid grid-row-tight content-start lg:grid-column-start-1 lg:grid-column-end-3">
+        <%= c.title do %>
+          Experience the<br><span class="text-gradient">Joy of Ruby on Rails</span>
+        <% end %>
+        <p>
+          Interactive lessons in the framework that will make you fall in love with building web apps all over again 💜
+        </p>
+      </div>
+      <div class="grid grid-row-tight content-start lg:text-left lg:grid-column-start-3">
+        <%= vite_image_tag "images/content/index/pencil-transparent.webp", class: "m-auto w-1/2 lg:w-4/5" %>
+      </div>
+    </div>
+  <% end %>
+</div>
 <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) %>

app/javascript/css/application.css

@@ -22,6 +22,7 @@
 
 @import './components/anchors.scss';
 @import './components/article-content.css';
+@import './components/bokeh.css';
 @import './components/button.css';
 @import './components/callout.css';
 @import './components/clipboard-copy.css';

app/javascript/css/components/bokeh.css

@@ -0,0 +1,8 @@
+.bokeh__background {
+  background-image: url(~/images/content/index/bokeh-background.webp);
+
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center -250px;
+  background-repeat: no-repeat;
+}

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

@@ -1,5 +1,4 @@
 .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);
@@ -27,6 +26,24 @@
       font-weight: 300;
     }
   }
+
+  &.background-gradient {
+    background: radial-gradient(
+      ellipse at 1000% 50%,
+      rgba(0, 0, 0, 0) -10%,
+      var(--joy-background-header)
+    );
+  }
+}
+
+.dark {
+  .page-header {
+    --gradient-from: var(--joy-text);
+
+    &.background-gradient {
+      backdrop-filter: contrast(0.7);
+    }
+  }
 }
 
 .extend-page-header-bg {

app/javascript/css/utilities/tailwind-media.scss

@@ -114,6 +114,14 @@
     grid-column-start: 2;
   }
 
+  .lg\:grid-column-start-3 {
+    grid-column-start: 3;
+  }
+
+  .lg\:grid-column-end-3 {
+    grid-column-end: 3;
+  }
+
   .lg\:aspect-\[3\/2\] {
     aspect-ratio: 3 / 2;
   }
@@ -137,4 +145,8 @@
   .lg\:hidden {
     display: none;
   }
+
+  .lg\:w-4\/5 {
+    width: 80%;
+  }
 }

app/javascript/css/utilities/tailwind.css

@@ -292,6 +292,10 @@
   width: 32px;
 }
 
+.w-1\/2 {
+  width: 50%;
+}
+
 .w-full {
   width: 100%;
 }

app/views/components/pages/header.rb

@@ -20,8 +20,13 @@ def view_template(&)
     end
 
     class Container < ApplicationComponent
+      attr_reader :attributes
+      def initialize(**attributes)
+        @attributes = attributes
+      end
+
       def view_template(&)
-        header(class: "page-header") do
+        header(**mix(attributes, class: "page-header")) do
           div(class: "container header-content", &)
         end
       end