| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CodeBloom Rose Petals</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <link rel="stylesheet" href="style.css"> |
| <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="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| </head> |
| <body class="bg-gray-50 font-sans text-gray-900"> |
| <bloom-navbar></bloom-navbar> |
|
|
| <main class="min-h-screen pt-24"> |
| |
| <section class="container mx-auto px-4 md:px-8"> |
| <div class="flex flex-col lg:flex-row items-center gap-12"> |
| <div class="lg:w-1/2"> |
| <h1 class="text-5xl md:text-6xl font-bold text-rose-600 leading-tight"> |
| Transform Your Code with <span class="text-transparent bg-gradient-to-r from-rose-500 via-rose-600 to-pink-600 bg-clip-text">Rose Petals</span> |
| </h1> |
| <p class="text-gray-600 text-lg mt-6 mb-10"> |
| A beautiful development environment where creativity blossoms. Experience the perfect blend of elegant design and powerful functionality for modern developers. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#projects" class="px-8 py-4 bg-gradient-to-r from-rose-500 to-rose-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300"> |
| Explore Projects |
| </a> |
| <a href="#features" class="px-8 py-4 border-2 border-rose-400 text-rose-600 font-semibold rounded-xl hover:bg-rose-50 transition-colors duration-300"> |
| Discover Features |
| </a> |
| </div> |
| </div> |
| <div class="lg:w-1/2 relative"> |
| <img src="http://static.photos/technology/1200x630/42" alt="Modern development workspace" |
| class="rounded-3xl shadow-2xl border-8 border-white transform rotate-3 hover:rotate-0 transition-transform duration-500"> |
| <div class="absolute -top-6 -right-6 bg-rose-100 border-4 border-white p-6 rounded-2xl shadow-xl"> |
| <span class="text-rose-600 font-bold text-xl">✨ Live Preview</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="container mx-auto px-4 md:px-8 mt-32"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold text-rose-700">Why Choose CodeBloom?</h2> |
| <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Designed with love and attention to detail, our platform makes coding a delightful experience</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-white rounded-2xl p-8 shadow-lg border border-rose-100 hover:shadow-2xl transition-all duration-300"> |
| <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-rose-100 to-rose-200 flex items-center justify-center mb-6"> |
| <i data-feather="code" class="text-rose-600 w-8 h-8"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-rose-700 mb-4">Intelligent Editor</h3> |
| <p class="text-gray-600">Smart autocomplete, syntax highlighting, and real-time error detection in a beautiful rose-themed interface.</p> |
| </div> |
| <div class="bg-white rounded-2xl p-8 shadow-lg border border-rose-100 hover:shadow-2xl transition-all duration-300"> |
| <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-rose-100 to-rose-200 flex items-center justify-center mb-6"> |
| <i data-feather="layers" class="text-rose-600 w-8 h-8"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-rose-700 mb-4">Project Management</h3> |
| <p class="text-gray-600">Organize your projects with intuitive boards and collaborative tools, all wrapped in soft rose aesthetics.</p> |
| </div> |
| <div class="bg-white rounded-2xl p-8 shadow-lg border border-rose-100 hover:shadow-2xl transition-all duration-300"> |
| <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-rose-100 to-rose-200 flex items-center justify-center mb-6"> |
| <i data-feather="zap" class="text-rose-600 w-8 h-8"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-rose-700 mb-4">Lightning Fast</h3> |
| <p class="text-gray-600">Built for speed with optimized performance and instant previews. Code, test, and deploy in milliseconds.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="projects" class="container mx-auto px-4 md:px-8 mt-32"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold text-rose-700">Featured Projects</h2> |
| <p class="text-gray-600 mt-4">Discover amazing projects built with our platform</p> |
| </div> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div class="bg-gradient-to-br from-rose-50 to-pink-50 rounded-2xl p-8 shadow-lg border border-rose-100 hover:shadow-2xl transition-all duration-500"> |
| <div class="flex items-center justify-between mb-6"> |
| <span class="px-4 py-2 bg-rose-100 text-rose-700 font-semibold rounded-xl">Frontend</span> |
| <span class="text-gray-500">★ 152</span> |
| </div> |
| <h3 class="text-3xl font-bold text-rose-700 mb-4">Design System Component Library</h3> |
| <p class="text-gray-600 mb-6">A comprehensive library of reusable UI components built with our signature rose palette and modern interactions.</p> |
| <div class="flex items-center gap-4 mb-8"> |
| <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">React</span> |
| <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">TypeScript</span> |
| <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">Tailwind</span> |
| </div> |
| <a href="project-1.html" class="inline-flex items-center gap-2 text-rose-600 font-semibold hover:text-rose-700 transition-colors duration-300"> |
| View Project <i data-feather="arrow-right" class="w-4 h-4"></i> |
| </a> |
| </div> |
|
|
| |
| <div class="bg-gradient-to-br from-rose-50 to-pink-50 rounded-2xl p-8 shadow-lg border border-rose-100 hover:shadow-2xl transition-all duration-500"> |
| <div class="flex items-center justify-between mb-6"> |
| <span class="px-4 py-2 bg-rose-100 text-rose-700 font-semibold rounded-xl">Full Stack</span> |
| <span class="text-gray-500">★ 89</span> |
| </div> |
| <h3 class="text-3xl font-bold text-rose-700 mb-4">E-Commerce API & Dashboard</h3> |
| <p class="text-gray-600 mb-6">A complete solution with beautiful rose-themed admin panel, real-time analytics, and seamless payment integration.</p> |
| <div class="flex items-center gap-4 mb-8"> |
| <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">Node.js</span> |
| <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">Vue</span> |
| <span class="px-4 py-2 bg-white border border-rose-200 text-rose-600 rounded-xl text-sm font-medium">MongoDB</span> |
| </div> |
| <a href="project-2.html" class="inline-flex items-center gap-2 text-rose-600 font-semibold hover:text-rose-700 transition-colors duration-300"> |
| View Project <i data-feather="arrow-right" class="w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="container mx-auto px-4 md:px-8 mt-32"> |
| <div class="bg-gradient-to-r from-rose-500 to-pink-500 rounded-3xl p-12 lg:p-16 text-center text-white shadow-xl"> |
| <h2 class="text-4xl md:text-5xl font-bold leading-tight">Ready to Bloom with Code?</h2> |
| <p class="text-rose-100 text-xl mt-6 mb-10 max-w-2xl mx-auto">Join thousands of developers who have transformed their workflow with our beautiful rose-themed platform.</p> |
| <a href="register.html" class="inline-flex items-center gap-3 px-10 py-5 bg-white text-rose-600 font-bold rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300"> |
| Start Coding for Free <i data-feather="sparkles" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </section> |
| </main> |
|
|
| <bloom-footer></bloom-footer> |
|
|
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| |
| document.querySelectorAll('[data-feather]').forEach(el => { |
| if (!el.getAttribute('title')) { |
| const title = el.getAttribute('aria-label') || 'Button'; |
| el.setAttribute('title', title); |
| } |
| }); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
