|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Video AI Workstation & Partner Tools</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.feature-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.feature-card:hover .feature-icon { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 min-h-screen"> |
|
|
|
|
|
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<span class="text-2xl font-bold gradient-text">VAI</span> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-gray-900 text-white">Home</a> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Features</a> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Pricing</a> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Templates</a> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Resources</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-4 flex items-center md:ml-6"> |
|
|
<button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
|
|
<span class="sr-only">View notifications</span> |
|
|
<i class="fas fa-bell h-6 w-6"></i> |
|
|
</button> |
|
|
<button class="ml-3 px-4 py-2 rounded-md text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-700"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="-mr-2 flex md:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars h-6 w-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden hidden" id="mobile-menu"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Home</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Features</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Pricing</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Templates</a> |
|
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Resources</a> |
|
|
</div> |
|
|
<div class="pt-4 pb-3 border-t border-gray-700"> |
|
|
<div class="flex items-center px-5"> |
|
|
<button class="ml-auto px-4 py-2 rounded-md text-sm font-medium bg-indigo-600 text-white hover:bg-indigo-700"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="relative bg-gray-800 overflow-hidden"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="relative z-10 pb-8 bg-gray-800 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> |
|
|
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> |
|
|
<div class="sm:text-center lg:text-left"> |
|
|
<h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> |
|
|
<span class="block">Transform Your</span> |
|
|
<span class="block gradient-text">Video Production</span> |
|
|
</h1> |
|
|
<p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> |
|
|
The ultimate AI-powered workstation for creators, marketers, and businesses. Automate, enhance, and streamline your video workflow. |
|
|
</p> |
|
|
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> |
|
|
<div class="rounded-md shadow"> |
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"> |
|
|
Start Free Trial |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-3 sm:mt-0 sm:ml-3"> |
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-300 bg-gray-700 hover:bg-gray-600 md:py-4 md:text-lg md:px-10"> |
|
|
Watch Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> |
|
|
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt=""> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Features</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
Everything you need in one place |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> |
|
|
Our comprehensive suite of tools covers every aspect of video production and marketing. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="feature-card bg-gray-700 rounded-lg p-6 transition-all duration-300 hover:bg-gray-600"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-5"> |
|
|
<i class="fas fa-film feature-icon text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white mb-2">AI Video Editing</h3> |
|
|
<p class="text-gray-300"> |
|
|
Smart timeline editing with automated scene detection, color correction, and audio mixing powered by AI. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-700 rounded-lg p-6 transition-all duration-300 hover:bg-gray-600"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white mb-5"> |
|
|
<i class="fas fa-robot feature-icon text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white mb-2">Content Generation</h3> |
|
|
<p class="text-gray-300"> |
|
|
AI-assisted scriptwriting, storyboarding, and scene composition suggestions tailored to your style. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-700 rounded-lg p-6 transition-all duration-300 hover:bg-gray-600"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-5"> |
|
|
<i class="fas fa-chart-line feature-icon text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white mb-2">Marketing Analytics</h3> |
|
|
<p class="text-gray-300"> |
|
|
Comprehensive performance tracking and A/B testing tools to optimize your video marketing strategy. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-700 rounded-lg p-6 transition-all duration-300 hover:bg-gray-600"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mb-5"> |
|
|
<i class="fas fa-users feature-icon text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white mb-2">Collaboration Tools</h3> |
|
|
<p class="text-gray-300"> |
|
|
Real-time collaboration features for teams with task assignment, version control, and feedback tools. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-700 rounded-lg p-6 transition-all duration-300 hover:bg-gray-600"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white mb-5"> |
|
|
<i class="fas fa-trademark feature-icon text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white mb-2">Brand Management</h3> |
|
|
<p class="text-gray-300"> |
|
|
Maintain brand consistency with logo animation tools, style enforcement, and asset organization. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-700 rounded-lg p-6 transition-all duration-300 hover:bg-gray-600"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white mb-5"> |
|
|
<i class="fas fa-cloud feature-icon text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-white mb-2">Cloud Integration</h3> |
|
|
<p class="text-gray-300"> |
|
|
Seamless integration with popular cloud storage providers and partner tools for a unified workflow. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-16 bg-gray-900 overflow-hidden"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Versions</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
Tailored solutions for every need |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none"> |
|
|
|
|
|
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden card-hover transition-all duration-300"> |
|
|
<div class="flex-shrink-0 bg-gradient-to-r from-purple-600 to-indigo-600"> |
|
|
<div class="h-48 flex items-center justify-center"> |
|
|
<i class="fas fa-paint-brush text-white text-6xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 bg-gray-800 p-6 flex flex-col justify-between"> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-indigo-400"> |
|
|
For Creatives |
|
|
</p> |
|
|
<h3 class="mt-2 text-xl font-semibold text-white"> |
|
|
Creative Professionals |
|
|
</h3> |
|
|
<p class="mt-3 text-base text-gray-300"> |
|
|
A visually rich experience focused on video editors and animators with dynamic tools and creative community. |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<a href="#" class="text-sm font-medium text-indigo-400 hover:text-indigo-300"> |
|
|
Learn more <span aria-hidden="true">→</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden card-hover transition-all duration-300"> |
|
|
<div class="flex-shrink-0 bg-gradient-to-r from-blue-600 to-cyan-600"> |
|
|
<div class="h-48 flex items-center justify-center"> |
|
|
<i class="fas fa-bullhorn text-white text-6xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 bg-gray-800 p-6 flex flex-col justify-between"> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-blue-400"> |
|
|
For Businesses |
|
|
</p> |
|
|
<h3 class="mt-2 text-xl font-semibold text-white"> |
|
|
Marketing Teams |
|
|
</h3> |
|
|
<p class="mt-3 text-base text-gray-300"> |
|
|
Data-driven tools for social media optimization and analytics to maximize your video marketing ROI. |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<a href="#" class="text-sm font-medium text-blue-400 hover:text-blue-300"> |
|
|
Learn more <span aria-hidden="true">→</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden card-hover transition-all duration-300"> |
|
|
<div class="flex-shrink-0 bg-gradient-to-r from-green-600 to-teal-600"> |
|
|
<div class="h-48 flex items-center justify-center"> |
|
|
<i class="fas fa-graduation-cap text-white text-6xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 bg-gray-800 p-6 flex flex-col justify-between"> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-green-400"> |
|
|
For Education |
|
|
</p> |
|
|
<h3 class="mt-2 text-xl font-semibold text-white"> |
|
|
Educational Institutions |
|
|
</h3> |
|
|
<p class="mt-3 text-base text-gray-300"> |
|
|
Resources for teaching video production with AI, including lesson plans and collaborative classroom tools. |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<a href="#" class="text-sm font-medium text-green-400 hover:text-green-300"> |
|
|
Learn more <span aria-hidden="true">→</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
<span class="block">Ready to dive in?</span> |
|
|
<span class="block gradient-text">Start your free trial today.</span> |
|
|
</h2> |
|
|
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> |
|
|
Get started |
|
|
</a> |
|
|
</div> |
|
|
<div class="ml-3 inline-flex rounded-md shadow"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-300 bg-gray-700 hover:bg-gray-600"> |
|
|
Learn more |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> |
|
|
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
About |
|
|
</a> |
|
|
</div> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Blog |
|
|
</a> |
|
|
</div> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Jobs |
|
|
</a> |
|
|
</div> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Press |
|
|
</a> |
|
|
</div> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Accessibility |
|
|
</a> |
|
|
</div> |
|
|
<div class="px-5 py-2"> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white"> |
|
|
Partners |
|
|
</a> |
|
|
</div> |
|
|
</nav> |
|
|
<div class="mt-8 flex justify-center space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<span class="sr-only">Facebook</span> |
|
|
<i class="fab fa-face-f text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<span class="sr-only">Instagram</span> |
|
|
<i class="fab fa-instagram text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<span class="sr-only">Twitter</span> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<span class="sr-only">GitHub</span> |
|
|
<i class="fab fa-github text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<span class="sr-only">YouTube</span> |
|
|
<i class="fab fa-youtube text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="mt-8 text-center text-base text-gray-400"> |
|
|
© 2023 Video AI Workstation. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
const expanded = this.getAttribute('aria-expanded') === 'true'; |
|
|
this.setAttribute('aria-expanded', !expanded); |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=XXXMARK/vai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
