halloween

app/components/marketing/hero_component.html.erb

@@ -1,3 +1,4 @@
+<!-- 
 <div class="relative hero-gradient hidden lg:block">
   <div class="absolute inset-0">
     <div class="absolute inset-0 mix-blend-multiply" aria-hidden="true"></div>
@@ -12,3 +13,19 @@
     %>
   </div>
 </div>
+-->
+
+<div class="relative hidden lg:block"
+     style="background-image: url(https://res.cloudinary.com/drg9hguhu/image/upload/v1698409254/Copy_of_Unearthly-comics-banner-store_uvok9e.png)"
+>
+  <div class="absolute inset-0">
+    <div class="absolute inset-0 mix-blend-multiply" aria-hidden="true"></div>
+  </div>
+  <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
+    <%= link_to "Buy Spooktacular comics",
+                genres_path("horror"),
+                class: "font-horror mt-3 inline-block px-12 py-3 text-xl font-medium text-white bg-cx-purple border border-cx-purple rounded active:text-cx-purple hover:bg-white hover:text-cx-purple hover:border-white focus:outline-none focus:ring",
+                data: {"umami-event": "Hero-Comics-Link-Click"}
+    %>
+  </div>
+</div>

app/controllers/products_controller.rb

@@ -22,6 +22,27 @@ def show
           }
   end
 
+  def genres
+    @genre = Genre.find_by(slug: params[:grenre_slug])
+    @pagy, @products = pagy(@genre.products)
+    set_meta_tags title: "Buy Comics | #{@genre.name}",
+          description: "Buy Comics by Indie Creators",
+          keywords: "Comics, Indie comics",
+          twitter: {
+            card: "photo",
+            image: {
+              _: @products.first.issue_cover,
+              width: 200,
+              height: 200
+            }
+          },
+          og: {
+            title: :title,
+            site_name: :site,
+            image: @products.first.issue_cover
+          }
+  end
+
   def index
     onboarded_products = Product.where(store: Store.where(user: User.where.not(stripe_user_id: nil)))
     @pagy, @products = pagy(onboarded_products)

app/views/layouts/application.html.erb

@@ -10,7 +10,7 @@
     <%= javascript_importmap_tags %>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;900&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;900&family=Creepster&display=swap" />
     <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=64e2ab109dffd400137beb24&product=sop' async='async'></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
     <!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]-->

app/views/products/genres.html.erb

@@ -0,0 +1,22 @@
+<%= render(PageTitleComponent.new(title: "Browse Comics")) %>
+
+<section>
+  <div class="max-w-screen-xl px-4 py-8 mx-auto sm:px-6 sm:py-12 lg:px-8">
+    <header>
+      <h2 class="text-xl font-bold text-gray-900 sm:text-3xl">
+        <%= @genre.name %> Comics
+      </h2>
+    </header>
+
+    <ul class="grid gap-4 mt-4 sm:grid-cols-2 lg:grid-cols-4">
+      <% cache @products, expires_in: 60.seconds do %>
+        <% @products.each do |product| %>
+          <%= render(Products::CardComponent.new(product: product, number_of_products: 4)) %>
+        <% end %>
+      <% end %>
+    </ul>
+  </div>
+  <div class="text-center w-full">
+    <%== pagy_nav(@pagy) %>
+  </div>
+</section>

config/routes.rb

@@ -28,6 +28,7 @@
   get "about", to: "pages#about", as: "about"
   get "for-creators", to: "pages#for_creators", as: "for_creators"
   get "comics", to: "products#index", as: "comics"
+  get "comics/:grenre_slug", to: "products#genres", as: "genres"
   devise_for :users, controllers: { registrations: "users/registrations" }, path: "", path_names: {
     sign_in: "login",
     sign_out: "logout",

config/tailwind.config.js

@@ -11,7 +11,8 @@ module.exports = {
   ],
   theme: {
     fontFamily: {
-      body: ['Poppins', 'sans-serif']
+      body: ['Poppins', 'sans-serif'],
+      horror: ['Creepster']
     },
     extend: {
       spacing: {