Hugging Face's logo

Spaces:
Crossberry
/
codecollabx-where-devs-unite
Running

App Files Community
Crossberry commited on
Commit
d5de1f9
·
verified ·
1 Parent(s): b1a9c06

Continu

Browse files
Files changed (9) hide show
  1. README.md +8 -5
  2. components/features.js +89 -0
  3. components/footer.js +88 -0
  4. components/hero.js +55 -0
  5. components/navbar.js +96 -0
  6. components/testimonials.js +90 -0
  7. index.html +55 -19
  8. script.js +40 -0
  9. style.css +21 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codecollabx Where Devs Unite
3
- emoji: 🐨
4
- colorFrom: pink
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CodeCollabX - Where Devs Unite! 🚀
3
+ colorFrom: red
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/features.js ADDED
@@ -0,0 +1,89 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFeatures extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .feature-icon {
7
+ background: linear-gradient(135deg, #2EA44F 0%, #0366D6 100%);
8
+ }
9
+ </style>
10
+ <section class="py-16 bg-white">
11
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
12
+ <div class="text-center mb-16">
13
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Accelerate your entire workflow</h2>
14
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
15
+ From your first line of code to final deployment, CodeCollabX provides AI and automation tools to help you build and ship better software faster.
16
+ </p>
17
+ </div>
18
+
19
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
20
+ <div class="feature-card bg-white p-6 rounded-xl border border-gray-200 transition-all">
21
+ <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
22
+ <i data-feather="code" class="text-white w-6 h-6"></i>
23
+ </div>
24
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Code</h3>
25
+ <p class="text-gray-600">
26
+ Write, test, and fix code quickly with AI assistance, from simple boilerplate to complex features.
27
+ </p>
28
+ </div>
29
+ <div class="feature-card bg-white p-6 rounded-xl border border-gray-200 transition-all">
30
+ <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
31
+ <i data-feather="clipboard" class="text-white w-6 h-6"></i>
32
+ </div>
33
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Plan</h3>
34
+ <p class="text-gray-600">
35
+ Organize everything from high-level roadmaps to everyday tasks with project management tools.
36
+ </p>
37
+ </div>
38
+ <div class="feature-card bg-white p-6 rounded-xl border border-gray-200 transition-all">
39
+ <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
40
+ <i data-feather="users" class="text-white w-6 h-6"></i>
41
+ </div>
42
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Collaborate</h3>
43
+ <p class="text-gray-600">
44
+ Work together seamlessly with built-in code review, discussions, and issue tracking.
45
+ </p>
46
+ </div>
47
+ <div class="feature-card bg-white p-6 rounded-xl border border-gray-200 transition-all">
48
+ <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
49
+ <i data-feather="refresh-cw" class="text-white w-6 h-6"></i>
50
+ </div>
51
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Automate</h3>
52
+ <p class="text-gray-600">
53
+ Automate your workflow with CI/CD pipelines, testing, and deployments.
54
+ </p>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="bg-gray-50 rounded-xl p-8 md:p-12 grid md:grid-cols-2 gap-12 items-center">
59
+ <div>
60
+ <h2 class="text-2xl font-bold text-gray-900 mb-4">Your AI partner everywhere</h2>
61
+ <p class="text-gray-600 mb-6">
62
+ Copilot is ready to work with you at each step of the software development lifecycle, from planning to deployment.
63
+ </p>
64
+ <a href="#" class="inline-flex items-center text-accent-500 font-medium">
65
+ Explore GitHub Copilot
66
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
67
+ </a>
68
+ </div>
69
+ <div class="relative">
70
+ <img src="http://static.photos/technology/1024x576/42" alt="AI Coding Assistant" class="w-full rounded-lg shadow-md border border-gray-200">
71
+ <div class="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-lg border border-gray-200 w-56">
72
+ <div class="flex items-start">
73
+ <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full">
74
+ <i data-feather="cpu" class="w-5 h-5 text-purple-500"></i>
75
+ </div>
76
+ <div class="ml-3">
77
+ <h3 class="text-sm font-medium text-gray-900">AI Suggestions</h3>
78
+ <p class="text-xs text-gray-500">Context-aware code</p>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </section>
86
+ `;
87
+ }
88
+ }
89
+ customElements.define('custom-features', CustomFeatures);
components/footer.js ADDED
@@ -0,0 +1,88 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .footer-link:hover {
7
+ color: var(--accent-500);
8
+ }
9
+ </style>
10
+ <footer class="bg-primary-500 text-white">
11
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8">
12
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
13
+ <div class="col-span-2">
14
+ <div class="flex items-center mb-4">
15
+ <i data-feather="github" class="h-8 w-8 text-white"></i>
16
+ <span class="ml-2 text-xl font-bold text-white">CodeCollabX</span>
17
+ </div>
18
+ <p class="text-gray-300 mb-6">
19
+ The complete developer platform to build, scale, and deliver secure software.
20
+ </p>
21
+ <div class="flex space-x-4">
22
+ <a href="#" class="text-gray-300 hover:text-white">
23
+ <i data-feather="twitter" class="w-5 h-5"></i>
24
+ </a>
25
+ <a href="#" class="text-gray-300 hover:text-white">
26
+ <i data-feather="facebook" class="w-5 h-5"></i>
27
+ </a>
28
+ <a href="#" class="text-gray-300 hover:text-white">
29
+ <i data-feather="linkedin" class="w-5 h-5"></i>
30
+ </a>
31
+ <a href="#" class="text-gray-300 hover:text-white">
32
+ <i data-feather="youtube" class="w-5 h-5"></i>
33
+ </a>
34
+ </div>
35
+ </div>
36
+
37
+ <div>
38
+ <h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">Product</h3>
39
+ <ul class="space-y-2">
40
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Features</a></li>
41
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Security</a></li>
42
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Team</a></li>
43
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Enterprise</a></li>
44
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Pricing</a></li>
45
+ </ul>
46
+ </div>
47
+
48
+ <div>
49
+ <h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">Resources</h3>
50
+ <ul class="space-y-2">
51
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Documentation</a></li>
52
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Community</a></li>
53
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Webinars</a></li>
54
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Partners</a></li>
55
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Status</a></li>
56
+ </ul>
57
+ </div>
58
+
59
+ <div>
60
+ <h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">Company</h3>
61
+ <ul class="space-y-2">
62
+ <li><a href="#" class="text-gray-300 footer-link text-sm">About</a></li>
63
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Blog</a></li>
64
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Careers</a></li>
65
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Press</a></li>
66
+ <li><a href="#" class="text-gray-300 footer-link text-sm">Contact</a></li>
67
+ </ul>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="mt-12 pt-8 border-t border-gray-700">
72
+ <div class="flex flex-col md:flex-row justify-between items-center">
73
+ <div class="flex space-x-6">
74
+ <a href="#" class="text-gray-300 footer-link text-sm">Terms</a>
75
+ <a href="#" class="text-gray-300 footer-link text-sm">Privacy</a>
76
+ <a href="#" class="text-gray-300 footer-link text-sm">Sitemap</a>
77
+ </div>
78
+ <div class="mt-4 md:mt-0 text-sm text-gray-400">
79
+ © 2023 CodeCollabX, Inc. All rights reserved.
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </footer>
85
+ `;
86
+ }
87
+ }
88
+ customElements.define('custom-footer', CustomFooter);
components/hero.js ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHero extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .hero-gradient {
7
+ background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
8
+ }
9
+ </style>
10
+ <section class="hero-gradient pt-24 pb-16 md:pt-32 md:pb-24">
11
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
12
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
13
+ <div class="text-center lg:text-left mb-12 lg:mb-0">
14
+ <div class="inline-block px-3 py-1 mb-4 text-xs font-semibold text-accent-600 bg-accent-100 rounded-full">
15
+ New: Universe 2025 Recap
16
+ </div>
17
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
18
+ <span class="gradient-text">Build software</span> <br>together with AI
19
+ </h1>
20
+ <p class="text-lg md:text-xl text-gray-600 max-w-lg mb-8">
21
+ From your first line of code to final deployment, CodeCollabX provides AI and automation tools to help you build and ship better software faster.
22
+ </p>
23
+ <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
24
+ <input type="email" placeholder="Enter your email" class="px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent w-full sm:w-64">
25
+ <button class="bg-accent-500 hover:bg-accent-600 text-white font-medium py-3 px-6 rounded-md transition-all">
26
+ Sign up for free
27
+ </button>
28
+ </div>
29
+ <p class="text-sm text-gray-500 mt-3">
30
+ By signing up, you agree to our <a href="#" class="text-accent-500 hover:underline">Terms of Service</a> and <a href="#" class="text-accent-500 hover:underline">Privacy Policy</a>.
31
+ </p>
32
+ </div>
33
+ <div class="relative flex justify-center">
34
+ <div class="relative w-full max-w-md">
35
+ <img src="https://github.githubassets.com/assets/mona-head-3887875b2d69.webp" alt="Mona the Octocat" class="octocat-float w-full h-auto">
36
+ <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg border border-gray-200 w-64">
37
+ <div class="flex items-start">
38
+ <div class="flex-shrink-0 bg-accent-100 p-2 rounded-full">
39
+ <i data-feather="zap" class="w-5 h-5 text-accent-500"></i>
40
+ </div>
41
+ <div class="ml-3">
42
+ <h3 class="text-sm font-medium text-gray-900">Try Copilot for free</h3>
43
+ <p class="text-xs text-gray-500">Your AI coding partner</p>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </section>
52
+ `;
53
+ }
54
+ }
55
+ customElements.define('custom-hero', CustomHero);
components/navbar.js ADDED
@@ -0,0 +1,96 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .nav-link:hover {
7
+ color: var(--accent-500);
8
+ }
9
+ .dropdown-content {
10
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
11
+ }
12
+ @media (max-width: 1023px) {
13
+ .mobile-menu {
14
+ display: none;
15
+ }
16
+ }
17
+ </style>
18
+ <nav class="bg-white border-b border-gray-200 fixed w-full z-50">
19
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
20
+ <div class="flex justify-between h-16">
21
+ <div class="flex items-center">
22
+ <a href="/" class="flex-shrink-0 flex items-center">
23
+ <i data-feather="github" class="h-8 w-8 text-primary-500"></i>
24
+ <span class="ml-2 text-xl font-bold text-primary-500">CodeCollabX</span>
25
+ </a>
26
+ <div class="hidden lg:ml-8 lg:flex lg:space-x-8">
27
+ <div class="relative group" data-dropdown>
28
+ <button data-dropdown-toggle="platform-dropdown" class="text-gray-700 hover:text-accent-500 px-3 py-2 rounded-md text-sm font-medium flex items-center">
29
+ Platform
30
+ <i data-feather="chevron-down" class="ml-1 w-4 h-4"></i>
31
+ </button>
32
+ <div id="platform-dropdown" data-dropdown class="hidden absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
33
+ <div class="py-1 grid grid-cols-2 gap-4 p-4">
34
+ <div>
35
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">AI & Automation</h3>
36
+ <a href="#" class="block px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 rounded">Copilot</a>
37
+ <a href="#" class="block px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 rounded">Spark</a>
38
+ <a href="#" class="block px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 rounded">Models</a>
39
+ </div>
40
+ <div>
41
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Development</h3>
42
+ <a href="#" class="block px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 rounded">Codespaces</a>
43
+ <a href="#" class="block px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 rounded">Issues</a>
44
+ <a href="#" class="block px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 rounded">Code Review</a>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ <a href="#" class="text-gray-700 hover:text-accent-500 px-3 py-2 rounded-md text-sm font-medium">Explore</a>
50
+ <a href="#" class="text-gray-700 hover:text-accent-500 px-3 py-2 rounded-md text-sm font-medium">Solutions</a>
51
+ <a href="#" class="text-gray-700 hover:text-accent-500 px-3 py-2 rounded-md text-sm font-medium">Resources</a>
52
+ <a href="#" class="text-gray-700 hover:text-accent-500 px-3 py-2 rounded-md text-sm font-medium">Enterprise</a>
53
+ </div>
54
+ </div>
55
+ <div class="flex items-center">
56
+ <div class="hidden lg:ml-4 lg:flex lg:items-center">
57
+ <div class="relative">
58
+ <input type="text" placeholder="Search or jump to..." class="bg-gray-100 border border-gray-200 rounded-md py-1 px-3 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent">
59
+ </div>
60
+ <a href="#" class="ml-4 text-gray-700 hover:text-accent-500 px-3 py-2 rounded-md text-sm font-medium">Sign in</a>
61
+ <a href="#" class="ml-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-3 py-1.5 rounded-md text-sm font-medium">Sign up</a>
62
+ </div>
63
+ <button id="mobile-menu-button" class="lg:hidden text-gray-500 hover:text-gray-700 focus:outline-none">
64
+ <i data-feather="menu" class="h-6 w-6"></i>
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ <div id="mobile-menu" class="lg:hidden hidden bg-white border-t border-gray-200">
70
+ <div class="px-2 pt-2 pb-3 space-y-1">
71
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent-500 hover:bg-gray-50">Platform</a>
72
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent-500 hover:bg-gray-50">Explore</a>
73
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent-500 hover:bg-gray-50">Solutions</a>
74
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent-500 hover:bg-gray-50">Resources</a>
75
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent-500 hover:bg-gray-50">Enterprise</a>
76
+ <div class="pt-4 pb-3 border-t border-gray-200">
77
+ <div class="flex items-center px-5">
78
+ <div class="flex-shrink-0">
79
+ <i data-feather="user" class="h-10 w-10 rounded-full text-gray-400"></i>
80
+ </div>
81
+ <div class="ml-3">
82
+ <div class="text-base font-medium text-gray-800">Sign in to your account</div>
83
+ </div>
84
+ </div>
85
+ <div class="mt-3 px-2 space-y-1">
86
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent-500 hover:bg-gray-50">Sign in</a>
87
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-accent-500 hover:bg-gray-50">Sign up</a>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </nav>
93
+ `;
94
+ }
95
+ }
96
+ customElements.define('custom-navbar', CustomNavbar);
components/testimonials.js ADDED
@@ -0,0 +1,90 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomTestimonials extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <section class="py-16 bg-gray-50">
6
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
7
+ <div class="text-center mb-12">
8
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Trusted by developers worldwide</h2>
9
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
10
+ From startups to enterprises, CodeCollabX scales with teams of any size in any industry.
11
+ </p>
12
+ </div>
13
+
14
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
15
+ <div class="bg-white p-8 rounded-xl border border-gray-200">
16
+ <div class="flex items-center mb-4">
17
+ <img src="http://static.photos/people/200x200/1" alt="Duolingo" class="w-12 h-12 rounded-full">
18
+ <div class="ml-4">
19
+ <h4 class="font-medium text-gray-900">Duolingo</h4>
20
+ <p class="text-sm text-gray-500">Language Learning</p>
21
+ </div>
22
+ </div>
23
+ <p class="text-gray-600 mb-4">
24
+ "CodeCollabX helps us onboard new engineers and get them productive right away. We have all our source code, issues, and pull requests in one place."
25
+ </p>
26
+ <div class="flex items-center text-sm text-gray-500">
27
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
28
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
29
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
30
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
31
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
32
+ <span class="ml-2">5.0</span>
33
+ </div>
34
+ </div>
35
+
36
+ <div class="bg-white p-8 rounded-xl border border-gray-200">
37
+ <div class="flex items-center mb-4">
38
+ <img src="http://static.photos/office/200x200/2" alt="Mercedes-Benz" class="w-12 h-12 rounded-full">
39
+ <div class="ml-4">
40
+ <h4 class="font-medium text-gray-900">Mercedes-Benz</h4>
41
+ <p class="text-sm text-gray-500">Automotive</p>
42
+ </div>
43
+ </div>
44
+ <p class="text-gray-600 mb-4">
45
+ "CodeCollabX is a complete platform that frees us from menial tasks and enables us to do our best work. We've standardized our development process across teams."
46
+ </p>
47
+ <div class="flex items-center text-sm text-gray-500">
48
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
49
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
50
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
51
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
52
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
53
+ <span class="ml-2">5.0</span>
54
+ </div>
55
+ </div>
56
+
57
+ <div class="bg-white p-8 rounded-xl border border-gray-200">
58
+ <div class="flex items-center mb-4">
59
+ <img src="http://static.photos/finance/200x200/3" alt="Mercado Libre" class="w-12 h-12 rounded-full">
60
+ <div class="ml-4">
61
+ <h4 class="font-medium text-gray-900">Mercado Libre</h4>
62
+ <p class="text-sm text-gray-500">E-commerce</p>
63
+ </div>
64
+ </div>
65
+ <p class="text-gray-600 mb-4">
66
+ "With CodeCollabX Copilot, we've cut our coding time by 50%. The AI suggestions are context-aware and help us maintain consistency across our codebase."
67
+ </p>
68
+ <div class="flex items-center text-sm text-gray-500">
69
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
70
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
71
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
72
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i>
73
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-0.5"></i>
74
+ <span class="ml-2">4.9</span>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="text-center mt-8">
80
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-accent-500 hover:bg-accent-600">
81
+ Start building today
82
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
83
+ </a>
84
+ </div>
85
+ </div>
86
+ </section>
87
+ `;
88
+ }
89
+ }
90
+ customElements.define('custom-testimonials', CustomTestimonials);
index.html CHANGED
@@ -1,19 +1,55 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeCollabX - Where Devs Unite!</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 500: '#24292e',
18
+ 600: '#1b1f23',
19
+ 700: '#121417'
20
+ },
21
+ secondary: {
22
+ 500: '#6a737d',
23
+ 400: '#8b949e',
24
+ 300: '#b1bac4'
25
+ },
26
+ accent: {
27
+ 500: '#2ea44f',
28
+ 600: '#22863d',
29
+ 700: '#176f2c'
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+ </script>
36
+ <script src="components/navbar.js"></script>
37
+ <script src="components/hero.js"></script>
38
+ <script src="components/features.js"></script>
39
+ <script src="components/testimonials.js"></script>
40
+ <script src="components/footer.js"></script>
41
+ </head>
42
+ <body class="bg-gray-50 text-gray-800 font-sans antialiased">
43
+ <custom-navbar></custom-navbar>
44
+ <custom-hero></custom-hero>
45
+ <custom-features></custom-features>
46
+ <custom-testimonials></custom-testimonials>
47
+ <custom-footer></custom-footer>
48
+
49
+ <script>
50
+ feather.replace();
51
+ </script>
52
+ <script src="script.js"></script>
53
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
54
+ </body>
55
+ </html>
script.js ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ // Mobile menu toggle
3
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
4
+ const mobileMenu = document.getElementById('mobile-menu');
5
+
6
+ if (mobileMenuButton && mobileMenu) {
7
+ mobileMenuButton.addEventListener('click', () => {
8
+ mobileMenu.classList.toggle('hidden');
9
+ });
10
+ }
11
+
12
+ // Dropdown menu functionality
13
+ const dropdownButtons = document.querySelectorAll('[data-dropdown-toggle]');
14
+ dropdownButtons.forEach(button => {
15
+ button.addEventListener('click', () => {
16
+ const dropdownId = button.getAttribute('data-dropdown-toggle');
17
+ const dropdown = document.getElementById(dropdownId);
18
+ dropdown.classList.toggle('hidden');
19
+ });
20
+ });
21
+
22
+ // Close dropdown when clicking outside
23
+ document.addEventListener('click', (e) => {
24
+ if (!e.target.closest('[data-dropdown-toggle]')) {
25
+ document.querySelectorAll('[data-dropdown]').forEach(dropdown => {
26
+ dropdown.classList.add('hidden');
27
+ });
28
+ }
29
+ });
30
+
31
+ // Smooth scrolling for anchor links
32
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
33
+ anchor.addEventListener('click', function (e) {
34
+ e.preventDefault();
35
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
36
+ behavior: 'smooth'
37
+ });
38
+ });
39
+ });
40
+ });
style.css CHANGED
@@ -1,28 +1,31 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 
5
  }
6
 
7
+ .gradient-text {
8
+ background: linear-gradient(90deg, #2EA44F 0%, #0366D6 100%);
9
+ -webkit-background-clip: text;
10
+ background-clip: text;
11
+ color: transparent;
12
  }
13
 
14
+ .octocat-float {
15
+ animation: float 6s ease-in-out infinite;
 
 
 
16
  }
17
 
18
+ @keyframes float {
19
+ 0% { transform: translateY(0px); }
20
+ 50% { transform: translateY(-20px); }
21
+ 100% { transform: translateY(0px); }
 
 
22
  }
23
 
24
+ .feature-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
  }
28
+
29
+ .transition-all {
30
+ transition: all 0.3s ease;
31
+ }