Spaces:
Running
Running
File size: 9,166 Bytes
06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 c544ac4 06469d6 c544ac4 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 be348b6 06469d6 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeCollab Pro - Collaborative Coding Platform</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>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<!-- Hero Section -->
<section class="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 text-white">
<div class="absolute inset-0 bg-black opacity-20"></div>
<div class="relative container mx-auto px-6 py-24">
<div class="text-center">
<h1 class="text-5xl md:text-6xl font-bold mb-6 animate-fade-in">
Code Together, Build Faster
</h1>
<p class="text-xl md:text-2xl mb-8 text-gray-100 max-w-3xl mx-auto">
Real-time collaborative coding platform with secure execution, enterprise features, and seamless teamwork.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/editor.html" class="pro-button px-8 py-3 text-white rounded-lg font-semibold inline-block">
Start Coding
</a>
<a href="#features" class="px-8 py-3 border-2 border-white rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition">
Learn More
</a>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0">
<svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="#F9FAFB"/>
</svg>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12 text-gray-800 pro-heading lazy-load">Powerful Features</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="pro-card p-6 lazy-load">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="users" class="text-blue-600"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Real-time Collaboration</h3>
<p class="text-gray-600 pro-text">Code together with your team in real-time. See cursors, edits, and collaborate seamlessly.</p>
</div>
<div class="pro-card p-6 lazy-load">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="cpu" class="text-purple-600"></i>
</div>
<h3 class="text-xl font-semibold mb-3">AI-Powered Tools</h3>
<p class="text-gray-600 pro-text">Build custom AI agents with advanced tool integration and intelligent code assistance.</p>
</div>
<div class="pro-card p-6 lazy-load">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="git-branch" class="text-purple-600"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Version Control</h3>
<p class="text-gray-600 pro-text">Built-in Git integration for version control and team collaboration workflows.</p>
</div>
</div>
</div>
</section>
<!-- Code Editor Preview -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="lazy-load">
<h2 class="text-4xl font-bold mb-6 text-gray-800 pro-heading">Professional Code Editor</h2>
<ul class="space-y-4">
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
<span class="text-gray-700 pro-text">Syntax highlighting for 100+ languages</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
<span class="text-gray-700 pro-text">IntelliSense code completion</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
<span class="text-gray-700 pro-text">Integrated terminal and console</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
<span class="text-gray-700 pro-text">Live preview for web projects</span>
</li>
</ul>
</div>
<div class="bg-gray-900 rounded-lg p-4 shadow-2xl lazy-load">
<div class="flex items-center justify-between mb-3">
<div class="flex space-x-2">
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
</div>
<span class="text-gray-400 text-sm">main.js</span>
</div>
<pre class="text-sm"><code class="text-gray-300"><span class="text-purple-400">function</span> <span class="text-blue-400">collaborate</span>() {
<span class="text-gray-500">// Real-time collaboration</span>
<span class="text-blue-400">const</span> team = [<span class="text-green-400">'Alice'</span>, <span class="text-green-400">'Bob'</span>, <span class="text-green-400">'Charlie'</span>];
<span class="text-blue-400">return</span> team.<span class="text-yellow-400">map</span>(member => member.<span class="text-yellow-400">toUpperCase</span>());
}
<span class="text-blue-400">const</span> result = <span class="text-blue-400">collaborate</span>();
console.<span class="text-yellow-400">log</span>(result);</code></pre>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-20 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-4 gap-8 text-center">
<div>
<div class="text-4xl font-bold mb-2" data-count="1000000">0</div>
<div class="text-indigo-200">Lines of Code Written</div>
</div>
<div>
<div class="text-4xl font-bold mb-2" data-count="50000">0</div>
<div class="text-indigo-200">Active Developers</div>
</div>
<div>
<div class="text-4xl font-bold mb-2" data-count="1000">0</div>
<div class="text-indigo-200">Projects Created</div>
</div>
<div>
<div class="text-4xl font-bold mb-2" data-count="99">0</div>
<div class="text-indigo-200">% Uptime</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-6 text-center">
<h2 class="text-4xl font-bold mb-4 text-gray-800">Ready to Build Something Amazing?</h2>
<p class="text-xl text-gray-600 mb-8">Join thousands of developers collaborating on CodeCollab Pro</p>
<a href="/editor.html" class="pro-button px-8 py-3 text-white rounded-lg font-semibold inline-flex items-center">
Get Started Now
<i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</section>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |