Hugging Face's logo

Spaces:
myexploration
/
blockfounders
Running

App Files Community
myexploration commited on
Commit
040c6de
·
verified ·
1 Parent(s): a15f217

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +565 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Blockfounders
3
- emoji: 🐨
4
  colorFrom: purple
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: blockfounders
3
+ emoji: 🐳
4
  colorFrom: purple
5
  colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,565 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BlockFounders | Blockchain Entrepreneur Community</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f8fafc;
15
+ scroll-behavior: smooth;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #6b46c1 0%, #3182ce 50%, #00b5d8 100%);
20
+ }
21
+
22
+ .feature-card:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
25
+ }
26
+
27
+ .nav-link:hover {
28
+ color: #00b5d8;
29
+ }
30
+
31
+ .btn-primary {
32
+ transition: all 0.3s ease;
33
+ }
34
+
35
+ .btn-primary:hover {
36
+ transform: translateY(-2px);
37
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
38
+ }
39
+
40
+ .animate-float {
41
+ animation: float 6s ease-in-out infinite;
42
+ }
43
+
44
+ @keyframes float {
45
+ 0% { transform: translateY(0px); }
46
+ 50% { transform: translateY(-20px); }
47
+ 100% { transform: translateY(0px); }
48
+ }
49
+ </style>
50
+ </head>
51
+ <body>
52
+ <!-- Navigation -->
53
+ <nav class="bg-white shadow-sm fixed w-full z-10">
54
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
55
+ <div class="flex justify-between h-16">
56
+ <div class="flex items-center">
57
+ <div class="flex-shrink-0 flex items-center">
58
+ <i class="fas fa-cube text-indigo-600 text-2xl mr-2"></i>
59
+ <span class="text-xl font-bold text-gray-900">BlockFounders</span>
60
+ </div>
61
+ </div>
62
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
63
+ <a href="#features" class="nav-link text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Features</a>
64
+ <a href="#community" class="nav-link text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Community</a>
65
+ <a href="#resources" class="nav-link text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Resources</a>
66
+ <a href="#testimonials" class="nav-link text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Success Stories</a>
67
+ </div>
68
+ <div class="flex items-center">
69
+ <a href="#join" class="btn-primary bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700">Join Now</a>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </nav>
74
+
75
+ <!-- Hero Section -->
76
+ <section class="gradient-bg pt-32 pb-20 px-4 sm:px-6 lg:px-8">
77
+ <div class="max-w-7xl mx-auto">
78
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
79
+ <div class="mb-12 lg:mb-0">
80
+ <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-6">Build the Future of Digital Economies</h1>
81
+ <p class="text-xl text-indigo-100 mb-8">Join a thriving community of blockchain entrepreneurs. Learn, collaborate, and launch your next big idea in the decentralized world.</p>
82
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
83
+ <a href="#join" class="btn-primary bg-white text-indigo-600 px-6 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 text-center">Get Started</a>
84
+ <a href="#features" class="btn-primary bg-transparent border-2 border-white text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-white hover:text-indigo-600 text-center">Learn More</a>
85
+ </div>
86
+ </div>
87
+ <div class="relative">
88
+ <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2232&q=80" alt="Blockchain technology" class="rounded-xl shadow-2xl animate-float">
89
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg hidden md:block">
90
+ <div class="flex items-center">
91
+ <div class="bg-indigo-100 p-3 rounded-full mr-3">
92
+ <i class="fas fa-users text-indigo-600 text-xl"></i>
93
+ </div>
94
+ <div>
95
+ <p class="text-gray-500 text-sm">Active Members</p>
96
+ <p class="text-gray-900 font-bold text-xl">5,000+</p>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- Trusted By Section -->
106
+ <section class="py-12 bg-gray-50">
107
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
108
+ <p class="text-center text-gray-500 mb-8">Trusted by teams at</p>
109
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center">
110
+ <img src="https://upload.wikimedia.org/wikipedia/commons/4/46/Chainlink_Logo_Blue.png" alt="Chainlink" class="h-12 object-contain opacity-70 hover:opacity-100 transition-opacity">
111
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Polkadot_Logo.png" alt="Polkadot" class="h-12 object-contain opacity-70 hover:opacity-100 transition-opacity">
112
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Solana_logo.png" alt="Solana" class="h-8 object-contain opacity-70 hover:opacity-100 transition-opacity">
113
+ <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Ethereum-icon-purple.png" alt="Ethereum" class="h-12 object-contain opacity-70 hover:opacity-100 transition-opacity">
114
+ <img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Filecoin.svg" alt="Filecoin" class="h-12 object-contain opacity-70 hover:opacity-100 transition-opacity">
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Features Section -->
120
+ <section id="features" class="py-20 px-4 sm:px-6 lg:px-8">
121
+ <div class="max-w-7xl mx-auto">
122
+ <div class="text-center mb-16">
123
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Everything You Need to Succeed</h2>
124
+ <p class="mt-4 text-xl text-gray-500 max-w-3xl mx-auto">Our community provides the tools, knowledge, and network to thrive in blockchain entrepreneurship.</p>
125
+ </div>
126
+
127
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
128
+ <!-- Feature 1 -->
129
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
130
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
131
+ <i class="fas fa-graduation-cap text-indigo-600 text-2xl"></i>
132
+ </div>
133
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Expert-Led Education</h3>
134
+ <p class="text-gray-500">Access courses, workshops, and AMAs with industry leaders covering DeFi, NFTs, DAOs, and more.</p>
135
+ </div>
136
+
137
+ <!-- Feature 2 -->
138
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
139
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
140
+ <i class="fas fa-hands-helping text-blue-600 text-2xl"></i>
141
+ </div>
142
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Collaborative Network</h3>
143
+ <p class="text-gray-500">Connect with developers, marketers, and business minds to form your dream blockchain team.</p>
144
+ </div>
145
+
146
+ <!-- Feature 3 -->
147
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
148
+ <div class="bg-teal-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
149
+ <i class="fas fa-lightbulb text-teal-600 text-2xl"></i>
150
+ </div>
151
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Idea Incubation</h3>
152
+ <p class="text-gray-500">Get feedback, find co-founders, and access funding opportunities for your blockchain startup.</p>
153
+ </div>
154
+
155
+ <!-- Feature 4 -->
156
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
157
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
158
+ <i class="fas fa-code-branch text-purple-600 text-2xl"></i>
159
+ </div>
160
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Tech Resources</h3>
161
+ <p class="text-gray-500">Developer tools, smart contract templates, and infrastructure guides to accelerate your build.</p>
162
+ </div>
163
+
164
+ <!-- Feature 5 -->
165
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
166
+ <div class="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
167
+ <i class="fas fa-chart-line text-amber-600 text-2xl"></i>
168
+ </div>
169
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Market Insights</h3>
170
+ <p class="text-gray-500">Stay ahead with our research reports, trend analysis, and investment strategies.</p>
171
+ </div>
172
+
173
+ <!-- Feature 6 -->
174
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
175
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
176
+ <i class="fas fa-calendar-check text-green-600 text-2xl"></i>
177
+ </div>
178
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Exclusive Events</h3>
179
+ <p class="text-gray-500">Hackathons, pitch competitions, and networking events with top VCs and founders.</p>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- Community Showcase -->
186
+ <section id="community" class="py-20 bg-indigo-50">
187
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
188
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
189
+ <div class="mb-12 lg:mb-0">
190
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl mb-6">A Thriving Ecosystem of Builders</h2>
191
+ <p class="text-xl text-gray-600 mb-8">Our community brings together diverse talents from around the world, all passionate about shaping the future of decentralized technologies.</p>
192
+
193
+ <div class="grid grid-cols-2 gap-6">
194
+ <div>
195
+ <p class="text-4xl font-bold text-indigo-600 mb-2">150+</p>
196
+ <p class="text-gray-600">Projects Launched</p>
197
+ </div>
198
+ <div>
199
+ <p class="text-4xl font-bold text-indigo-600 mb-2">$42M+</p>
200
+ <p class="text-gray-600">In Funding Raised</p>
201
+ </div>
202
+ <div>
203
+ <p class="text-4xl font-bold text-indigo-600 mb-2">85+</p>
204
+ <p class="text-gray-600">Countries Represented</p>
205
+ </div>
206
+ <div>
207
+ <p class="text-4xl font-bold text-indigo-600 mb-2">24/7</p>
208
+ <p class="text-gray-600">Active Discussions</p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <div class="relative">
214
+ <div class="bg-white p-6 rounded-xl shadow-lg">
215
+ <div class="flex items-center mb-4">
216
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Community member" class="w-12 h-12 rounded-full mr-4">
217
+ <div>
218
+ <p class="font-semibold">Sarah Chen</p>
219
+ <p class="text-gray-500 text-sm">Co-founder, DeFi Protocol</p>
220
+ </div>
221
+ </div>
222
+ <p class="text-gray-700 mb-4">"Through BlockFounders, I met my technical co-founder and secured our first round of funding. The community's feedback was invaluable in refining our tokenomics."</p>
223
+ <div class="flex space-x-2">
224
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">DeFi</span>
225
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Ethereum</span>
226
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">DAO</span>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="bg-white p-6 rounded-xl shadow-lg mt-6 ml-8">
231
+ <div class="flex items-center mb-4">
232
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Community member" class="w-12 h-12 rounded-full mr-4">
233
+ <div>
234
+ <p class="font-semibold">Raj Patel</p>
235
+ <p class="text-gray-500 text-sm">Blockchain Developer</p>
236
+ </div>
237
+ </div>
238
+ <p class="text-gray-700 mb-4">"The technical workshops helped me transition from web2 to web3 development. Now I'm working on two exciting NFT projects with teammates I met here."</p>
239
+ <div class="flex space-x-2">
240
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">NFT</span>
241
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Solana</span>
242
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Rust</span>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="bg-white p-6 rounded-xl shadow-lg mt-6 -ml-8">
247
+ <div class="flex items-center mb-4">
248
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Community member" class="w-12 h-12 rounded-full mr-4">
249
+ <div>
250
+ <p class="font-semibold">Amina Diallo</p>
251
+ <p class="text-gray-500 text-sm">Growth Marketer</p>
252
+ </div>
253
+ </div>
254
+ <p class="text-gray-700 mb-4">"The marketing masterminds group helped me develop strategies for user acquisition in web3. I've since helped 5 projects with their go-to-market plans."</p>
255
+ <div class="flex space-x-2">
256
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Marketing</span>
257
+ <span class="bg-teal-100 text-teal-800 text-xs px-2 py-1 rounded">Community</span>
258
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Growth</span>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </section>
265
+
266
+ <!-- Resources Section -->
267
+ <section id="resources" class="py-20 px-4 sm:px-6 lg:px-8">
268
+ <div class="max-w-7xl mx-auto">
269
+ <div class="text-center mb-16">
270
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Accelerate Your Blockchain Journey</h2>
271
+ <p class="mt-4 text-xl text-gray-500 max-w-3xl mx-auto">Curated resources to help you navigate the complex world of blockchain entrepreneurship.</p>
272
+ </div>
273
+
274
+ <div class="grid md:grid-cols-3 gap-8">
275
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
276
+ <div class="bg-indigo-600 p-6">
277
+ <h3 class="text-xl font-bold text-white">Founder's Toolkit</h3>
278
+ </div>
279
+ <div class="p-6">
280
+ <ul class="space-y-4">
281
+ <li class="flex items-start">
282
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i>
283
+ <span>Legal frameworks for token sales</span>
284
+ </li>
285
+ <li class="flex items-start">
286
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i>
287
+ <span>Tokenomics design templates</span>
288
+ </li>
289
+ <li class="flex items-start">
290
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i>
291
+ <span>Pitch deck examples</span>
292
+ </li>
293
+ <li class="flex items-start">
294
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i>
295
+ <span>Regulatory compliance checklist</span>
296
+ </li>
297
+ </ul>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
302
+ <div class="bg-blue-600 p-6">
303
+ <h3 class="text-xl font-bold text-white">Developer Hub</h3>
304
+ </div>
305
+ <div class="p-6">
306
+ <ul class="space-y-4">
307
+ <li class="flex items-start">
308
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
309
+ <span>Smart contract audit checklist</span>
310
+ </li>
311
+ <li class="flex items-start">
312
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
313
+ <span>Multi-chain deployment guides</span>
314
+ </li>
315
+ <li class="flex items-start">
316
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
317
+ <span>Security best practices</span>
318
+ </li>
319
+ <li class="flex items-start">
320
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
321
+ <span>Open-source code repositories</span>
322
+ </li>
323
+ </ul>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
328
+ <div class="bg-teal-600 p-6">
329
+ <h3 class="text-xl font-bold text-white">Investor Network</h3>
330
+ </div>
331
+ <div class="p-6">
332
+ <ul class="space-y-4">
333
+ <li class="flex items-start">
334
+ <i class="fas fa-check-circle text-teal-500 mt-1 mr-3"></i>
335
+ <span>VC and angel investor directory</span>
336
+ </li>
337
+ <li class="flex items-start">
338
+ <i class="fas fa-check-circle text-teal-500 mt-1 mr-3"></i>
339
+ <span>Due diligence questionnaire</span>
340
+ </li>
341
+ <li class="flex items-start">
342
+ <i class="fas fa-check-circle text-teal-500 mt-1 mr-3"></i>
343
+ <span>Term sheet negotiation guide</span>
344
+ </li>
345
+ <li class="flex items-start">
346
+ <i class="fas fa-check-circle text-teal-500 mt-1 mr-3"></i>
347
+ <span>Fundraising timeline templates</span>
348
+ </li>
349
+ </ul>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="mt-12 text-center">
355
+ <a href="#join" class="btn-primary inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
356
+ Unlock All Resources
357
+ <i class="fas fa-arrow-right ml-2"></i>
358
+ </a>
359
+ </div>
360
+ </div>
361
+ </section>
362
+
363
+ <!-- Testimonials Section -->
364
+ <section id="testimonials" class="py-20 bg-gray-900 text-white">
365
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
366
+ <div class="text-center mb-16">
367
+ <h2 class="text-3xl font-extrabold sm:text-4xl">Success Stories From Our Community</h2>
368
+ <p class="mt-4 text-xl text-gray-300 max-w-3xl mx-auto">Hear from entrepreneurs who transformed their ideas into thriving blockchain businesses.</p>
369
+ </div>
370
+
371
+ <div class="grid md:grid-cols-3 gap-8">
372
+ <div class="bg-gray-800 p-8 rounded-xl">
373
+ <div class="flex items-center mb-6">
374
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Testimonial" class="w-16 h-16 rounded-full mr-4">
375
+ <div>
376
+ <p class="font-bold">Michael Rodriguez</p>
377
+ <p class="text-indigo-400 text-sm">CEO, DeFi Analytics Platform</p>
378
+ </div>
379
+ </div>
380
+ <p class="text-gray-300 mb-4">"BlockFounders connected me with the perfect technical team to build our analytics dashboard. We went from concept to 10,000 users in 6 months."</p>
381
+ <div class="flex items-center">
382
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
383
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
384
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
385
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
386
+ <i class="fas fa-star text-yellow-400"></i>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="bg-gray-800 p-8 rounded-xl">
391
+ <div class="flex items-center mb-6">
392
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Testimonial" class="w-16 h-16 rounded-full mr-4">
393
+ <div>
394
+ <p class="font-bold">Priya Kapoor</p>
395
+ <p class="text-indigo-400 text-sm">Founder, NFT Marketplace</p>
396
+ </div>
397
+ </div>
398
+ <p class="text-gray-300 mb-4">"The community's feedback on our token utility model was game-changing. We've since processed over $5M in NFT sales and expanded to 3 chains."</p>
399
+ <div class="flex items-center">
400
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
401
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
402
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
403
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
404
+ <i class="fas fa-star text-yellow-400"></i>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="bg-gray-800 p-8 rounded-xl">
409
+ <div class="flex items-center mb-6">
410
+ <img src="https://randomuser.me/api/portraits/men/89.jpg" alt="Testimonial" class="w-16 h-16 rounded-full mr-4">
411
+ <div>
412
+ <p class="font-bold">David Kim</p>
413
+ <p class="text-indigo-400 text-sm">CTO, Blockchain Gaming</p>
414
+ </div>
415
+ </div>
416
+ <p class="text-gray-300 mb-4">"Through the community's hackathon, we found our lead game designer and secured our seed round. Our player base grows 30% month over month."</p>
417
+ <div class="flex items-center">
418
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
419
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
420
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
421
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
422
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </section>
428
+
429
+ <!-- CTA Section -->
430
+ <section id="join" class="py-20 gradient-bg">
431
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
432
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl mb-6">Ready to Build the Future?</h2>
433
+ <p class="text-xl text-indigo-100 max-w-3xl mx-auto mb-10">Join thousands of blockchain entrepreneurs shaping the digital economy. Whether you're looking to learn, collaborate, or launch - we've got you covered.</p>
434
+
435
+ <div class="max-w-2xl mx-auto">
436
+ <form class="sm:flex">
437
+ <div class="w-full sm:max-w-xs mb-3 sm:mb-0 sm:mr-2">
438
+ <label for="email" class="sr-only">Email address</label>
439
+ <input type="email" id="email" name="email" class="block w-full px-4 py-3 rounded-md border-0 text-base focus:outline-none" placeholder="Enter your email">
440
+ </div>
441
+ <button type="submit" class="btn-primary w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white">
442
+ Join Community
443
+ </button>
444
+ </form>
445
+ <p class="mt-3 text-sm text-indigo-100">By joining, you agree to our <a href="#" class="font-medium text-white underline">Terms of Service</a>.</p>
446
+ </div>
447
+
448
+ <div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
449
+ <div class="bg-white bg-opacity-10 p-4 rounded-lg backdrop-blur-sm">
450
+ <i class="fas fa-comments text-white text-3xl mb-2"></i>
451
+ <p class="text-white font-medium">Daily Discussions</p>
452
+ </div>
453
+ <div class="bg-white bg-opacity-10 p-4 rounded-lg backdrop-blur-sm">
454
+ <i class="fas fa-calendar-alt text-white text-3xl mb-2"></i>
455
+ <p class="text-white font-medium">Weekly Events</p>
456
+ </div>
457
+ <div class="bg-white bg-opacity-10 p-4 rounded-lg backdrop-blur-sm">
458
+ <i class="fas fa-user-graduate text-white text-3xl mb-2"></i>
459
+ <p class="text-white font-medium">Monthly Workshops</p>
460
+ </div>
461
+ <div class="bg-white bg-opacity-10 p-4 rounded-lg backdrop-blur-sm">
462
+ <i class="fas fa-trophy text-white text-3xl mb-2"></i>
463
+ <p class="text-white font-medium">Quarterly Hackathons</p>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </section>
468
+
469
+ <!-- Footer -->
470
+ <footer class="bg-gray-900 text-white pt-16 pb-8 px-4 sm:px-6 lg:px-8">
471
+ <div class="max-w-7xl mx-auto">
472
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
473
+ <div>
474
+ <h3 class="text-lg font-semibold mb-4">BlockFounders</h3>
475
+ <p class="text-gray-400">Empowering the next generation of blockchain entrepreneurs through education, collaboration, and resources.</p>
476
+ </div>
477
+
478
+ <div>
479
+ <h3 class="text-lg font-semibold mb-4">Community</h3>
480
+ <ul class="space-y-2">
481
+ <li><a href="#" class="text-gray-400 hover:text-white">Forums</a></li>
482
+ <li><a href="#" class="text-gray-400 hover:text-white">Events</a></li>
483
+ <li><a href="#" class="text-gray-400 hover:text-white">Mentorship</a></li>
484
+ <li><a href="#" class="text-gray-400 hover:text-white">Success Stories</a></li>
485
+ </ul>
486
+ </div>
487
+
488
+ <div>
489
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
490
+ <ul class="space-y-2">
491
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
492
+ <li><a href="#" class="text-gray-400 hover:text-white">Guides</a></li>
493
+ <li><a href="#" class="text-gray-400 hover:text-white">Toolkits</a></li>
494
+ <li><a href="#" class="text-gray-400 hover:text-white">Research</a></li>
495
+ </ul>
496
+ </div>
497
+
498
+ <div>
499
+ <h3 class="text-lg font-semibold mb-4">Connect</h3>
500
+ <div class="flex space-x-4 mb-4">
501
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
502
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord text-xl"></i></a>
503
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
504
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram text-xl"></i></a>
505
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
506
+ </div>
507
+ <p class="text-gray-400">hello@blockfounders.com</p>
508
+ </div>
509
+ </div>
510
+
511
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
512
+ <p class="text-gray-400 text-sm">© 2023 BlockFounders. All rights reserved.</p>
513
+ <div class="flex space-x-6 mt-4 md:mt-0">
514
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
515
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
516
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </footer>
521
+
522
+ <script>
523
+ // Smooth scrolling for anchor links
524
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
525
+ anchor.addEventListener('click', function (e) {
526
+ e.preventDefault();
527
+
528
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
529
+ behavior: 'smooth'
530
+ });
531
+ });
532
+ });
533
+
534
+ // Form submission handling
535
+ const form = document.querySelector('form');
536
+ if (form) {
537
+ form.addEventListener('submit', function(e) {
538
+ e.preventDefault();
539
+ const email = document.getElementById('email').value;
540
+
541
+ // Here you would typically send the data to your server
542
+ alert(`Thank you for your interest! We'll contact you at ${email} with next steps.`);
543
+ form.reset();
544
+ });
545
+ }
546
+
547
+ // Animation on scroll
548
+ const observerOptions = {
549
+ threshold: 0.1
550
+ };
551
+
552
+ const observer = new IntersectionObserver((entries) => {
553
+ entries.forEach(entry => {
554
+ if (entry.isIntersecting) {
555
+ entry.target.classList.add('animate-fadeIn');
556
+ }
557
+ });
558
+ }, observerOptions);
559
+
560
+ document.querySelectorAll('.feature-card, .testimonial').forEach(card => {
561
+ observer.observe(card);
562
+ });
563
+ </script>
564
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=myexploration/blockfounders" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
565
+ </html>