<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/lovable-uploads/07acbd65-b611-44b7-9e17-604470e9217c.png" type="image/png">
    <link rel="apple-touch-icon" href="/lovable-uploads/07acbd65-b611-44b7-9e17-604470e9217c.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="google-site-verification" content="JNoFZhUGpwVhWL9ZSSt57xU-gB0pByTADonHNidAJLc" />

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

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#8B5CF6">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Soundae">
    
    <!-- Suppress browser feature policy warnings for features we don't use -->
    <meta http-equiv="Permissions-Policy" content="vr=(), ambient-light-sensor=(), battery=(), payment=()">

    <!-- Preconnect to critical origins -->
    <link rel="preconnect" href="https://tmrtjnqjnawjjqvuyihg.supabase.co" crossorigin>
    <link rel="dns-prefetch" href="https://tmrtjnqjnawjjqvuyihg.supabase.co">

    <!-- 2026 typography: Syne (display) + Plus Jakarta Sans (body) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <title>Soundae - See Your Sound | AI Music Visualization</title>
    <meta name="description" content="Transform your music into stunning visual art instantly. Upload any song and create album covers, posters, and social media content with AI-powered sound visualization. Start free." />
    <meta name="author" content="Soundae" />

    <!-- Critical CSS for above-the-fold content - improves FCP -->
    <style>
      :root {
        --background: 40 20% 98%;
        --foreground: 224 15% 8%;
        --primary: 271 91% 65%;
        --muted-foreground: 220 9% 46%;
      }
      body {
        margin: 0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: hsl(var(--background));
        color: hsl(var(--foreground));
        -webkit-font-smoothing: antialiased;
      }
      .min-h-screen { min-height: 100vh; }
      .flex { display: flex; }
      .items-center { align-items: center; }
      .justify-center { justify-content: center; }
      .text-center { text-align: center; }
      #root { min-height: 100vh; }
    </style>

    <!-- Google tag (gtag.js) - async loaded -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-2C5WJ53GT1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-2C5WJ53GT1');
    </script>

    <meta property="og:title" content="Soundae - See Your Sound" />
    <meta property="og:description" content="Transform your music into stunning visual art. Create album covers, posters, and social media content with AI." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://soundae.com/" />
    <meta property="og:image" content="https://tmrtjnqjnawjjqvuyihg.supabase.co/storage/v1/object/public/soundae-social//soundae-social.jpg" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@soundaeapp" />
    <meta name="twitter:image" content="https://tmrtjnqjnawjjqvuyihg.supabase.co/storage/v1/object/public/soundae-social//soundae-social.jpg" />
    <script type="module" crossorigin src="/assets/index-BAh5T9Vu.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-core-YL0DgEhB.js">
    <link rel="modulepreload" crossorigin href="/assets/query-vendor-DnyUmaeW.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-vendor--BulIq_u.js">
    <link rel="modulepreload" crossorigin href="/assets/charts-vendor-BIekCQX1.js">
    <link rel="modulepreload" crossorigin href="/assets/markdown-vendor-DhNIp-PL.js">
    <link rel="modulepreload" crossorigin href="/assets/syntax-vendor-Dh6N81gt.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-core-DaFh-apf.js">
    <link rel="modulepreload" crossorigin href="/assets/react-router-BUztj-gw.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-vendor-By4VpjJJ.js">
    <link rel="modulepreload" crossorigin href="/assets/motion-vendor-Dgzl-uuA.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-secondary-cEo2OH83.js">
    <link rel="stylesheet" crossorigin href="/assets/index-CS1tDrY2.css">
  <script defer src="/~flock.js" data-proxy-url="/~api/analytics"></script><script defer src="/__l5e/events.js" data-artifact-kind="preview_commit_sha" data-artifact-id="d9beaec4ea8681172c1ca79c9963484a3adaea09" data-commit-sha="d9beaec4ea8681172c1ca79c9963484a3adaea09" data-context-token="v1.eyJwcm9qZWN0X2lkIjoiNGEwNzZiZTEtMWU1OC00ZjdmLThkNDktZTg2ZmNhNThhNGVjIiwiYXJ0aWZhY3Rfa2luZCI6InByZXZpZXdfY29tbWl0X3NoYSIsImFydGlmYWN0X2lkIjoiZDliZWFlYzRlYTg2ODExNzJjMWNhNzljOTk2MzQ4NGEzYWRhZWEwOSIsImNvbW1pdF9zaGEiOiJkOWJlYWVjNGVhODY4MTE3MmMxY2E3OWM5OTYzNDg0YTNhZGFlYTA5IiwiZXhwIjoxNzgxMTE0ODgxfQ.1kM3_fJbJ5Pqy8DIVEQHLjaIMn0UTqev1qtKcZ6eNOU" data-replay="rrweb" data-replay-sample-rate="0.1" data-replay-url="/__l5e/replay" data-replay-script-url="/__l5e/rrweb-record.js?__l5e_v=0.1.2-error-event-hardening"></script><meta name="twitter:title" content="Soundae - See Your Sound"><meta name="twitter:description" content="Transform your music into stunning visual art. Create album covers, posters, and social media content with AI."></head>

  <body>
    <div id="root"></div>
    <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
    
  </body>
</html>
