From ec413c04f4ccc6c75433791579ec85686ea93b96 Mon Sep 17 00:00:00 2001
From: jboix <jboix@users.noreply.github.com>
Date: Fri, 10 May 2024 13:39:58 +0000
Subject: [PATCH] =?UTF-8?q?Deploy=20preview=20for=20PR=206=20=F0=9F=9B=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pr-preview/pr-6/index.html | 64 +++++++++++++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 7 deletions(-)
diff --git a/pr-preview/pr-6/index.html b/pr-preview/pr-6/index.html
index 41c544d..93ef9c0 100644
--- a/pr-preview/pr-6/index.html
+++ b/pr-preview/pr-6/index.html
@@ -2,18 +2,68 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Package Index</title>
+    <title>Package Showcase</title>
+    <link rel="stylesheet" href="https://unpkg.com/open-props">
     <style>
-        body { font-family: Arial, sans-serif; }
-        ul { list-style-type: none; padding: 0; }
-        li { margin: 10px 0; }
-        a { text-decoration: none; color: blue; }
+         body {
+            font-family: var(--font-sans);
+            background-color: var(--gray-9); /* Dark background for body */
+            color: var(--gray-1); /* Light text color */
+            margin: 0 auto;
+            padding: var(--size-3);
+            max-width: var(--size-sm);
+        }
+        header {
+            color: var(--gray-3); /* Lightest text color */
+            padding-bottom: var(--size-2);
+            text-align: center;
+            font-size: var(--font-size-1); /* Larger text for the header */
+            margin: var(--size-2) auto;
+        }
+        ul {
+            list-style-type: none;
+            padding: 0;
+            margin: var(--size-2) auto;
+            background-color: var(--gray-8); /* Slightly lighter dark background for contrast */
+            box-shadow: var(--shadow-3); /* Prominent shadow for 3D effect */
+            border-radius: var(--radius-2);
+        }
+        li {
+            border-bottom: 1px solid var(--gray-7);
+            margin: 0;
+            transition: background-color 0.3s;
+        }
+        li:first-child {
+            border-radius: var(--radius-2) var(--radius-2) 0 0;
+        }
+        li:last-child {
+            border-radius: 0 0 var(--radius-2) var(--radius-2);
+        }
+        li:only-child {
+            border-radius: var(--radius-2);
+        }
+        li:hover {
+            background-color: var(--gray-6); /* Slightly lighter on hover for interactive feel */
+        }
+        a {
+            display: block;
+            padding: var(--size-3) var(--size-4);
+            text-decoration: none;
+            color: var(--gray-4); /* Subtle blue color for links */
+            transition: color 0.3s;
+            font-size: var(--font-size-2); /* Standard text size for links */
+        }
+        a:hover {
+            color: var(--gray-12); /* Slightly brighter blue on hover */
+        }
     </style>
 </head>
 <body>
-    <h1>Available Packages</h1>
+    <header>
+        <h1>Pillarbox Extensions</h1>
+    </header>
     <ul>
-    <li><a href="pillarbox-playlist/index.html">pillarbox-playlist</a></li>,<li><a href="skip-button/index.html">skip-button</a></li>
+        <li><a href="pillarbox-playlist/index.html">pillarbox-playlist</a></li><li><a href="skip-button/index.html">skip-button</a></li>
     </ul>
 </body>
 </html>
