<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Primary Meta Tags -->
    <title>Infinite Canvas File Manager for macOS - Desktop Canvas</title>
    <meta name="title" content="Infinite Canvas File Manager for macOS - Desktop Canvas">
    <meta name="description" content="Organize your files with spatial freedom. Desktop Canvas is an infinite canvas file manager that reimagines how you work with files on macOS.">
    <meta name="keywords" content="file manager, macOS, infinite canvas, spatial file organization, desktop organization, productivity app">
    <meta name="author" content="Desktop Canvas">
    <meta name="robots" content="index, follow">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://desktopcanvas.app/">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://desktopcanvas.app/">
    <meta property="og:title" content="Infinite Canvas File Manager for macOS - Desktop Canvas">
    <meta property="og:description" content="Organize your files with spatial freedom. Desktop Canvas is an infinite canvas file manager that reimagines how you work with files on macOS.">
    <meta property="og:image" content="https://desktopcanvas.app/assets/images/og-image.png">
    <meta property="og:site_name" content="Desktop Canvas">
    <meta property="og:locale" content="en_US">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://desktopcanvas.app/">
    <meta name="twitter:title" content="Infinite Canvas File Manager for macOS - Desktop Canvas">
    <meta name="twitter:description" content="Organize your files with spatial freedom. Desktop Canvas is an infinite canvas file manager that reimagines how you work with files on macOS.">
    <meta name="twitter:image" content="https://desktopcanvas.app/assets/images/og-image.png">

    <!-- Article specific meta (for blog posts) -->
    

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">

    <!-- Preconnect for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://tally.so">

    <!-- Preload critical resources -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/main.css">

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "Desktop Canvas",
        "description": "Organize your files with spatial freedom. Desktop Canvas is an infinite canvas file manager that reimagines how you work with files on macOS.",
        "url": "https://desktopcanvas.app",
        "logo": "https://desktopcanvas.app/assets/images/logo.png",
        "sameAs": []
    }
    </script>

    
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "Desktop Canvas",
        "operatingSystem": "macOS",
        "applicationCategory": "UtilitiesApplication",
        "description": "Organize your files with spatial freedom. Desktop Canvas is an infinite canvas file manager that reimagines how you work with files on macOS.",
        "offers": {
            "@type": "Offer",
            "availability": "https://schema.org/PreOrder",
            "price": "0",
            "priceCurrency": "USD"
        }
    }
    </script>
    
</head>
<body>
    <nav>
    <div class="container">
        <a href="/" class="logo">
            <div class="logo-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="3" width="18" height="18" rx="2"/>
                    <path d="M3 9h18"/>
                    <path d="M9 21V9"/>
                </svg>
            </div>
            Desktop Canvas
        </a>
        <div class="nav-links">
            <!-- <a href="/blog/">Blog</a> -->
            <a href="/#waitlist" class="nav-cta">Join Waitlist</a>
        </div>
    </div>
</nav>


    <main>
        <section class="hero">
    <div class="badge">
        <span class="badge-dot"></span>
        Coming soon for macOS
    </div>
    <h1>Organize files with<br>spatial freedom</h1>
    <p class="hero-subtitle">
        Desktop Canvas is an infinite canvas file manager that lets you arrange,
        group, and visualize your files without boundaries. Pan and zoom freely
        across unlimited space. Import your existing Finder layout or start fresh.
    </p>

    <button class="waitlist-button" data-tally-open="dWaN1N" data-tally-layout="modal" data-tally-width="400" data-tally-auto-close="3000">
        Join Waitlist
    </button>
    <p class="form-note">Be the first to know when we launch. No spam, ever.</p>

    <div class="app-preview">
        <div class="app-preview-window">
            <div class="window-header">
                <div class="window-dot red"></div>
                <div class="window-dot yellow"></div>
                <div class="window-dot green"></div>
            </div>
            <div class="window-content" style="position: relative;">
                <div class="mock-region" style="top: 20px; left: 20px; width: 200px; height: 160px; background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5);">
                    <span class="mock-region-label">Projects</span>
                </div>
                <div class="mock-region" style="top: 20px; right: 20px; width: 180px; height: 140px; background: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.5);">
                    <span class="mock-region-label">Documents</span>
                </div>

                <div class="mock-file" style="position: absolute; top: 60px; left: 40px;">
                    <div class="mock-icon folder">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                    </div>
                    <span class="mock-label">flutter</span>
                </div>
                <div class="mock-file" style="position: absolute; top: 60px; left: 130px;">
                    <div class="mock-icon code">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg>
                    </div>
                    <span class="mock-label">main.dart</span>
                </div>
                <div class="mock-file" style="position: absolute; top: 60px; right: 60px;">
                    <div class="mock-icon file">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/></svg>
                    </div>
                    <span class="mock-label">report.pdf</span>
                </div>
                <div class="mock-file" style="position: absolute; top: 200px; left: 60px;">
                    <div class="mock-icon image">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
                    </div>
                    <span class="mock-label">screenshot.png</span>
                </div>
                <div class="mock-file" style="position: absolute; top: 200px; left: 180px;">
                    <div class="mock-icon folder">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                    </div>
                    <span class="mock-label">archive</span>
                </div>
                <div class="mock-file" style="position: absolute; top: 200px; right: 40px;">
                    <div class="mock-icon code">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg>
                    </div>
                    <span class="mock-label">config.json</span>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="features">
    <div class="container">
        <div class="section-header">
            <h2>Designed for how you think</h2>
            <p>Traditional file managers force you into rigid hierarchies. Desktop Canvas gives you the freedom to organize spatially.</p>
        </div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><path d="M11 8v6"/><path d="M8 11h6"/></svg>
                </div>
                <h3>Pan and Zoom</h3>
                <p>Spread your files across an unlimited workspace. Zoom in for details, zoom out for the big picture. Navigate with smooth trackpad gestures.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
                </div>
                <h3>Visual Regions</h3>
                <p>Group related files with colored regions. Label them, resize them, and create visual hierarchies that make sense to you.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
                </div>
                <h3>Import from Finder</h3>
                <p>Start with your existing desktop layout. Desktop Canvas reads your Finder positions and recreates them perfectly.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
                <h3>Auto-Save</h3>
                <p>Your layout is automatically saved as you work. Come back anytime and everything is exactly where you left it.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                </div>
                <h3>Quick Actions</h3>
                <p>Right-click any file for instant access to Finder, Terminal, Warp, or even Claude AI. Everything is one click away.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22 6 12 13 2 6"/></svg>
                </div>
                <h3>Native macOS</h3>
                <p>Built specifically for macOS with native performance. Feels right at home alongside your other apps.</p>
            </div>
        </div>
    </div>
</section>

<!-- Blog section hidden for now
<section class="blog" id="blog">
    <div class="container">
        <div class="section-header">
            <h2>Blog</h2>
            <p>Thoughts on file management, productivity, and building Desktop Canvas.</p>
        </div>

        <div class="blog-grid">
            
        </div>
    </div>
</section>
-->

<section class="cta" id="waitlist">
    <div class="container">
        <h2>Ready to reimagine your desktop?</h2>
        <p>Join the waitlist and be among the first to experience Desktop Canvas.</p>

        <button class="waitlist-button" data-tally-open="dWaN1N" data-tally-layout="modal" data-tally-width="400" data-tally-auto-close="3000">
            Join Waitlist
        </button>
        <p class="form-note">Be the first to know when we launch.</p>
    </div>
</section>

    </main>

    <footer>
    <div class="container">
        <p>Made with care for macOS users</p>
    </div>
</footer>


    <!-- Tally popup script (deferred for performance) -->
    <script defer src="https://tally.so/widgets/embed.js"></script>

    <script>
        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    e.preventDefault();
                    target.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>
