added mac support

index.html

@@ -119,7 +119,7 @@
         "@type": "SoftwareApplication",
         "name": "Vyla Home",
         "applicationCategory": "MultimediaApplication",
-        "operatingSystem": "Windows",
+        "operatingSystem": "Windows, macOS",
         "offers": {
             "@type": "Offer",
             "price": "0",
@@ -318,20 +318,49 @@
                 </div>
 
                 <div class="hero-cta-row reveal">
-                    <a class="hero-cta hero-cta-dark" id="hero-copy-script-btn" href="#" target="_blank"
+                    <div class="download-expandable" id="hero-download-expandable" aria-expanded="false">
-                        rel="noopener noreferrer">
+                        <button class="hero-cta hero-cta-dark" id="hero-download-btn">
-                        Download Release v0.0.0
+                            <span class="download-btn-text">Download v0.0.0</span>
-                    </a>
+                            <svg class="dropdown-arrow" width="17" height="17" viewBox="0 0 24 24" fill="currentColor"
+                                aria-hidden="true">
+                                <path d="M7 10l5 5 5-5z" />
+                            </svg>
+                        </button>
+                        <div class="download-options" id="hero-download-options" aria-hidden="true">
+                            <a href="#" class="download-option" id="hero-windows-download">
+                                <svg class="windows-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
+                                    aria-hidden="true">
+                                    <path
+                                        d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.949-1.951" />
+                                </svg>
+                                <span>Windows v0.0.0</span>
+                            </a>
+                            <a href="#" class="download-option" id="hero-mac-download">
+                                <svg class="mac-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
+                                    aria-hidden="true">
+                                    <path
+                                        d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
+                                </svg>
+                                <span>Mac v0.0.0</span>
+                            </a>
+                        </div>
+                    </div>
 
-                    <a class="hero-cta hero-cta-light" href="https://gitlab.com/vyla-entertainment/home/-/releases"
+                    <a class="hero-cta hero-cta-unsure" href="https://gitlab.com/vyla-entertainment/home/-/releases"
                         target="_blank" rel="noopener noreferrer">
                         View Releases
                     </a>
                 </div>
 
                 <script>
-                    async function setupLatestDownload() {
+                    async function setupExpandableDownload(expandableId, btnId, optionsId, windowsId, macId) {
-                        const btn = document.getElementById("hero-copy-script-btn");
+                        const expandable = document.getElementById(expandableId);
+                        const downloadBtn = document.getElementById(btnId);
+                        const downloadOptions = document.getElementById(optionsId);
+                        const windowsDownload = document.getElementById(windowsId);
+                        const macDownload = document.getElementById(macId);
+
+                        if (!expandable || !downloadBtn || !downloadOptions || !windowsDownload || !macDownload) return;
 
                         try {
                             const response = await fetch(
@@ -344,16 +373,66 @@
                             const version = release.tag_name;
                             const fileVersion = version.replace(/^v/, "");
 
-                            btn.href =
+                            const windowsAsset = release.assets?.links?.find(link =>
-                                `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
+                                link.name?.toLowerCase().endsWith(".exe")
+                            );
+                            const macAsset = release.assets?.links?.find(link =>
+                                link.name?.toLowerCase().endsWith(".dmg")
+                            );
+
+                            const btnText = downloadBtn.querySelector('.download-btn-text');
+                            if (btnText) {
+                                btnText.textContent = `Download ${version}`;
+                            }
+
+                            if (windowsAsset?.url) {
+                                windowsDownload.href = windowsAsset.url;
+                                windowsDownload.querySelector('span').textContent = `Windows ${version}`;
+                            } else {
+                                windowsDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
+                                windowsDownload.querySelector('span').textContent = `Windows ${version}`;
+                            }
+
+                            if (macAsset?.url) {
+                                macDownload.href = macAsset.url;
+                                macDownload.querySelector('span').textContent = `Mac ${version}`;
+                            } else {
+                                macDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_aarch64.dmg`;
+                                macDownload.querySelector('span').textContent = `Mac ${version}`;
+                            }
+
+                            downloadBtn.addEventListener('click', (e) => {
+                                e.preventDefault();
+                                const isExpanded = expandable.getAttribute('aria-expanded') === 'true';
+                                expandable.setAttribute('aria-expanded', !isExpanded);
+                                downloadOptions.setAttribute('aria-hidden', isExpanded);
+                                downloadOptions.classList.toggle('show', !isExpanded);
+                            });
 
-                            btn.textContent = `Download Release ${version}`;
                         } catch (error) {
-                            btn.textContent = "Download Latest Release";
+                            const btnText = downloadBtn.querySelector('.download-btn-text');
+                            if (btnText) {
+                                btnText.textContent = "Download Latest Release";
+                            }
+                            windowsDownload.querySelector('span').textContent = "Windows (Latest)";
+                            macDownload.querySelector('span').textContent = "Mac (Latest)";
                         }
                     }
 
-                    setupLatestDownload();
+                    setupExpandableDownload("hero-download-expandable", "hero-download-btn", "hero-download-options", "hero-windows-download", "hero-mac-download");
+
+                    document.addEventListener('click', (e) => {
+                        const expandables = document.querySelectorAll('.download-expandable');
+                        expandables.forEach(expandable => {
+                            const btn = expandable.querySelector('button');
+                            const options = expandable.querySelector('.download-options');
+                            if (btn && options && !expandable.contains(e.target)) {
+                                expandable.setAttribute('aria-expanded', 'false');
+                                options.setAttribute('aria-hidden', 'true');
+                                options.classList.remove('show');
+                            }
+                        });
+                    });
                 </script>
 
                 <div class="hero-preview-wrap reveal">
@@ -363,7 +442,14 @@
                             <path
                                 d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.949-1.951" />
                         </svg>
-                        <span>Available for Windows 10 / 11 (64-bit)</span>
+                        <span>Windows 10 / 11 (64-bit)</span>
+                        <span class="platform-divider">•</span>
+                        <svg class="mac-icon" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"
+                            aria-hidden="true">
+                            <path
+                                d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
+                        </svg>
+                        <span>macOS (Apple Silicon)</span>
                     </div>
                 </div>
 
@@ -532,53 +618,37 @@
             <div class="container cta-banner-content reveal">
                 <h2 id="cta-heading" class="cta-banner-title">Try Vyla Home today</h2>
                 <p class="cta-banner-subtitle">Your Entertainment. Zero Servers Attached.</p>
-                <a class="hero-cta hero-cta-light" id="cta-copy-script-btn" href="#" target="_blank"
+                <div class="download-expandable" id="cta-download-expandable" aria-expanded="false">
-                    rel="noopener noreferrer">Download Now</a>
+                    <button class="hero-cta hero-cta-light" id="cta-download-btn">
+                        <span class="download-btn-text">Download Now</span>
+                        <svg class="dropdown-arrow" width="17" height="17" viewBox="0 0 24 24" fill="currentColor"
+                            aria-hidden="true">
+                            <path d="M7 10l5 5 5-5z" />
+                        </svg>
+                    </button>
+                    <div class="download-options" id="cta-download-options" aria-hidden="true">
+                        <a href="#" class="download-option" id="cta-windows-download">
+                            <svg class="windows-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
+                                aria-hidden="true">
+                                <path
+                                    d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.949-1.951" />
+                            </svg>
+                            <span>Windows v0.0.0</span>
+                        </a>
+                        <a href="#" class="download-option" id="cta-mac-download">
+                            <svg class="mac-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
+                                aria-hidden="true">
+                                <path
+                                    d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
+                            </svg>
+                            <span>Mac v0.0.0</span>
+                        </a>
+                    </div>
+                </div>
             </div>
 
             <script>
-                async function setupLatestDownload() {
+                setupExpandableDownload("cta-download-expandable", "cta-download-btn", "cta-download-options", "cta-windows-download", "cta-mac-download");
-                    const buttons = [
-                        document.getElementById("hero-copy-script-btn"),
-                        document.getElementById("cta-copy-script-btn")
-                    ];
-
-                    try {
-                        const project = "vyla-entertainment%2Fhome";
-
-                        const response = await fetch(
-                            `https://gitlab.com/api/v4/projects/${project}/releases/permalink/latest`
-                        );
-
-                        if (!response.ok) {
-                            throw new Error(`Failed to fetch latest release: ${response.status}`);
-                        }
-
-                        const release = await response.json();
-
-                        const asset = release.assets?.links?.find(link =>
-                            link.name?.toLowerCase().endsWith(".exe")
-                        );
-
-                        if (!asset?.url) {
-                            throw new Error("No .exe asset found in latest release");
-                        }
-
-                        buttons.forEach(button => {
-                            if (button) {
-                                button.href = asset.url;
-                            }
-                        });
-                    } catch (error) {
-                        buttons.forEach(button => {
-                            if (button) {
-                                button.textContent = "Download Latest Release";
-                            }
-                        });
-                    }
-                }
-
-                setupLatestDownload();
             </script>
         </section>
 

src/scripts/animations/glass-surface.js

@@ -104,7 +104,6 @@ class GlassSurface {
                 this.liquidGlassEnabled = parsed.liquidGlassEnabled !== false;
             }
         } catch (e) {
-            console.warn('Failed to read glass settings:', e);
         }
     }
 
@@ -420,7 +419,7 @@ function initLiquidGlass() {
         '.nav-links',
         '.discord-copy-bar',
         '.platform-pill',
-        '.hero-cta-light',
+        '.hero-cta-unsure',
         '#navIslandMain',
         '#navbarSearchToggle',
         '.hero-icon-group',

src/scripts/animations/light-rays.js

@@ -37,7 +37,6 @@ export function initLightRays(container, options = {}) {
     const raysSpeed = options.raysSpeed ?? 1.8;
     const lightSpread = options.lightSpread ?? 0.7;
     const isMobile = window.innerWidth < 768;
-    console.log('Mobile detection:', isMobile, 'window.innerWidth:', window.innerWidth);
     const baseRayLength = options.rayLength ?? 0.6;
     const rayLength = isMobile ? baseRayLength * 3.0 : baseRayLength * 1.8;
     const pulsating = Boolean(options.pulsating);
@@ -50,7 +49,6 @@ export function initLightRays(container, options = {}) {
     const mouseInfluence = options.mouseInfluence ?? 0.12;
     const noiseAmount = options.noiseAmount ?? 0.08;
     const distortion = options.distortion ?? 0.04;
-    console.log('Ray length:', rayLength, 'Fade distance:', fadeDistance, 'Glow falloff factor:', glowFalloffFactor);
 
     const mouse = { x: 0.5, y: 0.5 };
     const smoothMouse = { x: 0.5, y: 0.5 };

src/styles/components/buttons.css

@@ -26,7 +26,7 @@
 
 .hero-cta-row {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
     gap: 1rem;
     margin-top: 1.5rem;
@@ -85,9 +85,91 @@
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
+.hero-cta-unsure {
+    position: relative;
+    background: transparent;
+    color: var(--color-fg);
+    border-radius: 50px !important;
+    padding: 0.75rem 1.75rem !important;
+    font-weight: 500;
+    font-size: 0.875rem;
+    text-decoration: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
 @media (hover: none) and (pointer: coarse) {
     .btn {
         min-height: 48px;
         min-width: 48px;
     }
+}
+
+.download-expandable {
+    position: relative;
+    display: inline-block;
+    background: #000;
+    border-radius: var(--radius-pill);
+    overflow: hidden;
+}
+
+.download-expandable[aria-expanded="true"] {
+    border-radius: 10px;
+}
+
+.download-expandable .hero-cta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding-right: 1rem;
+    background: transparent !important;
+    border: none;
+    margin: 0;
+    color: #fff;
+}
+
+.download-btn-text {
+    flex: 1;
+}
+
+.dropdown-arrow {
+    transition: transform 0.3s ease;
+    flex-shrink: 0;
+}
+
+.download-expandable[aria-expanded="true"] .dropdown-arrow {
+    transform: rotate(180deg);
+}
+
+.download-options {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 0;
+    background: #000;
+}
+
+.download-options.show {
+    max-height: 200px;
+    opacity: 1;
+}
+
+.download-option {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    color: #fff;
+    text-decoration: none;
+    transition: background 0.2s ease;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.download-option:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.download-option svg {
+    flex-shrink: 0;
 }

src/styles/components/pills.css

@@ -97,4 +97,28 @@
         width: 28px;
         height: 28px;
     }
+}
+
+.platform-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-pill);
+    font-size: 0.8125rem;
+    color: var(--color-fg-dim);
+}
+
+.platform-pill svg {
+    flex-shrink: 0;
+}
+
+.platform-divider {
+    color: var(--color-fg-dim);
+    opacity: 0.5;
+}
+
+.mac-icon {
+    display: block;
 }

src/styles/sections/cta-banner.css

@@ -58,4 +58,28 @@
     font-size: 0.9375rem;
     color: var(--color-fg-dim);
     margin-bottom: 0.5rem;
+}
+
+.cta-banner-content .download-expandable {
+    background: #fff;
+}
+
+.cta-banner-content .download-expandable .hero-cta {
+    color: #000;
+}
+
+.cta-banner-content .download-options {
+    background: #fff;
+}
+
+.cta-banner-content .download-option {
+    color: #000;
+}
+
+.cta-banner-content .download-option:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.cta-banner-content .download-option svg {
+    color: #000;
 }

src/styles/sections/features.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     gap: clamp(3.5rem, 8vw, 6rem);
-    width: 70%;
+    width: 60%;
 }
 
 .feature-block {