Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Avafinity: Create hyperrealistic AI avatar videos with infinite variations. Scale your message globally while staying authentic and transparent."> | |
| <title>Avafinity - Infinite AI Avatar Videos</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>∞</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="antialiased bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 text-slate-800 dark:text-slate-100"> | |
| <nav-bar></nav-bar> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"> | |
| <div class="absolute inset-0 bg-gradient-to-tr from-amber-400/10 via-transparent to-sky-400/10"></div> | |
| <div class="absolute top-1/3 left-10 w-64 h-64 bg-amber-400/20 rounded-full blur-3xl animate-pulse"></div> | |
| <div class="absolute bottom-1/3 right-10 w-96 h-96 bg-sky-400/20 rounded-full blur-3xl animate-pulse delay-1000"></div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="text-center max-w-4xl mx-auto"> | |
| <div class="mb-8 flex justify-center"> | |
| <div class="relative w-32 h-16"> | |
| <div class="absolute inset-0 bg-amber-400 rounded-full blur-xl opacity-50"></div> | |
| <svg class="relative w-full h-full" viewBox="0 0 100 50"> | |
| <path d="M10 25 Q25 5 50 25 T90 25" stroke="url(#gradient)" stroke-width="4" fill="none" class="animate-pulse"/> | |
| <defs> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#f59e0b" /> | |
| <stop offset="100%" stop-color="#0ea5e9" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> | |
| <span class="bg-gradient-to-r from-amber-500 to-sky-500 bg-clip-text text-transparent">Infinite Hosts</span><br> | |
| <span class="text-3xl md:text-5xl text-slate-600 dark:text-slate-300">One Platform</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-slate-600 dark:text-slate-300 mb-8 font-light"> | |
| Create hyperrealistic AI avatar videos with practically infinite variations of speakers, voices, and styles. Match every message, audience, and brand perfectly. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12"> | |
| <a href="studio.html" class="group px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white rounded-full font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 flex items-center gap-2"> | |
| Start Creating | |
| <i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| <a href="#demo" class="group px-8 py-4 bg-transparent border-2 border-sky-500 text-sky-600 hover:bg-sky-500 hover:text-white rounded-full font-semibold transition-all duration-300 flex items-center gap-2"> | |
| <i data-feather="play" class="w-5 h-5"></i> | |
| See Demo | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-3 gap-8 text-center max-w-2xl mx-auto"> | |
| <div> | |
| <div class="text-3xl font-bold text-amber-500">60+</div> | |
| <div class="text-sm text-slate-600 dark:text-slate-400">Languages</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-sky-500">∞</div> | |
| <div class="text-sm text-slate-600 dark:text-slate-400">Variations</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-amber-500">100x</div> | |
| <div class="text-sm text-slate-600 dark:text-slate-400">Faster</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Who is it for Section --> | |
| <section id="audience" class="py-20 bg-white dark:bg-slate-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Perfect for <span class="bg-gradient-to-r from-amber-500 to-sky-500 bg-clip-text text-transparent">Every Team</span></h2> | |
| <p class="text-xl text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">From marketing to HR, sales to support – Avafinity scales your video production while keeping it personal.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <use-case-card | |
| icon="target" | |
| title="Marketing & Content" | |
| description="Campaigns, ads, social video in infinite variants. A/B test hooks, lengths, and tones at scale." | |
| ></use-case-card> | |
| <use-case-card | |
| icon="book-open" | |
| title="Learning & HR" | |
| description="eLearning, onboarding, training, compliance in multiple languages with consistent delivery." | |
| ></use-case-card> | |
| <use-case-card | |
| icon="trending-up" | |
| title="Sales & Success" | |
| description="Personalized introductions, pitch variations, product demos that convert." | |
| ></use-case-card> | |
| <use-case-card | |
| icon="globe" | |
| title="Localization & Support" | |
| description="Quick language versions with correct pronunciation and cultural tone." | |
| ></use-case-card> | |
| <use-case-card | |
| icon="zap" | |
| title="Creators & Agencies" | |
| description="Scalable production and A/B testing without studio overhead." | |
| ></use-case-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Key Features Section --> | |
| <section id="features" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">The <span class="bg-gradient-to-r from-amber-500 to-sky-500 bg-clip-text text-transparent">Infinity</span> Engine</h2> | |
| <p class="text-xl text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">What makes Avafinity unique is not just one avatar, but an entire universe of variations you can fine-tune endlessly.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <feature-card | |
| icon="layers" | |
| title="Parametric Personas" | |
| description="Adjust age, formality, expression level, tempo, and energy with precision dials." | |
| gradient="from-amber-400 to-amber-600" | |
| ></feature-card> | |
| <feature-card | |
| icon="shuffle" | |
| title="Style Blending" | |
| description="Combine voice styles, accents, and micro-emotions for unique combinations." | |
| gradient="from-sky-400 to-sky-600" | |
| ></feature-card> | |
| <feature-card | |
| icon="grid" | |
| title="Variation Matrices" | |
| description="Define frameworks (5 hooks × 3 lengths × 4 tones) and generate hundreds of variants." | |
| gradient="from-amber-400 to-sky-600" | |
| ></feature-card> | |
| <feature-card | |
| icon="mic" | |
| title="Natural TTS" | |
| description="SSML control for pauses, emphasis, whispering. Cross-lingual voice conversion." | |
| gradient="from-sky-400 to-amber-600" | |
| ></feature-card> | |
| <feature-card | |
| icon="eye" | |
| title="Human-Grade Realism" | |
| description="Micro-expressions, eye contact, and coarticulation for lifelike delivery." | |
| gradient="from-amber-400 via-sky-400 to-amber-600" | |
| ></feature-card> | |
| <feature-card | |
| icon="shield" | |
| title="Brand & Governance" | |
| description="Brand kits, approval flows, C2PA watermarking, and transparent disclosure." | |
| gradient="from-sky-400 via-amber-400 to-sky-600" | |
| ></feature-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Workflow Section --> | |
| <section id="workflow" class="py-20 bg-white dark:bg-slate-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">From Idea to <span class="bg-gradient-to-r from-amber-500 to-sky-500 bg-clip-text text-transparent">Video</span> in Minutes</h2> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="relative"> | |
| <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-amber-400 to-sky-400"></div> | |
| <div class="space-y-12"> | |
| <div class="flex items-center gap-8"> | |
| <div class="w-16 h-16 rounded-full bg-amber-500 flex items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">1</div> | |
| <div class="bg-slate-100 dark:bg-slate-800 p-6 rounded-2xl flex-1 shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-2">Choose Persona Preset</h3> | |
| <p class="text-slate-600 dark:text-slate-300">Select from "Nordic Friendly Expert, EN-UK, medium pace" or create your own.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-8"> | |
| <div class="w-16 h-16 rounded-full bg-sky-500 flex items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">2</div> | |
| <div class="bg-slate-100 dark:bg-slate-800 p-6 rounded-2xl flex-1 shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-2">Insert or Generate Script</h3> | |
| <p class="text-slate-600 dark:text-slate-300">Write your script or let AI rewrite it in 3 tone variants automatically.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-8"> | |
| <div class="w-16 h-16 rounded-full bg-amber-500 flex items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">3</div> | |
| <div class="bg-slate-100 dark:bg-slate-800 p-6 rounded-2xl flex-1 shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-2">Set Language & Emotions</h3> | |
| <p class="text-slate-600 dark:text-slate-300">Choose languages, accents, and fine-tune emotions and emphasis.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-8"> | |
| <div class="w-16 h-16 rounded-full bg-sky-500 flex items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">4</div> | |
| <div class="bg-slate-100 dark:bg-slate-800 p-6 rounded-2xl flex-1 shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-2">Set Scene & Graphics</h3> | |
| <p class="text-slate-600 dark:text-slate-300">Camera angle, lighting, background, lower-thirds, and brand elements.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-8"> | |
| <div class="w-16 h-16 rounded-full bg-amber-500 flex items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">5</div> | |
| <div class="bg-slate-100 dark:bg-slate-800 p-6 rounded-2xl flex-1 shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-2">Generate Variations</h3> | |
| <p class="text-slate-600 dark:text-slate-300">Select variation matrix (e.g., 12 combinations), generate previews.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-8"> | |
| <div class="w-16 h-16 rounded-full bg-sky-500 flex items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">6</div> | |
| <div class="bg-slate-100 dark:bg-slate-800 p-6 rounded-2xl flex-1 shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-2">Approve & Publish</h3> | |
| <p class="text-slate-600 dark:text-slate-300">Batch-render, publish, and A/B-test via integrations.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo Section --> | |
| <section id="demo" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">See <span class="bg-gradient-to-r from-amber-500 to-sky-500 bg-clip-text text-transparent">Avafinity</span> in Action</h2> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="aspect-video rounded-2xl overflow-hidden shadow-2xl bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-600 relative group"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="w-24 h-24 rounded-full bg-amber-500 flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:scale-110 transition-transform cursor-pointer"> | |
| <i data-feather="play" class="w-12 h-12 text-white ml-1"></i> | |
| </div> | |
| <p class="text-lg font-semibold">AI-Generated Product Demo</p> | |
| <p class="text-sm opacity-75">Same persona, 12 languages, infinite variations</p> | |
| </div> | |
| </div> | |
| <img src="http://static.photos/technology/640x360/42" alt="Demo video placeholder" class="w-full h-full object-cover opacity-20"> | |
| </div> | |
| <div class="flex justify-center gap-4 mt-8"> | |
| <span class="px-4 py-2 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full text-sm font-medium">60+ Languages</span> | |
| <span class="px-4 py-2 bg-sky-100 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 rounded-full text-sm font-medium">Human-Grade Realism</span> | |
| <span class="px-4 py-2 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full text-sm font-medium">C2PA Certified</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-amber-500 to-sky-500"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">Ready to Create Infinite Possibilities?</h2> | |
| <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">Join thousands of teams already using Avafinity to scale their video production responsibly.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="studio.html" class="px-8 py-4 bg-white text-amber-600 hover:bg-slate-50 rounded-full font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"> | |
| Start Free Trial | |
| </a> | |
| <a href="pricing.html" class="px-8 py-4 bg-transparent border-2 border-white text-white hover:bg-white hover:text-amber-600 rounded-full font-bold transition-all duration-300"> | |
| View Pricing | |
| </a> | |
| </div> | |
| <p class="text-white/70 text-sm mt-4">No credit card required • Full disclosure watermark • C2PA certified</p> | |
| </div> | |
| </section> | |
| <footer-element></footer-element> | |
| <!-- Component Scripts --> | |
| <script src="components/nav-bar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/feature-card.js"></script> | |
| <script src="components/use-case-card.js"></script> | |
| <script src="components/pricing-card.js"></script> | |
| <!-- Main Scripts --> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |