Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Blogiverse | Next-Gen Blog Experience</title> | |
| <link rel="icon" type="image/x-icon" href="https://static.photos/technology/32x32/42"> | |
| <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://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eff6ff', | |
| 100: '#dbeafe', | |
| 200: '#bfdbfe', | |
| 300: '#93c5fd', | |
| 400: '#60a5fa', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| 800: '#1e40af', | |
| 900: '#1e3a8a', | |
| }, | |
| secondary: { | |
| 50: '#faf5ff', | |
| 100: '#f3e8ff', | |
| 200: '#e9d5ff', | |
| 300: '#d8b4fe', | |
| 400: '#c084fc', | |
| 500: '#a855f7', | |
| 600: '#9333ea', | |
| 700: '#7e22ce', | |
| 800: '#6b21a8', | |
| 900: '#581c87', | |
| } | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'bounce-slow': 'bounce 3s infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300"> | |
| <!-- Header Navigation --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section with 3D Animation --> | |
| <section class="relative min-h-screen overflow-hidden bg-gradient-to-br from-primary-50 via-white to-secondary-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900"> | |
| <div class="absolute inset-0 z-0" id="threejs-container"></div> | |
| <div class="relative z-10 container mx-auto px-4 py-16 lg:py-32"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-secondary-600">Welcome to the</span> | |
| <br> | |
| <span class="text-gray-800 dark:text-white">3D Blogiverse 🚀</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto"> | |
| Experience blogging like never before with immersive 3D animations, AI-powered content, and seamless headless CMS integration. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="#blogs" class="px-8 py-4 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2"> | |
| <i data-feather="book-open"></i> | |
| Explore Articles | |
| </a> | |
| <a href="#dashboard" class="px-8 py-4 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-primary-600 dark:text-primary-400 font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2"> | |
| <i data-feather="terminal"></i> | |
| Visit Dashboard | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Stats Counter --> | |
| <div class="mt-24 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto"> | |
| <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-2xl shadow-xl text-center"> | |
| <div class="text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2 animate-pulse-slow">∞</div> | |
| <p class="text-gray-700 dark:text-gray-300">Real-time 3D Animations</p> | |
| </div> | |
| <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-2xl shadow-xl text-center"> | |
| <div class="text-4xl font-bold text-secondary-600 dark:text-secondary-400 mb-2 animate-bounce-slow">⚡</div> | |
| <p class="text-gray-700 dark:text-gray-300">Automated Backend Server</p> | |
| </div> | |
| <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm p-6 rounded-2xl shadow-xl text-center"> | |
| <div class="text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2">🎯</div> | |
| <p class="text-gray-700 dark:text-gray-300">Headless CMS Powered</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scroll Indicator --> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <i data-feather="chevron-down" class="text-gray-400 dark:text-gray-500 w-8 h-8"></i> | |
| </div> | |
| </section> | |
| <!-- Blog Posts Section --> | |
| <section id="blogs" class="py-20 bg-gray-50 dark:bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Latest from the Blogiverse</h2> | |
| <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">Discover articles powered by our headless CMS with real-time updates and interactive 3D elements.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12" id="blog-posts"> | |
| <!-- Blog posts will be loaded here via API --> | |
| </div> | |
| <div class="text-center"> | |
| <a href="#all-blogs" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-primary-500 to-secondary-500 text-white font-semibold rounded-full hover:shadow-xl transition-all duration-300 transform hover:scale-105"> | |
| <i data-feather="grid"></i> | |
| View All Articles | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CMS Dashboard Section --> | |
| <section id="dashboard" class="py-20 bg-gradient-to-b from-white to-gray-100 dark:from-gray-800 dark:to-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Headless CMS Dashboard</h2> | |
| <p class="text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">Manage your content with our automated backend server featuring real-time previews, AI suggestions, and analytics.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div class="relative"> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-8 transform hover:scale-[1.02] transition-transform duration-300"> | |
| <div class="flex items-center gap-4 mb-6"> | |
| <div class="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-xl"> | |
| <i data-feather="database" class="text-primary-600 dark:text-primary-400 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold">Content Management</h3> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 mb-6">Our headless CMS provides a seamless interface for creating, editing, and publishing content with real-time collaboration.</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center gap-3"><i data-feather="check-circle" class="text-green-500 w-5 h-5"></i> <span>AI-powered content suggestions</span></li> | |
| <li class="flex items-center gap-3"><i data-feather="check-circle" class="text-green-500 w-5 h-5"></i> <span>Real-time preview with 3D elements</span></li> | |
| <li class="flex items-center gap-3"><i data-feather="check-circle" class="text-green-500 w-5 h-5"></i> <span>Automated SEO optimization</span></li> | |
| </ul> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-64 h-64 bg-gradient-to-r from-primary-400 to-secondary-400 rounded-full opacity-10 blur-3xl animate-pulse"></div> | |
| </div> | |
| <div class="bg-gray-900 text-white rounded-2xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300"> | |
| <div class="p-8"> | |
| <div class="flex items-center gap-4 mb-6"> | |
| <div class="p-3 bg-secondary-100 dark:bg-secondary-900/30 rounded-xl"> | |
| <i data-feather="server" class="text-secondary-600 dark:text-secondary-400 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold">Automated Backend Server</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center p-4 bg-gray-800 rounded-lg"> | |
| <span>API Endpoints</span> | |
| <span class="text-green-400 font-mono">Active</span> | |
| </div> | |
| <div class="flex justify-between items-center p-4 bg-gray-800 rounded-lg"> | |
| <span>Database Sync</span> | |
| <span class="text-green-400 font-mono">Real-time</span> | |
| </div> | |
| <div class="flex justify-between items-center p-4 bg-gray-800 rounded-lg"> | |
| <span>3D Asset Processing</span> | |
| <span class="text-green-400 font-mono">Optimized</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive 3D Demo --> | |
| <section class="py-20 bg-gradient-to-tr from-primary-50 to-secondary-50 dark:from-gray-900 dark:to-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Interactive 3D Experience</h2> | |
| <p class="text-gray-600 dark:text-gray-400 mb-12 max-w-2xl mx-auto">Drag, zoom, and explore our interactive 3D model powered by Three.js. Experience the future of web content.</p> | |
| <div class="relative bg-gray-900 rounded-2xl shadow-2xl overflow-hidden h-96"> | |
| <div id="interactive-3d" class="w-full h-full"></div> | |
| <div class="absolute bottom-4 left-4 bg-black/50 backdrop-blur-sm text-white p-3 rounded-lg"> | |
| <p class="text-sm flex items-center gap-2"><i data-feather="move" class="w-4 h-4"></i> Drag to rotate • Scroll to zoom</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <custom-footer></custom-footer> | |
| <!-- Web Components --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <!-- Main Scripts --> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |