Spaces:
Running
Running
VEO Studio App – Smart Video Studio The VEO Studio app is an innovative video creation tool using the latest artificial intelligence technologies. With this app, you can transform any idea or written text into a realistic, high-quality video in just minutes, without the need for editing or filming experience. Key Features: Create realistic videos using VEO 3. Convert texts and prompts into professional scenes. Customize characters, movements, sounds, and lighting. A wide library of ready-made templates for various fields (ads, educational content, stories, and social media posts). High processing speed and accuracy that reaches cinematic quality. Benefits: Whether you are a content creator, marketer, or business owner, the VEO Studio app provides you with an easy and quick way to produce creative videos that engage your audience and increase the impact of your content. I want the app language to be Arabic and English, optional. I want it to be easy and simple. I want it to fit the phone screen.
Browse files- README.md +8 -5
- index.html +273 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: VeoVision AI Studio
|
| 3 |
+
colorFrom: red
|
| 4 |
+
colorTo: pink
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,274 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>VeoVision AI Studio - Smart Video Creation</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
| 13 |
+
body {
|
| 14 |
+
font-family: 'Poppins', sans-serif;
|
| 15 |
+
}
|
| 16 |
+
.gradient-bg {
|
| 17 |
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| 18 |
+
}
|
| 19 |
+
.video-card:hover {
|
| 20 |
+
transform: translateY(-5px);
|
| 21 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 22 |
+
}
|
| 23 |
+
.language-toggle {
|
| 24 |
+
position: relative;
|
| 25 |
+
display: inline-block;
|
| 26 |
+
width: 60px;
|
| 27 |
+
height: 30px;
|
| 28 |
+
}
|
| 29 |
+
.language-toggle input {
|
| 30 |
+
opacity: 0;
|
| 31 |
+
width: 0;
|
| 32 |
+
height: 0;
|
| 33 |
+
}
|
| 34 |
+
.slider {
|
| 35 |
+
position: absolute;
|
| 36 |
+
cursor: pointer;
|
| 37 |
+
top: 0;
|
| 38 |
+
left: 0;
|
| 39 |
+
right: 0;
|
| 40 |
+
bottom: 0;
|
| 41 |
+
background-color: #4f46e5;
|
| 42 |
+
transition: .4s;
|
| 43 |
+
border-radius: 34px;
|
| 44 |
+
}
|
| 45 |
+
.slider:before {
|
| 46 |
+
position: absolute;
|
| 47 |
+
content: "EN";
|
| 48 |
+
height: 22px;
|
| 49 |
+
width: 22px;
|
| 50 |
+
left: 4px;
|
| 51 |
+
bottom: 4px;
|
| 52 |
+
background-color: white;
|
| 53 |
+
transition: .4s;
|
| 54 |
+
border-radius: 50%;
|
| 55 |
+
display: flex;
|
| 56 |
+
align-items: center;
|
| 57 |
+
justify-content: center;
|
| 58 |
+
font-size: 10px;
|
| 59 |
+
font-weight: bold;
|
| 60 |
+
color: #4f46e5;
|
| 61 |
+
}
|
| 62 |
+
input:checked + .slider:before {
|
| 63 |
+
content: "AR";
|
| 64 |
+
transform: translateX(30px);
|
| 65 |
+
}
|
| 66 |
+
</style>
|
| 67 |
+
</head>
|
| 68 |
+
<body class="bg-gray-50">
|
| 69 |
+
<!-- Hero Section with Vanta.js Background -->
|
| 70 |
+
<div id="vanta-bg" class="gradient-bg text-white min-h-screen flex flex-col">
|
| 71 |
+
<!-- Navigation -->
|
| 72 |
+
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
|
| 73 |
+
<div class="flex items-center space-x-2">
|
| 74 |
+
<i data-feather="video" class="w-8 h-8 text-white"></i>
|
| 75 |
+
<span class="text-xl font-bold">VeoVision</span>
|
| 76 |
+
</div>
|
| 77 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 78 |
+
<a href="#" class="hover:text-indigo-200">Features</a>
|
| 79 |
+
<a href="#" class="hover:text-indigo-200">Templates</a>
|
| 80 |
+
<a href="#" class="hover:text-indigo-200">Pricing</a>
|
| 81 |
+
<a href="#" class="hover:text-indigo-200">About</a>
|
| 82 |
+
<div class="flex items-center space-x-2">
|
| 83 |
+
<span class="text-sm">EN</span>
|
| 84 |
+
<label class="language-toggle">
|
| 85 |
+
<input type="checkbox">
|
| 86 |
+
<span class="slider"></span>
|
| 87 |
+
</label>
|
| 88 |
+
<span class="text-sm">AR</span>
|
| 89 |
+
</div>
|
| 90 |
+
</div>
|
| 91 |
+
<button class="md:hidden">
|
| 92 |
+
<i data-feather="menu" class="w-6 h-6"></i>
|
| 93 |
+
</button>
|
| 94 |
+
</nav>
|
| 95 |
+
|
| 96 |
+
<!-- Main Hero Content -->
|
| 97 |
+
<div class="container mx-auto px-6 flex-grow flex flex-col justify-center items-center text-center py-16">
|
| 98 |
+
<h1 class="text-4xl md:text-6xl font-bold mb-6">Create Stunning Videos <br>With AI Magic</h1>
|
| 99 |
+
<p class="text-xl md:text-2xl mb-12 max-w-3xl">Transform your ideas into professional videos in minutes. No filming, no editing, just pure creativity.</p>
|
| 100 |
+
<div class="flex flex-col sm:flex-row gap-4">
|
| 101 |
+
<button class="bg-white text-indigo-600 px-8 py-3 rounded-full font-bold hover:bg-indigo-100 transition duration-300">Start Creating Free</button>
|
| 102 |
+
<button class="border-2 border-white text-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-indigo-600 transition duration-300">See Examples</button>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
|
| 106 |
+
<!-- Scroll Indicator -->
|
| 107 |
+
<div class="flex justify-center pb-8">
|
| 108 |
+
<i data-feather="chevron-down" class="w-8 h-8 animate-bounce"></i>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
|
| 112 |
+
<!-- Features Section -->
|
| 113 |
+
<div class="py-20 bg-white">
|
| 114 |
+
<div class="container mx-auto px-6">
|
| 115 |
+
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Powerful Features</h2>
|
| 116 |
+
|
| 117 |
+
<div class="grid md:grid-cols-3 gap-12">
|
| 118 |
+
<!-- Feature 1 -->
|
| 119 |
+
<div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
|
| 120 |
+
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
| 121 |
+
<i data-feather="zap" class="w-8 h-8 text-indigo-600"></i>
|
| 122 |
+
</div>
|
| 123 |
+
<h3 class="text-xl font-bold mb-3">AI-Powered Creation</h3>
|
| 124 |
+
<p class="text-gray-600">Generate realistic videos from text prompts using advanced VEO 3 technology.</p>
|
| 125 |
+
</div>
|
| 126 |
+
|
| 127 |
+
<!-- Feature 2 -->
|
| 128 |
+
<div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
|
| 129 |
+
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
| 130 |
+
<i data-feather="film" class="w-8 h-8 text-indigo-600"></i>
|
| 131 |
+
</div>
|
| 132 |
+
<h3 class="text-xl font-bold mb-3">Cinematic Quality</h3>
|
| 133 |
+
<p class="text-gray-600">Professional-grade scenes with perfect lighting, angles, and movements.</p>
|
| 134 |
+
</div>
|
| 135 |
+
|
| 136 |
+
<!-- Feature 3 -->
|
| 137 |
+
<div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
|
| 138 |
+
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
| 139 |
+
<i data-feather="sliders" class="w-8 h-8 text-indigo-600"></i>
|
| 140 |
+
</div>
|
| 141 |
+
<h3 class="text-xl font-bold mb-3">Full Customization</h3>
|
| 142 |
+
<p class="text-gray-600">Adjust characters, sounds, and styles to match your unique vision.</p>
|
| 143 |
+
</div>
|
| 144 |
+
</div>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
|
| 148 |
+
<!-- Templates Showcase -->
|
| 149 |
+
<div class="py-20 bg-gray-50">
|
| 150 |
+
<div class="container mx-auto px-6">
|
| 151 |
+
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Ready-to-Use Templates</h2>
|
| 152 |
+
<p class="text-xl text-center text-gray-600 mb-16">Perfect for any content need</p>
|
| 153 |
+
|
| 154 |
+
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
| 155 |
+
<!-- Template 1 -->
|
| 156 |
+
<div class="video-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
|
| 157 |
+
<img src="http://static.photos/technology/640x360/1" alt="Social Media Template" class="w-full h-48 object-cover">
|
| 158 |
+
<div class="p-6">
|
| 159 |
+
<h3 class="font-bold text-lg mb-2">Social Media Ads</h3>
|
| 160 |
+
<p class="text-gray-600 text-sm">Engaging content for Instagram, TikTok, and more</p>
|
| 161 |
+
</div>
|
| 162 |
+
</div>
|
| 163 |
+
|
| 164 |
+
<!-- Template 2 -->
|
| 165 |
+
<div class="video-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
|
| 166 |
+
<img src="http://static.photos/education/640x360/2" alt="Education Template" class="w-full h-48 object-cover">
|
| 167 |
+
<div class="p-6">
|
| 168 |
+
<h3 class="font-bold text-lg mb-2">Educational Videos</h3>
|
| 169 |
+
<p class="text-gray-600 text-sm">Perfect for online courses and tutorials</p>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
|
| 173 |
+
<!-- Template 3 -->
|
| 174 |
+
<div class="video-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
|
| 175 |
+
<img src="http://static.photos/business/640x360/3" alt="Business Template" class="w-full h-48 object-cover">
|
| 176 |
+
<div class="p-6">
|
| 177 |
+
<h3 class="font-bold text-lg mb-2">Business Presentations</h3>
|
| 178 |
+
<p class="text-gray-600 text-sm">Professional videos for pitches and reports</p>
|
| 179 |
+
</div>
|
| 180 |
+
</div>
|
| 181 |
+
|
| 182 |
+
<!-- Template 4 -->
|
| 183 |
+
<div class="video-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
|
| 184 |
+
<img src="http://static.photos/travel/640x360/4" alt="Storytelling Template" class="w-full h-48 object-cover">
|
| 185 |
+
<div class="p-6">
|
| 186 |
+
<h3 class="font-bold text-lg mb-2">Storytelling</h3>
|
| 187 |
+
<p class="text-gray-600 text-sm">Captivating narratives for your audience</p>
|
| 188 |
+
</div>
|
| 189 |
+
</div>
|
| 190 |
+
</div>
|
| 191 |
+
|
| 192 |
+
<div class="text-center mt-12">
|
| 193 |
+
<button class="border-2 border-indigo-600 text-indigo-600 px-8 py-3 rounded-full font-bold hover:bg-indigo-600 hover:text-white transition duration-300">Browse All Templates</button>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
|
| 198 |
+
<!-- CTA Section -->
|
| 199 |
+
<div class="py-20 gradient-bg text-white">
|
| 200 |
+
<div class="container mx-auto px-6 text-center">
|
| 201 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Content?</h2>
|
| 202 |
+
<p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of creators who are making amazing videos with AI</p>
|
| 203 |
+
<button class="bg-white text-indigo-600 px-8 py-3 rounded-full font-bold hover:bg-indigo-100 transition duration-300">Get Started - It's Free</button>
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
|
| 207 |
+
<!-- Footer -->
|
| 208 |
+
<footer class="bg-gray-900 text-white py-12">
|
| 209 |
+
<div class="container mx-auto px-6">
|
| 210 |
+
<div class="grid md:grid-cols-4 gap-8">
|
| 211 |
+
<div>
|
| 212 |
+
<div class="flex items-center space-x-2 mb-4">
|
| 213 |
+
<i data-feather="video" class="w-6 h-6 text-indigo-400"></i>
|
| 214 |
+
<span class="text-xl font-bold">VeoVision</span>
|
| 215 |
+
</div>
|
| 216 |
+
<p class="text-gray-400">The smartest way to create professional videos with AI.</p>
|
| 217 |
+
</div>
|
| 218 |
+
<div>
|
| 219 |
+
<h4 class="font-bold text-lg mb-4">Product</h4>
|
| 220 |
+
<ul class="space-y-2">
|
| 221 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
|
| 222 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Templates</a></li>
|
| 223 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
|
| 224 |
+
</ul>
|
| 225 |
+
</div>
|
| 226 |
+
<div>
|
| 227 |
+
<h4 class="font-bold text-lg mb-4">Resources</h4>
|
| 228 |
+
<ul class="space-y-2">
|
| 229 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
|
| 230 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
|
| 231 |
+
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
|
| 232 |
+
</ul>
|
| 233 |
+
</div>
|
| 234 |
+
<div>
|
| 235 |
+
<h4 class="font-bold text-lg mb-4">Connect</h4>
|
| 236 |
+
<div class="flex space-x-4">
|
| 237 |
+
<a href="#"><i data-feather="twitter" class="w-5 h-5 text-gray-400 hover:text-white"></i></a>
|
| 238 |
+
<a href="#"><i data-feather="instagram" class="w-5 h-5 text-gray-400 hover:text-white"></i></a>
|
| 239 |
+
<a href="#"><i data-feather="facebook" class="w-5 h-5 text-gray-400 hover:text-white"></i></a>
|
| 240 |
+
<a href="#"><i data-feather="linkedin" class="w-5 h-5 text-gray-400 hover:text-white"></i></a>
|
| 241 |
+
</div>
|
| 242 |
+
</div>
|
| 243 |
+
</div>
|
| 244 |
+
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 245 |
+
<p class="text-gray-400">© 2023 VeoVision AI Studio. All rights reserved.</p>
|
| 246 |
+
<div class="flex space-x-6 mt-4 md:mt-0">
|
| 247 |
+
<a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
|
| 248 |
+
<a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
|
| 249 |
+
</div>
|
| 250 |
+
</div>
|
| 251 |
+
</div>
|
| 252 |
+
</footer>
|
| 253 |
+
|
| 254 |
+
<script>
|
| 255 |
+
// Initialize Vanta.js globe background
|
| 256 |
+
VANTA.GLOBE({
|
| 257 |
+
el: "#vanta-bg",
|
| 258 |
+
mouseControls: true,
|
| 259 |
+
touchControls: true,
|
| 260 |
+
gyroControls: false,
|
| 261 |
+
minHeight: 200.00,
|
| 262 |
+
minWidth: 200.00,
|
| 263 |
+
scale: 1.00,
|
| 264 |
+
scaleMobile: 1.00,
|
| 265 |
+
color: 0x7b6ff0,
|
| 266 |
+
backgroundColor: 0x0,
|
| 267 |
+
size: 0.8
|
| 268 |
+
});
|
| 269 |
+
|
| 270 |
+
// Initialize feather icons
|
| 271 |
+
feather.replace();
|
| 272 |
+
</script>
|
| 273 |
+
</body>
|
| 274 |
</html>
|