AI Startup & SaaS Product Launch Landing Page

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Synthetix AI - NextGen SaaS Landing</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Inter:wght@400;500;700&display=swap");
        body { font-family: "Inter", sans-serif; }
        .font-outfit { font-family: "Outfit", sans-serif; }
    </style>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen transition-colors duration-300">

    <nav class="max-w-6xl mx-auto px-6 py-6 flex items-center justify-between">
        <span class="font-outfit font-extrabold text-2xl text-slate-900 dark:text-white">Synthetix<span class="text-purple-500">.ai</span></span>
        <div class="flex items-center gap-6 text-xs font-semibold text-slate-600 dark:text-slate-400">
            <a href="#" class="hover:text-purple-500 transition">Features</a>
            <a href="#" class="hover:text-purple-500 transition">Pricing</a>
            <button class="px-4 py-2 rounded-xl bg-purple-600 hover:bg-purple-500 text-white font-bold transition">Start Free Trial</button>
        </div>
    </nav>

    <main class="max-w-6xl mx-auto px-6 py-16 text-center space-y-12">
        <div class="space-y-6 max-w-3xl mx-auto">
            <span class="px-3.5 py-1.5 rounded-full bg-purple-500/10 text-purple-600 dark:text-purple-400 text-xs font-bold uppercase tracking-wider border border-purple-500/20">
                🚀 Powered by GPT-4o & Claude 3.5
            </span>
            <h1 class="font-outfit font-extrabold text-4xl sm:text-6xl text-slate-900 dark:text-white leading-tight">
                Automate Your Workflow with <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500">Autonomous AI Agents</span>
            </h1>
            <p class="text-slate-600 dark:text-slate-400 text-base sm:text-lg max-w-xl mx-auto">
                Deploy intelligent AI workforce to handle customer support, automated data extraction, and content generation in minutes.
            </p>
            <div class="flex items-center justify-center gap-4 pt-4">
                <button class="px-6 py-3 rounded-2xl bg-purple-600 hover:bg-purple-500 text-white font-extrabold text-sm shadow-lg shadow-purple-500/30 transition">Get Started Free</button>
                <button class="px-6 py-3 rounded-2xl bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-slate-200 font-bold text-sm transition">Watch Demo ↗</button>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 pt-12 text-left">
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-3 shadow-sm">
                <span class="text-3xl">🤖</span>
                <h3 class="font-outfit font-bold text-lg text-slate-900 dark:text-white">Smart Agents</h3>
                <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">Autonomous AI bots trained on your custom documentation and API endpoints.</p>
            </div>
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-3 shadow-sm">
                <span class="text-3xl">⚡</span>
                <h3 class="font-outfit font-bold text-lg text-slate-900 dark:text-white">Sub-Second Speed</h3>
                <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">Streaming token responses powered by ultra-low latency edge infrastructure.</p>
            </div>
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-3 shadow-sm">
                <span class="text-3xl">🔒</span>
                <h3 class="font-outfit font-bold text-lg text-slate-900 dark:text-white">Enterprise Privacy</h3>
                <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">Zero data retention policy ensuring your proprietary data is never used for training.</p>
            </div>
        </div>
    </main>

</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file