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

    <!-- Critical: Preconnect to required origins FIRST for reduced latency -->
    <link rel="preconnect" href="https://egabtngqamrdoowsnrce.supabase.co" crossorigin />
    <link rel="dns-prefetch" href="https://egabtngqamrdoowsnrce.supabase.co" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://i.ibb.co" crossorigin />
    <link rel="preconnect" href="https://i.postimg.cc" crossorigin />
    <link rel="dns-prefetch" href="https://i.ibb.co" />
    <link rel="dns-prefetch" href="https://i.postimg.cc" />
    <link rel="dns-prefetch" href="https://storage.googleapis.com" />
    <link rel="preconnect" href="https://storage.googleapis.com" crossorigin />

    <!-- Cache control for HTML only -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <title>StrangerAE | The Ultimate Editing Resource Hub</title>
    <meta name="description" content="The Ultimate Editing Resource Hub. Exclusive access to software, plugins, scripts, and assets curatad for the Stranger AE community.">
    <meta name="keywords" content="strangerae, Editinghub, editing resource, editing assets, video editing plugins, after effects scripts">
    <meta name="author" content="StrangerAE" />
    <link rel="canonical" href="https://stranger.co.in" />

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "StrangerAE",
        "alternateName": ["Stranger AE", "Stranger Editing Hub"],
        "url": "https://stranger.co.in",
        "description": "The Ultimate Editing Resource Hub",
        "potentialAction": {
          "@type": "SearchAction",
          "target": {
            "@type": "EntryPoint",
            "urlTemplate": "https://stranger.co.in/search?q={search_term_string}"
          },
          "query-input": "required name=search_term_string"
        }
      }
    </script>

    <meta property="og:site_name" content="StrangerAE" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://stranger.co.in" />
    <meta property="og:image" content="https://storage.googleapis.com/gpt-engineer-file-uploads/UTLS22kZmRW89Kgo0cqhSSsDtxo2/social-images/social-1767268180969-ChatGPT Image Jan 1, 2026, 05_19_17 PM.png">
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@StrangerAE" />
    <meta name="twitter:image" content="https://storage.googleapis.com/gpt-engineer-file-uploads/UTLS22kZmRW89Kgo0cqhSSsDtxo2/social-images/social-1767268180969-ChatGPT Image Jan 1, 2026, 05_19_17 PM.png">
    <meta property="og:title" content="StrangerAE | The Ultimate Editing Resource Hub">
    <meta name="twitter:title" content="StrangerAE | The Ultimate Editing Resource Hub">
    <meta property="og:description" content="The Ultimate Editing Resource Hub. Exclusive access to software, plugins, scripts, and assets curatad for the Stranger AE community.">
    <meta name="twitter:description" content="The Ultimate Editing Resource Hub. Exclusive access to software, plugins, scripts, and assets curatad for the Stranger AE community.">

    <!-- Critical inline CSS for instant render - above-the-fold styles -->
    <style>
      *,*::before,*::after{box-sizing:border-box}
      :root{--background:0 0% 0%;--foreground:220 14% 90%;--primary:270 70% 55%;--accent:330 80% 55%;--muted:240 10% 15%;--muted-foreground:220 14% 70%;--card:240 10% 6%;--border:240 10% 20%;--radius:1rem;--glass-bg:rgba(10,10,15,0.5);--glass-border:rgba(255,255,255,0.08)}
      body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
      #root{min-height:100vh;display:flex;flex-direction:column}
      .glass-card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius);position:relative;overflow:hidden}
      .gradient-text{background-image:linear-gradient(90deg,hsl(270 80% 75%),hsl(330 80% 65%),hsl(240 80% 70%));-webkit-background-clip:text;background-clip:text;color:transparent}
      .gradient-btn{background-image:linear-gradient(to right,hsl(270 70% 45%),hsl(270 70% 55%),hsl(330 80% 45%));box-shadow:0 4px 15px 0 hsla(280,80%,60%,0.4);color:white;text-decoration:none}
      @keyframes fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
      .animate-fade-in{animation:fade-in 0.3s ease-out forwards}
      /* Aurora background with subtle animation */
      .aurora-container-static{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
      .aurora-shape{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.4;animation:aurora-float 20s ease-in-out infinite}
      .shape1{width:600px;height:600px;background:radial-gradient(circle,hsl(270 80% 50%/0.5),transparent);top:-200px;left:-200px;animation-delay:0s}
      .shape2{width:500px;height:500px;background:radial-gradient(circle,hsl(330 80% 45%/0.4),transparent);bottom:-150px;right:-150px;animation-delay:-7s}
      .shape3{width:400px;height:400px;background:radial-gradient(circle,hsl(240 80% 55%/0.35),transparent);top:30%;left:50%;animation-delay:-14s}
      @keyframes aurora-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,20px) scale(1.05)}}
      /* Static header */
      .static-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:0.75rem 1.5rem}
      .static-header-inner{width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:9999px;padding:0.5rem 1.5rem}
      .static-logo{font-size:1.5rem;font-weight:900}
      .static-nav{display:flex;gap:1.5rem}
      .static-nav a{color:hsl(var(--muted-foreground));text-decoration:none;font-size:0.875rem}
      /* Static hero */
      .static-hero{padding-top:8rem;text-align:center}
      .static-hero h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:900;line-height:1.1;margin:0 0 1rem}
      .static-hero p{color:hsl(var(--muted-foreground));font-size:1.125rem;max-width:600px;margin:0 auto 2rem}
      .static-btn{display:inline-flex;align-items:center;justify-content:center;padding:0.875rem 2rem;border-radius:9999px;font-weight:600}
      /* Static skeleton cards with shimmer */
      .static-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;margin:3rem auto 0;padding:0 1.5rem}
      @media(max-width:1024px){.static-cards{grid-template-columns:repeat(2,1fr)}}
      @media(max-width:640px){.static-cards{grid-template-columns:1fr}.static-nav{display:none}}
      .skel-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius);padding:1.25rem;overflow:hidden}
      .skel-row{display:flex;gap:1rem}
      .skel-icon{width:48px;height:48px;border-radius:0.5rem;background:linear-gradient(90deg,hsl(var(--muted)) 0%,hsl(var(--muted)/0.5) 50%,hsl(var(--muted)) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}
      .skel-content{flex:1}
      .skel-title{height:20px;width:70%;background:linear-gradient(90deg,hsl(var(--muted)) 0%,hsl(var(--muted)/0.5) 50%,hsl(var(--muted)) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:0.75rem}
      .skel-line{height:12px;background:linear-gradient(90deg,hsl(var(--muted)/0.6) 0%,hsl(var(--muted)/0.3) 50%,hsl(var(--muted)/0.6) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:0.5rem}
      .skel-line:last-child{width:60%}
      @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
      /* Smooth fade-out transition for static shell */
      #static-shell{transition:opacity 0.2s ease-out}
      #static-shell.fade-out{opacity:0;pointer-events:none}
      /* Hide static shell once React root has content */
      #root:not(:empty)~#static-shell{opacity:0;pointer-events:none}
    </style>

    <!-- Defer non-critical font loading with font-display swap -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" fetchpriority="low">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"></noscript>
    <script type="module" crossorigin src="/assets/index-ClNRoaOM.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-WV5vYA_E.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-ui-BW8hYiFA.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-supabase-B-L7aLEJ.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DdQKHhX0.css">
  </head>

  <body>
    <div id="root"></div>
    
    <!-- Static HTML shell for instant visual - hidden once React hydrates -->
    <div id="static-shell" aria-hidden="true">
      <!-- Aurora background -->
      <div class="aurora-container-static">
        <div class="aurora-shape shape1"></div>
        <div class="aurora-shape shape2"></div>
        <div class="aurora-shape shape3"></div>
      </div>
      
      <!-- Static header -->
      <header class="static-header">
        <div class="static-header-inner">
          <div class="static-logo"><span class="gradient-text">StrangerAE</span></div>
          <nav class="static-nav" id="static-nav">
            <!-- Placeholder nav - will be replaced by dynamic fetch -->
            <a href="#">Platforms</a>
            <a href="#">Software</a>
            <a href="#">Plugins</a>
            <a href="#">Scripts</a>
          </nav>
        </div>
      </header>
      
      <!-- Fetch dynamic navigation from database with localStorage cache -->
      <script>
        (function(){
          var nav=document.getElementById('static-nav');
          if(!nav)return;
          var cacheKey='static_nav_links';
          var renderNav=function(links){nav.innerHTML=links.map(function(l){return '<a href="#">'+l.title+'</a>'}).join('')};
          // Try localStorage cache first for instant render
          try{var cached=localStorage.getItem(cacheKey);if(cached){var links=JSON.parse(cached);if(links&&links.length>0)renderNav(links)}}catch(e){}
          // Fetch fresh data and update cache
          var url='https://egabtngqamrdoowsnrce.supabase.co/rest/v1/header_nav_links?is_active=eq.true&order=display_order.asc';
          fetch(url,{headers:{'apikey':'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVnYWJ0bmdxYW1yZG9vd3NucmNlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjY5MzQ5MDQsImV4cCI6MjA4MjUxMDkwNH0.4eAxQnURAsOH2ypDUdAvQF4MvOfq6uJqfQUAH1KZt48'}})
            .then(function(r){return r.json()})
            .then(function(links){
              if(links&&links.length>0){
                renderNav(links);
                try{localStorage.setItem(cacheKey,JSON.stringify(links))}catch(e){}
              }
            }).catch(function(){});
        })();
      </script>
      
      <!-- Static hero -->
      <main class="static-hero" style="position:relative;z-index:1">
        <h1><span class="gradient-text">The Ultimate</span><br>Editing Resource Hub</h1>
        <p>Exclusive access to all the software, plugins, scripts, and assets you need. Curated for the Stranger AE community.</p>
        <a href="#" class="static-btn gradient-btn">Windows Resources</a>
        
        <!-- Skeleton cards -->
        <div class="static-cards">
          <div class="skel-card"><div class="skel-row"><div class="skel-icon"></div><div class="skel-content"><div class="skel-title"></div><div class="skel-line"></div><div class="skel-line"></div></div></div></div>
          <div class="skel-card"><div class="skel-row"><div class="skel-icon"></div><div class="skel-content"><div class="skel-title"></div><div class="skel-line"></div><div class="skel-line"></div></div></div></div>
          <div class="skel-card"><div class="skel-row"><div class="skel-icon"></div><div class="skel-content"><div class="skel-title"></div><div class="skel-line"></div><div class="skel-line"></div></div></div></div>
          <div class="skel-card"><div class="skel-row"><div class="skel-icon"></div><div class="skel-content"><div class="skel-title"></div><div class="skel-line"></div><div class="skel-line"></div></div></div></div>
          <div class="skel-card"><div class="skel-row"><div class="skel-icon"></div><div class="skel-content"><div class="skel-title"></div><div class="skel-line"></div><div class="skel-line"></div></div></div></div>
          <div class="skel-card"><div class="skel-row"><div class="skel-icon"></div><div class="skel-content"><div class="skel-title"></div><div class="skel-line"></div><div class="skel-line"></div></div></div></div>
        </div>
      </main>
    </div>
    
    <!-- Main app script - type module for tree shaking -->
  <!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "89f292bc4e0d4d62a21e28be2f9b1781"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>