File size: 10,483 Bytes
c03103d |
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 |
<!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">
<!-- Navigation -->
<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>
<!-- Hero Section -->
<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>
<!-- Features Grid -->
<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">
<!-- Feature 1 -->
<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>
<!-- Feature 2 -->
<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>
<!-- Feature 3 -->
<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>
<!-- Feature 4 -->
<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>
<!-- Feature 5 -->
<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>
<!-- Feature 6 -->
<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>
<!-- CTA 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 -->
<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>
// Initialize Vanta.js background
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
});
// Initialize Feather Icons
feather.replace();
</script>
</body>
</html>
|