Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GlowSign - App Store</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); | |
| } | |
| .glow-effect-secondary { | |
| box-shadow: 0 0 15px rgba(236, 72, 153, 0.5); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%); | |
| } | |
| .app-card:hover { | |
| transform: translateY(-5px); | |
| transition: all 0.3s ease; | |
| } | |
| .rating-stars { | |
| color: #f59e0b; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="fixed inset-0 overflow-hidden z-[-1]"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary-500/10 to-secondary-500/10 opacity-20"></div> | |
| <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div> | |
| </div> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-12"> | |
| <div class="mb-6 md:mb-0"> | |
| <h1 class="text-4xl font-bold text-white mb-2">GlowSign Store</h1> | |
| <p class="text-gray-400">Future-ready apps for your digital life</p> | |
| </div> | |
| <div class="relative w-full md:w-64"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="search" class="text-gray-500"></i> | |
| </div> | |
| <input type="text" class="w-full pl-10 bg-gray-800/50 border border-gray-700 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Search apps..."> | |
| </div> | |
| </div> | |
| <!-- Featured App --> | |
| <div class="gradient-bg backdrop-blur-lg rounded-2xl overflow-hidden border border-gray-800 glow-effect mb-12"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 p-8 md:p-12 flex items-center justify-center"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-primary-500 to-secondary-500 blur-xl opacity-20"></div> | |
| <img src="http://static.photos/technology/640x360/42" alt="Featured App" class="relative rounded-2xl w-full max-w-md border-2 border-gray-700"> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 p-8 md:p-12 flex flex-col justify-center"> | |
| <div class="flex items-center mb-4"> | |
| <span class="px-3 py-1 bg-primary-500/20 text-primary-400 rounded-full text-sm font-medium">FEATURED</span> | |
| </div> | |
| <h2 class="text-3xl font-bold text-white mb-4">GlowSign Pro</h2> | |
| <p class="text-gray-300 mb-6">The ultimate digital signing experience with AR integration and blockchain verification.</p> | |
| <div class="flex items-center mb-6"> | |
| <div class="rating-stars flex mr-2"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| <span class="text-gray-400 text-sm">4.9 (12.4K ratings)</span> | |
| </div> | |
| <div class="flex flex-wrap gap-4 mb-8"> | |
| <span class="px-3 py-1 bg-gray-800/50 text-gray-300 rounded-full text-xs">#Productivity</span> | |
| <span class="px-3 py-1 bg-gray-800/50 text-gray-300 rounded-full text-xs">#Business</span> | |
| <span class="px-3 py-1 bg-gray-800/50 text-gray-300 rounded-full text-xs">#AI</span> | |
| </div> | |
| <button class="w-full md:w-auto bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-8 rounded-lg glow-effect hover:glow-effect-secondary transition duration-200"> | |
| Download Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Categories --> | |
| <div class="mb-12"> | |
| <h2 class="text-2xl font-bold text-white mb-6">Categories</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4"> | |
| <a href="#" class="gradient-bg backdrop-blur-lg rounded-xl p-4 text-center border border-gray-800 hover:glow-effect transition duration-200"> | |
| <div class="w-12 h-12 bg-primary-500/20 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i data-feather="briefcase" class="text-primary-400"></i> | |
| </div> | |
| <p class="text-white font-medium">Business</p> | |
| </a> | |
| <a href="#" class="gradient-bg backdrop-blur-lg rounded-xl p-4 text-center border border-gray-800 hover:glow-effect transition duration-200"> | |
| <div class="w-12 h-12 bg-secondary-500/20 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i data-feather="trending-up" class="text-secondary-400"></i> | |
| </div> | |
| <p class="text-white font-medium">Finance</p> | |
| </a> | |
| <a href="#" class="gradient-bg backdrop-blur-lg rounded-xl p-4 text-center border border-gray-800 hover:glow-effect transition duration-200"> | |
| <div class="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i data-feather="heart" class="text-green-400"></i> | |
| </div> | |
| <p class="text-white font-medium">Health</p> | |
| </a> | |
| <a href="#" class="gradient-bg backdrop-blur-lg rounded-xl p-4 text-center border border-gray-800 hover:glow-effect transition duration-200"> | |
| <div class="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i data-feather="music" class="text-purple-400"></i> | |
| </div> | |
| <p class="text-white font-medium">Entertainment</p> | |
| </a> | |
| <a href="#" class="gradient-bg backdrop-blur-lg rounded-xl p-4 text-center border border-gray-800 hover:glow-effect transition duration-200"> | |
| <div class="w-12 h-12 bg-yellow-500/20 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i data-feather="book" class="text-yellow-400"></i> | |
| </div> | |
| <p class="text-white font-medium">Education</p> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Popular Apps --> | |
| <div class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-white">Popular Apps</h2> | |
| <a href="#" class="text-primary-400 hover:text-primary-300 text-sm font-medium">View All</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- App Card 1 --> | |
| <div class="app-card gradient-bg backdrop-blur-lg rounded-xl overflow-hidden border border-gray-800 glow-effect"> | |
| <div class="p-5"> | |
| <div class="w-16 h-16 bg-primary-500/20 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="file-text" class="text-primary-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-white mb-1">DocSign</h3> | |
| <p class="text-gray-400 text-sm mb-3">Secure document signing</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="rating-stars flex"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </div> | |
| <button class="text-xs bg-primary-500 hover:bg-primary-600 text-white px-3 py-1 rounded-lg"> | |
| Get | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Card 2 --> | |
| <div class="app-card gradient-bg backdrop-blur-lg rounded-xl overflow-hidden border border-gray-800 glow-effect"> | |
| <div class="p-5"> | |
| <div class="w-16 h-16 bg-secondary-500/20 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="dollar-sign" class="text-secondary-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-white mb-1">CryptoTrader</h3> | |
| <p class="text-gray-400 text-sm mb-3">AI-powered trading</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="rating-stars flex"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <button class="text-xs bg-secondary-500 hover:bg-secondary-600 text-white px-3 py-1 rounded-lg"> | |
| Get | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Card 3 --> | |
| <div class="app-card gradient-bg backdrop-blur-lg rounded-xl overflow-hidden border border-gray-800 glow-effect"> | |
| <div class="p-5"> | |
| <div class="w-16 h-16 bg-green-500/20 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="activity" class="text-green-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-white mb-1">HealthTrack</h3> | |
| <p class="text-gray-400 text-sm mb-3">Wellness companion</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="rating-stars flex"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </div> | |
| <button class="text-xs bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-lg"> | |
| Get | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- App Card 4 --> | |
| <div class="app-card gradient-bg backdrop-blur-lg rounded-xl overflow-hidden border border-gray-800 glow-effect"> | |
| <div class="p-5"> | |
| <div class="w-16 h-16 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="video" class="text-purple-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-white mb-1">StreamVR</h3> | |
| <p class="text-gray-400 text-sm mb-3">Immersive videos</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="rating-stars flex"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </div> | |
| <button class="text-xs bg-purple-500 hover:bg-purple-600 text-white px-3 py-1 rounded-lg"> | |
| Get | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Releases --> | |
| <div class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-white">New Releases</h2> | |
| <a href="#" class="text-primary-400 hover:text-primary-300 text-sm font-medium">View All</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- New App 1 --> | |
| <div class="app-card gradient-bg backdrop-blur-lg rounded-xl overflow-hidden border border-gray-800 glow-effect"> | |
| <div class="relative"> | |
| <img src="http://static.photos/technology/640x360/101" alt="New App" class="w-full h-40 object-cover"> | |
| <div class="absolute top-3 right-3 px-2 py-1 bg-gray-900/80 text-xs text-white rounded">NEW</div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-lg font-bold text-white mb-1">AI Designer</h3> | |
| <p class="text-gray-400 text-sm mb-3">Create stunning graphics with AI</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="rating-stars flex mr-2"> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs">4.2</span> | |
| </div> | |
| <button class="text-xs bg-primary-500 hover:bg-primary-600 text-white px-3 py-1 rounded-lg"> | |
| Free | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New App 2 --> | |
| <div class="app-card gradient-bg backdrop-blur-lg rounded-xl overflow-hidden border border-gray-800 glow-effect"> | |
| <div class="relative"> | |
| <img src="http://static.photos/technology/640x360/102" alt="New App" class="w-full h-40 object-cover"> | |
| <div class="absolute top-3 right-3 px-2 py-1 bg-gray-900/80 text-xs text-white rounded">NEW</div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-lg font-bold text-white mb-1">MindSpace</h3> | |
| <p class="text-gray-400 text-sm mb-3">Meditation & focus</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="rating-stars flex mr-2"> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs">4.9</span> | |
| </div> | |
| <button class="text-xs bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-lg"> | |
| Free | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New App 3 --> | |
| <div class="app-card gradient-bg backdrop-blur-lg rounded-xl overflow-hidden border border-gray-800 glow-effect"> | |
| <div class="relative"> | |
| <img src="http://static.photos/technology/640x360/103" alt="New App" class="w-full h-40 object-cover"> | |
| <div class="absolute top-3 right-3 px-2 py-1 bg-gray-900/80 text-xs text-white rounded">NEW</div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-lg font-bold text-white mb-1">CodePilot</h3> | |
| <p class="text-gray-400 text-sm mb-3">AI coding assistant</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="rating-stars flex mr-2"> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| <i data-feather="star" class="w-3 h-3 fill-current"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs">5.0</span> | |
| </div> | |
| <button class="text-xs bg-purple-500 hover:bg-purple-600 text-white px-3 py-1 rounded-lg"> | |
| $4.99 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |