updated ui & fixed download release

src/scripts/config/constants.js

@@ -5,7 +5,6 @@ export const DISCORD_LOADER_SCRIPT = 'https://gitlab.com/vyla-entertainment/home
 export const DATA_PATHS = {
     partners: 'src/data/partners.json',
     reviews: 'src/data/reviews.json',
-    showcases: 'src/data/showcases.json',
 };
 
 export const DISCORD_INVITE_API = `https://discord.com/api/v10/invites/${DISCORD_INVITE_CODE}?with_counts=true`;

src/scripts/sections/hero.js

@@ -10,8 +10,6 @@ function initVideoColorExtraction() {
     const videos = document.querySelectorAll('.hero-atmosphere-video');
     if (videos.length === 0) return;
 
-    console.log('Video color extraction initialized, found', videos.length, 'videos');
-
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d', { willReadFrequently: true });
     let animationFrameId;
@@ -21,7 +19,6 @@ function initVideoColorExtraction() {
     function extractColors() {
         const video = videos[0];
         if (video.readyState < 2) {
-            console.log('Video not ready, readyState:', video.readyState);
             animationFrameId = requestAnimationFrame(extractColors);
             return;
         }
@@ -59,11 +56,8 @@ function initVideoColorExtraction() {
 
             frameCount++;
             if (frameCount % 30 === 0) {
-                console.log('Frame', frameCount, '- Extracted color:', currentVideoColor);
-                console.log('CSS variable set:', getComputedStyle(document.documentElement).getPropertyValue('--video-dominant-color'));
             }
         } catch (e) {
-            console.error('Error extracting video colors:', e);
         }
 
         animationFrameId = requestAnimationFrame(extractColors);
@@ -90,12 +84,10 @@ function initVideoColorExtraction() {
 
     videos.forEach(video => {
         video.addEventListener('pause', () => {
-            console.log('Video paused, stopping color extraction');
             cancelAnimationFrame(animationFrameId);
         });
 
         video.addEventListener('play', () => {
-            console.log('Video playing, starting color extraction');
             animationFrameId = requestAnimationFrame(extractColors);
         });
     });

src/scripts/services/showcases-service.js

@@ -1,12 +0,0 @@
-import { DATA_PATHS } from '../config/constants.js';
-import { fetchJsonArray } from './json-source.js';
-import { youtubeIdFromUrl } from '../utils/youtube.js';
-
-export async function getShowcaseVideos() {
-    const links = await fetchJsonArray(DATA_PATHS.showcases);
-    const videos = links
-        .map((url) => ({ url, id: youtubeIdFromUrl(url) }))
-        .filter((video) => video.id);
-    if (!videos.length) throw new Error('No valid showcase videos found');
-    return videos;
-}

src/styles/layout/nav.css

@@ -5,6 +5,7 @@
     padding: 1.25rem 0;
     z-index: var(--z-nav);
     width: 100%;
+    z-index: 1000;
 }
 
 .nav-container {
@@ -20,17 +21,25 @@
     font-weight: 700;
     font-size: 1.125rem;
     letter-spacing: -0.02em;
+    height: 50px;
+    width: 50px;
 }
 
 .nav-links {
     display: flex;
     gap: clamp(1.25rem, 3vw, 2.5rem);
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px) saturate(140%);
+    -webkit-backdrop-filter: blur(8px) saturate(140%);
+    padding: 1rem 1rem;
+    gap: 1.25rem;
+    border-radius: 100px;
 }
 
 .nav-links a {
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--color-fg-dim);
+    color: var(--color-fg);
     transition: color var(--duration-fast) ease;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
@@ -43,7 +52,7 @@
 
 @media (max-width: 768px) {
     .nav-links {
-        gap: 1.25rem;
+        padding: 0rem 1rem;
     }
 
     .nav-links a {
@@ -64,4 +73,4 @@
         display: inline-flex;
         align-items: center;
     }
-}
+}

src/styles/pages/other.css

@@ -1,3 +1,7 @@
+body {
+    background-color: #000000 !important;
+}
+
 .content-wrapper {
     width: min(900px, calc(100% - 2 * var(--content-padding-inline)));
     margin: 0 auto;

src/styles/sections/hero-content.css

@@ -9,8 +9,8 @@
 }
 
 .logo-image {
-    width: 100px;
-    height: 100px;
+    width: 60px;
+    height: 60px;
 }
 
 .logo-image img {