Hugging Face's logo

Spaces:
codewithdark
/
neuroforge
Running

App Files Community
codewithdark commited on
Commit
7454e3e
·
verified ·
1 Parent(s): e6404ad

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +778 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Neuroforge
3
- emoji: 📈
4
- colorFrom: pink
5
- colorTo: purple
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: neuroforge
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
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,778 @@
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>NeuroForge | Next-Gen AI Model Training</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6366f1',
15
+ secondary: '#8b5cf6',
16
+ dark: '#0f172a',
17
+ light: '#f8fafc',
18
+ },
19
+ fontFamily: {
20
+ sans: ['Inter', 'sans-serif'],
21
+ },
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ background-color: #f8fafc;
32
+ }
33
+
34
+ .gradient-bg {
35
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
36
+ }
37
+
38
+ .hero-gradient {
39
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
40
+ }
41
+
42
+ .card-hover {
43
+ transition: all 0.3s ease;
44
+ }
45
+
46
+ .card-hover:hover {
47
+ transform: translateY(-5px);
48
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
49
+ }
50
+
51
+ .feature-icon {
52
+ width: 60px;
53
+ height: 60px;
54
+ display: flex;
55
+ align-items: center;
56
+ justify-content: center;
57
+ border-radius: 12px;
58
+ margin-bottom: 1rem;
59
+ }
60
+
61
+ .animated-underline {
62
+ position: relative;
63
+ display: inline-block;
64
+ }
65
+
66
+ .animated-underline::after {
67
+ content: '';
68
+ position: absolute;
69
+ width: 100%;
70
+ height: 2px;
71
+ bottom: -2px;
72
+ left: 0;
73
+ background-color: #6366f1;
74
+ transform: scaleX(0);
75
+ transform-origin: bottom right;
76
+ transition: transform 0.3s ease;
77
+ }
78
+
79
+ .animated-underline:hover::after {
80
+ transform: scaleX(1);
81
+ transform-origin: bottom left;
82
+ }
83
+
84
+ .glow {
85
+ animation: glow 2s ease-in-out infinite alternate;
86
+ }
87
+
88
+ @keyframes glow {
89
+ from {
90
+ box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
91
+ }
92
+ to {
93
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
94
+ }
95
+ }
96
+ </style>
97
+ </head>
98
+ <body>
99
+ <!-- Navigation -->
100
+ <nav class="bg-white shadow-sm fixed w-full z-10">
101
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
102
+ <div class="flex justify-between h-16">
103
+ <div class="flex items-center">
104
+ <div class="flex-shrink-0 flex items-center">
105
+ <i class="fas fa-brain text-primary text-2xl mr-2"></i>
106
+ <span class="text-xl font-bold text-dark">NeuroForge</span>
107
+ </div>
108
+ </div>
109
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
110
+ <a href="#features" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium animated-underline">Features</a>
111
+ <a href="#solutions" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium animated-underline">Solutions</a>
112
+ <a href="#pricing" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium animated-underline">Pricing</a>
113
+ <a href="#resources" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium animated-underline">Resources</a>
114
+ <a href="#contact" class="text-gray-500 hover:text-primary px-3 py-2 text-sm font-medium animated-underline">Contact</a>
115
+ </div>
116
+ <div class="hidden md:ml-6 md:flex md:items-center">
117
+ <a href="#" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Get Started</a>
118
+ </div>
119
+ <div class="-mr-2 flex items-center md:hidden">
120
+ <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-primary" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
121
+ <span class="sr-only">Open main menu</span>
122
+ <i class="fas fa-bars"></i>
123
+ </button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Mobile menu -->
129
+ <div class="hidden md:hidden" id="mobile-menu">
130
+ <div class="pt-2 pb-3 space-y-1">
131
+ <a href="#features" class="block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium text-primary bg-indigo-50">Features</a>
132
+ <a href="#solutions" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Solutions</a>
133
+ <a href="#pricing" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Pricing</a>
134
+ <a href="#resources" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Resources</a>
135
+ <a href="#contact" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Contact</a>
136
+ <div class="mt-4 pl-3 pr-4">
137
+ <a href="#" class="block w-full px-4 py-2 border border-transparent text-center text-sm font-medium rounded-md text-white bg-primary hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Get Started</a>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </nav>
142
+
143
+ <!-- Hero Section -->
144
+ <div class="hero-gradient pt-24 pb-16 md:pt-32 md:pb-24">
145
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
146
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
147
+ <div class="px-4 sm:px-0 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
148
+ <div>
149
+ <h1 class="text-4xl tracking-tight font-extrabold text-dark sm:text-5xl md:text-6xl">
150
+ <span class="block">Train Your AI Models</span>
151
+ <span class="block text-primary">Without the Complexity</span>
152
+ </h1>
153
+ <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
154
+ NeuroForge simplifies generative AI model training with our intuitive platform, powerful infrastructure, and expert guidance.
155
+ </p>
156
+ <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
157
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
158
+ <a href="#" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Start Free Trial</a>
159
+ <a href="#" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">See Demo</a>
160
+ </div>
161
+ <p class="mt-3 text-xs text-gray-400">
162
+ No credit card required. 14-day free trial.
163
+ </p>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
168
+ <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
169
+ <div class="relative block w-full bg-white rounded-lg overflow-hidden">
170
+ <div class="px-6 py-8">
171
+ <div class="flex items-center justify-center h-48 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-lg mb-6">
172
+ <i class="fas fa-robot text-6xl text-primary opacity-50"></i>
173
+ </div>
174
+ <h3 class="text-lg font-medium text-dark mb-2">Model Training Dashboard</h3>
175
+ <p class="text-gray-500 text-sm">
176
+ Monitor your AI model training in real-time with our intuitive dashboard.
177
+ </p>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Trusted By Section -->
187
+ <div class="bg-white py-8">
188
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
189
+ <p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide">
190
+ Trusted by innovative teams worldwide
191
+ </p>
192
+ <div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
193
+ <div class="col-span-1 flex justify-center items-center">
194
+ <img class="h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple">
195
+ </div>
196
+ <div class="col-span-1 flex justify-center items-center">
197
+ <img class="h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage">
198
+ </div>
199
+ <div class="col-span-1 flex justify-center items-center">
200
+ <img class="h-12" src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg" alt="StaticKit">
201
+ </div>
202
+ <div class="col-span-1 flex justify-center items-center">
203
+ <img class="h-12" src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg" alt="Transistor">
204
+ </div>
205
+ <div class="col-span-1 flex justify-center items-center">
206
+ <img class="h-12" src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg" alt="Workcation">
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Features Section -->
213
+ <div id="features" class="py-16 bg-gray-50 overflow-hidden">
214
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
215
+ <div class="relative">
216
+ <h2 class="text-center text-3xl font-extrabold text-dark sm:text-4xl">
217
+ Powerful Features for AI Training
218
+ </h2>
219
+ <p class="mt-4 max-w-3xl mx-auto text-center text-gray-500">
220
+ Our platform provides everything you need to train state-of-the-art generative AI models efficiently.
221
+ </p>
222
+ </div>
223
+
224
+ <div class="mt-12">
225
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
226
+ <!-- Feature 1 -->
227
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
228
+ <div class="px-6 py-8">
229
+ <div class="feature-icon gradient-bg text-white">
230
+ <i class="fas fa-bolt text-2xl"></i>
231
+ </div>
232
+ <h3 class="text-lg font-medium text-dark mb-2">Rapid Training</h3>
233
+ <p class="text-gray-500">
234
+ Leverage our distributed computing infrastructure to train models up to 10x faster than standard platforms.
235
+ </p>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Feature 2 -->
240
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
241
+ <div class="px-6 py-8">
242
+ <div class="feature-icon bg-purple-100 text-primary">
243
+ <i class="fas fa-sliders-h text-2xl"></i>
244
+ </div>
245
+ <h3 class="text-lg font-medium text-dark mb-2">Hyperparameter Optimization</h3>
246
+ <p class="text-gray-500">
247
+ Automated tuning of model parameters to achieve optimal performance without manual trial and error.
248
+ </p>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Feature 3 -->
253
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
254
+ <div class="px-6 py-8">
255
+ <div class="feature-icon bg-indigo-100 text-primary">
256
+ <i class="fas fa-chart-line text-2xl"></i>
257
+ </div>
258
+ <h3 class="text-lg font-medium text-dark mb-2">Real-time Analytics</h3>
259
+ <p class="text-gray-500">
260
+ Monitor training progress with comprehensive visualizations and performance metrics.
261
+ </p>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Feature 4 -->
266
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
267
+ <div class="px-6 py-8">
268
+ <div class="feature-icon bg-blue-100 text-blue-600">
269
+ <i class="fas fa-project-diagram text-2xl"></i>
270
+ </div>
271
+ <h3 class="text-lg font-medium text-dark mb-2">Model Architectures</h3>
272
+ <p class="text-gray-500">
273
+ Choose from pre-configured architectures or customize your own with our intuitive builder.
274
+ </p>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Feature 5 -->
279
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
280
+ <div class="px-6 py-8">
281
+ <div class="feature-icon bg-green-100 text-green-600">
282
+ <i class="fas fa-database text-2xl"></i>
283
+ </div>
284
+ <h3 class="text-lg font-medium text-dark mb-2">Data Management</h3>
285
+ <p class="text-gray-500">
286
+ Easily upload, version, and manage your training datasets with our integrated storage system.
287
+ </p>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Feature 6 -->
292
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
293
+ <div class="px-6 py-8">
294
+ <div class="feature-icon bg-red-100 text-red-600">
295
+ <i class="fas fa-shield-alt text-2xl"></i>
296
+ </div>
297
+ <h3 class="text-lg font-medium text-dark mb-2">Security & Compliance</h3>
298
+ <p class="text-gray-500">
299
+ Enterprise-grade security with encryption at rest and in transit, plus compliance certifications.
300
+ </p>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Solutions Section -->
309
+ <div id="solutions" class="py-16 bg-white">
310
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
311
+ <div class="lg:text-center">
312
+ <h2 class="text-3xl font-extrabold text-dark sm:text-4xl">
313
+ Solutions for Every Use Case
314
+ </h2>
315
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
316
+ Whether you're a researcher, startup, or enterprise, we have the right solution for your AI needs.
317
+ </p>
318
+ </div>
319
+
320
+ <div class="mt-20">
321
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
322
+ <!-- Solution 1 -->
323
+ <div class="relative">
324
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
325
+ <i class="fas fa-flask"></i>
326
+ </div>
327
+ <p class="ml-16 text-lg leading-6 font-medium text-dark">Research & Development</p>
328
+ <p class="mt-2 ml-16 text-base text-gray-500">
329
+ Accelerate your AI research with our platform's cutting-edge capabilities and computational power.
330
+ </p>
331
+ </div>
332
+
333
+ <!-- Solution 2 -->
334
+ <div class="relative">
335
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
336
+ <i class="fas fa-rocket"></i>
337
+ </div>
338
+ <p class="ml-16 text-lg leading-6 font-medium text-dark">Startups</p>
339
+ <p class="mt-2 ml-16 text-base text-gray-500">
340
+ Build your AI product without massive infrastructure investments. Scale as you grow.
341
+ </p>
342
+ </div>
343
+
344
+ <!-- Solution 3 -->
345
+ <div class="relative">
346
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
347
+ <i class="fas fa-building"></i>
348
+ </div>
349
+ <p class="ml-16 text-lg leading-6 font-medium text-dark">Enterprise</p>
350
+ <p class="mt-2 ml-16 text-base text-gray-500">
351
+ Deploy custom AI solutions at scale with our enterprise-grade platform and support.
352
+ </p>
353
+ </div>
354
+
355
+ <!-- Solution 4 -->
356
+ <div class="relative">
357
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
358
+ <i class="fas fa-graduation-cap"></i>
359
+ </div>
360
+ <p class="ml-16 text-lg leading-6 font-medium text-dark">Education</p>
361
+ <p class="mt-2 ml-16 text-base text-gray-500">
362
+ Teach AI concepts with hands-on experience using our simplified platform.
363
+ </p>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Pricing Section -->
371
+ <div id="pricing" class="gradient-bg py-16">
372
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
373
+ <div class="sm:text-center">
374
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
375
+ Simple, Transparent Pricing
376
+ </h2>
377
+ <p class="mt-4 max-w-2xl text-xl text-indigo-100 sm:mx-auto">
378
+ Pay only for what you use with our flexible pricing plans.
379
+ </p>
380
+ </div>
381
+
382
+ <div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0">
383
+ <!-- Plan 1 -->
384
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
385
+ <div class="px-6 py-8">
386
+ <h3 class="text-lg font-medium text-dark mb-2">Starter</h3>
387
+ <p class="text-gray-500 mb-6">Perfect for individuals and small projects</p>
388
+ <div class="flex items-baseline">
389
+ <span class="text-4xl font-extrabold text-dark">$99</span>
390
+ <span class="ml-1 text-xl font-medium text-gray-500">/month</span>
391
+ </div>
392
+ <div class="mt-6">
393
+ <ul class="space-y-3">
394
+ <li class="flex items-start">
395
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
396
+ <span class="text-gray-700">100 GPU hours</span>
397
+ </li>
398
+ <li class="flex items-start">
399
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
400
+ <span class="text-gray-700">50GB storage</span>
401
+ </li>
402
+ <li class="flex items-start">
403
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
404
+ <span class="text-gray-700">Basic support</span>
405
+ </li>
406
+ <li class="flex items-start">
407
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
408
+ <span class="text-gray-700">Standard models</span>
409
+ </li>
410
+ </ul>
411
+ </div>
412
+ </div>
413
+ <div class="px-6 pb-8">
414
+ <a href="#" class="block w-full px-4 py-2 border border-transparent text-center text-sm font-medium rounded-md text-white bg-primary hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Get started</a>
415
+ </div>
416
+ </div>
417
+
418
+ <!-- Plan 2 (Featured) -->
419
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden card-hover transform scale-105 glow">
420
+ <div class="px-6 py-8">
421
+ <div class="flex justify-between items-center">
422
+ <h3 class="text-lg font-medium text-dark mb-2">Pro</h3>
423
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-primary">Most Popular</span>
424
+ </div>
425
+ <p class="text-gray-500 mb-6">For growing teams and serious projects</p>
426
+ <div class="flex items-baseline">
427
+ <span class="text-4xl font-extrabold text-dark">$499</span>
428
+ <span class="ml-1 text-xl font-medium text-gray-500">/month</span>
429
+ </div>
430
+ <div class="mt-6">
431
+ <ul class="space-y-3">
432
+ <li class="flex items-start">
433
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
434
+ <span class="text-gray-700">500 GPU hours</span>
435
+ </li>
436
+ <li class="flex items-start">
437
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
438
+ <span class="text-gray-700">250GB storage</span>
439
+ </li>
440
+ <li class="flex items-start">
441
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
442
+ <span class="text-gray-700">Priority support</span>
443
+ </li>
444
+ <li class="flex items-start">
445
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
446
+ <span class="text-gray-700">Advanced models</span>
447
+ </li>
448
+ <li class="flex items-start">
449
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
450
+ <span class="text-gray-700">Team collaboration</span>
451
+ </li>
452
+ </ul>
453
+ </div>
454
+ </div>
455
+ <div class="px-6 pb-8">
456
+ <a href="#" class="block w-full px-4 py-2 border border-transparent text-center text-sm font-medium rounded-md text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Get started</a>
457
+ </div>
458
+ </div>
459
+
460
+ <!-- Plan 3 -->
461
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
462
+ <div class="px-6 py-8">
463
+ <h3 class="text-lg font-medium text-dark mb-2">Enterprise</h3>
464
+ <p class="text-gray-500 mb-6">For large-scale deployments</p>
465
+ <div class="flex items-baseline">
466
+ <span class="text-4xl font-extrabold text-dark">Custom</span>
467
+ </div>
468
+ <div class="mt-6">
469
+ <ul class="space-y-3">
470
+ <li class="flex items-start">
471
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
472
+ <span class="text-gray-700">Unlimited GPU hours</span>
473
+ </li>
474
+ <li class="flex items-start">
475
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
476
+ <span class="text-gray-700">1TB+ storage</span>
477
+ </li>
478
+ <li class="flex items-start">
479
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
480
+ <span class="text-gray-700">24/7 support</span>
481
+ </li>
482
+ <li class="flex items-start">
483
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
484
+ <span class="text-gray-700">Custom models</span>
485
+ </li>
486
+ <li class="flex items-start">
487
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
488
+ <span class="text-gray-700">Dedicated infrastructure</span>
489
+ </li>
490
+ </ul>
491
+ </div>
492
+ </div>
493
+ <div class="px-6 pb-8">
494
+ <a href="#" class="block w-full px-4 py-2 border border-transparent text-center text-sm font-medium rounded-md text-white bg-primary hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Contact sales</a>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+
501
+ <!-- Testimonials Section -->
502
+ <div class="bg-white py-16">
503
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
504
+ <div class="lg:text-center">
505
+ <h2 class="text-3xl font-extrabold text-dark sm:text-4xl">
506
+ What Our Customers Say
507
+ </h2>
508
+ </div>
509
+
510
+ <div class="mt-16">
511
+ <div class="space-y-16 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16 lg:space-y-0">
512
+ <!-- Testimonial 1 -->
513
+ <div class="bg-gray-50 p-8 rounded-lg">
514
+ <div class="flex items-center">
515
+ <div class="flex-shrink-0">
516
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
517
+ </div>
518
+ <div class="ml-4">
519
+ <div class="text-base font-medium text-dark">Sarah Johnson</div>
520
+ <div class="text-sm text-gray-500">AI Researcher, Stanford</div>
521
+ </div>
522
+ </div>
523
+ <div class="mt-4 text-base text-gray-600">
524
+ <p>"NeuroForge reduced our model training time by 75% compared to our previous setup. The hyperparameter optimization tools alone are worth the price."</p>
525
+ </div>
526
+ </div>
527
+
528
+ <!-- Testimonial 2 -->
529
+ <div class="bg-gray-50 p-8 rounded-lg">
530
+ <div class="flex items-center">
531
+ <div class="flex-shrink-0">
532
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
533
+ </div>
534
+ <div class="ml-4">
535
+ <div class="text-base font-medium text-dark">Michael Chen</div>
536
+ <div class="text-sm text-gray-500">CTO, AI Startup</div>
537
+ </div>
538
+ </div>
539
+ <div class="mt-4 text-base text-gray-600">
540
+ <p>"As a small startup, we couldn't afford our own GPU cluster. NeuroForge gave us access to enterprise-grade hardware at a fraction of the cost."</p>
541
+ </div>
542
+ </div>
543
+
544
+ <!-- Testimonial 3 -->
545
+ <div class="bg-gray-50 p-8 rounded-lg">
546
+ <div class="flex items-center">
547
+ <div class="flex-shrink-0">
548
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
549
+ </div>
550
+ <div class="ml-4">
551
+ <div class="text-base font-medium text-dark">David Rodriguez</div>
552
+ <div class="text-sm text-gray-500">Director of AI, Fortune 500</div>
553
+ </div>
554
+ </div>
555
+ <div class="mt-4 text-base text-gray-600">
556
+ <p>"We evaluated all major platforms and NeuroForge stood out for its combination of performance, ease of use, and security features."</p>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+
564
+ <!-- CTA Section -->
565
+ <div class="bg-dark">
566
+ <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">
567
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
568
+ <span class="block">Ready to train your AI models?</span>
569
+ <span class="block text-primary">Start your free trial today.</span>
570
+ </h2>
571
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
572
+ <div class="inline-flex rounded-md shadow">
573
+ <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-primary hover:bg-indigo-700">
574
+ Get started
575
+ </a>
576
+ </div>
577
+ <div class="ml-3 inline-flex rounded-md shadow">
578
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50">
579
+ Learn more
580
+ </a>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+
586
+ <!-- Footer -->
587
+ <footer id="contact" class="bg-gray-800">
588
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
589
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
590
+ <div class="space-y-8 xl:col-span-1">
591
+ <div class="flex items-center">
592
+ <i class="fas fa-brain text-primary text-2xl mr-2"></i>
593
+ <span class="text-xl font-bold text-white">NeuroForge</span>
594
+ </div>
595
+ <p class="text-gray-300 text-base">
596
+ The simplest way to train state-of-the-art generative AI models.
597
+ </p>
598
+ <div class="flex space-x-6">
599
+ <a href="#" class="text-gray-400 hover:text-white">
600
+ <i class="fab fa-twitter"></i>
601
+ </a>
602
+ <a href="#" class="text-gray-400 hover:text-white">
603
+ <i class="fab fa-github"></i>
604
+ </a>
605
+ <a href="#" class="text-gray-400 hover:text-white">
606
+ <i class="fab fa-linkedin"></i>
607
+ </a>
608
+ </div>
609
+ </div>
610
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
611
+ <div class="md:grid md:grid-cols-2 md:gap-8">
612
+ <div>
613
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
614
+ Product
615
+ </h3>
616
+ <ul class="mt-4 space-y-4">
617
+ <li>
618
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
619
+ Features
620
+ </a>
621
+ </li>
622
+ <li>
623
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
624
+ Pricing
625
+ </a>
626
+ </li>
627
+ <li>
628
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
629
+ API
630
+ </a>
631
+ </li>
632
+ <li>
633
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
634
+ Integrations
635
+ </a>
636
+ </li>
637
+ </ul>
638
+ </div>
639
+ <div class="mt-12 md:mt-0">
640
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
641
+ Resources
642
+ </h3>
643
+ <ul class="mt-4 space-y-4">
644
+ <li>
645
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
646
+ Documentation
647
+ </a>
648
+ </li>
649
+ <li>
650
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
651
+ Guides
652
+ </a>
653
+ </li>
654
+ <li>
655
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
656
+ Blog
657
+ </a>
658
+ </li>
659
+ <li>
660
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
661
+ Support
662
+ </a>
663
+ </li>
664
+ </ul>
665
+ </div>
666
+ </div>
667
+ <div class="md:grid md:grid-cols-2 md:gap-8">
668
+ <div>
669
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
670
+ Company
671
+ </h3>
672
+ <ul class="mt-4 space-y-4">
673
+ <li>
674
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
675
+ About
676
+ </a>
677
+ </li>
678
+ <li>
679
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
680
+ Careers
681
+ </a>
682
+ </li>
683
+ <li>
684
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
685
+ Press
686
+ </a>
687
+ </li>
688
+ <li>
689
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
690
+ Contact
691
+ </a>
692
+ </li>
693
+ </ul>
694
+ </div>
695
+ <div class="mt-12 md:mt-0">
696
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
697
+ Legal
698
+ </h3>
699
+ <ul class="mt-4 space-y-4">
700
+ <li>
701
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
702
+ Privacy
703
+ </a>
704
+ </li>
705
+ <li>
706
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
707
+ Terms
708
+ </a>
709
+ </li>
710
+ <li>
711
+ <a href="#" class="text-base text-gray-400 hover:text-white animated-underline">
712
+ Security
713
+ </a>
714
+ </li>
715
+ </ul>
716
+ </div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ <div class="mt-12 border-t border-gray-700 pt-8">
721
+ <p class="text-base text-gray-400 text-center">
722
+ &copy; 2023 NeuroForge, Inc. All rights reserved.
723
+ </p>
724
+ </div>
725
+ </div>
726
+ </footer>
727
+
728
+ <script>
729
+ // Mobile menu toggle
730
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
731
+ const menu = document.getElementById('mobile-menu');
732
+ if (menu.classList.contains('hidden')) {
733
+ menu.classList.remove('hidden');
734
+ } else {
735
+ menu.classList.add('hidden');
736
+ }
737
+ });
738
+
739
+ // Smooth scrolling for anchor links
740
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
741
+ anchor.addEventListener('click', function (e) {
742
+ e.preventDefault();
743
+
744
+ const targetId = this.getAttribute('href');
745
+ if (targetId === '#') return;
746
+
747
+ const targetElement = document.querySelector(targetId);
748
+ if (targetElement) {
749
+ targetElement.scrollIntoView({
750
+ behavior: 'smooth'
751
+ });
752
+
753
+ // Close mobile menu if open
754
+ const mobileMenu = document.getElementById('mobile-menu');
755
+ if (!mobileMenu.classList.contains('hidden')) {
756
+ mobileMenu.classList.add('hidden');
757
+ }
758
+ }
759
+ });
760
+ });
761
+
762
+ // Add animation class when elements come into view
763
+ const observer = new IntersectionObserver((entries) => {
764
+ entries.forEach(entry => {
765
+ if (entry.isIntersecting) {
766
+ entry.target.classList.add('animate-fade-in');
767
+ }
768
+ });
769
+ }, {
770
+ threshold: 0.1
771
+ });
772
+
773
+ document.querySelectorAll('.card-hover').forEach(card => {
774
+ observer.observe(card);
775
+ });
776
+ </script>
777
+ <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=codewithdark/neuroforge" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
778
+ </html>