File size: 10,215 Bytes
fc287fb | 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 | <!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">
<!-- Hero Section -->
<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>
<!-- Features 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>
<!-- Projects 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">
<!-- Project Card 1 -->
<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>
<!-- Project Card 2 -->
<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>
<!-- CTA 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();
// Initialize tooltips
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> |