File size: 16,659 Bytes
31c75a3 369088b 31c75a3 369088b 31c75a3 369088b 31c75a3 369088b 31c75a3 369088b 31c75a3 369088b 31c75a3 369088b 31c75a3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 |
<!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>
<!-- Navigation -->
<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>
<!-- Hero Section -->
<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>
<!-- Video Tool Section -->
<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">
<!-- Feature 1 -->
<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>
<!-- Feature 2 -->
<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>
<!-- Feature 3 -->
<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>
<!-- Math Assistant 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>
<!-- CTA 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 -->
<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> |