<div> <!-- 首屏展示区 --> <section class="h-screen-90 relative overflow-hidden"> <% if @latest_arts.first&.image&.attached? %> <div class="absolute inset-0"> <%= image_tag @latest_arts.first.webp_image.processed, 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> <%= render 'home/arts', arts: @latest_arts %> <h2 class="text-3xl font-display font-bold text-center">Popular Weather Art</h2> <%= render 'home/arts', arts: @popular_arts %> <!-- <h2 class="text-3xl font-display font-bold text-center">Random Weather Art</h2>--> <%#= render 'home/arts', arts: @random_arts %> </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>