-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
267 lines (257 loc) · 13.2 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
<!DOCTYPE html>
<html lang="en" class="dark scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PyFunc - Python Function-Based Services</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- External Libraries -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<script src="https://unpkg.com/@phosphor-icons/[email protected]/src/duotone/style.css"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<!-- Custom Stylesheets -->
<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<!-- Tailwind Configuration -->
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
'pyfunc-green': {
50: '#e8f5e9',
100: '#c8e6c9',
200: '#a5d6a7',
300: '#81c784',
400: '#66bb6a',
500: '#4caf50',
600: '#43a047',
700: '#388e3c',
800: '#2e7d32',
900: '#1b5e20'
},
'dark': {
50: '#1a202c',
100: '#171923',
200: '#2d3748',
300: '#4a5568',
400: '#718096',
500: '#4a5568',
600: '#2d3748',
700: '#1a202c',
800: '#171923',
900: '#0d1117'
}
}
}
}
}
</script>
</head>
<body class="bg-dark-900 text-gray-100 selection:bg-pyfunc-green-500 selection:text-white">
<div id="app" class="min-h-screen flex flex-col">
<!-- Header -->
<header class="sticky top-0 z-50 bg-dark-800 bg-opacity-90 backdrop-blur-sm">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<!-- SVG Logo -->
<svg id="pyfunc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="w-12 h-12 animate-float svg-shadow">
<defs>
<linearGradient id="pythonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4caf50;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2e7d32;stop-opacity:1" />
</linearGradient>
</defs>
<path d="M50 10
Q70 30, 50 50
Q30 70, 50 90
Q70 70, 50 50
Q30 30, 50 10"
fill="url(#pythonGradient)"
stroke="#2e7d32"
stroke-width="3"/>
<circle cx="50" cy="25" r="5" fill="#ffffff"/>
<circle cx="50" cy="75" r="5" fill="#ffffff"/>
</svg>
<h1 class="text-2xl font-bold text-pyfunc-green-400">PyFunc</h1>
</div>
<nav>
<ul class="flex space-x-6">
<li><a href="#" class="text-gray-300 hover:text-pyfunc-green-400 transition-colors">Home</a></li>
<li><a href="#projects" class="text-gray-300 hover:text-pyfunc-green-400 transition-colors">Projects</a></li>
<li><a href="#about" class="text-gray-300 hover:text-pyfunc-green-400 transition-colors">About</a></li>
<li><a href="#community" class="text-gray-300 hover:text-pyfunc-green-400 transition-colors">Community</a></li>
<li><a href="https://github.com/pyfunc" class="text-gray-300 hover:text-pyfunc-green-400 transition-colors">GitHub</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content Sections -->
<main class="flex-grow container mx-auto px-6 py-12">
<!-- Hero Section -->
<section class="text-center mb-16">
<div class="max-w-4xl mx-auto">
<h2 class="text-5xl font-bold mb-6 text-pyfunc-green-400 animate-pulse">
Revolutionize Python Development
</h2>
<p class="text-xl text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">
PyFunc is a cutting-edge ecosystem of Python tools designed to empower developers
with modular, efficient, and innovative solutions that transform complex challenges
into elegant, streamlined code.
</p>
<div class="flex justify-center space-x-4">
<a href="#projects"
class="bg-pyfunc-green-600 text-white px-8 py-3 rounded-lg hover:bg-pyfunc-green-700 transition-colors flex items-center">
<i class="ph-duotone ph-code mr-2"></i>
Explore Projects
</a>
<a href="https://docs.pyfunc.com"
class="border border-pyfunc-green-400 text-pyfunc-green-400 px-8 py-3 rounded-lg hover:bg-pyfunc-green-400 hover:text-white transition-colors flex items-center">
<i class="ph-duotone ph-book-open mr-2"></i>
Documentation
</a>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="mb-16">
<h3 class="text-3xl font-bold text-center mb-12 text-pyfunc-green-400">
Our Innovative Projects
</h3>
<div id="project-list" class="grid md:grid-cols-3 gap-8">
<!-- Projects will be dynamically populated -->
</div>
</section>
<!-- About Section -->
<section id="about" class="mb-16 bg-dark-800 rounded-xl p-12 code-bg">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-3xl font-bold mb-6 text-pyfunc-green-400">
Our Mission
</h3>
<p class="text-gray-300 mb-6">
PyFunc is dedicated to creating a comprehensive ecosystem of Python tools that push the boundaries of what's possible. We believe in simplicity, efficiency, and community-driven innovation.
</p>
<div class="flex space-x-4">
<a href="https://github.com/pyfunc"
class="bg-pyfunc-green-600 text-white px-6 py-3 rounded-lg hover:bg-pyfunc-green-700 transition-colors">
Explore on GitHub
</a>
<a href="https://docs.pyfunc.com"
class="border border-pyfunc-green-400 text-pyfunc-green-400 px-6 py-3 rounded-lg hover:bg-pyfunc-green-400 hover:text-white transition-colors">
Read Docs
</a>
</div>
</div>
<div>
<h3 class="text-3xl font-bold mb-6 text-pyfunc-green-400">
Our Strategy
</h3>
<ul class="space-y-4 text-gray-300">
<li class="flex items-center">
<i class="fas fa-code text-pyfunc-green-500 mr-4"></i>
Develop modular, function-based Python services
</li>
<li class="flex items-center">
<i class="fas fa-puzzle-piece text-pyfunc-green-500 mr-4"></i>
Create cross-platform, efficient solutions
</li>
<li class="flex items-center">
<i class="fas fa-users text-pyfunc-green-500 mr-4"></i>
Foster open-source community collaboration
</li>
<li class="flex items-center">
<i class="fas fa-rocket text-pyfunc-green-500 mr-4"></i>
Continuously innovate and improve
</li>
</ul>
</div>
</div>
</section>
<!-- Community Section -->
<section id="community" class="mb-16">
<h3 class="text-3xl font-bold text-center mb-12 text-pyfunc-green-400">
Join Our Community
</h3>
<div class="max-w-4xl mx-auto bg-dark-800 rounded-xl p-12 code-bg">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="text-2xl font-bold mb-6 text-pyfunc-green-400">
Connect With Us
</h4>
<p class="text-gray-300 mb-6">
Join our vibrant community of Python enthusiasts, contribute to our projects, and help shape the future of Python development.
</p>
<div class="flex space-x-4">
<a href="https://discord.gg/pyfunc"
class="bg-pyfunc-green-600 text-white px-6 py-3 rounded-lg hover:bg-pyfunc-green-700 transition-colors flex items-center">
<i class="fab fa-discord mr-2"></i>
Discord
</a>
<a href="https://twitter.com/pyfunc"
class="border border-pyfunc-green-400 text-pyfunc-green-400 px-6 py-3 rounded-lg hover:bg-pyfunc-green-400 hover:text-white transition-colors flex items-center">
<i class="fab fa-twitter mr-2"></i>
Twitter
</a>
</div>
</div>
<div>
<h4 class="text-2xl font-bold mb-6 text-pyfunc-green-400">
Contribution Guidelines
</h4>
<ul class="space-y-4 text-gray-300">
<li class="flex items-center">
<i class="fas fa-check-circle text-pyfunc-green-500 mr-4"></i>
Read our Code of Conduct
</li>
<li class="flex items-center">
<i class="fas fa-code-branch text-pyfunc-green-500 mr-4"></i>
Fork and submit pull requests
</li>
<li class="flex items-center">
<i class="fas fa-comments text-pyfunc-green-500 mr-4"></i>
Participate in discussions
</li>
<li class="flex items-center">
<i class="fas fa-book text-pyfunc-green-500 mr-4"></i>
Improve documentation
</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-dark-800 py-12">
<div class="container mx-auto px-6 text-center">
<p class="text-gray-500">© 2025 PyFunc. All rights reserved.</p>
<div class="mt-4 space-x-4">
<a href="https://github.com/pyfunc" class="text-gray-400 hover:text-pyfunc-green-400">GitHub</a>
<a href="https://docs.pyfunc.com" class="text-gray-400 hover:text-pyfunc-green-400">Documentation</a>
<a href="mailto:[email protected]" class="text-gray-400 hover:text-pyfunc-green-400">Contact</a>
</div>
<div class="mt-6 flex justify-center space-x-6">
<a href="https://github.com/pyfunc" class="text-gray-400 hover:text-pyfunc-green-400">
<i class="fab fa-github text-2xl"></i>
</a>
<a href="https://twitter.com/pyfunc" class="text-gray-400 hover:text-pyfunc-green-400">
<i class="fab fa-twitter text-2xl"></i>
</a>
<a href="https://discord.gg/pyfunc" class="text-gray-400 hover:text-pyfunc-green-400">
<i class="fab fa-discord text-2xl"></i>
</a>
</div>
</div>
</footer>
</div>
<!-- Configuration and Module Scripts -->
<script type="module" src="js/config.js"></script>
<script type="module" src="js/projects.js"></script>
<script type="module" src="js/animations.js"></script>
</body>
</html>