@page "/"

<PageTitle>SilverLabs - Innovation Gateway</PageTitle>

<div class="main-content visible">
    <header class="header">
        <img src="logo.png" alt="SilverLabs Logo" class="logo">
    </header>

    <main class="main">
        <h1 class="title">Welcome to SilverLabs</h1>
        <p class="subtitle">Your Innovation Gateway</p>

        <div class="gateway-grid">
            <a href="https://silverdesk.silverlabs.uk" class="gateway-card">
                <div class="card-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                        <line x1="12" y1="17" x2="12.01" y2="17"></line>
                    </svg>
                </div>
                <h2 class="card-title">Help Desk</h2>
                <p class="card-description">Support & Assistance</p>
            </a>

            <a href="https://appstore.silverlabs.uk" class="gateway-card">
                <div class="card-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="7" height="7"></rect>
                        <rect x="14" y="3" width="7" height="7"></rect>
                        <rect x="14" y="14" width="7" height="7"></rect>
                        <rect x="3" y="14" width="7" height="7"></rect>
                    </svg>
                </div>
                <h2 class="card-title">App Store</h2>
                <p class="card-description">Applications & Tools</p>
            </a>

            <a href="https://cloud.silverlabs.uk" class="gateway-card">
                <div class="card-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
                    </svg>
                </div>
                <h2 class="card-title">Cloud</h2>
                <p class="card-description">Storage & Collaboration</p>
            </a>

            <a href="/sdk" class="gateway-card">
                <div class="card-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="16 18 22 12 16 6"></polyline>
                        <polyline points="8 6 2 12 8 18"></polyline>
                    </svg>
                </div>
                <h2 class="card-title">SDK</h2>
                <p class="card-description">Developer Resources</p>
            </a>

            <a href="/developers" class="gateway-card">
                <div class="card-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                </div>
                <h2 class="card-title">Developers</h2>
                <p class="card-description">Join the Team</p>
            </a>
        </div>
    </main>

    <footer class="footer">
        <p>&copy; 2025 SilverLabs. All rights reserved.</p>
    </footer>
</div>