Hugging Face's logo

Spaces:
basheer1414
/
deepsite-deva
Running

App Files Community
basheer1414 commited on
Commit
3a40273
·
verified ·
1 Parent(s): a5ab267

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1035 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite Deva
3
- emoji: 🚀
4
- colorFrom: red
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: deepsite-deva
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,1035 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NeuraFlow | AI-Powered Productivity</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
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#1A1F36',
16
+ accent: '#0EF6CC',
17
+ accent2: '#7B61FF',
18
+ dark: '#0F111A',
19
+ light: '#F8FAFC'
20
+ },
21
+ animation: {
22
+ 'float': 'float 6s ease-in-out infinite',
23
+ 'float2': 'float 8s ease-in-out infinite',
24
+ 'float3': 'float 10s ease-in-out infinite',
25
+ 'glow': 'glow 2s ease-in-out infinite alternate',
26
+ },
27
+ keyframes: {
28
+ float: {
29
+ '0%, 100%': { transform: 'translateY(0)' },
30
+ '50%': { transform: 'translateY(-20px)' },
31
+ },
32
+ glow: {
33
+ '0%': { 'box-shadow': '0 0 5px -5px #0EF6CC' },
34
+ '100%': { 'box-shadow': '0 0 20px 5px #0EF6CC' },
35
+ }
36
+ }
37
+ }
38
+ }
39
+ }
40
+ </script>
41
+ <style>
42
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
43
+ body {
44
+ font-family: 'Inter', sans-serif;
45
+ background-color: #0F111A;
46
+ color: #F8FAFC;
47
+ scroll-behavior: smooth;
48
+ }
49
+ .glass-card {
50
+ background: rgba(26, 31, 54, 0.6);
51
+ backdrop-filter: blur(10px);
52
+ -webkit-backdrop-filter: blur(10px);
53
+ border: 1px solid rgba(14, 246, 204, 0.2);
54
+ }
55
+ .testimonial-card {
56
+ background: linear-gradient(145deg, #1A1F36, #0F111A);
57
+ box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
58
+ }
59
+ .pricing-card:hover {
60
+ transform: translateY(-10px);
61
+ border-color: #7B61FF;
62
+ }
63
+ .feature-icon {
64
+ transition: all 0.3s ease;
65
+ }
66
+ .feature-card:hover .feature-icon {
67
+ transform: scale(1.2) rotate(5deg);
68
+ }
69
+ .custom-underline {
70
+ position: relative;
71
+ }
72
+ .custom-underline:after {
73
+ content: '';
74
+ position: absolute;
75
+ width: 100%;
76
+ height: 2px;
77
+ bottom: -2px;
78
+ left: 0;
79
+ background: linear-gradient(90deg, #0EF6CC, #7B61FF);
80
+ transform: scaleX(0);
81
+ transition: transform 0.3s ease;
82
+ }
83
+ .custom-underline:hover:after {
84
+ transform: scaleX(1);
85
+ }
86
+ #toggleDarkMode {
87
+ transition: all 0.3s ease;
88
+ }
89
+ #toggleDarkMode:hover {
90
+ transform: rotate(30deg);
91
+ }
92
+ .accordion-content {
93
+ max-height: 0;
94
+ overflow: hidden;
95
+ transition: max-height 0.3s ease;
96
+ }
97
+ .accordion.active .accordion-content {
98
+ max-height: 300px;
99
+ }
100
+ .chat-message {
101
+ opacity: 0;
102
+ transform: translateY(10px);
103
+ animation: fadeIn 0.3s forwards;
104
+ }
105
+ @keyframes fadeIn {
106
+ to {
107
+ opacity: 1;
108
+ transform: translateY(0);
109
+ }
110
+ }
111
+ </style>
112
+ </head>
113
+ <body class="bg-dark text-light relative overflow-x-hidden">
114
+ <!-- Floating particles background -->
115
+ <div class="absolute inset-0 overflow-hidden pointer-events-none">
116
+ <div class="absolute w-3 h-3 rounded-full bg-accent opacity-20 animation-float" style="top:20%; left:10%"></div>
117
+ <div class="absolute w-4 h-4 rounded-full bg-accent2 opacity-20 animation-float2" style="top:40%; left:20%"></div>
118
+ <div class="absolute w-2 h-2 rounded-full bg-accent opacity-20 animation-float3" style="top:60%; left:50%"></div>
119
+ <div class="absolute w-3 h-3 rounded-full bg-accent2 opacity-20 animation-float" style="top:80%; left:30%"></div>
120
+ <div class="absolute w-4 h-4 rounded-full bg-accent opacity-20 animation-float2" style="top:30%; left:80%"></div>
121
+ <div class="absolute w-2 h-2 rounded-full bg-accent2 opacity-20 animation-float3" style="top:70%; left:70%"></div>
122
+ </div>
123
+
124
+ <!-- Navigation -->
125
+ <nav class="relative z-50 py-6 px-4 sm:px-10 lg:px-20 xl:px-32 flex justify-between items-center glass-card">
126
+ <div class="flex items-center">
127
+ <span class="text-2xl font-bold bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent">NEURAFLOW</span>
128
+ </div>
129
+ <div class="hidden md:flex space-x-10">
130
+ <a href="#features" class="custom-underline hover:text-accent transition">Features</a>
131
+ <a href="#demo" class="custom-underline hover:text-accent transition">Demo</a>
132
+ <a href="#pricing" class="custom-underline hover:text-accent transition">Pricing</a>
133
+ <a href="#faq" class="custom-underline hover:text-accent transition">FAQ</a>
134
+ </div>
135
+ <div class="flex items-center space-x-4">
136
+ <button id="toggleDarkMode" class="p-2 rounded-full hover:bg-primary transition">
137
+ <i class="fas fa-moon text-accent"></i>
138
+ </button>
139
+ <button class="px-4 py-2 bg-gradient-to-r from-accent to-accent2 text-dark font-medium rounded-full hover:opacity-90 transition">Sign In</button>
140
+ <button class="md:hidden">
141
+ <i class="fas fa-bars text-xl"></i>
142
+ </button>
143
+ </div>
144
+ </nav>
145
+
146
+ <!-- Hero Section -->
147
+ <section class="relative py-20 px-4 sm:px-10 lg:px-20 xl:px-32 flex flex-col md:flex-row items-center justify-between min-h-screen">
148
+ <div class="md:w-1/2 mb-10 md:mb-0 z-10">
149
+ <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6">
150
+ Unleash <span class="bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent">AI-Powered</span> Productivity
151
+ </h1>
152
+ <p class="text-lg sm:text-xl text-gray-300 mb-10">
153
+ Revolutionize your workflow with our AI assistant that automates, organizes, and optimizes your tasks in real-time.
154
+ </p>
155
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
156
+ <button class="px-8 py-4 bg-gradient-to-r from-accent to-accent2 text-dark font-bold rounded-lg hover:opacity-90 transition transform hover:scale-105 shadow-lg">
157
+ Try for Free
158
+ </button>
159
+ <button class="px-8 py-4 border border-accent text-accent font-bold rounded-lg hover:bg-accent hover:bg-opacity-10 transition transform hover:scale-105">
160
+ Watch Demo
161
+ </button>
162
+ </div>
163
+ <div class="mt-10 flex items-center space-x-4">
164
+ <div class="flex -space-x-2">
165
+ <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full border-2 border-dark" alt="User">
166
+ <img src="https://randomuser.me/api/portraits/men/2.jpg" class="w-10 h-10 rounded-full border-2 border-dark" alt="User">
167
+ <img src="https://randomuser.me/api/portraits/women/3.jpg" class="w-10 h-10 rounded-full border-2 border-dark" alt="User">
168
+ </div>
169
+ <div>
170
+ <div class="flex items-center">
171
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
172
+ <span class="font-medium">4.9/5</span>
173
+ </div>
174
+ <p class="text-sm text-gray-400">Trusted by 10,000+ professionals</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ <div class="md:w-1/2 flex justify-center z-10">
179
+ <div class="relative animation-float">
180
+ <div class="glass-card p-4 rounded-3xl w-full max-w-md">
181
+ <div class="bg-primary p-2 rounded-2xl">
182
+ <div class="bg-gradient-to-br from-dark to-primary rounded-xl overflow-hidden">
183
+ <div class="p-4 flex items-center justify-between bg-primary rounded-t-xl">
184
+ <div class="flex space-x-2">
185
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
186
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
187
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
188
+ </div>
189
+ <div class="text-xs text-gray-400">Smart Assistant</div>
190
+ </div>
191
+ <div class="p-6 h-64 bg-gradient-to-b from-primary to-dark">
192
+ <div class="chat-message" style="animation-delay: 0.1s">
193
+ <div class="text-accent text-sm mb-2">NeuraFlow AI</div>
194
+ <div class="bg-dark rounded-lg p-3 text-sm mb-4">Hi there! I'm your AI productivity assistant. How can I help you today?</div>
195
+ </div>
196
+ <div class="chat-message" style="animation-delay: 0.4s">
197
+ <div class="text-accent text-sm mb-2">You</div>
198
+ <div class="bg-primary rounded-lg p-3 text-sm border border-gray-700">Schedule meeting with team for next week</div>
199
+ </div>
200
+ <div class="chat-message" style="animation-delay: 1s">
201
+ <div class="text-accent text-sm mb-2">NeuraFlow AI</div>
202
+ <div class="bg-dark rounded-lg p-3 text-sm">
203
+ I've scheduled a team meeting for next Wednesday at 2pm. Sent invites to all team members and created an agenda doc in your Drive.
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <div class="p-3 bg-primary border-t border-gray-700">
208
+ <div class="relative">
209
+ <input type="text" placeholder="Type your request here..." class="w-full bg-dark rounded-full py-3 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-accent">
210
+ <button class="absolute right-3 top-2 text-accent">
211
+ <i class="far fa-paper-plane"></i>
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ <div class="absolute -inset-4 rounded-3xl bg-gradient-to-br from-accent to-accent2 opacity-20 blur-lg -z-10 animation-glow"></div>
219
+ </div>
220
+ </div>
221
+ <div class="absolute inset-0 bg-gradient-to-b from-primary/0 to-primary/50 -z-10"></div>
222
+ </section>
223
+
224
+ <!-- Logo Cloud -->
225
+ <section class="py-12 px-4 sm:px-10 lg:px-20 xl:px-32 bg-gradient-to-r from-dark/50 to-primary/30">
226
+ <h3 class="text-center text-gray-400 mb-8">TRUSTED BY INNOVATIVE TEAMS WORLDWIDE</h3>
227
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-80">
228
+ <div class="text-2xl font-bold">Google</div>
229
+ <div class="text-2xl font-bold">Microsoft</div>
230
+ <div class="text-2xl font-bold">Shopify</div>
231
+ <div class="text-2xl font-bold">Spotify</div>
232
+ <div class="text-2xl font-bold">Airbnb</div>
233
+ </div>
234
+ </section>
235
+
236
+ <!-- Features -->
237
+ <section id="features" class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32">
238
+ <div class="max-w-4xl mx-auto text-center mb-16">
239
+ <h2 class="text-3xl sm:text-4xl font-bold mb-6">Work Smarter, Not Harder</h2>
240
+ <p class="text-lg text-gray-400">
241
+ Our AI learns your work patterns to deliver intelligent automation tailored just for you. Spend less time organizing and more time doing.
242
+ </p>
243
+ </div>
244
+
245
+ <div class="grid md:grid-cols-2 gap-8 mb-20">
246
+ <div class="feature-card glass-card p-8 rounded-2xl transition hover:border-accent hover:border-opacity-30">
247
+ <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-2xl text-dark mb-6 feature-icon">
248
+ <i class="fas fa-bolt"></i>
249
+ </div>
250
+ <h3 class="text-xl font-bold mb-3">AI Task Automation</h3>
251
+ <p class="text-gray-400">
252
+ Auto-schedule, prioritize, and manage your workflow with adaptive AI that learns your patterns and preferences.
253
+ </p>
254
+ </div>
255
+
256
+ <div class="feature-card glass-card p-8 rounded-2xl transition hover:border-accent hover:border-opacity-30">
257
+ <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-2xl text-dark mb-6 feature-icon">
258
+ <i class="fas fa-bell"></i>
259
+ </div>
260
+ <h3 class="text-xl font-bold mb-3">Smart Reminders</h3>
261
+ <p class="text-gray-400">
262
+ Context-aware notifications ensure you never miss important deadlines or follow-ups.
263
+ </p>
264
+ </div>
265
+
266
+ <div class="feature-card glass-card p-8 rounded-2xl transition hover:border-accent hover:border-opacity-30">
267
+ <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-2xl text-dark mb-6 feature-icon">
268
+ <i class="fas fa-chart-line"></i>
269
+ </div>
270
+ <h3 class="text-xl font-bold mb-3">Deep Insights & Analytics</h3>
271
+ <p class="text-gray-400">
272
+ Track your performance, identify time sinks, and optimize your schedule with precision analytics.
273
+ </p>
274
+ </div>
275
+
276
+ <div class="feature-card glass-card p-8 rounded-2xl transition hover:border-accent hover:border-opacity-30">
277
+ <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-2xl text-dark mb-6 feature-icon">
278
+ <i class="fas fa-plug"></i>
279
+ </div>
280
+ <h3 class="text-xl font-bold mb-3">Seamless Integrations</h3>
281
+ <p class="text-gray-400">
282
+ Works seamlessly with Google, Slack, Notion, Zoom and 100+ other tools you already use.
283
+ </p>
284
+ </div>
285
+ </div>
286
+
287
+ <div class="glass-card rounded-2xl p-8 md:p-12 grid md:grid-cols-2 gap-8 items-center">
288
+ <div>
289
+ <h3 class="text-2xl font-bold mb-4">Smart Scheduling That Adapts To You</h3>
290
+ <p class="text-gray-400 mb-6">
291
+ Our AI analyzes your calendar patterns, preferred working hours, and meeting history to automatically schedule tasks at your most productive times.
292
+ </p>
293
+ <ul class="space-y-3">
294
+ <li class="flex items-start">
295
+ <div class="text-accent mr-3 mt-1">
296
+ <i class="fas fa-check-circle"></i>
297
+ </div>
298
+ <span>Auto-reschedules when priorities change</span>
299
+ </li>
300
+ <li class="flex items-start">
301
+ <div class="text-accent mr-3 mt-1">
302
+ <i class="fas fa-check-circle"></i>
303
+ </div>
304
+ <span>Optimizes for deep work and focus time</span>
305
+ </li>
306
+ <li class="flex items-start">
307
+ <div class="text-accent mr-3 mt-1">
308
+ <i class="fas fa-check-circle"></i>
309
+ </div>
310
+ <span>Learns to avoid scheduling conflicts</span>
311
+ </li>
312
+ </ul>
313
+ </div>
314
+ <div class="relative">
315
+ <div class="bg-gradient-to-br from-dark to-primary rounded-xl overflow-hidden border border-gray-700 p-4">
316
+ <div class="bg-primary p-3 rounded-lg mb-4">
317
+ <div class="flex items-center mb-3">
318
+ <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-dark mr-3">
319
+ <i class="fas fa-robot"></i>
320
+ </div>
321
+ <div>
322
+ <div class="font-medium">NeuraFlow AI</div>
323
+ <div class="text-xs text-gray-400">Smart Scheduling</div>
324
+ </div>
325
+ </div>
326
+ <div class="text-sm">
327
+ I've noticed you're most productive in the mornings. I've scheduled your creative work from 8-11am and moved meetings to afternoons when possible.
328
+ </div>
329
+ </div>
330
+ <div class="grid grid-cols-5 gap-2 text-xs">
331
+ <div class="bg-dark rounded p-1 text-center border border-gray-700">
332
+ <div>Mon</div>
333
+ <div class="text-accent">3 tasks</div>
334
+ </div>
335
+ <div class="bg-dark rounded p-1 text-center border border-gray-700">
336
+ <div>Tue</div>
337
+ <div class="text-accent">4 tasks</div>
338
+ </div>
339
+ <div class="bg-primary rounded p-1 text-center border border-accent">
340
+ <div>Wed</div>
341
+ <div class="text-accent">5 tasks</div>
342
+ </div>
343
+ <div class="bg-dark rounded p-1 text-center border border-gray-700">
344
+ <div>Thu</div>
345
+ <div class="text-accent">2 tasks</div>
346
+ </div>
347
+ <div class="bg-dark rounded p-1 text-center border border-gray-700">
348
+ <div>Fri</div>
349
+ <div class="text-accent">4 tasks</div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ <div class="absolute -inset-4 rounded-xl bg-gradient-to-br from-accent to-accent2 opacity-10 blur-lg -z-10"></div>
354
+ </div>
355
+ </div>
356
+ </section>
357
+
358
+ <!-- Testimonials -->
359
+ <section class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32 bg-gradient-to-b from-primary/50 to-dark">
360
+ <div class="max-w-4xl mx-auto text-center mb-16">
361
+ <h2 class="text-3xl sm:text-4xl font-bold mb-6">What Our Users Say</h2>
362
+ <p class="text-lg text-gray-400">
363
+ Professionals across industries are transforming how they work with NeuraFlow.
364
+ </p>
365
+ </div>
366
+
367
+ <div class="grid md:grid-cols-3 gap-8">
368
+ <div class="testimonial-card rounded-2xl p-8">
369
+ <div class="flex items-center mb-4">
370
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
371
+ <div>
372
+ <div class="font-bold">Sarah Johnson</div>
373
+ <div class="text-sm text-gray-400">Product Manager @ TechCorp</div>
374
+ </div>
375
+ </div>
376
+ <div class="text-gray-300 mb-4">
377
+ "NeuraFlow has saved me 10+ hours per week by automating my scheduling and email management. The AI actually understands context like a human assistant would."
378
+ </div>
379
+ <div class="flex">
380
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
381
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
382
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
383
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
384
+ <i class="fas fa-star text-yellow-400"></i>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="testimonial-card rounded-2xl p-8">
389
+ <div class="flex items-center mb-4">
390
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
391
+ <div>
392
+ <div class="font-bold">Michael Chen</div>
393
+ <div class="text-sm text-gray-400">Founder @ Startup</div>
394
+ </div>
395
+ </div>
396
+ <div class="text-gray-300 mb-4">
397
+ "As a solo founder, I was drowning in tasks. NeuraFlow's prioritization system helped me focus on what matters most, increasing my productivity by 3x."
398
+ </div>
399
+ <div class="flex">
400
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
401
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
402
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
403
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
404
+ <i class="fas fa-star text-yellow-400"></i>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="testimonial-card rounded-2xl p-8">
409
+ <div class="flex items-center mb-4">
410
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
411
+ <div>
412
+ <div class="font-bold">Emma Rodriguez</div>
413
+ <div class="text-sm text-gray-400">Consultant @ Big4</div>
414
+ </div>
415
+ </div>
416
+ <div class="text-gray-300 mb-4">
417
+ "The analytics dashboard revealed inefficiencies in my workflow I never noticed. Now I work half as much but deliver twice the results. Game changer!"
418
+ </div>
419
+ <div class="flex">
420
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
421
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
422
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
423
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
424
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="mt-16 text-center">
430
+ <div class="inline-flex items-center bg-dark px-6 py-3 rounded-full">
431
+ <div class="flex mr-4">
432
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
433
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
434
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
435
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
436
+ <i class="fas fa-star text-yellow-400 mr-2"></i>
437
+ <span>4.9/5</span>
438
+ </div>
439
+ <div class="border-l border-gray-700 h-8 mx-2"></div>
440
+ <div>
441
+ <span>Trusted by 10,000+ professionals at</span>
442
+ <span class="font-bold ml-2">Google, Microsoft, Shopify,</span>
443
+ <span class="font-bold">and more</span>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </section>
448
+
449
+ <!-- Demo Section -->
450
+ <section id="demo" class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32">
451
+ <div class="max-w-6xl mx-auto">
452
+ <div class="grid md:grid-cols-2 gap-12 items-center">
453
+ <div>
454
+ <h2 class="text-3xl sm:text-4xl font-bold mb-6">See It In Action</h2>
455
+ <p class="text-lg text-gray-400 mb-8">
456
+ Experience how NeuraFlow can transform your daily workflow. Try our interactive demo to see the AI assistant in action.
457
+ </p>
458
+ <div class="space-y-4">
459
+ <div class="flex items-start">
460
+ <div class="text-accent mr-4 mt-1">
461
+ <i class="fas fa-play-circle"></i>
462
+ </div>
463
+ <div>
464
+ <h4 class="font-bold mb-1">1. Speak or Type Your Request</h4>
465
+ <p class="text-gray-400">
466
+ Just tell the AI what you need help with in natural language.
467
+ </p>
468
+ </div>
469
+ </div>
470
+ <div class="flex items-start">
471
+ <div class="text-accent mr-4 mt-1">
472
+ <i class="fas fa-cog"></i>
473
+ </div>
474
+ <div>
475
+ <h4 class="font-bold mb-1">2. AI Understands & Executes</h4>
476
+ <p class="text-gray-400">
477
+ Our AI comprehends context and handles complex multi-step requests.
478
+ </p>
479
+ </div>
480
+ </div>
481
+ <div class="flex items-start">
482
+ <div class="text-accent mr-4 mt-1">
483
+ <i class="fas fa-check-circle"></i>
484
+ </div>
485
+ <div>
486
+ <h4 class="font-bold mb-1">3. Automatic Follow Through</h4>
487
+ <p class="text-gray-400">
488
+ The system completes tasks and provides updates without you lifting a finger.
489
+ </p>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ <div class="relative">
495
+ <div class="glass-card rounded-2xl overflow-hidden p-6">
496
+ <div class="bg-gradient-to-b from-dark to-primary rounded-xl overflow-hidden border border-gray-700">
497
+ <div class="p-4 border-b border-gray-700 flex items-center justify-between">
498
+ <div class="flex items-center">
499
+ <div class="w-3 h-3 rounded-full bg-accent mr-2"></div>
500
+ <span class="text-sm font-medium">NeuraFlow AI Demo</span>
501
+ </div>
502
+ <div class="flex space-x-2">
503
+ <button class="w-6 h-6 rounded-full bg-dark border border-gray-700 flex items-center justify-center text-xs">
504
+ <i class="fas fa-microphone text-accent"></i>
505
+ </button>
506
+ <button class="w-6 h-6 rounded-full bg-dark border border-gray-700 flex items-center justify-center text-xs">
507
+ <i class="fas fa-ellipsis-h"></i>
508
+ </button>
509
+ </div>
510
+ </div>
511
+ <div class="p-4" style="height: 300px; overflow-y: auto;">
512
+ <div class="chat-message" style="animation-delay: 0.2s">
513
+ <div class="flex items-start mb-3">
514
+ <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-dark mr-3">
515
+ <i class="fas fa-robot"></i>
516
+ </div>
517
+ <div>
518
+ <div class="text-sm font-medium text-accent mb-1">NeuraFlow AI</div>
519
+ <div class="bg-dark rounded-lg p-3 text-sm">
520
+ Hi! I'm your AI productivity assistant. Try asking me to:
521
+ <div class="mt-2 space-y-1">
522
+ <div class="text-xs p-2 bg-primary rounded hover:bg-gray-800 cursor-pointer">Schedule a meeting with John next week</div>
523
+ <div class="text-xs p-2 bg-primary rounded hover:bg-gray-800 cursor-pointer">Draft an email to the team about the Q2 goals</div>
524
+ <div class="text-xs p-2 bg-primary rounded hover:bg-gray-800 cursor-pointer">Set up a reminder to follow up on the client proposal</div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ <div class="chat-message" style="animation-delay: 1s">
531
+ <div class="flex items-start mb-3">
532
+ <div class="w-8 h-8 rounded-full bg-primary border border-gray-700 flex items-center justify-center text-accent mr-3">
533
+ <i class="fas fa-user"></i>
534
+ </div>
535
+ <div>
536
+ <div class="text-sm font-medium text-accent mb-1">You</div>
537
+ <div class="bg-primary rounded-lg p-3 text-sm border border-gray-700">
538
+ Send email to the marketing team about the new campaign, attach the creative brief, and schedule a review meeting for next Monday
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ <div class="chat-message" style="animation-delay: 2s">
544
+ <div class="flex items-start">
545
+ <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-dark mr-3">
546
+ <i class="fas fa-robot"></i>
547
+ </div>
548
+ <div>
549
+ <div class="text-sm font-medium text-accent mb-1">NeuraFlow AI</div>
550
+ <div class="bg-dark rounded-lg p-3 text-sm">
551
+ <div class="mb-2">Done! Here's what I've completed:</div>
552
+ <div class="text-xs space-y-2">
553
+ <div class="flex items-center">
554
+ <i class="fas fa-check-circle text-green-400 mr-2"></i>
555
+ <span>Drafted email to [email protected]</span>
556
+ </div>
557
+ <div class="flex items-center">
558
+ <i class="fas fa-check-circle text-green-400 mr-2"></i>
559
+ <span>Attached "Campaign_Creative_Brief.pdf"</span>
560
+ </div>
561
+ <div class="flex items-center">
562
+ <i class="fas fa-check-circle text-green-400 mr-2"></i>
563
+ <span>Scheduled review meeting for Mon, 9:30am</span>
564
+ </div>
565
+ <div class="flex items-center">
566
+ <i class="fas fa-check-circle text-green-400 mr-2"></i>
567
+ <span>Sent calendar invites to 6 team members</span>
568
+ </div>
569
+ </div>
570
+ <div class="mt-3 text-xs text-gray-400">
571
+ <i class="fas fa-clock mr-1"></i> Completed in 12 seconds
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ <div class="p-4 border-t border-gray-700">
579
+ <div class="relative">
580
+ <input type="text" placeholder="Type your request here..." class="w-full bg-dark rounded-full py-3 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-accent">
581
+ <button class="absolute right-3 top-2 text-accent">
582
+ <i class="far fa-paper-plane"></i>
583
+ </button>
584
+ </div>
585
+ <div class="text-xs text-center text-gray-500 mt-2">
586
+ <span class="hidden sm:inline">Try: "Schedule a 30-minute focus session every morning this week" or</span>
587
+ <button class="underline text-accent hover:no-underline">View more examples</button>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ <div class="absolute -inset-4 rounded-2xl bg-gradient-to-br from-accent to-accent2 opacity-10 blur-lg -z-10"></div>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </section>
597
+
598
+ <!-- Pricing -->
599
+ <section id="pricing" class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32 bg-gradient-to-b from-dark/60 to-primary/30">
600
+ <div class="max-w-4xl mx-auto text-center mb-16">
601
+ <h2 class="text-3xl sm:text-4xl font-bold mb-6">Simple, Transparent Pricing</h2>
602
+ <p class="text-lg text-gray-400">
603
+ Choose the plan that fits your needs. Try risk-free with our 14-day money back guarantee.
604
+ </p>
605
+ </div>
606
+
607
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
608
+ <div class="pricing-card glass-card p-8 rounded-2xl border border-gray-700 transition duration-300 hover:shadow-xl">
609
+ <h3 class="text-xl font-bold mb-3">Starter</h3>
610
+ <p class="text-gray-400 mb-6">For individuals getting started with AI productivity</p>
611
+ <div class="text-4xl font-bold mb-6">
612
+ $0<span class="text-xl text-gray-400">/month</span>
613
+ </div>
614
+ <ul class="space-y-4 mb-8">
615
+ <li class="flex items-start">
616
+ <div class="text-accent mr-3 mt-1">
617
+ <i class="fas fa-check"></i>
618
+ </div>
619
+ <span>Basic task automation</span>
620
+ </li>
621
+ <li class="flex items-start">
622
+ <div class="text-accent mr-3 mt-1">
623
+ <i class="fas fa-check"></i>
624
+ </div>
625
+ <span>Simple scheduling</span>
626
+ </li>
627
+ <li class="flex items-start">
628
+ <div class="text-gray-600 mr-3 mt-1">
629
+ <i class="fas fa-times"></i>
630
+ </div>
631
+ <span class="text-gray-500">Advanced analytics</span>
632
+ </li>
633
+ <li class="flex items-start">
634
+ <div class="text-gray-600 mr-3 mt-1">
635
+ <i class="fas fa-times"></i>
636
+ </div>
637
+ <span class="text-gray-500">Team features</span>
638
+ </li>
639
+ <li class="flex items-start">
640
+ <div class="text-gray-600 mr-3 mt-1">
641
+ <i class="fas fa-times"></i>
642
+ </div>
643
+ <span class="text-gray-500">Priority support</span>
644
+ </li>
645
+ </ul>
646
+ <button class="w-full py-3 rounded-lg border border-accent text-accent font-medium hover:bg-accent hover:bg-opacity-10 transition">
647
+ Get Started
648
+ </button>
649
+ </div>
650
+
651
+ <div class="pricing-card glass-card p-8 rounded-2xl border-2 border-accent transition duration-300 hover:shadow-xl relative overflow-hidden">
652
+ <div class="absolute top-0 right-0 py-1 px-4 bg-accent text-dark font-bold text-xs rotate-45 translate-x-9 translate-y-3">
653
+ POPULAR
654
+ </div>
655
+ <h3 class="text-xl font-bold mb-3">Professional</h3>
656
+ <p class="text-gray-400 mb-6">For professionals serious about productivity</p>
657
+ <div class="text-4xl font-bold mb-6">
658
+ $19<span class="text-xl text-gray-400">/month</span>
659
+ </div>
660
+ <ul class="space-y-4 mb-8">
661
+ <li class="flex items-start">
662
+ <div class="text-accent mr-3 mt-1">
663
+ <i class="fas fa-check"></i>
664
+ </div>
665
+ <span>All Starter features</span>
666
+ </li>
667
+ <li class="flex items-start">
668
+ <div class="text-accent mr-3 mt-1">
669
+ <i class="fas fa-check"></i>
670
+ </div>
671
+ <span>Advanced AI automation</span>
672
+ </li>
673
+ <li class="flex items-start">
674
+ <div class="text-accent mr-3 mt-1">
675
+ <i class="fas fa-check"></i>
676
+ </div>
677
+ <span>Deep insights & analytics</span>
678
+ </li>
679
+ <li class="flex items-start">
680
+ <div class="text-accent mr-3 mt-1">
681
+ <i class="fas fa-check"></i>
682
+ </div>
683
+ <span>Smart integrations</span>
684
+ </li>
685
+ <li class="flex items-start">
686
+ <div class="text-gray-600 mr-3 mt-1">
687
+ <i class="fas fa-times"></i>
688
+ </div>
689
+ <span class="text-gray-500">Team dashboard</span>
690
+ </li>
691
+ </ul>
692
+ <button class="w-full py-3 rounded-lg bg-gradient-to-r from-accent to-accent2 text-dark font-medium hover:opacity-90 transition">
693
+ Try Free for 14 Days
694
+ </button>
695
+ </div>
696
+
697
+ <div class="pricing-card glass-card p-8 rounded-2xl border border-gray-700 transition duration-300 hover:shadow-xl">
698
+ <h3 class="text-xl font-bold mb-3">Enterprise</h3>
699
+ <p class="text-gray-400 mb-6">For teams and organizations</p>
700
+ <div class="text-4xl font-bold mb-6">
701
+ Custom
702
+ </div>
703
+ <ul class="space-y-4 mb-8">
704
+ <li class="flex items-start">
705
+ <div class="text-accent mr-3 mt-1">
706
+ <i class="fas fa-check"></i>
707
+ </div>
708
+ <span>All Professional features</span>
709
+ </li>
710
+ <li class="flex items-start">
711
+ <div class="text-accent mr-3 mt-1">
712
+ <i class="fas fa-check"></i>
713
+ </div>
714
+ <span>Team dashboard & analytics</span>
715
+ </li>
716
+ <li class="flex items-start">
717
+ <div class="text-accent mr-3 mt-1">
718
+ <i class="fas fa-check"></i>
719
+ </div>
720
+ <span>Custom AI training</span>
721
+ </li>
722
+ <li class="flex items-start">
723
+ <div class="text-accent mr-3 mt-1">
724
+ <i class="fas fa-check"></i>
725
+ </div>
726
+ <span>Dedicated support</span>
727
+ </li>
728
+ <li class="flex items-start">
729
+ <div class="text-accent mr-3 mt-1">
730
+ <i class="fas fa-check"></i>
731
+ </div>
732
+ <span>API access</span>
733
+ </li>
734
+ </ul>
735
+ <button class="w-full py-3 rounded-lg border border-accent text-accent font-medium hover:bg-accent hover:bg-opacity-10 transition">
736
+ Contact Sales
737
+ </button>
738
+ </div>
739
+ </div>
740
+
741
+ <div class="max-w-2xl mx-auto mt-16 glass-card rounded-2xl p-6 text-center">
742
+ <h4 class="font-bold text-lg mb-3">Not sure which plan is right for you?</h4>
743
+ <p class="text-gray-400 mb-4">Take our 30-second quiz to find the perfect plan based on your needs.</p>
744
+ <button class="text-accent font-medium flex items-center justify-center mx-auto">
745
+ Take the quiz
746
+ <i class="fas fa-arrow-right ml-2"></i>
747
+ </button>
748
+ </div>
749
+ </section>
750
+
751
+ <!-- FAQ -->
752
+ <section id="faq" class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32">
753
+ <div class="max-w-4xl mx-auto">
754
+ <div class="text-center mb-16">
755
+ <h2 class="text-3xl sm:text-4xl font-bold mb-6">Frequently Asked Questions</h2>
756
+ <p class="text-lg text-gray-400">
757
+ Everything you need to know about the product and billing.
758
+ </p>
759
+ </div>
760
+
761
+ <div class="space-y-4">
762
+ <div class="accordion glass-card rounded-xl p-6">
763
+ <button class="accordion-header w-full flex justify-between items-center text-left">
764
+ <h4 class="font-bold text-lg">How does the AI learn my work patterns?</h4>
765
+ <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i>
766
+ </button>
767
+ <div class="accordion-content mt-4">
768
+ <p class="text-gray-400">
769
+ NeuraFlow uses machine learning to analyze your calendar events, task completion times, work hours, and productivity patterns. Over time, it builds a personalized model of when you're most focused, which tasks take you longest, and how to optimally arrange your schedule. The more you use it, the smarter it gets.
770
+ </p>
771
+ </div>
772
+ </div>
773
+
774
+ <div class="accordion glass-card rounded-xl p-6">
775
+ <button class="accordion-header w-full flex justify-between items-center text-left">
776
+ <h4 class="font-bold text-lg">What platforms and apps does NeuraFlow integrate with?</h4>
777
+ <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i>
778
+ </button>
779
+ <div class="accordion-content mt-4">
780
+ <p class="text-gray-400 mb-4">
781
+ We integrate with all major productivity platforms including:
782
+ </p>
783
+ <ul class="grid sm:grid-cols-2 gap-2 text-gray-400">
784
+ <li class="flex items-center">
785
+ <i class="fas fa-check-circle text-accent mr-2"></i>
786
+ <span>Google Workspace (Gmail, Calendar, Drive)</span>
787
+ </li>
788
+ <li class="flex items-center">
789
+ <i class="fas fa-check-circle text-accent mr-2"></i>
790
+ <span>Microsoft 365 (Outlook, Teams, OneDrive)</span>
791
+ </li>
792
+ <li class="flex items-center">
793
+ <i class="fas fa-check-circle text-accent mr-2"></i>
794
+ <span>Slack</span>
795
+ </li>
796
+ <li class="flex items-center">
797
+ <i class="fas fa-check-circle text-accent mr-2"></i>
798
+ <span>Notion</span>
799
+ </li>
800
+ <li class="flex items-center">
801
+ <i class="fas fa-check-circle text-accent mr-2"></i>
802
+ <span>Trello</span>
803
+ </li>
804
+ <li class="flex items-center">
805
+ <i class="fas fa-check-circle text-accent mr-2"></i>
806
+ <span>Asana</span>
807
+ </li>
808
+ <li class="flex items-center">
809
+ <i class="fas fa-check-circle text-accent mr-2"></i>
810
+ <span>Zoom</span>
811
+ </li>
812
+ <li class="flex items-center">
813
+ <i class="fas fa-check-circle text-accent mr-2"></i>
814
+ <span>100+ more through Zapier</span>
815
+ </li>
816
+ </ul>
817
+ </div>
818
+ </div>
819
+
820
+ <div class="accordion glass-card rounded-xl p-6">
821
+ <button class="accordion-header w-full flex justify-between items-center text-left">
822
+ <h4 class="font-bold text-lg">Is my data secure with NeuraFlow?</h4>
823
+ <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i>
824
+ </button>
825
+ <div class="accordion-content mt-4">
826
+ <p class="text-gray-400 mb-4">
827
+ Security is our top priority. We implement enterprise-grade security measures including:
828
+ </p>
829
+ <ul class="space-y-3 text-gray-400">
830
+ <li class="flex items-start">
831
+ <div class="text-accent mr-2 mt-1">
832
+ <i class="fas fa-lock"></i>
833
+ </div>
834
+ <span>End-to-end encryption of all your data</span>
835
+ </li>
836
+ <li class="flex items-start">
837
+ <div class="text-accent mr-2 mt-1">
838
+ <i class="fas fa-shield-alt"></i>
839
+ </div>
840
+ <span>SOC 2 Type II certified infrastructure</span>
841
+ </li>
842
+ <li class="flex items-start">
843
+ <div class="text-accent mr-2 mt-1">
844
+ <i class="fas fa-user-secret"></i>
845
+ </div>
846
+ <span>Strict access controls and audit logging</span>
847
+ </li>
848
+ <li class="flex items-start">
849
+ <div class="text-accent mr-2 mt-1">
850
+ <i class="fas fa-cloud"></i>
851
+ </div>
852
+ <span>Option for on-premises deployment for enterprise clients</span>
853
+ </li>
854
+ </ul>
855
+ <p class="text-gray-400 mt-4">
856
+ We never sell or share your data with third parties. Read our <a href="#" class="text-accent">Privacy Policy</a> for more details.
857
+ </p>
858
+ </div>
859
+ </div>
860
+
861
+ <div class="accordion glass-card rounded-xl p-6">
862
+ <button class="accordion-header w-full flex justify-between items-center text-left">
863
+ <h4 class="font-bold text-lg">Can I cancel my subscription anytime?</h4>
864
+ <i class="fas fa-chevron-down text-accent transition-transform duration-300"></i>
865
+ </button>
866
+ <div class="accordion-content mt-4">
867
+ <p class="text-gray-400">
868
+ Absolutely. You can cancel your NeuraFlow subscription at any time with just a few clicks. When you cancel, you'll continue to have access to all Pro features until the end of your current billing period. We don't believe in locking you in or making cancellation difficult.
869
+ </p>
870
+ <p class="text-gray-400 mt-2">
871
+ If you're on a monthly or yearly plan, your subscription will automatically renew until you cancel. Our 14-day money-back guarantee applies to all new subscriptions.
872
+ </p>
873
+ </div>
874
+ </div>
875
+ </div>
876
+
877
+ <div class="text-center mt-16">
878
+ <h4 class="text-xl font-bold mb-4">Still have questions?</h4>
879
+ <p class="text-gray-400 mb-6">We're happy to help! Our team typically responds within 1 business day.</p>
880
+ <button class="px-6 py-3 bg-gradient-to-r from-accent to-accent2 text-dark font-bold rounded-lg hover:opacity-90 transition">
881
+ Contact Support
882
+ </button>
883
+ </div>
884
+ </div>
885
+ </section>
886
+
887
+ <!-- Final CTA -->
888
+ <section class="py-20 px-4 sm:px-10 lg:px-20 xl:px-32 bg-gradient-to-br from-primary to-dark text-center">
889
+ <div class="max-w-3xl mx-auto">
890
+ <h2 class="text-3xl sm:text-4xl font-bold mb-6">Ready to Transform How You Work?</h2>
891
+ <p class="text-lg text-gray-300 mb-10">
892
+ Join thousands of professionals who have boosted their productivity with AI. Sign up today and experience the difference.
893
+ </p>
894
+
895
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6 max-w-lg mx-auto">
896
+ <div class="relative flex-grow">
897
+ <input type="email" placeholder="Enter your email" class="w-full px-5 py-4 rounded-full bg-dark border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent">
898
+ <button class="absolute right-1 top-1 bg-gradient-to-r from-accent to-accent2 text-dark font-bold px-4 py-3 rounded-full hover:opacity-90 transition">
899
+ Get Started
900
+ </button>
901
+ </div>
902
+ </div>
903
+
904
+ <div class="flex justify-center mt-8 space-x-4">
905
+ <div class="flex items-center text-sm text-gray-400">
906
+ <i class="fas fa-check-circle text-green-400 mr-2"></i>
907
+ <span>Free 14-day trial</span>
908
+ </div>
909
+ <div class="flex items-center text-sm text-gray-400">
910
+ <i class="fas fa-check-circle text-green-400 mr-2"></i>
911
+ <span>No credit card required</span>
912
+ </div>
913
+ </div>
914
+ </div>
915
+ </section>
916
+
917
+ <!-- Footer -->
918
+ <footer class="py-16 px-4 sm:px-10 lg:px-20 xl:px-32 bg-dark">
919
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-10 max-w-6xl mx-auto">
920
+ <div class="col-span-2">
921
+ <h3 class="text-2xl font-bold bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent mb-4">NEURAFLOW</h3>
922
+ <p class="text-gray-400 mb-6">
923
+ AI-powered productivity assistant that helps you work smarter, not harder.
924
+ </p>
925
+ <div class="flex space-x-4">
926
+ <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-accent hover:bg-gray-800 transition">
927
+ <i class="fab fa-twitter"></i>
928
+ </a>
929
+ <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-accent hover:bg-gray-800 transition">
930
+ <i class="fab fa-linkedin-in"></i>
931
+ </a>
932
+ <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-accent hover:bg-gray-800 transition">
933
+ <i class="fab fa-facebook-f"></i>
934
+ </a>
935
+ <a href="#" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-accent hover:bg-gray-800 transition">
936
+ <i class="fab fa-instagram"></i>
937
+ </a>
938
+ </div>
939
+ </div>
940
+
941
+ <div>
942
+ <h4 class="font-bold text-lg mb-4">Product</h4>
943
+ <ul class="space-y-3">
944
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Features</a></li>
945
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Pricing</a></li>
946
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Integrations</a></li>
947
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Roadmap</a></li>
948
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Changelog</a></li>
949
+ </ul>
950
+ </div>
951
+
952
+ <div>
953
+ <h4 class="font-bold text-lg mb-4">Resources</h4>
954
+ <ul class="space-y-3">
955
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Blog</a></li>
956
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Guides</a></li>
957
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Help Center</a></li>
958
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Webinars</a></li>
959
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Community</a></li>
960
+ </ul>
961
+ </div>
962
+
963
+ <div>
964
+ <h4 class="font-bold text-lg mb-4">Company</h4>
965
+ <ul class="space-y-3">
966
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">About Us</a></li>
967
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Careers</a></li>
968
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Privacy</a></li>
969
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Terms</a></li>
970
+ <li><a href="#" class="text-gray-400 hover:text-accent transition">Contact</a></li>
971
+ </ul>
972
+ </div>
973
+ </div>
974
+
975
+ <div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
976
+ <p class="text-gray-500 mb-4 md:mb-0">© 2023 NeuraFlow. All rights reserved.</p>
977
+ <div class="flex space-x-6">
978
+ <a href="#" class="text-gray-500 hover:text-accent transition">Privacy Policy</a>
979
+ <a href="#" class="text-gray-500 hover:text-accent transition">Terms of Service</a>
980
+ <a href="#" class="text-gray-500 hover:text-accent transition">Cookie Policy</a>
981
+ </div>
982
+ </div>
983
+ </footer>
984
+
985
+ <script>
986
+ // Toggle dark mode
987
+ const toggleDarkMode = document.getElementById('toggleDarkMode');
988
+ const html = document.documentElement;
989
+
990
+ toggleDarkMode.addEventListener('click', () => {
991
+ html.classList.toggle('dark');
992
+ const icon = toggleDarkMode.querySelector('i');
993
+ if (html.classList.contains('dark')) {
994
+ icon.classList.remove('fa-sun');
995
+ icon.classList.add('fa-moon');
996
+ icon.classList.add('text-accent');
997
+ } else {
998
+ icon.classList.remove('fa-moon');
999
+ icon.classList.add('fa-sun');
1000
+ icon.classList.remove('text-accent');
1001
+ icon.classList.add('text-yellow-500');
1002
+ }
1003
+ });
1004
+
1005
+ // FAQ accordion
1006
+ const accordions = document.querySelectorAll('.accordion');
1007
+ accordions.forEach(accordion => {
1008
+ const header = accordion.querySelector('.accordion-header');
1009
+ const icon = header.querySelector('i');
1010
+
1011
+ header.addEventListener('click', () => {
1012
+ accordion.classList.toggle('active');
1013
+
1014
+ if (accordion.classList.contains('active')) {
1015
+ icon.classList.remove('fa-chevron-down');
1016
+ icon.classList.add('fa-chevron-up');
1017
+ } else {
1018
+ icon.classList.remove('fa-chevron-up');
1019
+ icon.classList.add('fa-chevron-down');
1020
+ }
1021
+ });
1022
+ });
1023
+
1024
+ // Smooth scrolling for anchor links
1025
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1026
+ anchor.addEventListener('click', function (e) {
1027
+ e.preventDefault();
1028
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
1029
+ behavior: 'smooth'
1030
+ });
1031
+ });
1032
+ });
1033
+ </script>
1034
+ <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=ahakobyan/testspace" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=basheer1414/deepsite-deva" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1035
+ </html>
prompts.txt ADDED
File without changes