Spaces:
Running
Running
File size: 11,186 Bytes
9bab104 8ea7a64 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PromptVault - AI Image Generation Prompts</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
}
.category-card {
transition: all 0.3s ease;
transform: translateY(0);
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.prompt-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}
</style>
</head>
<body class="min-h-screen bg-gray-50">
<!-- Hero Section -->
<div class="gradient-bg text-white py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto text-center" data-aos="fade-up">
<h1 class="text-4xl md:text-6xl font-bold mb-6">PromptVault</h1>
<p class="text-xl md:text-2xl mb-8">Unlock the power of AI image generation with curated prompts</p>
<div class="flex justify-center">
<button class="bg-white text-purple-600 px-8 py-3 rounded-full font-semibold shadow-lg hover:bg-gray-100 transition duration-300 mr-4">
Browse All Prompts
</button>
<button class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition duration-300">
<i data-feather="download" class="inline mr-2"></i> Get Started
</button>
</div>
</div>
</div>
<!-- Categories Section -->
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800" data-aos="fade-up">Select a Category</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<!-- Men Category -->
<div class="category-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer" data-aos="fade-up" data-aos-delay="100">
<div class="h-40 bg-blue-100 flex items-center justify-center">
<i data-feather="user" class="w-16 h-16 text-blue-600"></i>
</div>
<div class="p-6 text-center">
<h3 class="text-xl font-semibold text-gray-800">Men</h3>
<p class="text-gray-600 mt-2">120+ prompts</p>
</div>
</div>
<!-- Women Category -->
<div class="category-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer" data-aos="fade-up" data-aos-delay="200">
<div class="h-40 bg-pink-100 flex items-center justify-center">
<i data-feather="user" class="w-16 h-16 text-pink-600"></i>
</div>
<div class="p-6 text-center">
<h3 class="text-xl font-semibold text-gray-800">Women</h3>
<p class="text-gray-600 mt-2">150+ prompts</p>
</div>
</div>
<!-- Couple Category -->
<div class="category-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer" data-aos="fade-up" data-aos-delay="300">
<div class="h-40 bg-purple-100 flex items-center justify-center">
<i data-feather="users" class="w-16 h-16 text-purple-600"></i>
</div>
<div class="p-6 text-center">
<h3 class="text-xl font-semibold text-gray-800">Couple</h3>
<p class="text-gray-600 mt-2">80+ prompts</p>
</div>
</div>
<!-- Kids Category -->
<div class="category-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer" data-aos="fade-up" data-aos-delay="400">
<div class="h-40 bg-yellow-100 flex items-center justify-center">
<i data-feather="smile" class="w-16 h-16 text-yellow-600"></i>
</div>
<div class="p-6 text-center">
<h3 class="text-xl font-semibold text-gray-800">Kids</h3>
<p class="text-gray-600 mt-2">60+ prompts</p>
</div>
</div>
</div>
</div>
<!-- Featured Prompts -->
<div class="gradient-bg py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12 text-white" data-aos="fade-up">Featured Prompts</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Prompt 1 -->
<div class="prompt-card rounded-xl p-6 shadow-lg" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
<i data-feather="image" class="text-purple-600"></i>
</div>
<h3 class="font-semibold text-gray-800">Portrait Photography</h3>
</div>
<p class="text-gray-600 mb-4">"A stunning portrait of a young woman with freckles, soft natural lighting, shallow depth of field, shot on 85mm lens, cinematic style"</p>
<button class="text-purple-600 font-medium flex items-center">
Copy Prompt <i data-feather="copy" class="ml-2 w-4 h-4"></i>
</button>
</div>
<!-- Prompt 2 -->
<div class="prompt-card rounded-xl p-6 shadow-lg" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i data-feather="image" class="text-blue-600"></i>
</div>
<h3 class="font-semibold text-gray-800">Fantasy Art</h3>
</div>
<p class="text-gray-600 mb-4">"A majestic elven warrior with glowing blue eyes, wearing intricate silver armor, standing in an ancient forest, digital painting style by Greg Rutkowski"</p>
<button class="text-purple-600 font-medium flex items-center">
Copy Prompt <i data-feather="copy" class="ml-2 w-4 h-4"></i>
</button>
</div>
<!-- Prompt 3 -->
<div class="prompt-card rounded-xl p-6 shadow-lg" data-aos="fade-up" data-aos-delay="300">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3">
<i data-feather="image" class="text-pink-600"></i>
</div>
<h3 class="font-semibold text-gray-800">Product Photography</h3>
</div>
<p class="text-gray-600 mb-4">"A minimalist product shot of a ceramic coffee mug on a wooden table with morning sunlight, soft shadows, clean background, commercial photography style"</p>
<button class="text-purple-600 font-medium flex items-center">
Copy Prompt <i data-feather="copy" class="ml-2 w-4 h-4"></i>
</button>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="max-w-7xl mx-auto py-20 px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold text-gray-800 mb-6" data-aos="fade-up">Ready to explore more prompts?</h2>
<p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
Join thousands of creators using PromptVault to enhance their AI image generation workflow.
</p>
<button class="gradient-bg text-white px-8 py-4 rounded-full font-semibold shadow-lg hover:opacity-90 transition duration-300" data-aos="fade-up" data-aos-delay="200">
Browse All Prompts <i data-feather="arrow-right" class="inline ml-2"></i>
</button>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">PromptVault</h3>
<p class="text-gray-400">The ultimate collection of AI image generation prompts for creators.</p>
</div>
<div>
<h4 class="font-semibold mb-4">Categories</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Men</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Women</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Couple</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Kids</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="discord"></i></a>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 PromptVault. All rights reserved.</p>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
</script>
</body>
</html>
|