<!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
