|
|
<!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>Infinite MathVid Studio | Create & Learn</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#6366f1', |
|
|
secondary: '#8b5cf6', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
.gradient-text { |
|
|
background-clip: text; |
|
|
-webkit-background-clip: text; |
|
|
color: transparent; |
|
|
background-image: linear-gradient(90deg, #6366f1, #8b5cf6); |
|
|
} |
|
|
.glass-effect { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-full bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-300"> |
|
|
<div id="vanta-bg" class="fixed inset-0 -z-10"></div> |
|
|
|
|
|
|
|
|
<nav class="glass-effect fixed top-0 left-0 right-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="video" class="text-primary h-8 w-8"></i> |
|
|
<span class="ml-2 text-xl font-bold gradient-text">MathVid Studio</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-center space-x-4"> |
|
|
<a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium bg-primary text-white">Home</a> |
|
|
<a href="index.html#video-tool" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700">Video Tool</a> |
|
|
<a href="math-assistant.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700">Math Assistant</a> |
|
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"> |
|
|
<i data-feather="moon" class="hidden dark:block"></i> |
|
|
<i data-feather="sun" class="dark:hidden"></i> |
|
|
</button> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium border border-primary text-primary hover:bg-primary hover:text-white">Sign In</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="-mr-2 flex md:hidden"> |
|
|
<button type="button" id="mobile-menu-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"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6"> |
|
|
<span class="gradient-text">Create Videos.</span> |
|
|
<span class="block md:inline">Solve Math.</span> |
|
|
</h1> |
|
|
<p class="mt-6 text-lg md:text-xl max-w-3xl mx-auto"> |
|
|
The all-in-one platform for unlimited video creation and AI-powered math homework assistance. |
|
|
Perfect for creators, students, and educators. |
|
|
</p> |
|
|
<div class="mt-10 flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="index.html#video-tool" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 md:py-4 md:text-lg md:px-10"> |
|
|
Start Creating |
|
|
</a> |
|
|
<a href="math-assistant.html" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 md:py-4 md:text-lg md:px-10"> |
|
|
Solve Math Now |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section id="video-tool" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Infinite Video Creation</h2> |
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto"> |
|
|
Create stunning videos with our powerful editor. Unlimited projects, premium templates, and professional effects. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="glass-effect p-8 rounded-xl hover:shadow-lg transition-all duration-300"> |
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="film" class="text-primary h-8 w-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Unlimited Projects</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300"> |
|
|
Create and save as many videos as you need. No restrictions, no watermarks. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-effect p-8 rounded-xl hover:shadow-lg transition-all duration-300"> |
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="sliders" class="text-primary h-8 w-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Custom Templates</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300"> |
|
|
Choose from hundreds of professionally designed templates for any purpose. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-effect p-8 rounded-xl hover:shadow-lg transition-all duration-300"> |
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="download" class="text-primary h-8 w-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Multiple Formats</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300"> |
|
|
Export in MP4, MOV, GIF and more. Full HD and 4K supported. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-xl"> |
|
|
<div class="aspect-w-16 aspect-h-9"> |
|
|
<img src="http://static.photos/technology/1200x630/42" alt="Video Editor Preview" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-6 md:p-8"> |
|
|
<h3 class="text-2xl font-bold mb-4">Try Our Editor Now</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-6"> |
|
|
No credit card required. Start creating your first video in minutes. |
|
|
</p> |
|
|
<button class="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"> |
|
|
Launch Video Editor |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="math-assistant" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-100 dark:bg-gray-900 rounded-3xl"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">AI Math Homework Assistant</h2> |
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto"> |
|
|
Upload your math PDF and get step-by-step solutions instantly. Handwritten or typed, we've got you covered. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<div class="glass-effect p-8 rounded-xl mb-8"> |
|
|
<h3 class="text-xl font-bold mb-4">How it works</h3> |
|
|
<ol class="space-y-4"> |
|
|
<li class="flex items-start"> |
|
|
<span class="flex-shrink-0 flex items-center justify-center h-6 w-6 rounded-full bg-primary text-white text-sm font-medium">1</span> |
|
|
<span class="ml-3 text-gray-700 dark:text-gray-200">Upload your math PDF or take a photo</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="flex-shrink-0 flex items-center justify-center h-6 w-6 rounded-full bg-primary text-white text-sm font-medium">2</span> |
|
|
<span class="ml-3 text-gray-700 dark:text-gray-200">Our AI analyzes the problems</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<span class="flex-shrink-0 flex items-center justify-center h-6 w-6 rounded-full bg-primary text-white text-sm font-medium">3</span> |
|
|
<span class="ml-3 text-gray-700 dark:text-gray-200">Get detailed, step-by-step solutions</span> |
|
|
</li> |
|
|
</ol> |
|
|
</div> |
|
|
|
|
|
<div class="glass-effect p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="http://static.photos/education/200x200/1" alt="User avatar"> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Sarah J.</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
<i data-feather="star" class="w-4 h-4 fill-current"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="italic text-gray-600 dark:text-gray-300"> |
|
|
"This saved me hours of frustration! The explanations are so clear and helped me actually understand the concepts." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-4">Upload Your Math PDF</h3> |
|
|
<div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center mb-4"> |
|
|
<i data-feather="upload" class="mx-auto h-12 w-12 text-gray-400"></i> |
|
|
<h4 class="mt-2 font-medium text-gray-900 dark:text-gray-100">Drag and drop files here</h4> |
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">PDF, JPG, or PNG up to 10MB</p> |
|
|
<button class="mt-4 px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"> |
|
|
Select Files |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400"> |
|
|
<span>Handwritten equations supported</span> |
|
|
<i data-feather="check-circle" class="text-green-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="bg-gradient-to-r from-primary to-secondary rounded-3xl p-8 md:p-12 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to boost your creativity and learning?</h2> |
|
|
<p class="text-xl text-white/90 mb-8 max-w-3xl mx-auto"> |
|
|
Join thousands of creators and students using MathVid Studio every day. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="math-assistant.html" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10"> |
|
|
Get Started Free |
|
|
</a> |
|
|
<a href="index.html#video-tool" class="px-8 py-3 border border-white text-base font-medium rounded-md text-white hover:bg-white/10 md:py-4 md:text-lg md:px-10"> |
|
|
Learn More |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white pt-16 pb-8 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Product</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Templates</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Connect</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="twitter" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="instagram" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="facebook" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
</body> |
|
|
</html> |
