Hugging Face's logo

Spaces:
luzhipeng
/
lu
Running

App Files Community
luzhipeng commited on
Commit
c408a26
·
verified ·
1 Parent(s): 882af85

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +690 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lu
3
- emoji: 🔥
4
- colorFrom: yellow
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: lu
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,690 @@
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>NexusAI - Premium LLM API Solutions</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
+ :root {
11
+ --primary: #6c5ce7;
12
+ --secondary: #a29bfe;
13
+ --dark: #2d3436;
14
+ --light: #f5f6fa;
15
+ }
16
+
17
+ body {
18
+ background-color: #f0f2f5;
19
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
20
+ }
21
+
22
+ .neumorphic {
23
+ border-radius: 20px;
24
+ background: #f0f2f5;
25
+ box-shadow: 8px 8px 16px #d9dbdd,
26
+ -8px -8px 16px #ffffff;
27
+ }
28
+
29
+ .neumorphic-inset {
30
+ border-radius: 20px;
31
+ background: #f0f2f5;
32
+ box-shadow: inset 8px 8px 16px #d9dbdd,
33
+ inset -8px -8px 16px #ffffff;
34
+ }
35
+
36
+ .neumorphic-btn {
37
+ border-radius: 15px;
38
+ background: #f0f2f5;
39
+ box-shadow: 5px 5px 10px #d9dbdd,
40
+ -5px -5px 10px #ffffff;
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .neumorphic-btn:hover {
45
+ box-shadow: 2px 2px 5px #d9dbdd,
46
+ -2px -2px 5px #ffffff;
47
+ }
48
+
49
+ .neumorphic-btn:active {
50
+ box-shadow: inset 5px 5px 10px #d9dbdd,
51
+ inset -5px -5px 10px #ffffff;
52
+ }
53
+
54
+ .primary-btn {
55
+ background: var(--primary);
56
+ color: white;
57
+ box-shadow: 5px 5px 10px #5d4fcf,
58
+ -5px -5px 10px #7b69ff;
59
+ }
60
+
61
+ .primary-btn:hover {
62
+ box-shadow: 2px 2px 5px #5d4fcf,
63
+ -2px -2px 5px #7b69ff;
64
+ }
65
+
66
+ .primary-btn:active {
67
+ box-shadow: inset 5px 5px 10px #5d4fcf,
68
+ inset -5px -5px 10px #7b69ff;
69
+ }
70
+
71
+ .feature-card {
72
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
73
+ }
74
+
75
+ .feature-card:hover {
76
+ transform: translateY(-10px);
77
+ box-shadow: 12px 12px 24px #d9dbdd,
78
+ -12px -12px 24px #ffffff;
79
+ }
80
+
81
+ .gradient-text {
82
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
83
+ -webkit-background-clip: text;
84
+ background-clip: text;
85
+ color: transparent;
86
+ }
87
+
88
+ .nav-link {
89
+ position: relative;
90
+ }
91
+
92
+ .nav-link::after {
93
+ content: '';
94
+ position: absolute;
95
+ width: 0;
96
+ height: 2px;
97
+ bottom: -5px;
98
+ left: 0;
99
+ background: var(--primary);
100
+ transition: width 0.3s ease;
101
+ }
102
+
103
+ .nav-link:hover::after {
104
+ width: 100%;
105
+ }
106
+
107
+ @keyframes float {
108
+ 0% { transform: translateY(0px); }
109
+ 50% { transform: translateY(-15px); }
110
+ 100% { transform: translateY(0px); }
111
+ }
112
+
113
+ .floating {
114
+ animation: float 6s ease-in-out infinite;
115
+ }
116
+ </style>
117
+ </head>
118
+ <body class="min-h-screen">
119
+ <!-- Navigation -->
120
+ <nav class="py-6 px-4 md:px-12 lg:px-24 fixed w-full z-50 bg-opacity-90 backdrop-blur-sm">
121
+ <div class="container mx-auto flex justify-between items-center">
122
+ <div class="flex items-center">
123
+ <div class="neumorphic w-12 h-12 rounded-full flex items-center justify-center mr-4">
124
+ <i class="fas fa-brain text-xl gradient-text"></i>
125
+ </div>
126
+ <span class="text-2xl font-bold gradient-text">Nexus<span class="text-gray-800">AI</span></span>
127
+ </div>
128
+
129
+ <div class="hidden md:flex space-x-8">
130
+ <a href="#" class="nav-link text-gray-700 font-medium">Home</a>
131
+ <a href="#" class="nav-link text-gray-700 font-medium">Products</a>
132
+ <a href="#" class="nav-link text-gray-700 font-medium">Pricing</a>
133
+ <a href="#" class="nav-link text-gray-700 font-medium">Documentation</a>
134
+ <a href="#" class="nav-link text-gray-700 font-medium">Contact</a>
135
+ </div>
136
+
137
+ <div class="flex items-center space-x-4">
138
+ <button class="neumorphic-btn px-4 py-2 text-gray-700 font-medium hidden md:block">Login</button>
139
+ <button class="primary-btn px-6 py-2 rounded-full font-medium">Sign Up</button>
140
+ <button class="neumorphic-btn w-10 h-10 rounded-full flex items-center justify-center md:hidden">
141
+ <i class="fas fa-bars text-gray-700"></i>
142
+ </button>
143
+ </div>
144
+ </div>
145
+ </nav>
146
+
147
+ <!-- Hero Section -->
148
+ <section class="pt-32 pb-20 px-4 md:px-12 lg:px-24">
149
+ <div class="container mx-auto flex flex-col lg:flex-row items-center">
150
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
151
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
152
+ <span class="gradient-text">Powerful LLM APIs</span><br>
153
+ For Your Next Big Idea
154
+ </h1>
155
+ <p class="text-gray-600 text-lg mb-8">
156
+ Access state-of-the-art language models through our simple, scalable API.
157
+ Built for developers who demand reliability, speed, and cutting-edge AI capabilities.
158
+ </p>
159
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
160
+ <button class="primary-btn px-8 py-3 rounded-full font-medium text-lg">
161
+ Get Started <i class="fas fa-arrow-right ml-2"></i>
162
+ </button>
163
+ <button class="neumorphic-btn px-8 py-3 rounded-full font-medium text-lg">
164
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
165
+ </button>
166
+ </div>
167
+ <div class="mt-8 flex items-center">
168
+ <div class="flex -space-x-2">
169
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white">
170
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white">
171
+ <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-white">
172
+ </div>
173
+ <div class="ml-4">
174
+ <p class="text-sm text-gray-600">Trusted by <span class="font-bold">10,000+</span> developers</p>
175
+ <div class="flex items-center">
176
+ <i class="fas fa-star text-yellow-400"></i>
177
+ <i class="fas fa-star text-yellow-400"></i>
178
+ <i class="fas fa-star text-yellow-400"></i>
179
+ <i class="fas fa-star text-yellow-400"></i>
180
+ <i class="fas fa-star text-yellow-400"></i>
181
+ <span class="ml-2 text-sm text-gray-600">4.9/5.0</span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="lg:w-1/2 flex justify-center">
188
+ <div class="neumorphic p-6 rounded-3xl relative floating">
189
+ <div class="neumorphic-inset p-4 rounded-2xl mb-4">
190
+ <div class="flex items-center">
191
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
192
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
193
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
194
+ </div>
195
+ </div>
196
+ <div class="bg-white p-6 rounded-2xl shadow-inner">
197
+ <div class="flex mb-4">
198
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
199
+ <i class="fas fa-robot text-purple-600"></i>
200
+ </div>
201
+ <div class="neumorphic-inset px-4 py-2 rounded-xl">
202
+ <p class="text-gray-700">Hello! How can I assist you today?</p>
203
+ </div>
204
+ </div>
205
+ <div class="flex justify-end mb-4">
206
+ <div class="neumorphic px-4 py-2 rounded-xl max-w-xs">
207
+ <p class="text-gray-700">Can you generate a poem about AI?</p>
208
+ </div>
209
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center ml-3">
210
+ <i class="fas fa-user text-blue-600"></i>
211
+ </div>
212
+ </div>
213
+ <div class="flex">
214
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
215
+ <i class="fas fa-robot text-purple-600"></i>
216
+ </div>
217
+ <div class="neumorphic-inset px-4 py-2 rounded-xl">
218
+ <p class="text-gray-700">"Silicon dreams in circuits deep,<br>
219
+ Algorithms wake from digital sleep..."</p>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ <div class="mt-4 flex items-center">
224
+ <div class="neumorphic-inset px-4 py-2 rounded-xl w-full flex items-center">
225
+ <input type="text" placeholder="Type your message..." class="bg-transparent w-full focus:outline-none text-gray-700">
226
+ <i class="fas fa-paper-plane text-gray-500 ml-2"></i>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </section>
233
+
234
+ <!-- Trusted By Section -->
235
+ <section class="py-12 px-4 md:px-12 lg:px-24 bg-white">
236
+ <div class="container mx-auto">
237
+ <p class="text-center text-gray-500 mb-8">TRUSTED BY INNOVATIVE COMPANIES WORLDWIDE</p>
238
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
239
+ <div class="neumorphic p-4 rounded-xl w-32 h-16 flex items-center justify-center">
240
+ <span class="font-bold text-gray-700">TechCorp</span>
241
+ </div>
242
+ <div class="neumorphic p-4 rounded-xl w-32 h-16 flex items-center justify-center">
243
+ <span class="font-bold text-gray-700">Innova</span>
244
+ </div>
245
+ <div class="neumorphic p-4 rounded-xl w-32 h-16 flex items-center justify-center">
246
+ <span class="font-bold text-gray-700">DataMind</span>
247
+ </div>
248
+ <div class="neumorphic p-4 rounded-xl w-32 h-16 flex items-center justify-center">
249
+ <span class="font-bold text-gray-700">AI Labs</span>
250
+ </div>
251
+ <div class="neumorphic p-4 rounded-xl w-32 h-16 flex items-center justify-center">
252
+ <span class="font-bold text-gray-700">Nexus</span>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Features Section -->
259
+ <section class="py-20 px-4 md:px-12 lg:px-24">
260
+ <div class="container mx-auto">
261
+ <div class="text-center mb-16">
262
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Why Choose <span class="gradient-text">NexusAI</span></h2>
263
+ <p class="text-gray-600 max-w-2xl mx-auto">
264
+ Our API platform is designed to give developers the most advanced language models with the simplest integration.
265
+ </p>
266
+ </div>
267
+
268
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
269
+ <!-- Feature 1 -->
270
+ <div class="neumorphic p-8 rounded-2xl feature-card">
271
+ <div class="w-14 h-14 neumorphic rounded-xl flex items-center justify-center mb-6">
272
+ <i class="fas fa-bolt text-2xl gradient-text"></i>
273
+ </div>
274
+ <h3 class="text-xl font-bold mb-3">Lightning Fast</h3>
275
+ <p class="text-gray-600">
276
+ Response times under 300ms globally thanks to our distributed infrastructure and optimized models.
277
+ </p>
278
+ </div>
279
+
280
+ <!-- Feature 2 -->
281
+ <div class="neumorphic p-8 rounded-2xl feature-card">
282
+ <div class="w-14 h-14 neumorphic rounded-xl flex items-center justify-center mb-6">
283
+ <i class="fas fa-shield-alt text-2xl gradient-text"></i>
284
+ </div>
285
+ <h3 class="text-xl font-bold mb-3">Enterprise Security</h3>
286
+ <p class="text-gray-600">
287
+ SOC 2 compliant with end-to-end encryption. Your data never trains our models without permission.
288
+ </p>
289
+ </div>
290
+
291
+ <!-- Feature 3 -->
292
+ <div class="neumorphic p-8 rounded-2xl feature-card">
293
+ <div class="w-14 h-14 neumorphic rounded-xl flex items-center justify-center mb-6">
294
+ <i class="fas fa-sliders-h text-2xl gradient-text"></i>
295
+ </div>
296
+ <h3 class="text-xl font-bold mb-3">Customizable</h3>
297
+ <p class="text-gray-600">
298
+ Fine-tune models for your specific use case or bring your own trained models to our platform.
299
+ </p>
300
+ </div>
301
+
302
+ <!-- Feature 4 -->
303
+ <div class="neumorphic p-8 rounded-2xl feature-card">
304
+ <div class="w-14 h-14 neumorphic rounded-xl flex items-center justify-center mb-6">
305
+ <i class="fas fa-chart-line text-2xl gradient-text"></i>
306
+ </div>
307
+ <h3 class="text-xl font-bold mb-3">Scalable</h3>
308
+ <p class="text-gray-600">
309
+ From 1 to 1 million requests per second, our infrastructure scales seamlessly with your needs.
310
+ </p>
311
+ </div>
312
+
313
+ <!-- Feature 5 -->
314
+ <div class="neumorphic p-8 rounded-2xl feature-card">
315
+ <div class="w-14 h-14 neumorphic rounded-xl flex items-center justify-center mb-6">
316
+ <i class="fas fa-code text-2xl gradient-text"></i>
317
+ </div>
318
+ <h3 class="text-xl font-bold mb-3">Developer First</h3>
319
+ <p class="text-gray-600">
320
+ Comprehensive documentation, SDKs in 8 languages, and dedicated developer support.
321
+ </p>
322
+ </div>
323
+
324
+ <!-- Feature 6 -->
325
+ <div class="neumorphic p-8 rounded-2xl feature-card">
326
+ <div class="w-14 h-14 neumorphic rounded-xl flex items-center justify-center mb-6">
327
+ <i class="fas fa-lightbulb text-2xl gradient-text"></i>
328
+ </div>
329
+ <h3 class="text-xl font-bold mb-3">Cutting Edge</h3>
330
+ <p class="text-gray-600">
331
+ Regular model updates to ensure you always have access to the latest AI breakthroughs.
332
+ </p>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- API Demo Section -->
339
+ <section class="py-20 px-4 md:px-12 lg:px-24 bg-white">
340
+ <div class="container mx-auto">
341
+ <div class="flex flex-col lg:flex-row items-center">
342
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
343
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Simple Integration, <span class="gradient-text">Powerful Results</span></h2>
344
+ <p class="text-gray-600 mb-8">
345
+ Get started with just a few lines of code. Our API is designed for developers who value simplicity without sacrificing capability.
346
+ </p>
347
+
348
+ <div class="mb-8">
349
+ <div class="flex mb-4">
350
+ <button class="px-4 py-2 rounded-l-lg bg-gray-200 text-gray-800 font-medium">JavaScript</button>
351
+ <button class="px-4 py-2 bg-gray-100 text-gray-600">Python</button>
352
+ <button class="px-4 py-2 rounded-r-lg bg-gray-100 text-gray-600">cURL</button>
353
+ </div>
354
+
355
+ <div class="neumorphic-inset p-6 rounded-xl">
356
+ <pre class="text-gray-800 overflow-x-auto"><code>import { NexusAI } from 'nexusai-sdk';
357
+
358
+ const ai = new NexusAI('YOUR_API_KEY');
359
+
360
+ const response = await ai.generate({
361
+ prompt: "Write a product description for smart glasses",
362
+ max_tokens: 150,
363
+ temperature: 0.7
364
+ });
365
+
366
+ console.log(response.choices[0].text);</code></pre>
367
+ </div>
368
+ </div>
369
+
370
+ <button class="primary-btn px-6 py-3 rounded-full font-medium">
371
+ <i class="fas fa-book mr-2"></i> View Full Documentation
372
+ </button>
373
+ </div>
374
+
375
+ <div class="lg:w-1/2 lg:pl-12">
376
+ <div class="neumorphic p-8 rounded-2xl">
377
+ <div class="flex items-center mb-6">
378
+ <div class="w-12 h-12 neumorphic rounded-xl flex items-center justify-center mr-4">
379
+ <i class="fas fa-terminal text-xl gradient-text"></i>
380
+ </div>
381
+ <div>
382
+ <h3 class="text-xl font-bold">API Playground</h3>
383
+ <p class="text-gray-600">Test our API directly in your browser</p>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="mb-6">
388
+ <label class="block text-gray-700 mb-2">Model</label>
389
+ <div class="neumorphic-inset px-4 py-3 rounded-lg">
390
+ <select class="bg-transparent w-full focus:outline-none text-gray-700">
391
+ <option>Nexus-GPT-4</option>
392
+ <option>Nexus-GPT-3.5</option>
393
+ <option>Nexus-Codex</option>
394
+ <option>Nexus-Chat</option>
395
+ </select>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="mb-6">
400
+ <label class="block text-gray-700 mb-2">Prompt</label>
401
+ <div class="neumorphic-inset px-4 py-3 rounded-lg h-32">
402
+ <textarea class="bg-transparent w-full h-full focus:outline-none text-gray-700" placeholder="Type your prompt here..."></textarea>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="grid grid-cols-2 gap-4 mb-6">
407
+ <div>
408
+ <label class="block text-gray-700 mb-2">Temperature</label>
409
+ <div class="neumorphic-inset px-4 py-3 rounded-lg">
410
+ <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full">
411
+ </div>
412
+ </div>
413
+ <div>
414
+ <label class="block text-gray-700 mb-2">Max Tokens</label>
415
+ <div class="neumorphic-inset px-4 py-3 rounded-lg">
416
+ <input type="number" value="150" class="w-full bg-transparent focus:outline-none text-gray-700">
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <button class="primary-btn w-full py-3 rounded-lg font-medium">
422
+ <i class="fas fa-play mr-2"></i> Run API Call
423
+ </button>
424
+
425
+ <div class="mt-6 neumorphic-inset p-4 rounded-lg">
426
+ <div class="flex justify-between items-center mb-2">
427
+ <span class="text-sm text-gray-600">Response</span>
428
+ <span class="text-xs text-gray-500">Latency: 287ms</span>
429
+ </div>
430
+ <div class="bg-gray-50 p-3 rounded">
431
+ <p class="text-gray-700">"Experience the future with our smart glasses featuring..."</p>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </section>
439
+
440
+ <!-- Pricing Section -->
441
+ <section class="py-20 px-4 md:px-12 lg:px-24">
442
+ <div class="container mx-auto">
443
+ <div class="text-center mb-16">
444
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, <span class="gradient-text">Transparent</span> Pricing</h2>
445
+ <p class="text-gray-600 max-w-2xl mx-auto">
446
+ Pay only for what you use with per-request pricing. Volume discounts available for high-throughput applications.
447
+ </p>
448
+ </div>
449
+
450
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
451
+ <!-- Free Tier -->
452
+ <div class="neumorphic p-8 rounded-2xl">
453
+ <div class="mb-6">
454
+ <h3 class="text-xl font-bold mb-2">Starter</h3>
455
+ <p class="text-gray-600">Perfect for testing and small projects</p>
456
+ </div>
457
+ <div class="mb-6">
458
+ <span class="text-4xl font-bold gradient-text">$0</span>
459
+ <span class="text-gray-600">/month</span>
460
+ </div>
461
+ <ul class="space-y-3 mb-8">
462
+ <li class="flex items-center">
463
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
464
+ <span>1,000 free requests/month</span>
465
+ </li>
466
+ <li class="flex items-center">
467
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
468
+ <span>Basic models</span>
469
+ </li>
470
+ <li class="flex items-center">
471
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
472
+ <span>Community support</span>
473
+ </li>
474
+ <li class="flex items-center text-gray-400">
475
+ <i class="fas fa-times-circle mr-2"></i>
476
+ <span>No advanced features</span>
477
+ </li>
478
+ </ul>
479
+ <button class="neumorphic-btn w-full py-3 rounded-lg font-medium">
480
+ Get Started
481
+ </button>
482
+ </div>
483
+
484
+ <!-- Pro Tier -->
485
+ <div class="neumorphic p-8 rounded-2xl relative border-2 border-purple-500">
486
+ <div class="absolute top-0 right-0 bg-purple-500 text-white px-4 py-1 rounded-bl-lg rounded-tr-lg text-xs font-bold">
487
+ MOST POPULAR
488
+ </div>
489
+ <div class="mb-6">
490
+ <h3 class="text-xl font-bold mb-2">Pro</h3>
491
+ <p class="text-gray-600">For growing businesses and serious projects</p>
492
+ </div>
493
+ <div class="mb-6">
494
+ <span class="text-4xl font-bold gradient-text">$99</span>
495
+ <span class="text-gray-600">/month</span>
496
+ </div>
497
+ <ul class="space-y-3 mb-8">
498
+ <li class="flex items-center">
499
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
500
+ <span>50,000 requests/month</span>
501
+ </li>
502
+ <li class="flex items-center">
503
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
504
+ <span>Advanced models</span>
505
+ </li>
506
+ <li class="flex items-center">
507
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
508
+ <span>Priority support</span>
509
+ </li>
510
+ <li class="flex items-center">
511
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
512
+ <span>Fine-tuning access</span>
513
+ </li>
514
+ </ul>
515
+ <button class="primary-btn w-full py-3 rounded-lg font-medium">
516
+ Start Free Trial
517
+ </button>
518
+ </div>
519
+
520
+ <!-- Enterprise Tier -->
521
+ <div class="neumorphic p-8 rounded-2xl">
522
+ <div class="mb-6">
523
+ <h3 class="text-xl font-bold mb-2">Enterprise</h3>
524
+ <p class="text-gray-600">For large-scale deployments</p>
525
+ </div>
526
+ <div class="mb-6">
527
+ <span class="text-4xl font-bold gradient-text">Custom</span>
528
+ </div>
529
+ <ul class="space-y-3 mb-8">
530
+ <li class="flex items-center">
531
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
532
+ <span>Unlimited requests</span>
533
+ </li>
534
+ <li class="flex items-center">
535
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
536
+ <span>All models + custom</span>
537
+ </li>
538
+ <li class="flex items-center">
539
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
540
+ <span>24/7 dedicated support</span>
541
+ </li>
542
+ <li class="flex items-center">
543
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
544
+ <span>Private deployment</span>
545
+ </li>
546
+ </ul>
547
+ <button class="neumorphic-btn w-full py-3 rounded-lg font-medium">
548
+ Contact Sales
549
+ </button>
550
+ </div>
551
+ </div>
552
+
553
+ <div class="mt-12 neumorphic p-6 rounded-2xl">
554
+ <div class="flex flex-col md:flex-row items-center justify-between">
555
+ <div>
556
+ <h3 class="text-xl font-bold mb-2">Pay-as-you-go pricing also available</h3>
557
+ <p class="text-gray-600">$0.002 per request after free tier</p>
558
+ </div>
559
+ <button class="neumorphic-btn px-6 py-3 rounded-lg font-medium mt-4 md:mt-0">
560
+ <i class="fas fa-calculator mr-2"></i> Calculate Your Costs
561
+ </button>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </section>
566
+
567
+ <!-- CTA Section -->
568
+ <section class="py-20 px-4 md:px-12 lg:px-24 bg-white">
569
+ <div class="container mx-auto">
570
+ <div class="neumorphic p-12 rounded-3xl text-center">
571
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Build the Next Big Thing?</h2>
572
+ <p class="text-gray-600 text-lg max-w-2xl mx-auto mb-8">
573
+ Join thousands of developers who are creating innovative applications with our powerful LLM APIs.
574
+ </p>
575
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
576
+ <button class="primary-btn px-8 py-4 rounded-full font-medium text-lg">
577
+ Get Started for Free <i class="fas fa-arrow-right ml-2"></i>
578
+ </button>
579
+ <button class="neumorphic-btn px-8 py-4 rounded-full font-medium text-lg">
580
+ <i class="fas fa-comment-dots mr-2"></i> Talk to Sales
581
+ </button>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </section>
586
+
587
+ <!-- Footer -->
588
+ <footer class="py-12 px-4 md:px-12 lg:px-24 bg-gray-50">
589
+ <div class="container mx-auto">
590
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
591
+ <div class="lg:col-span-2">
592
+ <div class="flex items-center mb-4">
593
+ <div class="neumorphic w-12 h-12 rounded-full flex items-center justify-center mr-4">
594
+ <i class="fas fa-brain text-xl gradient-text"></i>
595
+ </div>
596
+ <span class="text-2xl font-bold gradient-text">Nexus<span class="text-gray-800">AI</span></span>
597
+ </div>
598
+ <p class="text-gray-600 mb-6">
599
+ The most advanced LLM API platform for developers building the future of AI applications.
600
+ </p>
601
+ <div class="flex space-x-4">
602
+ <a href="#" class="neumorphic-btn w-10 h-10 rounded-full flex items-center justify-center">
603
+ <i class="fab fa-twitter text-gray-700"></i>
604
+ </a>
605
+ <a href="#" class="neumorphic-btn w-10 h-10 rounded-full flex items-center justify-center">
606
+ <i class="fab fa-github text-gray-700"></i>
607
+ </a>
608
+ <a href="#" class="neumorphic-btn w-10 h-10 rounded-full flex items-center justify-center">
609
+ <i class="fab fa-linkedin-in text-gray-700"></i>
610
+ </a>
611
+ <a href="#" class="neumorphic-btn w-10 h-10 rounded-full flex items-center justify-center">
612
+ <i class="fab fa-discord text-gray-700"></i>
613
+ </a>
614
+ </div>
615
+ </div>
616
+
617
+ <div>
618
+ <h3 class="text-lg font-bold mb-4">Product</h3>
619
+ <ul class="space-y-3">
620
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Features</a></li>
621
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Pricing</a></li>
622
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Documentation</a></li>
623
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">API Status</a></li>
624
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Roadmap</a></li>
625
+ </ul>
626
+ </div>
627
+
628
+ <div>
629
+ <h3 class="text-lg font-bold mb-4">Company</h3>
630
+ <ul class="space-y-3">
631
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">About</a></li>
632
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Blog</a></li>
633
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Careers</a></li>
634
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Press</a></li>
635
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Contact</a></li>
636
+ </ul>
637
+ </div>
638
+
639
+ <div>
640
+ <h3 class="text-lg font-bold mb-4">Legal</h3>
641
+ <ul class="space-y-3">
642
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Privacy</a></li>
643
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Terms</a></li>
644
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Security</a></li>
645
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Acceptable Use</a></li>
646
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">DPA</a></li>
647
+ </ul>
648
+ </div>
649
+ </div>
650
+
651
+ <div class="border-t border-gray-200 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
652
+ <p class="text-gray-600 mb-4 md:mb-0">© 2023 NexusAI. All rights reserved.</p>
653
+ <div class="flex space-x-6">
654
+ <a href="#" class="text-gray-600 hover:text-purple-600">Privacy Policy</a>
655
+ <a href="#" class="text-gray-600 hover:text-purple-600">Terms of Service</a>
656
+ <a href="#" class="text-gray-600 hover:text-purple-600">Cookie Policy</a>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ </footer>
661
+
662
+ <script>
663
+ // Simple animation for demo purposes
664
+ document.addEventListener('DOMContentLoaded', function() {
665
+ // Floating animation for feature cards on hover
666
+ const featureCards = document.querySelectorAll('.feature-card');
667
+
668
+ featureCards.forEach(card => {
669
+ card.addEventListener('mouseenter', () => {
670
+ card.style.transform = 'translateY(-10px)';
671
+ card.style.boxShadow = '12px 12px 24px #d9dbdd, -12px -12px 24px #ffffff';
672
+ });
673
+
674
+ card.addEventListener('mouseleave', () => {
675
+ card.style.transform = '';
676
+ card.style.boxShadow = '';
677
+ });
678
+ });
679
+
680
+ // Mobile menu toggle (would need proper implementation)
681
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
682
+ if(mobileMenuButton) {
683
+ mobileMenuButton.addEventListener('click', () => {
684
+ alert('Mobile menu would open here in a full implementation');
685
+ });
686
+ }
687
+ });
688
+ </script>
689
+ <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=luzhipeng/lu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
690
+ </html>