-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
288 lines (275 loc) · 14.8 KB
/
index.html
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PyContributors - Open Source Community</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-white">
<!-- Navbar -->
<nav class="bg-white/80 backdrop-blur-sm sticky top-0 z-50 border-b border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center justify-between w-full">
<!-- Logo and Brand Section -->
<div class="flex-shrink-0 flex items-center space-x-4">
<img class="h-10 w-auto"
src="https://raw.githubusercontent.com/DrakeEntity/project-Image/master/9b2ca712-347a-4987-bac7-a4c3d106ed24_200x200.png"
alt="PyContributors Logo">
<div class="flex flex-col">
<span class="text-xl font-bold text-gray-900">PyContributors</span>
<span class="text-sm text-gray-500 hidden sm:block">Open Source Community</span>
</div>
</div>
<!-- Desktop Navigation -->
<div class="hidden sm:flex sm:space-x-8 items-center">
<a href="/"
class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
Home
</a>
<a href="/jobs"
class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
Jobs
</a>
<a href="https://github.com/Py-Contributors"
class="inline-flex items-center justify-center bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
Join Community
</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="bg-gradient-to-br from-blue-50 via-white to-blue-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h1
class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-blue-600 to-indigo-600 inline-block text-transparent bg-clip-text">
Py Contributors Developers Community
</h1>
<p class="text-xl text-gray-600 mb-8">
Join a thriving community of developers passionate about Python and open source. Learn,
contribute, and grow together.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="https://github.com/Py-Contributors"
class="inline-flex items-center justify-center bg-blue-600 text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-700 transition-colors">
<i data-feather="github" class="w-5 h-5 mr-2"></i>
Join on GitHub
</a>
<a href="https://www.linkedin.com/company/pycontributors/"
class="inline-flex items-center justify-center bg-white border border-gray-200 text-gray-800 px-6 py-3 rounded-xl font-semibold hover:bg-gray-50 transition-colors">
<i data-feather="linkedin" class="w-5 h-5 mr-2"></i>
Follow Us
</a>
</div>
</div>
<div class="hidden md:block">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c12qzz9dk84endfjlrq2.png" alt="Developers collaborating"
class="w-full h-auto rounded-2xl" />
</div>
</div>
</div>
</div>
<!-- Stats Section -->
<div class="bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="text-center p-6 rounded-xl bg-blue-50">
<div class="text-4xl font-bold text-blue-600 mb-2">1000+</div>
<div class="text-gray-600">Community Members</div>
</div>
<div class="text-center p-6 rounded-xl bg-blue-50">
<div class="text-4xl font-bold text-blue-600 mb-2">50+</div>
<div class="text-gray-600">Open Source Projects</div>
</div>
<div class="text-center p-6 rounded-xl bg-blue-50">
<div class="text-4xl font-bold text-blue-600 mb-2">2000+</div>
<div class="text-gray-600">GitHub Contributions</div>
</div>
<div class="text-center p-6 rounded-xl bg-blue-50">
<div class="text-4xl font-bold text-blue-600 mb-2">100+</div>
<div class="text-gray-600">Active Contributors</div>
</div>
</div>
</div>
</div>
<!-- About Section -->
<div id="about" class="bg-gradient-to-br from-blue-50 via-white to-blue-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">About the Community</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
We are a community of developers passionate about contributing to Python, Javascript, and other
open-source projects.
Our mission is to foster collaboration, learning, and innovation in the open-source ecosystem.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-2xl shadow-sm p-8 hover:shadow-md transition-shadow">
<div class="text-blue-600 mb-6">
<i data-feather="code" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-4">Open Source Development</h3>
<p class="text-gray-600">Contribute to meaningful projects and build your portfolio while learning
from experienced developers.</p>
</div>
<div class="bg-white rounded-2xl shadow-sm p-8 hover:shadow-md transition-shadow">
<div class="text-blue-600 mb-6">
<i data-feather="users" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-4">Mentorship</h3>
<p class="text-gray-600">Get guidance from experienced developers and help others grow in their
journey.</p>
</div>
<div class="bg-white rounded-2xl shadow-sm p-8 hover:shadow-md transition-shadow">
<div class="text-blue-600 mb-6">
<i data-feather="book-open" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-4">Learning Resources</h3>
<p class="text-gray-600">Access curated learning materials, workshops, and coding challenges to
enhance your skills.</p>
</div>
</div>
</div>
</div>
<!-- Projects Section -->
<div id="projects" class="bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Featured Projects</h2>
<p class="text-xl text-gray-600">Explore our open source projects and start contributing today.</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-gradient-to-br from-blue-50 to-white rounded-2xl p-8 border border-blue-100">
<div class="mb-6">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qc09w0yst8wcz1j0nw5c.png" alt="Sanatio Project"
class="w-full h-40 object-cover rounded-xl" />
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-4">Sanatio</h3>
<p class="text-gray-600 mb-6">
A Python library for data validation and sanitization, designed to simplify error handling in
your code and ensure clean, robust data pipelines.
</p>
<a href="https://github.com/codeperfectplus/Sanatio"
class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium">
View Project
<i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
</a>
</div>
<div class="bg-gradient-to-br from-blue-50 to-white rounded-2xl p-8 border border-blue-100">
<div class="mb-6">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qc09w0yst8wcz1j0nw5c.png" alt="Random Profile Generator"
class="w-full h-40 object-cover rounded-xl" />
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-4">Random Profile Generator</h3>
<p class="text-gray-600 mb-6">
A utility package for generating random profiles, ideal for testing applications, populating
dummy data, or experimenting with datasets.
</p>
<a href="https://github.com/codeperfectplus/RandomProfileGenerator"
class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium">
View Project
<i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
</a>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="text-center">
<h2 class="text-3xl font-bold mb-4">Ready to Start Contributing?</h2>
<p class="text-xl text-blue-100 mb-8">
Join our community today and be part of something bigger. Whether you're a beginner
or an experienced developer, there's a place for you in PyContributors.
</p>
<a href="https://github.com/Py-Contributors" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
Get Started Today
</a>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-4 mb-6">
<img class="h-8 w-auto brightness-0 invert"
src="https://raw.githubusercontent.com/DrakeEntity/project-Image/master/9b2ca712-347a-4987-bac7-a4c3d106ed24_200x200.png"
alt="PyContributors Logo">
<span class="text-white font-semibold">PyContributors</span>
</div>
<p class="text-sm">Building the future of open source, one contribution at a time.</p>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2 text-sm">
<li><a href="/" class="hover:text-white transition-colors">Home</a></li>
<li><a href="jobs" class="hover:text-white transition-colors">Jobs</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Community</h4>
<ul class="space-y-2 text-sm">
<li>
<a href="https://www.linkedin.com/company/pycontributors/"
class="hover:text-white inline-flex items-center transition-colors">
<i data-feather="linkedin" class="w-4 h-4 mr-2"></i>
LinkedIn
</a>
</li>
<li>
<a href="https://github.com/Py-Contributors"
class="hover:text-white inline-flex items-center transition-colors">
<i data-feather="github" class="w-4 h-4 mr-2"></i>
GitHub
</a>
</li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Contact</h4>
<ul class="space-y-2 text-sm">
<li class="inline-flex items-center">
<i data-feather="mail" class="w-4 h-4 mr-2"></i>
contact@pycontributors.org
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-sm text-center">
<p>© 2024 PyContributors. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Initialize Feather Icons
feather.replace();
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>