today_ai_weather/app/views/home/index.html.erb

<div>
  <!-- 首屏展示区 -->
  <section class="h-screen-90 relative overflow-hidden">
    <% if @featured_arts.first&.image&.attached? %>
      <div class="absolute inset-0">
        <%= image_tag @featured_arts.first.image, class: "w-full h-full object-cover" %>
        <div class="absolute inset-0 bg-gradient-to-r from-base-100/90 to-base-100/50"></div>
      </div>
    <% end %>

    <div class="container mx-auto px-4 h-full flex items-center relative">
      <div class="max-w-2xl space-y-6">
        <h1 class="text-5xl md:text-6xl font-display font-bold leading-tight">
          Where Weather Meets<br>Artificial Intelligence
        </h1>
        <p class="text-xl text-base-content/70 font-sans">
          Experience weather through the lens of AI-generated art,
          bringing a new perspective to daily meteorological phenomena.
        </p>
        <%= link_to "Explore Cities", cities_path,
                    class: "btn btn-primary btn-lg mt-8 font-sans" %>
      </div>
    </div>
  </section>

  <!-- 最新天气艺术 -->
  <section class="container mx-auto px-4 py-16 space-y-12">
    <h2 class="text-3xl font-display font-bold text-center">Latest Weather Art</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <% @latest_arts.each do |art| %>
        <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300">
          <figure class="relative aspect-[4/3] overflow-hidden">
            <% if art.image.attached? %>
              <%= image_tag art.image, class: "w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" %>
            <% end %>
          </figure>
          <div class="card-body">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="card-title font-display"><%= art.city.name %></h3>
                <p class="text-base-content/70">
                  <%= art.weather_date.strftime("%B %d, %Y") %>
                </p>
              </div>
              <div class="text-right">
                <div class="text-2xl font-bold"><%= art.temperature %>°C</div>
                <div class="text-sm text-base-content/70"><%= art.description %></div>
              </div>
            </div>
            <div class="card-actions justify-end mt-4">
              <%= link_to "View Details", city_weather_art_path(art.city, art),
                          class: "btn btn-primary btn-outline" %>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </section>
</div>
<div class="text-center mt-12 mb-12">
  <%= link_to arts_path, class: "btn btn-primary btn-lg gap-2" do %>
    View All Weather Arts
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
    </svg>
  <% end %>
</div>