|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CanvasCrafter Studio</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></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=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { font-family: 'Inter', sans-serif; } |
|
|
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } |
|
|
.glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); } |
|
|
.hover-lift { transition: all 0.3s ease; } |
|
|
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen gradient-bg" id="vanta-bg"> |
|
|
|
|
|
<nav class="glass-effect border-b border-white/20"> |
|
|
<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"> |
|
|
<i data-feather="image" class="text-white w-8 h-8 mr-3"></i> |
|
|
<span class="text-white text-xl font-bold">CanvasCrafter Studio</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="index.html" class="text-white/80 hover:text-white transition-colors">Home</a> |
|
|
<a href="templates.html" class="text-white/80 hover:text-white transition-colors">Templates</a> |
|
|
<a href="editor.html" class="text-white font-semibold">Editor</a> |
|
|
<a href="library.html" class="text-white/80 hover:text-white transition-colors">Library</a> |
|
|
</div> |
|
|
<button class="bg-white/20 text-white px-4 py-2 rounded-lg hover:bg-white/30 transition-colors"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4"> |
|
|
<div class="max-w-7xl mx-auto text-center"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold text-white mb-6"> |
|
|
Craft Stunning |
|
|
<span class="bg-gradient-to-r from-yellow-400 to-pink-500 bg-clip-text text-transparent"> |
|
|
Posters |
|
|
</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-white/80 mb-12 max-w-3xl mx-auto"> |
|
|
Transform your Jellyfin media library with custom-designed posters. |
|
|
Professional templates, real-time previews, and seamless integration. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center"> |
|
|
<button class="bg-white text-purple-600 px-8 py-4 rounded-xl font-semibold text-lg hover-lift"> |
|
|
<i data-feather="play" class="inline w-5 h-5 mr-2"></i> |
|
|
Start Creating |
|
|
</button> |
|
|
<button class="border-2 border-white text-white px-8 py-4 rounded-xl font-semibold text-lg hover-lift"> |
|
|
<i data-feather="eye" class="inline w-5 h-5 mr-2"></i> |
|
|
View Templates |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<h2 class="text-4xl font-bold text-white text-center mb-16">Powerful Features</h2> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="glass-effect rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="film" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-4">Jellyfin Integration</h3> |
|
|
<p class="text-white/70">Seamlessly connect to your Jellyfin server and browse your entire media library.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-effect rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="layout" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-4">Smart Templates</h3> |
|
|
<p class="text-white/70">Choose from professionally designed templates or create your own custom designs.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-effect rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="type" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-4">Advanced Typography</h3> |
|
|
<p class="text-white/70">Full control over fonts, spacing, and text effects with real-time preview.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-effect rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="download" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-4">Instant Export</h3> |
|
|
<p class="text-white/70">High-quality exports with automatic upload back to your Jellyfin server.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-effect rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="database" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-4">TMDb Enrichment</h3> |
|
|
<p class="text-white/70">Access millions of alternative posters and metadata from The Movie Database.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-effect rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="zap" class="text-white w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-4">Real-time Preview</h3> |
|
|
<p class="text-white/70">See your changes instantly with our optimized WebGL rendering engine.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4"> |
|
|
<div class="max-w-4xl mx-auto text-center glass-effect rounded-3xl p-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6"> |
|
|
Ready to Transform Your Media Library? |
|
|
</h2> |
|
|
<p class="text-white/70 text-lg mb-8"> |
|
|
Join thousands of users creating beautiful, custom posters for their Jellyfin collections. |
|
|
</p> |
|
|
<button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-xl font-semibold text-lg hover-lift"> |
|
|
Start Your Free Trial |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="border-t border-white/20 py-12 px-4"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h4 class="text-white font-semibold mb-4">CanvasCrafter</h4> |
|
|
<p class="text-white/60 text-sm">Crafting beautiful posters for your media library since 2024.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-white font-semibold mb-4">Product</h4> |
|
|
<div class="space-y-2"> |
|
|
<a href="#" class="block text-white/60 hover:text-white text-sm">Features</a> |
|
|
<a href="#" class="block text-white/60 hover:text-white text-sm">Templates</a> |
|
|
<a href="#" class="block text-white/60 hover:text-white text-sm">Pricing</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-white font-semibold mb-4">Resources</h4> |
|
|
<div class="space-y-2"> |
|
|
<a href="#" class="block text-white/60 hover:text-white text-sm">Documentation</a> |
|
|
<a href="#" class="block text-white/60 hover:text-white text-sm">API Reference</a> |
|
|
<a href="#" class="block text-white/60 hover:text-white text-sm">Support</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-white font-semibold mb-4">Connect</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-white/60 hover:text-white"><i data-feather="github"></i></a> |
|
|
<a href="#" class="text-white/60 hover:text-white"><i data-feather="twitter"></i></a> |
|
|
<a href="#" class="text-white/60 hover:text-white"><i data-feather="discord"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0xffffff, |
|
|
backgroundColor: 0x667eea, |
|
|
size: 1.00 |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
