1 files changed, 49 insertions, 44 deletions
diff --git a/app/views/pdfresources/_pdfresource.html.erb b/app/views/pdfresources/_pdfresource.html.erb
index 2e0d86c..7a2409e 100644
--- a/app/views/pdfresources/_pdfresource.html.erb
+++ b/app/views/pdfresources/_pdfresource.html.erb
@@ -1,55 +1,60 @@
-<div id="<%= dom_id pdfresource %>" class="w-[400px] p-3 border border-gray-500 bg-pink-300">
-  <p class="my-5">
-      <div>
-        <%= image_tag url_for(pdfresource.thumbnails.first), class: "object-cover"%>
-      </div>
-  </p>
-  
-  <p class="my-5">
-    <strong class="block font-bold mb-1"><%= pdfresource.name %></strong>
-  </p>
-  
-  <p class="my-5">
-    <%= pdfresource.card_description %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Stripe product:</strong>
-    <%= pdfresource.stripe_product_id %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Pdfs:</strong>
-    <% pdfresource.pdfs.each do |pdf| %>
+<div id="<%= dom_id pdfresource %>" class="w-[400px] rounded overflow-hidden shadow-lg border p-5">
+  <div>
+    <%= image_tag url_for(pdfresource.thumbnails.first), size: "500x100", class: "rounded-t-lg" %>
+  </div>
+
+  <div class="ps-2">
+    <p class="my-5">
+      <strong class="block font-bold mb-2"><%= pdfresource.name %></strong>
+    </p>
+
+    <div class="px-6 pt-4 pb-2">
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
+    </div>
+
+    <p class="my-5 text-gray-500 text-base">
+      <%= pdfresource.card_description %>
+    </p>
+
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Stripe product:</strong>
+      <%= pdfresource.stripe_product_id %>
+    </p>
+
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Pdfs:</strong>
+      <% pdfresource.pdfs.each do |pdf| %>
       <div><%= link_to pdf.filename, pdf %></div>
     <% end %>
-  </p>
+    </p>
 
 
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Price:</strong>
-    <%= pdfresource.price %>
-  </p>
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Price:</strong>
+      <%= pdfresource.price %>
+    </p>
 
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Age range:</strong>
-    <%= pdfresource.age_range %>
-  </p>
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Age range:</strong>
+      <%= pdfresource.age_range %>
+    </p>
 
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Curriculum:</strong>
-    <%= pdfresource.curriculum %>
-  </p>
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Curriculum:</strong>
+      <%= pdfresource.curriculum %>
+    </p>
 
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Feature slot:</strong>
-    <%= pdfresource.feature_slot %>
-  </p>
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Feature slot:</strong>
+      <%= pdfresource.feature_slot %>
+    </p>
 
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Description:</strong>
-    <%= pdfresource.description %>
-  </p>
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Description:</strong>
+      <%= pdfresource.description %>
+    </p></div>
 
   <p>
     <%= link_to "Show this pdfresource", pdfresource, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>