button play + black index

pages/compilations/[id].vue

@@ -142,6 +142,9 @@ a:hover {
 nav>button:first-child {
   border-left: none;
 }
+nav>button[index="11"] {
+  display: none;
+}
 
 .button--close {
   position: fixed;

pages/index.vue

@@ -27,7 +27,7 @@
         </button>
       </figure>
     </section>
-    <section class="flex justify-center">
+    <section class="flex justify-center relative bg-black">
       <div class="flex gap-[2%] flex-wrap max-w-7xl justify-center">
         <h2 class="w-full my-12 text-white pt-6 text-3xl capitalize text-center font-bold tracking-widest">compilations</h2>
         <compilationsList />

public/play.svg

@@ -1,12 +1,64 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 60 60" xml:space="preserve">
-<g>
-	<path d="M45.563,29.174l-22-15c-0.307-0.208-0.703-0.231-1.031-0.058C22.205,14.289,22,14.629,22,15v30
-		c0,0.371,0.205,0.711,0.533,0.884C22.679,45.962,22.84,46,23,46c0.197,0,0.394-0.059,0.563-0.174l22-15
-		C45.836,30.64,46,30.331,46,30S45.836,29.36,45.563,29.174z M24,43.107V16.893L43.225,30L24,43.107z"/>
-	<path d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M30,58C14.561,58,2,45.439,2,30
-		S14.561,2,30,2s28,12.561,28,28S45.439,58,30,58z"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   fill="#000000"
+   height="800px"
+   width="800px"
+   version="1.1"
+   id="Capa_1"
+   viewBox="0 0 60 60"
+   xml:space="preserve"
+   sodipodi:docname="play.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs2">
+	
+	
+</defs><sodipodi:namedview
+   id="namedview2"
+   pagecolor="#505050"
+   bordercolor="#eeeeee"
+   borderopacity="1"
+   inkscape:showpageshadow="0"
+   inkscape:pageopacity="0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#505050"
+   inkscape:zoom="0.26793938"
+   inkscape:cx="-141.82313"
+   inkscape:cy="227.66344"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+
+<g
+   id="g4"
+   transform="translate(9.7969913,-22.06049)"><circle
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.453259;stroke-miterlimit:2.3;stroke-dasharray:0.0906518, 0.498583;stroke-opacity:1"
+     id="path3"
+     cx="20.203009"
+     cy="52.06049"
+     r="30" /><path
+     sodipodi:type="star"
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:4.97313;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2.3;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+     id="path4"
+     inkscape:flatsided="false"
+     sodipodi:sides="3"
+     sodipodi:cx="-27.198643"
+     sodipodi:cy="-1.6298811"
+     sodipodi:r1="22.807875"
+     sodipodi:r2="11.403937"
+     sodipodi:arg1="1.2575201"
+     sodipodi:arg2="2.3047177"
+     inkscape:rounded="0"
+     inkscape:randomized="0"
+     d="M -20.169779,20.067912 -34.836847,6.838154 -49.503915,-6.3916032 l 18.790841,-6.0871748 18.790839,-6.087174 -4.123772,19.31693243 z"
+     inkscape:transform-center-x="-3.9722134"
+     inkscape:transform-center-y="0.040241052"
+     transform="matrix(0.21341126,-0.77168628,0.66871372,0.24627362,26.125303,31.432826)" /></g></svg>