playlist section

app/views/home/_playlist_section_wide.erb

@@ -0,0 +1,49 @@
+  <section aria-labelledby="collections-heading" class="bg-gray-100 dark:bg-gray-900">
+
+    <div class="max-w-2xl mx-auto py-16 sm:py-24 lg:py-32 lg:max-w-none">
+      <div data-controller="scroll">
+
+        <div class="flex justify-between mx-auto container px-2 lg:px-0">
+          <h2 id="collections-playlists" class="text-2xl font-extrabold text-gray-900 dark:text-gray-100">
+            <%= title %>
+          </h2>
+        </div>
+
+        <div class="relative mx-2">
+          <div class="overflow-auto no-scrollbar relative">
+
+            <div class="container mx-auto p-4-">
+              <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+
+                <% Playlist.published.latests.where(playlist_type: playlist_type).order("release_date desc, id desc").limit(limit).each_with_index do |playlist, index| %>
+                  <div class=" <%= index == 0 ? "col-span-1 sm:col-span-2 sm:row-span-2 bg-brand-600" : "bg-default" %> ">
+                    <%= link_to playlist_path(playlist) do %>
+                      <div class="relative">
+                        <div class="relative w-full h-80 bg-default overflow-hidden sm:aspect-w-2 sm:aspect-h-1 sm:h-64 lg:aspect-w-1 lg:aspect-h-1">
+                          <%= image_tag(playlist.cover_url,
+                            class: "w-full h-full object-center object-cover"
+                          ) %>
+                        </div>
+                        <div class="space-y-1 text-sm text-left mt-2 p-2">
+                          <h3 class="font-medium leading-none">
+                              <%= playlist.title %>
+                          </h3>
+                          <p class="text-xs text-default dark:text-default/40">
+                            <%= t(:by, name: playlist.user.username) %>
+                          </p>
+                        </div>
+                      </div>
+                    <% end %>
+                  </div>
+                <% end %>
+
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+  </section>

app/views/home/index.html.erb

@@ -123,6 +123,13 @@
   %>
 
 
+  <%= render "home/playlist_section_wide", 
+    playlist_type: ["ep", "album"], 
+    limit: 10,
+    title: "EP & Album Releases"
+  %>
+
+
   <!-- Trending products -->
   <section aria-labelledby="trending-heading" class="bg-default">
 
@@ -160,12 +167,6 @@
 
   </section>
 
-  <%= render "home/playlist_section", 
-    playlist_type: ["ep", "album"], 
-    limit: 10,
-    title: "EP & Album Releases"
-  %>
-
   <%= render "home/playlist_section", 
     playlist_type: ["playlist"], 
     limit: 10,