assets-copy-in-browse-template.diff

diff --git a/src/Controller/VinylController.php b/src/Controller/VinylController.php
index 04a4634..bf69489 100644
--- a/src/Controller/VinylController.php
+++ b/src/Controller/VinylController.php
@@ -36,8 +36,6 @@ class VinylController extends AbstractController
             $title = 'All Genres';
         }
 
-        return new Response($title);
-
-        //return new Response('Breakup vinyl? Angsty 90s rock? Browse the collection!');
+        return $this->render('vinyl/browse.html.twig');
     }
 }
diff --git a/templates/vinyl/browse.html.twig b/templates/vinyl/browse.html.twig
new file mode 100644
index 0000000..1a79e24
--- /dev/null
+++ b/templates/vinyl/browse.html.twig
@@ -0,0 +1,47 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+<div class="container">
+    <h1>Browse Vinyl Mixes</h1>
+
+    <h2 class="mt-5 mb-4">Filter by Genre</h2>
+    <ul class="genre-list ps-0 mt-2 mb-3">
+        <li class="d-inline">
+            <a class="btn btn-primary btn-sm" href="#">Pop</a>
+        </li>
+        <li class="d-inline">
+            <a class="btn btn-primary btn-sm" href="#">Rock</a>
+        </li>
+        <li class="d-inline">
+            <a class="btn btn-primary btn-sm" href="#">Heavy Metal</a>
+        </li>
+    </ul>
+
+    <div>
+        <h2 class="mt-5">Mixes</h2>
+        <div class="row">
+            <div class="col col-md-4">
+                <div class="mixed-vinyl-container p-3 text-center">
+                    <img src="https://via.placeholder.com/300" data-src="https://via.placeholder.com/300" alt="Square placeholder img">
+                    <p class="mt-2"><strong>PB & Jams</strong></p>
+                    <span>14 Tracks</span> | <span>Rock</span>
+                </div>
+            </div>
+            <div class="col col-md-4">
+                <div class="mixed-vinyl-container p-3 text-center">
+                    <img src="https://via.placeholder.com/300" data-src="https://via.placeholder.com/300" alt="Square placeholder img">
+                    <p class="mt-2"><strong>Put a Hex on your Ex</strong></p>
+                    <span>8 Tracks</span> | <span>Heavy Metal</span>
+                </div>
+            </div>
+            <div class="col col-md-4">
+                <div class="mixed-vinyl-container p-3 text-center">
+                    <img src="https://via.placeholder.com/300" data-src="https://via.placeholder.com/300" alt="Square placeholder img">
+                    <p class="mt-2"><strong>Spice Grills - Summer Tunes</strong></p>
+                    <span>10 Tracks</span> | <span>Pop</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}