flenvideos / index.html
flen-crypto's picture
create the other pages - Follow Up Deployment
5a2f8da verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FLENvideos | The Ultimate Music Video App for Musicians</title>
<link rel="icon" type="image/x-icon" href="https://rotorvideos.com/assets/brand/favicon-32x32-fb2ab761db29f4607b2ee397adbedafcbb2110c6c7ff3490b62b8b5e9978f67f.png">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#00BAD8',
secondary: '#1A1C23'
}
}
}
}
</script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="aMbIoezFXYIXPlmhnkG-w8uShXxL7QExOQTuvutzQAqwQomvj41ZFjjgmWpLkutCP5MEaApXi4dD_kRNnzAEWQ" />
<meta name="action-cable-url" content="/cable" />
<script>
window.__rotorRuntimeEnv__ = Object.freeze({
DEFAULT_STYLE_ID: '178357',
RAILS_ENV: 'production',
ROLLBAR_ACCESS_TOKEN: 'e64f7a40a9574096bbba77e3c38a7b80',
STRIPE_KEY: 'pk_live_4Vf6vKbnL1viw6o8ZbWLq5S7',
PAYPAL_CLIENT_ID: 'AchAm41aaCUhT3alNBGDZREwxUVvOcvcwykBiyqxRiE7PNhj04DL0t-hgoEIlw2UqE4ZRv7DRHjwG70a',
HELPDESK_MODE: "zendesk",
ZENDESK_API_KEY: "301f0d97-67e0-4dfb-911c-03628e9051bf"
});
</script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script crossorigin='anonymous' src='https://kit.fontawesome.com/2bed64504a.js'></script>
<style>
body {
font-family: 'Poppins', sans-serif;
}
.hero-gradient {
background: linear-gradient(135deg, #00B4DB 0%, #0083B0 100%);
}
.feature-grid > div {
transition: transform 0.3s ease;
}
.feature-grid > div:hover {
transform: translateY(-5px);
}
</style>
</head>
<body class="bg-secondary text-white">
<!-- Navigation -->
<nav class="bg-secondary border-b border-gray-700 fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<span class="text-primary text-2xl font-bold">FLEN</span>
<span class="ml-1 text-white text-xl font-light">videos</span>
</div>
<div class="hidden md:ml-10 md:flex md:space-x-8">
<a href="index.html" class="text-primary font-medium">Home</a>
<a href="features.html" class="text-gray-300 hover:text-white font-medium">Features</a>
<a href="pricing.html" class="text-gray-300 hover:text-white font-medium">Pricing</a>
<a href="examples.html" class="text-gray-300 hover:text-white font-medium">Examples</a>
<a href="blog.html" class="text-gray-300 hover:text-white font-medium">Blog</a>
</div>
</div>
<div class="flex items-center">
<a href="pricing.html" class="bg-primary hover:bg-cyan-600 text-white px-5 py-2 rounded-full font-medium transition-all">Get Started</a>
<button class="md:hidden ml-4 text-gray-300">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient pt-32 pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div data-aos="fade-right">
<h1 class="text-5xl md:text-6xl font-bold leading-tight">
The Ultimate Music Video App for Musicians
</h1>
<p class="mt-6 text-xl text-gray-100">
Make professional music videos and lyric videos in minutes. Give fans another way to connect with your music.
</p>
<div class="mt-10 flex flex-col sm:flex-row gap-4">
<a href="#" class="bg-white text-primary hover:bg-gray-100 py-4 px-8 rounded-full font-bold text-lg transition-all shadow-lg">Start Free Trial</a>
<a href="#" class="bg-transparent border-2 border-white hover:bg-white/10 py-4 px-8 rounded-full font-bold text-lg transition-all">View Demo</a>
</div>
</div>
<div data-aos="fade-left">
<div class="rounded-3xl overflow-hidden shadow-2xl">
<img src="http://static.photos/technology/1024x576/42" alt="App interface" class="w-full h-auto">
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-secondary to-transparent"></div>
</section>
<!-- Features Grid -->
<section class="py-20 bg-secondary">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-20" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold">Create Stunning Videos in Minutes</h2>
<p class="mt-4 text-lg text-gray-400 max-w-2xl mx-auto">Powerful tools designed specifically for musicians to showcase their art</p>
</div>
<div class="feature-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-gray-800 rounded-xl p-8" data-aos="fade-up" data-aos-delay="0">
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center overflow-hidden">
<img src="http://static.photos/music/200x200/1" alt="Music icon" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold mt-6">Lyric Videos</h3>
<p class="mt-4 text-gray-400">Sync your lyrics with beats automatically. Choose from dozens of beautiful templates.</p>
</div>
<!-- Feature 2 -->
<div class="bg-gray-800 rounded-xl p-8" data-aos="fade-up" data-aos-delay="100">
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center overflow-hidden">
<img src="http://static.photos/technology/200x200/2" alt="Play icon" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold mt-6">Music Visualizers</h3>
<p class="mt-4 text-gray-400">Transform your audio into mesmerizing animated visuals that pulse with your beats.</p>
</div>
<!-- Feature 3 -->
<div class="bg-gray-800 rounded-xl p-8" data-aos="fade-up" data-aos-delay="200">
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center overflow-hidden">
<img src="http://static.photos/technology/200x200/3" alt="Settings icon" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold mt-6">Customization</h3>
<p class="mt-4 text-gray-400">Full control over colors, fonts, transitions and animations to match your brand.</p>
</div>
<!-- Feature 4 -->
<div class="bg-gray-800 rounded-xl p-8" data-aos="fade-up" data-aos-delay="0">
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center overflow-hidden">
<img src="http://static.photos/technology/200x200/4" alt="Upload icon" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold mt-6">One-Click Export</h3>
<p class="mt-4 text-gray-400">Export in 4K resolution, ready for YouTube, Instagram, TikTok and all platforms.</p>
</div>
<!-- Feature 5 -->
<div class="bg-gray-800 rounded-xl p-8" data-aos="fade-up" data-aos-delay="100">
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center overflow-hidden">
<img src="http://static.photos/technology/200x200/5" alt="Media icon" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold mt-6">Stock Library</h3>
<p class="mt-4 text-gray-400">Access to millions of royalty-free videos, images, and animations for your projects.</p>
</div>
<!-- Feature 6 -->
<div class="bg-gray-800 rounded-xl p-8" data-aos="fade-up" data-aos-delay="200">
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center overflow-hidden">
<img src="http://static.photos/technology/200x200/6" alt="Share icon" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold mt-6">Easy Sharing</h3>
<p class="mt-4 text-gray-400">Share directly to social platforms or generate embed codes for your website.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-20" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold">Trusted by Thousands of Artists</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-gray-800 rounded-2xl p-8" data-aos="fade-up" data-aos-delay="0">
<div class="flex items-center">
<div class="bg-gray-700 rounded-full p-2">
<i class="fas fa-quote-left text-primary text-xl"></i>
</div>
<div class="ml-4">
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
</div>
<p class="mt-6 text-gray-300 italic">
"Rotor saved me thousands of dollars on video production. My lyric video went viral and helped my song get discovered."
</p>
<div class="mt-6 flex items-center">
<img src="http://static.photos/people/200x200/23" alt="Artist" class="w-12 h-12 rounded-full object-cover">
<div class="ml-4">
<h4 class="font-bold">Emma Johnson</h4>
<p class="text-sm text-gray-400">Independent Artist</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-800 rounded-2xl p-8" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center">
<div class="bg-gray-700 rounded-full p-2">
<i class="fas fa-quote-left text-primary text-xl"></i>
</div>
<div class="ml-4">
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
</div>
<p class="mt-6 text-gray-300 italic">
"I used to struggle with promoting my music. Now I can create stunning visuals for every release in under an hour."
</p>
<div class="mt-6 flex items-center">
<img src="http://static.photos/people/200x200/54" alt="Artist" class="w-12 h-12 rounded-full object-cover">
<div class="ml-4">
<h4 class="font-bold">Marcus Chen</h4>
<p class="text-sm text-gray-400">Electronic Producer</p>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-gray-800 rounded-2xl p-8" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center">
<div class="bg-gray-700 rounded-full p-2">
<i class="fas fa-quote-left text-primary text-xl"></i>
</div>
<div class="ml-4">
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
</div>
<p class="mt-6 text-gray-300 italic">
"This app transformed how we market our band. Our engagement doubled after we started using Rotor for all our releases."
</p>
<div class="mt-6 flex items-center">
<img src="http://static.photos/people/200x200/76" alt="Artist" class="w-12 h-12 rounded-full object-cover">
<div class="ml-4">
<h4 class="font-bold">The Midnight Hour</h4>
<p class="text-sm text-gray-400">Rock Band</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section class="py-20 bg-secondary">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-20" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold">Simple, Transparent Pricing</h2>
<p class="mt-4 text-lg text-gray-400 max-w-2xl mx-auto">Everything you need to create professional videos without breaking the bank</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Starter Plan -->
<div class="bg-gray-800 rounded-2xl p-8 border border-gray-700" data-aos="fade-up" data-aos-delay="0">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">Starter</h3>
<p class="text-gray-400 mt-2">Perfect for new artists</p>
</div>
<span class="text-4xl font-bold">$9<span class="text-lg text-gray-400">/mo</span></span>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>1 music video per month</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>HD (1080p) exports</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>Basic templates</span>
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times-circle mr-3"></i>
<span>No watermark</span>
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times-circle mr-3"></i>
<span>Premium templates</span>
</li>
</ul>
<a href="#" class="mt-10 block bg-gray-700 hover:bg-gray-600 text-white py-3 rounded-lg text-center transition-all">Start Free Trial</a>
</div>
<!-- Popular Plan -->
<div class="bg-gray-800 rounded-2xl p-8 border-2 border-primary relative" data-aos="fade-up" data-aos-delay="100">
<div class="absolute top-0 right-0 bg-primary text-white text-xs font-bold px-4 py-1 rounded-bl-lg">
MOST POPULAR
</div>
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">Professional</h3>
<p class="text-gray-400 mt-2">For working musicians</p>
</div>
<span class="text-4xl font-bold">$29<span class="text-lg text-gray-400">/mo</span></span>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>10 music videos per month</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>4K exports</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>Premium templates</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>No watermark</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>Premium templates</span>
</li>
</ul>
<a href="#" class="mt-10 block bg-primary hover:bg-cyan-600 text-white py-3 rounded-lg text-center transition-all">Start Free Trial</a>
</div>
<!-- Studio Plan -->
<div class="bg-gray-800 rounded-2xl p-8 border border-gray-700" data-aos="fade-up" data-aos-delay="200">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold">Studio</h3>
<p class="text-gray-400 mt-2">Labels & production teams</p>
</div>
<span class="text-4xl font-bold">$99<span class="text-lg text-gray-400">/mo</span></span>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>Unlimited videos</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>4K exports & brand presets</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>All premium templates</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>No watermark</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-primary mr-3"></i>
<span>Team collaboration</span>
</li>
</ul>
<a href="#" class="mt-10 block bg-gray-700 hover:bg-gray-600 text-white py-3 rounded-lg text-center transition-all">Start Free Trial</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 pt-20 pb-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h4 class="text-lg font-semibold mb-4">Rotor Videos</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white">About Us</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">Press</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Resources</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Help Center</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">API Docs</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Legal</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Copyright Info</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-tiktok"></i>
</a>
</div>
<div class="mt-6">
<p class="text-gray-400">Subscribe to our newsletter</p>
<div class="mt-2 flex">
<input type="email" placeholder="Your email" class="bg-gray-800 px-4 py-2 rounded-l-lg w-full">
<button class="bg-primary px-4 py-2 rounded-r-lg">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<div class="mt-16 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center">
<span class="text-primary text-2xl font-bold">ROTOR</span>
<span class="ml-1 text-white text-xl font-light">Videos</span>
</div>
<p class="mt-4 md:mt-0 text-gray-400 text-sm">© 2023 Rotor Videos, Inc. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
window.iterateSettings = {
apiKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjb21wYW55X2lkIjoiNWRkZTljMTE4ZWExMDIwMDAxZWVhYWE2IiwiaWF0IjoxNTc0ODcwMDMzfQ.DKri_hIoy115lG5ieJRa8Nmt9HtXQh3s16k6dMwlkSI'
};
(function(i,t,e,r,a){if(t.getElementById(r)){return}
i.IterateObjectName=a;var z=function(){z.c(arguments)};z.q=[];
z.c=function(args){z.q.push(args)};i[a]=z;var js,fjs=t.getElementsByTagName(e)[0];
function l() {js=t.createElement(e);js.id=r;js.async=1;js.src="https://platform.iteratehq.com/loader.js";fjs.parentNode.insertBefore(js,fjs)};
if(t.readyState==="complete") {l();} else if(i.attachEvent) {i.attachEvent('onload', l);} else{i.addEventListener('load', l, false);}
}(window, document,'script','iterate-js','Iterate'));
document.addEventListener('DOMContentLoaded', function() {
AOS.init({
duration: 800,
easing: 'ease-out',
once: true
});
feather.replace();
});
</script>
</body>
</html>
</details>