[Improve] Add a cycling rainbow background to the homepage

app/assets/stylesheets/application.css

@@ -7,3 +7,33 @@ body {
   margin: 0;
   padding: 0;
 }
+
+.rainbow-cycle-bg {
+  background: linear-gradient(
+    135deg,
+    #ff0000,
+    #ff7f00,
+    #ffff00,
+    #00ff00,
+    #0000ff,
+    #4b0082,
+    #8b00ff,
+    #ff0000
+  );
+  background-size: 400% 400%;
+  animation: rainbow-cycle 12s linear infinite;
+}
+
+@keyframes rainbow-cycle {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}

app/views/home/index.html.erb

@@ -1,6 +1,6 @@
 <%= turbo_stream_from "counter" %>
 
-<main class="flex flex-col items-center justify-center min-h-screen bg-red-500 p-8">
+<main class="rainbow-cycle-bg flex flex-col items-center justify-center min-h-screen p-8">
   <div class="text-center mb-8">
     <h1 class="text-5xl font-bold text-red-600 mb-2">Hello, World!</h1>
     <p class="text-gray-500">Rails 8 Full Stack Demo</p>

test/controllers/home_controller_test.rb

@@ -0,0 +1,10 @@
+require "test_helper"
+
+class HomeControllerTest < ActionDispatch::IntegrationTest
+  test "root page uses the rainbow background" do
+    get root_url
+
+    assert_response :success
+    assert_includes response.body, "rainbow-cycle-bg"
+  end
+end