Hugging Face's logo

Spaces:
LukasBe
/
civicvc
Running

App Files Community
LukasBe commited on
Commit
86de896
·
verified ·
1 Parent(s): ffde2e9

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +606 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Civicvc
3
- emoji: 🚀
4
- colorFrom: green
5
- colorTo: indigo
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: civicvc
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,606 @@
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>CivicVC | Society-First Venture Networks</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&display=swap');
11
+
12
+ :root {
13
+ --primary: #4F46E5;
14
+ --secondary: #10B981;
15
+ --dark: #1F2937;
16
+ --light: #F9FAFB;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Inter', sans-serif;
21
+ background-color: var(--light);
22
+ }
23
+
24
+ .gradient-bg {
25
+ background: linear-gradient(135deg, rgba(79,70,229,0.1) 0%, rgba(16,185,129,0.1) 100%);
26
+ }
27
+
28
+ .impact-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
31
+ }
32
+
33
+ .nav-link:hover::after {
34
+ width: 100%;
35
+ }
36
+
37
+ .nav-link::after {
38
+ content: '';
39
+ display: block;
40
+ width: 0;
41
+ height: 2px;
42
+ background: var(--primary);
43
+ transition: width .3s;
44
+ }
45
+
46
+ .dao-badge {
47
+ animation: pulse 2s infinite;
48
+ }
49
+
50
+ @keyframes pulse {
51
+ 0% {
52
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
53
+ }
54
+ 70% {
55
+ box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
56
+ }
57
+ 100% {
58
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
59
+ }
60
+ }
61
+
62
+ .stat-card {
63
+ transition: all 0.3s ease;
64
+ }
65
+
66
+ .stat-card:hover {
67
+ background-color: white;
68
+ transform: scale(1.05);
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="antialiased">
73
+ <!-- Navigation -->
74
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
75
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
76
+ <div class="flex justify-between h-16">
77
+ <div class="flex items-center">
78
+ <div class="flex-shrink-0 flex items-center">
79
+ <i class="fas fa-hand-holding-heart text-indigo-600 text-2xl mr-2"></i>
80
+ <span class="text-xl font-bold text-gray-900">Civic<span class="text-indigo-600">VC</span></span>
81
+ </div>
82
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
83
+ <a href="#" class="nav-link border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
84
+ <a href="#" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Invest</a>
85
+ <a href="#" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Startups</a>
86
+ <a href="#" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Impact</a>
87
+ <a href="#" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Community</a>
88
+ </div>
89
+ </div>
90
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
91
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
92
+ <i class="fas fa-wallet mr-2"></i> Connect Wallet
93
+ </button>
94
+ </div>
95
+ <div class="-mr-2 flex items-center sm:hidden">
96
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
97
+ <span class="sr-only">Open main menu</span>
98
+ <i class="fas fa-bars"></i>
99
+ </button>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </nav>
104
+
105
+ <!-- Hero Section -->
106
+ <div class="gradient-bg">
107
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
108
+ <div class="text-center">
109
+ <span class="dao-badge inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-emerald-100 text-emerald-800 mb-4">
110
+ <i class="fas fa-project-diagram mr-1"></i> DAO-powered
111
+ </span>
112
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
113
+ <span class="block">Invest in the future</span>
114
+ <span class="block text-indigo-600">your community deserves</span>
115
+ </h1>
116
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
117
+ CivicVC pools capital from citizens like you to fund high-impact startups that create jobs, fight climate change, and strengthen local ecosystems.
118
+ </p>
119
+ <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
120
+ <div class="rounded-md shadow">
121
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
122
+ Start Investing
123
+ </a>
124
+ </div>
125
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
126
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
127
+ Learn More
128
+ </a>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Stats Section -->
136
+ <div class="bg-white py-12">
137
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
138
+ <div class="lg:text-center">
139
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Community Impact</h2>
140
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
141
+ Redefining investment returns
142
+ </p>
143
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
144
+ We measure success by more than just financial returns
145
+ </p>
146
+ </div>
147
+
148
+ <div class="mt-10">
149
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
150
+ <div class="stat-card bg-gray-50 p-6 rounded-lg shadow-sm">
151
+ <div class="flex items-center">
152
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
153
+ <i class="fas fa-users text-white text-xl"></i>
154
+ </div>
155
+ <div class="ml-5 w-0 flex-1">
156
+ <dt class="text-sm font-medium text-gray-500 truncate">
157
+ Jobs Created
158
+ </dt>
159
+ <dd class="flex items-baseline">
160
+ <div class="text-2xl font-semibold text-gray-900">
161
+ 2,458+
162
+ </div>
163
+ </dd>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="stat-card bg-gray-50 p-6 rounded-lg shadow-sm">
169
+ <div class="flex items-center">
170
+ <div class="flex-shrink-0 bg-emerald-500 rounded-md p-3">
171
+ <i class="fas fa-leaf text-white text-xl"></i>
172
+ </div>
173
+ <div class="ml-5 w-0 flex-1">
174
+ <dt class="text-sm font-medium text-gray-500 truncate">
175
+ CO₂ Reduced (tons)
176
+ </dt>
177
+ <dd class="flex items-baseline">
178
+ <div class="text-2xl font-semibold text-gray-900">
179
+ 15,200+
180
+ </div>
181
+ </dd>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="stat-card bg-gray-50 p-6 rounded-lg shadow-sm">
187
+ <div class="flex items-center">
188
+ <div class="flex-shrink-0 bg-amber-500 rounded-md p-3">
189
+ <i class="fas fa-graduation-cap text-white text-xl"></i>
190
+ </div>
191
+ <div class="ml-5 w-0 flex-1">
192
+ <dt class="text-sm font-medium text-gray-500 truncate">
193
+ Educational Programs
194
+ </dt>
195
+ <dd class="flex items-baseline">
196
+ <div class="text-2xl font-semibold text-gray-900">
197
+ 87
198
+ </div>
199
+ </dd>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <div class="stat-card bg-gray-50 p-6 rounded-lg shadow-sm">
205
+ <div class="flex items-center">
206
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
207
+ <i class="fas fa-hand-holding-usd text-white text-xl"></i>
208
+ </div>
209
+ <div class="ml-5 w-0 flex-1">
210
+ <dt class="text-sm font-medium text-gray-500 truncate">
211
+ Community Investors
212
+ </dt>
213
+ <dd class="flex items-baseline">
214
+ <div class="text-2xl font-semibold text-gray-900">
215
+ 12,409
216
+ </div>
217
+ </dd>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- How It Works -->
227
+ <div class="gradient-bg py-16">
228
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
229
+ <div class="lg:text-center">
230
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Process</h2>
231
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
232
+ How CivicVC Works
233
+ </p>
234
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
235
+ A simple three-step process to create impact together
236
+ </p>
237
+ </div>
238
+
239
+ <div class="mt-10">
240
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
241
+ <div class="relative">
242
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
243
+ <span class="text-xl font-bold">1</span>
244
+ </div>
245
+ <div class="ml-16">
246
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Pool Your Capital</h3>
247
+ <p class="mt-2 text-base text-gray-500">
248
+ Contribute as little as $100 to join our investment pool. Students, retirees, and everyone in between can participate.
249
+ </p>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="relative">
254
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
255
+ <span class="text-xl font-bold">2</span>
256
+ </div>
257
+ <div class="ml-16">
258
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Vote on Startups</h3>
259
+ <p class="mt-2 text-base text-gray-500">
260
+ Our community evaluates and votes on startups that promise both financial returns and measurable social impact.
261
+ </p>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="relative">
266
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
267
+ <span class="text-xl font-bold">3</span>
268
+ </div>
269
+ <div class="ml-16">
270
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Track Your Impact</h3>
271
+ <p class="mt-2 text-base text-gray-500">
272
+ Receive quarterly reports on both financial performance and the social/environmental impact of your investments.
273
+ </p>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Featured Startups -->
282
+ <div class="bg-white py-16">
283
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
284
+ <div class="lg:text-center">
285
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Current Opportunities</h2>
286
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
287
+ Featured Startups
288
+ </p>
289
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
290
+ Community-vetted ventures creating measurable impact
291
+ </p>
292
+ </div>
293
+
294
+ <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
295
+ <!-- Startup Card 1 -->
296
+ <div class="impact-card group bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
297
+ <div class="relative pb-48 overflow-hidden">
298
+ <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Solar panels">
299
+ <div class="absolute top-4 right-4 bg-emerald-500 text-white text-xs font-bold px-2 py-1 rounded-full">
300
+ <i class="fas fa-leaf mr-1"></i> Climate
301
+ </div>
302
+ </div>
303
+ <div class="p-6">
304
+ <div class="flex items-center">
305
+ <span class="inline-block px-2 py-1 leading-none bg-indigo-100 text-indigo-800 rounded-full font-semibold uppercase tracking-wide text-xs">Series A</span>
306
+ <div class="ml-2 text-xs text-gray-600 font-semibold">$1.2M raised / $2M goal</div>
307
+ </div>
308
+ <h3 class="mt-2 font-bold text-xl text-gray-900">SunHarvest Energy</h3>
309
+ <p class="mt-2 text-gray-600">Affordable solar solutions for underserved communities with job training programs.</p>
310
+ <div class="mt-4 flex items-center">
311
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
312
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 60%"></div>
313
+ </div>
314
+ <span class="ml-2 text-sm font-medium text-gray-700">60%</span>
315
+ </div>
316
+ <div class="mt-6 flex items-center justify-between">
317
+ <span class="flex items-center text-sm text-gray-500">
318
+ <i class="fas fa-map-marker-alt mr-1"></i> Detroit, MI
319
+ </span>
320
+ <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded-md transition-colors">
321
+ View Details
322
+ </button>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Startup Card 2 -->
328
+ <div class="impact-card group bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
329
+ <div class="relative pb-48 overflow-hidden">
330
+ <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Education">
331
+ <div class="absolute top-4 right-4 bg-amber-500 text-white text-xs font-bold px-2 py-1 rounded-full">
332
+ <i class="fas fa-graduation-cap mr-1"></i> Education
333
+ </div>
334
+ </div>
335
+ <div class="p-6">
336
+ <div class="flex items-center">
337
+ <span class="inline-block px-2 py-1 leading-none bg-purple-100 text-purple-800 rounded-full font-semibold uppercase tracking-wide text-xs">Seed</span>
338
+ <div class="ml-2 text-xs text-gray-600 font-semibold">$450K raised / $750K goal</div>
339
+ </div>
340
+ <h3 class="mt-2 font-bold text-xl text-gray-900">CodeRoot Academy</h3>
341
+ <p class="mt-2 text-gray-600">Coding bootcamp for at-risk youth with guaranteed internships at partner companies.</p>
342
+ <div class="mt-4 flex items-center">
343
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
344
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 45%"></div>
345
+ </div>
346
+ <span class="ml-2 text-sm font-medium text-gray-700">45%</span>
347
+ </div>
348
+ <div class="mt-6 flex items-center justify-between">
349
+ <span class="flex items-center text-sm text-gray-500">
350
+ <i class="fas fa-map-marker-alt mr-1"></i> Atlanta, GA
351
+ </span>
352
+ <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded-md transition-colors">
353
+ View Details
354
+ </button>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Startup Card 3 -->
360
+ <div class="impact-card group bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
361
+ <div class="relative pb-48 overflow-hidden">
362
+ <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1575505586569-646b2ca898fc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Agriculture">
363
+ <div class="absolute top-4 right-4 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">
364
+ <i class="fas fa-tractor mr-1"></i> Agriculture
365
+ </div>
366
+ </div>
367
+ <div class="p-6">
368
+ <div class="flex items-center">
369
+ <span class="inline-block px-2 py-1 leading-none bg-yellow-100 text-yellow-800 rounded-full font-semibold uppercase tracking-wide text-xs">Pre-Seed</span>
370
+ <div class="ml-2 text-xs text-gray-600 font-semibold">$180K raised / $300K goal</div>
371
+ </div>
372
+ <h3 class="mt-2 font-bold text-xl text-gray-900">Urban Greens Co-op</h3>
373
+ <p class="mt-2 text-gray-600">Vertical farming cooperative creating living-wage jobs in food deserts.</p>
374
+ <div class="mt-4 flex items-center">
375
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
376
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 30%"></div>
377
+ </div>
378
+ <span class="ml-2 text-sm font-medium text-gray-700">30%</span>
379
+ </div>
380
+ <div class="mt-6 flex items-center justify-between">
381
+ <span class="flex items-center text-sm text-gray-500">
382
+ <i class="fas fa-map-marker-alt mr-1"></i> Chicago, IL
383
+ </span>
384
+ <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded-md transition-colors">
385
+ View Details
386
+ </button>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="mt-10 text-center">
393
+ <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-indigo-600 hover:bg-indigo-700">
394
+ Browse All Opportunities
395
+ <i class="fas fa-arrow-right ml-2"></i>
396
+ </a>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- Testimonials -->
402
+ <div class="gradient-bg py-16">
403
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
404
+ <div class="lg:text-center">
405
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Community Voices</h2>
406
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
407
+ What Our Members Say
408
+ </p>
409
+ </div>
410
+
411
+ <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-3">
412
+ <div class="bg-white p-6 rounded-lg shadow-sm">
413
+ <div class="flex items-center">
414
+ <div class="flex-shrink-0">
415
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
416
+ </div>
417
+ <div class="ml-4">
418
+ <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
419
+ <div class="text-sm text-gray-500">Teacher, Portland</div>
420
+ </div>
421
+ </div>
422
+ <div class="mt-4">
423
+ <p class="text-gray-600 italic">"As a public school teacher, I never thought I could be an investor. CivicVC let me start with just $200 and now I'm helping fund educational tech that my students will benefit from."</p>
424
+ </div>
425
+ <div class="mt-4 flex">
426
+ <i class="fas fa-star text-yellow-400"></i>
427
+ <i class="fas fa-star text-yellow-400"></i>
428
+ <i class="fas fa-star text-yellow-400"></i>
429
+ <i class="fas fa-star text-yellow-400"></i>
430
+ <i class="fas fa-star text-yellow-400"></i>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="bg-white p-6 rounded-lg shadow-sm">
435
+ <div class="flex items-center">
436
+ <div class="flex-shrink-0">
437
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="James Wilson">
438
+ </div>
439
+ <div class="ml-4">
440
+ <div class="text-sm font-medium text-gray-900">James Wilson</div>
441
+ <div class="text-sm text-gray-500">Retired Engineer, Austin</div>
442
+ </div>
443
+ </div>
444
+ <div class="mt-4">
445
+ <p class="text-gray-600 italic">"After retiring, I wanted my savings to make a difference. The climate startups I've invested through CivicVC give me better returns than my old mutual funds while actually helping the planet."</p>
446
+ </div>
447
+ <div class="mt-4 flex">
448
+ <i class="fas fa-star text-yellow-400"></i>
449
+ <i class="fas fa-star text-yellow-400"></i>
450
+ <i class="fas fa-star text-yellow-400"></i>
451
+ <i class="fas fa-star text-yellow-400"></i>
452
+ <i class="fas fa-star text-yellow-400"></i>
453
+ </div>
454
+ </div>
455
+
456
+ <div class="bg-white p-6 rounded-lg shadow-sm">
457
+ <div class="flex items-center">
458
+ <div class="flex-shrink-0">
459
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Maria Garcia">
460
+ </div>
461
+ <div class="ml-4">
462
+ <div class="text-sm font-medium text-gray-900">Maria Garcia</div>
463
+ <div class="text-sm text-gray-500">College Student, Miami</div>
464
+ </div>
465
+ </div>
466
+ <div class="mt-4">
467
+ <p class="text-gray-600 italic">"I invest $50 from each paycheck. It's amazing to see how my small contributions add up with others to fund startups that create jobs in my community. This is the future of investing!"</p>
468
+ </div>
469
+ <div class="mt-4 flex">
470
+ <i class="fas fa-star text-yellow-400"></i>
471
+ <i class="fas fa-star text-yellow-400"></i>
472
+ <i class="fas fa-star text-yellow-400"></i>
473
+ <i class="fas fa-star text-yellow-400"></i>
474
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- CTA Section -->
482
+ <div class="bg-indigo-700">
483
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
484
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
485
+ <span class="block">Ready to invest in your community?</span>
486
+ <span class="block text-indigo-200">Join CivicVC today.</span>
487
+ </h2>
488
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
489
+ <div class="inline-flex rounded-md shadow">
490
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
491
+ Get Started
492
+ <i class="fas fa-arrow-right ml-2"></i>
493
+ </a>
494
+ </div>
495
+ <div class="ml-3 inline-flex rounded-md shadow">
496
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70">
497
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
498
+ </a>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <!-- Footer -->
505
+ <footer class="bg-gray-800">
506
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
507
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
508
+ <div>
509
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">About</h3>
510
+ <ul class="mt-4 space-y-4">
511
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Our Mission</a></li>
512
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Team</a></li>
513
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Impact Reports</a></li>
514
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li>
515
+ </ul>
516
+ </div>
517
+ <div>
518
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Invest</h3>
519
+ <ul class="mt-4 space-y-4">
520
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">How It Works</a></li>
521
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Startups</a></li>
522
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Pricing</a></li>
523
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">FAQ</a></li>
524
+ </ul>
525
+ </div>
526
+ <div>
527
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Resources</h3>
528
+ <ul class="mt-4 space-y-4">
529
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li>
530
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Guides</a></li>
531
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Webinars</a></li>
532
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Help Center</a></li>
533
+ </ul>
534
+ </div>
535
+ <div>
536
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>
537
+ <ul class="mt-4 space-y-4">
538
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Contact Us</a></li>
539
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Community</a></li>
540
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Events</a></li>
541
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Press</a></li>
542
+ </ul>
543
+ </div>
544
+ </div>
545
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
546
+ <div class="flex space-x-6 md:order-2">
547
+ <a href="#" class="text-gray-400 hover:text-white">
548
+ <i class="fab fa-twitter"></i>
549
+ </a>
550
+ <a href="#" class="text-gray-400 hover:text-white">
551
+ <i class="fab fa-linkedin"></i>
552
+ </a>
553
+ <a href="#" class="text-gray-400 hover:text-white">
554
+ <i class="fab fa-discord"></i>
555
+ </a>
556
+ <a href="#" class="text-gray-400 hover:text-white">
557
+ <i class="fab fa-medium"></i>
558
+ </a>
559
+ </div>
560
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
561
+ &copy; 2023 CivicVC. All rights reserved.
562
+ </p>
563
+ </div>
564
+ </div>
565
+ </footer>
566
+
567
+ <script>
568
+ // Simple animation for impact cards on scroll
569
+ document.addEventListener('DOMContentLoaded', function() {
570
+ const impactCards = document.querySelectorAll('.impact-card');
571
+
572
+ const observer = new IntersectionObserver((entries) => {
573
+ entries.forEach(entry => {
574
+ if (entry.isIntersecting) {
575
+ entry.target.style.opacity = '1';
576
+ entry.target.style.transform = 'translateY(0)';
577
+ }
578
+ });
579
+ }, { threshold: 0.1 });
580
+
581
+ impactCards.forEach(card => {
582
+ card.style.opacity = '0';
583
+ card.style.transform = 'translateY(20px)';
584
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
585
+ observer.observe(card);
586
+ });
587
+
588
+ // Connect wallet button functionality
589
+ const connectWalletBtn = document.querySelector('button.bg-indigo-600');
590
+ if (connectWalletBtn) {
591
+ connectWalletBtn.addEventListener('click', function() {
592
+ alert('Wallet connection functionality would be implemented here with Web3.js or similar library');
593
+ });
594
+ }
595
+
596
+ // View Details buttons
597
+ const viewDetailsBtns = document.querySelectorAll('button.bg-indigo-600.text-sm');
598
+ viewDetailsBtns.forEach(btn => {
599
+ btn.addEventListener('click', function() {
600
+ alert('Startup details modal would open here');
601
+ });
602
+ });
603
+ });
604
+ </script>
605
+ <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=LukasBe/civicvc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
606
+ </html>