creativecompas commited on
Commit
84fbaa1
·
verified ·
1 Parent(s): e8e1113

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1340 -19
index.html CHANGED
@@ -1,19 +1,1340 @@
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>ToolStack - Powerful SaaS Tools for Your Business</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f9fafb;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
19
+ }
20
+
21
+ .tool-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .feature-icon {
27
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
28
+ }
29
+
30
+ .pricing-card:hover {
31
+ transform: scale(1.03);
32
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
33
+ }
34
+
35
+ .pricing-popular {
36
+ border: 2px solid #8b5cf6;
37
+ }
38
+
39
+ @keyframes float {
40
+ 0% { transform: translateY(0px); }
41
+ 50% { transform: translateY(-10px); }
42
+ 100% { transform: translateY(0px); }
43
+ }
44
+
45
+ .floating {
46
+ animation: float 6s ease-in-out infinite;
47
+ }
48
+
49
+ /* Product modal styles */
50
+ .product-modal {
51
+ display: none;
52
+ position: fixed;
53
+ top: 0;
54
+ left: 0;
55
+ width: 100%;
56
+ height: 100%;
57
+ background-color: rgba(0,0,0,0.8);
58
+ z-index: 1000;
59
+ overflow-y: auto;
60
+ }
61
+
62
+ .modal-content {
63
+ background: white;
64
+ margin: 5% auto;
65
+ padding: 2rem;
66
+ border-radius: 0.5rem;
67
+ max-width: 900px;
68
+ width: 90%;
69
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
70
+ }
71
+
72
+ .close-modal {
73
+ position: absolute;
74
+ top: 1rem;
75
+ right: 1rem;
76
+ font-size: 1.5rem;
77
+ color: #6b7280;
78
+ cursor: pointer;
79
+ }
80
+
81
+ .product-feature {
82
+ transition: all 0.3s ease;
83
+ }
84
+
85
+ .product-feature:hover {
86
+ transform: translateX(5px);
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="min-h-screen">
91
+ <!-- Navigation -->
92
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
93
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
94
+ <div class="flex justify-between h-16">
95
+ <div class="flex items-center">
96
+ <div class="flex-shrink-0 flex items-center">
97
+ <i class="fas fa-cubes text-indigo-600 text-2xl mr-2"></i>
98
+ <span class="text-xl font-bold text-gray-900">ToolStack</span>
99
+ </div>
100
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
101
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
102
+ <a href="#products" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Products</a>
103
+ <a href="#features" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
104
+ <a href="#pricing" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a>
105
+ <a href="#testimonials" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Resources</a>
106
+ </div>
107
+ </div>
108
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
109
+ <button class="bg-white px-4 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Sign in</button>
110
+ <button class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Get started</button>
111
+ </div>
112
+ <div class="-mr-2 flex items-center sm:hidden">
113
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
114
+ <span class="sr-only">Open main menu</span>
115
+ <i class="fas fa-bars"></i>
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </nav>
121
+
122
+ <!-- Hero Section -->
123
+ <div class="gradient-bg">
124
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
125
+ <div class="text-center">
126
+ <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">
127
+ <span class="block">Powerful SaaS Tools</span>
128
+ <span class="block text-indigo-200">For Modern Businesses</span>
129
+ </h1>
130
+ <p class="mt-3 max-w-md mx-auto text-base text-indigo-100 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
131
+ Everything you need to streamline operations, boost productivity, and grow your business - all in one platform.
132
+ </p>
133
+ <div class="mt-8 flex justify-center">
134
+ <div class="inline-flex rounded-md shadow">
135
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50">
136
+ Start free trial
137
+ </a>
138
+ </div>
139
+ <div class="ml-3 inline-flex">
140
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70">
141
+ <i class="fas fa-play mr-2"></i> Watch demo
142
+ </a>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Logo Cloud -->
150
+ <div class="bg-white py-12">
151
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
152
+ <p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide">
153
+ Trusted by innovative companies worldwide
154
+ </p>
155
+ <div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
156
+ <div class="col-span-1 flex justify-center">
157
+ <img class="h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple">
158
+ </div>
159
+ <div class="col-span-1 flex justify-center">
160
+ <img class="h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage">
161
+ </div>
162
+ <div class="col-span-1 flex justify-center">
163
+ <img class="h-12" src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg" alt="StaticKit">
164
+ </div>
165
+ <div class="col-span-1 flex justify-center">
166
+ <img class="h-12" src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg" alt="Transistor">
167
+ </div>
168
+ <div class="col-span-1 flex justify-center">
169
+ <img class="h-12" src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg" alt="Workcation">
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Product Showcase -->
176
+ <div id="products" class="py-16 bg-white">
177
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
178
+ <div class="lg:text-center mb-12">
179
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Our Products</h2>
180
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
181
+ Comprehensive suite of business tools
182
+ </p>
183
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
184
+ Click on any product to explore its features and capabilities in detail.
185
+ </p>
186
+ </div>
187
+
188
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
189
+ <!-- Product 1 -->
190
+ <div onclick="openProductModal('project-management')" class="tool-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300 cursor-pointer">
191
+ <div class="p-6">
192
+ <div class="flex items-center mb-4">
193
+ <div class="bg-indigo-100 p-3 rounded-lg">
194
+ <i class="fas fa-project-diagram text-indigo-600 text-xl"></i>
195
+ </div>
196
+ <h3 class="ml-4 text-lg font-semibold text-gray-900">Project Management</h3>
197
+ </div>
198
+ <p class="text-gray-600 mb-4">
199
+ Plan, track, and deliver projects on time with our intuitive project management solution.
200
+ </p>
201
+ <div class="flex flex-wrap gap-2">
202
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Kanban</span>
203
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Gantt</span>
204
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Agile</span>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Product 2 -->
210
+ <div onclick="openProductModal('crm-sales')" class="tool-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300 cursor-pointer">
211
+ <div class="p-6">
212
+ <div class="flex items-center mb-4">
213
+ <div class="bg-purple-100 p-3 rounded-lg">
214
+ <i class="fas fa-file-invoice-dollar text-purple-600 text-xl"></i>
215
+ </div>
216
+ <h3 class="ml-4 text-lg font-semibold text-gray-900">CRM & Sales</h3>
217
+ </div>
218
+ <p class="text-gray-600 mb-4">
219
+ Manage customer relationships, track deals, and automate your sales pipeline.
220
+ </p>
221
+ <div class="flex flex-wrap gap-2">
222
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Leads</span>
223
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Contacts</span>
224
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Pipeline</span>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Product 3 -->
230
+ <div onclick="openProductModal('marketing-automation')" class="tool-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300 cursor-pointer">
231
+ <div class="p-6">
232
+ <div class="flex items-center mb-4">
233
+ <div class="bg-pink-100 p-3 rounded-lg">
234
+ <i class="fas fa-comments-dollar text-pink-600 text-xl"></i>
235
+ </div>
236
+ <h3 class="ml-4 text-lg font-semibold text-gray-900">Marketing Automation</h3>
237
+ </div>
238
+ <p class="text-gray-600 mb-4">
239
+ Create, automate, and optimize your marketing campaigns across multiple channels.
240
+ </p>
241
+ <div class="flex flex-wrap gap-2">
242
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">Email</span>
243
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">Social</span>
244
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">Ads</span>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Product 4 -->
250
+ <div onclick="openProductModal('finance-accounting')" class="tool-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300 cursor-pointer">
251
+ <div class="p-6">
252
+ <div class="flex items-center mb-4">
253
+ <div class="bg-blue-100 p-3 rounded-lg">
254
+ <i class="fas fa-wallet text-blue-600 text-xl"></i>
255
+ </div>
256
+ <h3 class="ml-4 text-lg font-semibold text-gray-900">Finance & Accounting</h3>
257
+ </div>
258
+ <p class="text-gray-600 mb-4">
259
+ Streamline invoicing, expenses, and financial reporting for your business.
260
+ </p>
261
+ <div class="flex flex-wrap gap-2">
262
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Invoices</span>
263
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Expenses</span>
264
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Tax</span>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Product 5 -->
270
+ <div onclick="openProductModal('hr-people')" class="tool-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300 cursor-pointer">
271
+ <div class="p-6">
272
+ <div class="flex items-center mb-4">
273
+ <div class="bg-green-100 p-3 rounded-lg">
274
+ <i class="fas fa-users text-green-600 text-xl"></i>
275
+ </div>
276
+ <h3 class="ml-4 text-lg font-semibold text-gray-900">HR & People Ops</h3>
277
+ </div>
278
+ <p class="text-gray-600 mb-4">
279
+ Manage your workforce with tools for hiring, onboarding, and performance management.
280
+ </p>
281
+ <div class="flex flex-wrap gap-2">
282
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Hiring</span>
283
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Time Off</span>
284
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Performance</span>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Product 6 -->
290
+ <div onclick="openProductModal('business-intelligence')" class="tool-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300 cursor-pointer">
291
+ <div class="p-6">
292
+ <div class="flex items-center mb-4">
293
+ <div class="bg-yellow-100 p-3 rounded-lg">
294
+ <i class="fas fa-chart-pie text-yellow-600 text-xl"></i>
295
+ </div>
296
+ <h3 class="ml-4 text-lg font-semibold text-gray-900">Business Intelligence</h3>
297
+ </div>
298
+ <p class="text-gray-600 mb-4">
299
+ Turn your data into actionable insights with powerful analytics and visualization tools.
300
+ </p>
301
+ <div class="flex flex-wrap gap-2">
302
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Dashboards</span>
303
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Reports</span>
304
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Forecasting</span>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Features -->
313
+ <div id="features" class="py-12 bg-gray-50">
314
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
315
+ <div class="lg:text-center">
316
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
317
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
318
+ A better way to manage your business
319
+ </p>
320
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
321
+ All the tools you need in one integrated platform that grows with your business.
322
+ </p>
323
+ </div>
324
+
325
+ <div class="mt-10">
326
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
327
+ <!-- Feature 1 -->
328
+ <div class="bg-white overflow-hidden shadow rounded-lg">
329
+ <div class="p-5">
330
+ <div class="flex items-center">
331
+ <div class="flex-shrink-0 feature-icon rounded-md p-3 text-white">
332
+ <i class="fas fa-chart-line text-xl"></i>
333
+ </div>
334
+ <div class="ml-5 w-0 flex-1">
335
+ <h3 class="text-lg font-medium text-gray-900">Analytics Dashboard</h3>
336
+ </div>
337
+ </div>
338
+ <div class="mt-4">
339
+ <p class="text-base text-gray-500">
340
+ Real-time insights and customizable reports to track your business performance and make data-driven decisions.
341
+ </p>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Feature 2 -->
347
+ <div class="bg-white overflow-hidden shadow rounded-lg">
348
+ <div class="p-5">
349
+ <div class="flex items-center">
350
+ <div class="flex-shrink-0 feature-icon rounded-md p-3 text-white">
351
+ <i class="fas fa-users-cog text-xl"></i>
352
+ </div>
353
+ <div class="ml-5 w-0 flex-1">
354
+ <h3 class="text-lg font-medium text-gray-900">Team Collaboration</h3>
355
+ </div>
356
+ </div>
357
+ <div class="mt-4">
358
+ <p class="text-base text-gray-500">
359
+ Seamless communication and project management tools to keep your team aligned and productive.
360
+ </p>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Feature 3 -->
366
+ <div class="bg-white overflow-hidden shadow rounded-lg">
367
+ <div class="p-5">
368
+ <div class="flex items-center">
369
+ <div class="flex-shrink-0 feature-icon rounded-md p-3 text-white">
370
+ <i class="fas fa-robot text-xl"></i>
371
+ </div>
372
+ <div class="ml-5 w-0 flex-1">
373
+ <h3 class="text-lg font-medium text-gray-900">AI Automation</h3>
374
+ </div>
375
+ </div>
376
+ <div class="mt-4">
377
+ <p class="text-base text-gray-500">
378
+ Automate repetitive tasks with our intelligent workflows to save time and reduce errors.
379
+ </p>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Feature 4 -->
385
+ <div class="bg-white overflow-hidden shadow rounded-lg">
386
+ <div class="p-5">
387
+ <div class="flex items-center">
388
+ <div class="flex-shrink-0 feature-icon rounded-md p-3 text-white">
389
+ <i class="fas fa-shield-alt text-xl"></i>
390
+ </div>
391
+ <div class="ml-5 w-0 flex-1">
392
+ <h3 class="text-lg font-medium text-gray-900">Enterprise Security</h3>
393
+ </div>
394
+ </div>
395
+ <div class="mt-4">
396
+ <p class="text-base text-gray-500">
397
+ Military-grade encryption and compliance certifications to keep your data safe and secure.
398
+ </p>
399
+ </div>
400
+ </div>
401
+ </div>
402
+
403
+ <!-- Feature 5 -->
404
+ <div class="bg-white overflow-hidden shadow rounded-lg">
405
+ <div class="p-5">
406
+ <div class="flex items-center">
407
+ <div class="flex-shrink-0 feature-icon rounded-md p-3 text-white">
408
+ <i class="fas fa-plug text-xl"></i>
409
+ </div>
410
+ <div class="ml-5 w-0 flex-1">
411
+ <h3 class="text-lg font-medium text-gray-900">API & Integrations</h3>
412
+ </div>
413
+ </div>
414
+ <div class="mt-4">
415
+ <p class="text-base text-gray-500">
416
+ Connect with thousands of apps through our powerful API and pre-built integrations.
417
+ </p>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <!-- Feature 6 -->
423
+ <div class="bg-white overflow-hidden shadow rounded-lg">
424
+ <div class="p-5">
425
+ <div class="flex items-center">
426
+ <div class="flex-shrink-0 feature-icon rounded-md p-3 text-white">
427
+ <i class="fas fa-headset text-xl"></i>
428
+ </div>
429
+ <div class="ml-5 w-0 flex-1">
430
+ <h3 class="text-lg font-medium text-gray-900">24/7 Support</h3>
431
+ </div>
432
+ </div>
433
+ <div class="mt-4">
434
+ <p class="text-base text-gray-500">
435
+ Dedicated customer success team available around the clock to help you succeed.
436
+ </p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- Stats -->
446
+ <div class="relative bg-indigo-800">
447
+ <div class="absolute inset-0">
448
+ <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80&sat=-100" alt="">
449
+ <div class="absolute inset-0 bg-indigo-800 mix-blend-multiply" aria-hidden="true"></div>
450
+ </div>
451
+ <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
452
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
453
+ Trusted by businesses worldwide
454
+ </h2>
455
+ <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
456
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6">
457
+ <p class="text-4xl font-bold text-white">10,000+</p>
458
+ <p class="mt-2 text-sm font-medium text-indigo-200">Businesses powered</p>
459
+ </div>
460
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6">
461
+ <p class="text-4xl font-bold text-white">120+</p>
462
+ <p class="mt-2 text-sm font-medium text-indigo-200">Countries served</p>
463
+ </div>
464
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6">
465
+ <p class="text-4xl font-bold text-white">99.9%</p>
466
+ <p class="mt-2 text-sm font-medium text-indigo-200">Uptime reliability</p>
467
+ </div>
468
+ <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6">
469
+ <p class="text-4xl font-bold text-white">4.8/5</p>
470
+ <p class="mt-2 text-sm font-medium text-indigo-200">Customer satisfaction</p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Pricing -->
477
+ <div id="pricing" class="bg-gray-50 py-16">
478
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
479
+ <div class="lg:text-center mb-12">
480
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Pricing</h2>
481
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
482
+ Flexible plans for businesses of all sizes
483
+ </p>
484
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
485
+ Start with a free trial. No credit card required. Cancel anytime.
486
+ </p>
487
+ </div>
488
+
489
+ <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">
490
+ <!-- Starter Plan -->
491
+ <div class="pricing-card bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200 transition duration-300">
492
+ <div class="p-6">
493
+ <h2 class="text-lg leading-6 font-medium text-gray-900">Starter</h2>
494
+ <p class="mt-4 text-sm text-gray-500">
495
+ Perfect for individuals and small teams getting started.
496
+ </p>
497
+ <p class="mt-8">
498
+ <span class="text-4xl font-extrabold text-gray-900">$19</span>
499
+ <span class="text-base font-medium text-gray-500">/mo</span>
500
+ </p>
501
+ <button class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">
502
+ Get started
503
+ </button>
504
+ </div>
505
+ <div class="pt-6 pb-8 px-6">
506
+ <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
507
+ <ul class="mt-6 space-y-4">
508
+ <li class="flex space-x-3">
509
+ <i class="fas fa-check text-green-500"></i>
510
+ <span class="text-sm text-gray-500">Up to 5 users</span>
511
+ </li>
512
+ <li class="flex space-x-3">
513
+ <i class="fas fa-check text-green-500"></i>
514
+ <span class="text-sm text-gray-500">Basic project management</span>
515
+ </li>
516
+ <li class="flex space-x-3">
517
+ <i class="fas fa-check text-green-500"></i>
518
+ <span class="text-sm text-gray-500">5GB storage</span>
519
+ </li>
520
+ <li class="flex space-x-3">
521
+ <i class="fas fa-check text-green-500"></i>
522
+ <span class="text-sm text-gray-500">Community support</span>
523
+ </li>
524
+ </ul>
525
+ </div>
526
+ </div>
527
+
528
+ <!-- Popular Plan -->
529
+ <div class="pricing-card pricing-popular bg-white border border-purple-300 rounded-lg shadow-xl divide-y divide-gray-200 transition duration-300">
530
+ <div class="p-6">
531
+ <div class="flex justify-between">
532
+ <h2 class="text-lg leading-6 font-medium text-gray-900">Professional</h2>
533
+ <p class="inline-flex px-3 py-1 rounded-full text-xs font-semibold leading-5 bg-purple-100 text-purple-800">
534
+ Most popular
535
+ </p>
536
+ </div>
537
+ <p class="mt-4 text-sm text-gray-500">
538
+ For growing teams that need more power and flexibility.
539
+ </p>
540
+ <p class="mt-8">
541
+ <span class="text-4xl font-extrabold text-gray-900">$49</span>
542
+ <span class="text-base font-medium text-gray-500">/mo</span>
543
+ </p>
544
+ <button class="mt-8 block w-full bg-purple-600 border border-purple-600 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-purple-700">
545
+ Get started
546
+ </button>
547
+ </div>
548
+ <div class="pt-6 pb-8 px-6">
549
+ <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
550
+ <ul class="mt-6 space-y-4">
551
+ <li class="flex space-x-3">
552
+ <i class="fas fa-check text-green-500"></i>
553
+ <span class="text-sm text-gray-500">Up to 20 users</span>
554
+ </li>
555
+ <li class="flex space-x-3">
556
+ <i class="fas fa-check text-green-500"></i>
557
+ <span class="text-sm text-gray-500">Advanced project management</span>
558
+ </li>
559
+ <li class="flex space-x-3">
560
+ <i class="fas fa-check text-green-500"></i>
561
+ <span class="text-sm text-gray-500">50GB storage</span>
562
+ </li>
563
+ <li class="flex space-x-3">
564
+ <i class="fas fa-check text-green-500"></i>
565
+ <span class="text-sm text-gray-500">Priority support</span>
566
+ </li>
567
+ <li class="flex space-x-3">
568
+ <i class="fas fa-check text-green-500"></i>
569
+ <span class="text-sm text-gray-500">API access</span>
570
+ </li>
571
+ </ul>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- Enterprise Plan -->
576
+ <div class="pricing-card bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200 transition duration-300">
577
+ <div class="p-6">
578
+ <h2 class="text-lg leading-6 font-medium text-gray-900">Enterprise</h2>
579
+ <p class="mt-4 text-sm text-gray-500">
580
+ For large organizations with complex needs.
581
+ </p>
582
+ <p class="mt-8">
583
+ <span class="text-4xl font-extrabold text-gray-900">$99</span>
584
+ <span class="text-base font-medium text-gray-500">/mo</span>
585
+ </p>
586
+ <button class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">
587
+ Get started
588
+ </button>
589
+ </div>
590
+ <div class="pt-6 pb-8 px-6">
591
+ <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
592
+ <ul class="mt-6 space-y-4">
593
+ <li class="flex space-x-3">
594
+ <i class="fas fa-check text-green-500"></i>
595
+ <span class="text-sm text-gray-500">Unlimited users</span>
596
+ </li>
597
+ <li class="flex space-x-3">
598
+ <i class="fas fa-check text-green-500"></i>
599
+ <span class="text-sm text-gray-500">Enterprise-grade security</span>
600
+ </li>
601
+ <li class="flex space-x-3">
602
+ <i class="fas fa-check text-green-500"></i>
603
+ <span class="text-sm text-gray-500">500GB storage</span>
604
+ </li>
605
+ <li class="flex space-x-3">
606
+ <i class="fas fa-check text-green-500"></i>
607
+ <span class="text-sm text-gray-500">24/7 dedicated support</span>
608
+ </li>
609
+ <li class="flex space-x-3">
610
+ <i class="fas fa-check text-green-500"></i>
611
+ <span class="text-sm text-gray-500">Custom integrations</span>
612
+ </li>
613
+ <li class="flex space-x-3">
614
+ <i class="fas fa-check text-green-500"></i>
615
+ <span class="text-sm text-gray-500">On-premise options</span>
616
+ </li>
617
+ </ul>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </div>
623
+
624
+ <!-- Testimonials -->
625
+ <div id="testimonials" class="py-16 bg-white">
626
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
627
+ <div class="lg:text-center mb-12">
628
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2>
629
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
630
+ Loved by businesses worldwide
631
+ </p>
632
+ </div>
633
+
634
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
635
+ <!-- Testimonial 1 -->
636
+ <div class="bg-gray-50 p-8 rounded-xl">
637
+ <div class="flex items-center mb-6">
638
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
639
+ <div class="ml-4">
640
+ <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
641
+ <p class="text-gray-500">CEO, TechSolutions</p>
642
+ </div>
643
+ </div>
644
+ <p class="text-gray-600 italic mb-6">
645
+ "ToolStack has transformed how we operate. The project management tools alone have saved us hundreds of hours in coordination time. Our team is more productive than ever."
646
+ </p>
647
+ <div class="flex items-center">
648
+ <div class="flex text-yellow-400">
649
+ <i class="fas fa-star"></i>
650
+ <i class="fas fa-star"></i>
651
+ <i class="fas fa-star"></i>
652
+ <i class="fas fa-star"></i>
653
+ <i class="fas fa-star"></i>
654
+ </div>
655
+ <span class="ml-2 text-sm text-gray-500">5.0 rating</span>
656
+ </div>
657
+ </div>
658
+
659
+ <!-- Testimonial 2 -->
660
+ <div class="bg-gray-50 p-8 rounded-xl">
661
+ <div class="flex items-center mb-6">
662
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
663
+ <div class="ml-4">
664
+ <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
665
+ <p class="text-gray-500">COO, GrowthMarketing</p>
666
+ </div>
667
+ </div>
668
+ <p class="text-gray-600 italic mb-6">
669
+ "The marketing automation features are game-changing. We've seen a 40% increase in lead conversion since implementing ToolStack. The analytics dashboard gives us real-time insights we never had before."
670
+ </p>
671
+ <div class="flex items-center">
672
+ <div class="flex text-yellow-400">
673
+ <i class="fas fa-star"></i>
674
+ <i class="fas fa-star"></i>
675
+ <i class="fas fa-star"></i>
676
+ <i class="fas fa-star"></i>
677
+ <i class="fas fa-star"></i>
678
+ </div>
679
+ <span class="ml-2 text-sm text-gray-500">5.0 rating</span>
680
+ </div>
681
+ </div>
682
+
683
+ <!-- Testimonial 3 -->
684
+ <div class="bg-gray-50 p-8 rounded-xl">
685
+ <div class="flex items-center mb-6">
686
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya Patel">
687
+ <div class="ml-4">
688
+ <h4 class="text-lg font-medium text-gray-900">Priya Patel</h4>
689
+ <p class="text-gray-500">CFO, GlobalFinance</p>
690
+ </div>
691
+ </div>
692
+ <p class="text-gray-600 italic mb-6">
693
+ "As a CFO, I appreciate how ToolStack has streamlined our financial reporting. The integration with our accounting software has reduced manual work by 75%. The security features also give me peace of mind."
694
+ </p>
695
+ <div class="flex items-center">
696
+ <div class="flex text-yellow-400">
697
+ <i class="fas fa-star"></i>
698
+ <i class="fas fa-star"></i>
699
+ <i class="fas fa-star"></i>
700
+ <i class="fas fa-star"></i>
701
+ <i class="fas fa-star-half-alt"></i>
702
+ </div>
703
+ <span class="ml-2 text-sm text-gray-500">4.5 rating</span>
704
+ </div>
705
+ </div>
706
+
707
+ <!-- Testimonial 4 -->
708
+ <div class="bg-gray-50 p-8 rounded-xl">
709
+ <div class="flex items-center mb-6">
710
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="David Wilson">
711
+ <div class="ml-4">
712
+ <h4 class="text-lg font-medium text-gray-900">David Wilson</h4>
713
+ <p class="text-gray-500">CTO, InnovateTech</p>
714
+ </div>
715
+ </div>
716
+ <p class="text-gray-600 italic mb-6">
717
+ "The API documentation is excellent, and the support team is responsive. We've built custom integrations that connect ToolStack with our proprietary systems, creating a seamless workflow across our entire organization."
718
+ </p>
719
+ <div class="flex items-center">
720
+ <div class="flex text-yellow-400">
721
+ <i class="fas fa-star"></i>
722
+ <i class="fas fa-star"></i>
723
+ <i class="fas fa-star"></i>
724
+ <i class="fas fa-star"></i>
725
+ <i class="fas fa-star"></i>
726
+ </div>
727
+ <span class="ml-2 text-sm text-gray-500">5.0 rating</span>
728
+ </div>
729
+ </div>
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <!-- CTA Section -->
735
+ <div class="bg-indigo-700">
736
+ <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">
737
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
738
+ <span class="block">Ready to transform your business?</span>
739
+ <span class="block text-indigo-200">Start your free 14-day trial today.</span>
740
+ </h2>
741
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
742
+ <div class="inline-flex rounded-md shadow">
743
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50">
744
+ Get started
745
+ </a>
746
+ </div>
747
+ <div class="ml-3 inline-flex">
748
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70">
749
+ <i class="fas fa-play mr-2"></i> Watch demo
750
+ </a>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </div>
755
+
756
+ <!-- Footer -->
757
+ <footer class="bg-gray-800">
758
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
759
+ <div class="grid grid-cols-2 gap-8 md:grid-cols-5">
760
+ <div class="col-span-2">
761
+ <div class="flex items-center">
762
+ <i class="fas fa-cubes text-white text-2xl mr-2"></i>
763
+ <span class="text-xl font-bold text-white">ToolStack</span>
764
+ </div>
765
+ <p class="mt-4 text-gray-300 text-sm">
766
+ The complete SaaS platform for modern businesses. Streamline operations, boost productivity, and drive growth with our integrated tools.
767
+ </p>
768
+ <div class="mt-6 flex space-x-6">
769
+ <a href="#" class="text-gray-400 hover:text-white">
770
+ <i class="fab fa-facebook-f"></i>
771
+ </a>
772
+ <a href="#" class="text-gray-400 hover:text-white">
773
+ <i class="fab fa-twitter"></i>
774
+ </a>
775
+ <a href="#" class="text-gray-400 hover:text-white">
776
+ <i class="fab fa-linkedin-in"></i>
777
+ </a>
778
+ <a href="#" class="text-gray-400 hover:text-white">
779
+ <i class="fab fa-github"></i>
780
+ </a>
781
+ </div>
782
+ </div>
783
+
784
+ <div>
785
+ <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Solutions</h3>
786
+ <ul class="mt-4 space-y-4">
787
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Marketing</a></li>
788
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Sales</a></li>
789
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Project Management</a></li>
790
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Human Resources</a></li>
791
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Finance</a></li>
792
+ </ul>
793
+ </div>
794
+
795
+ <div>
796
+ <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Support</h3>
797
+ <ul class="mt-4 space-y-4">
798
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
799
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
800
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API Status</a></li>
801
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact Us</a></li>
802
+ </ul>
803
+ </div>
804
+
805
+ <div>
806
+ <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Company</h3>
807
+ <ul class="mt-4 space-y-4">
808
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
809
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
810
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
811
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
812
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Partners</a></li>
813
+ </ul>
814
+ </div>
815
+ </div>
816
+
817
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
818
+ <p class="text-base text-gray-400">
819
+ &copy; 2023 ToolStack, Inc. All rights reserved.
820
+ </p>
821
+ <div class="mt-4 md:mt-0 flex space-x-6">
822
+ <a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a>
823
+ <a href="#" class="text-base text-gray-400 hover:text-white">Terms</a>
824
+ <a href="#" class="text-base text-gray-400 hover:text-white">Cookie Policy</a>
825
+ <a href="#" class="text-base text-gray-400 hover:text-white">GDPR</a>
826
+ </div>
827
+ </div>
828
+ </div>
829
+ </footer>
830
+
831
+ <!-- Product Modals -->
832
+ <!-- Project Management Modal -->
833
+ <div id="project-management-modal" class="product-modal">
834
+ <div class="modal-content relative">
835
+ <span class="close-modal" onclick="closeModal('project-management-modal')">&times;</span>
836
+ <div class="flex flex-col md:flex-row gap-8">
837
+ <div class="md:w-1/3">
838
+ <div class="bg-indigo-100 p-6 rounded-lg flex items-center justify-center">
839
+ <i class="fas fa-project-diagram text-indigo-600 text-6xl"></i>
840
+ </div>
841
+ <h2 class="text-2xl font-bold mt-4">Project Management</h2>
842
+ <p class="text-gray-600 mt-2">
843
+ Streamline your projects from conception to completion with our comprehensive project management solution.
844
+ </p>
845
+ <div class="mt-6">
846
+ <button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition">
847
+ Start Free Trial
848
+ </button>
849
+ </div>
850
+ </div>
851
+ <div class="md:w-2/3">
852
+ <h3 class="text-xl font-semibold mb-4">Key Features</h3>
853
+ <div class="space-y-4">
854
+ <div class="product-feature flex items-start">
855
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
856
+ <i class="fas fa-tasks text-indigo-600"></i>
857
+ </div>
858
+ <div>
859
+ <h4 class="font-medium">Task Management</h4>
860
+ <p class="text-gray-600 text-sm">
861
+ Create, assign, and track tasks with deadlines, priorities, and dependencies.
862
+ </p>
863
+ </div>
864
+ </div>
865
+ <div class="product-feature flex items-start">
866
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
867
+ <i class="fas fa-columns text-indigo-600"></i>
868
+ </div>
869
+ <div>
870
+ <h4 class="font-medium">Kanban Boards</h4>
871
+ <p class="text-gray-600 text-sm">
872
+ Visualize workflow with customizable boards and drag-and-drop functionality.
873
+ </p>
874
+ </div>
875
+ </div>
876
+ <div class="product-feature flex items-start">
877
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
878
+ <i class="fas fa-chart-gantt text-indigo-600"></i>
879
+ </div>
880
+ <div>
881
+ <h4 class="font-medium">Gantt Charts</h4>
882
+ <p class="text-gray-600 text-sm">
883
+ Plan and track project timelines with interactive Gantt charts.
884
+ </p>
885
+ </div>
886
+ </div>
887
+ <div class="product-feature flex items-start">
888
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
889
+ <i class="fas fa-users text-indigo-600"></i>
890
+ </div>
891
+ <div>
892
+ <h4 class="font-medium">Team Collaboration</h4>
893
+ <p class="text-gray-600 text-sm">
894
+ Real-time messaging, file sharing, and @mentions for seamless teamwork.
895
+ </p>
896
+ </div>
897
+ </div>
898
+ <div class="product-feature flex items-start">
899
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
900
+ <i class="fas fa-chart-pie text-indigo-600"></i>
901
+ </div>
902
+ <div>
903
+ <h4 class="font-medium">Reporting & Analytics</h4>
904
+ <p class="text-gray-600 text-sm">
905
+ Generate detailed reports on project progress, team performance, and more.
906
+ </p>
907
+ </div>
908
+ </div>
909
+ </div>
910
+
911
+ <h3 class="text-xl font-semibold mt-8 mb-4">Integrations</h3>
912
+ <div class="flex flex-wrap gap-2">
913
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
914
+ Slack
915
+ </span>
916
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
917
+ Google Drive
918
+ </span>
919
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
920
+ Dropbox
921
+ </span>
922
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
923
+ GitHub
924
+ </span>
925
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
926
+ Jira
927
+ </span>
928
+ </div>
929
+ </div>
930
+ </div>
931
+ </div>
932
+ </div>
933
+
934
+ <!-- CRM & Sales Modal -->
935
+ <div id="crm-sales-modal" class="product-modal">
936
+ <div class="modal-content relative">
937
+ <span class="close-modal" onclick="closeModal('crm-sales-modal')">&times;</span>
938
+ <div class="flex flex-col md:flex-row gap-8">
939
+ <div class="md:w-1/3">
940
+ <div class="bg-purple-100 p-6 rounded-lg flex items-center justify-center">
941
+ <i class="fas fa-file-invoice-dollar text-purple-600 text-6xl"></i>
942
+ </div>
943
+ <h2 class="text-2xl font-bold mt-4">CRM & Sales</h2>
944
+ <p class="text-gray-600 mt-2">
945
+ Manage your customer relationships and sales pipeline with our powerful CRM solution.
946
+ </p>
947
+ <div class="mt-6">
948
+ <button class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 transition">
949
+ Start Free Trial
950
+ </button>
951
+ </div>
952
+ </div>
953
+ <div class="md:w-2/3">
954
+ <h3 class="text-xl font-semibold mb-4">Key Features</h3>
955
+ <div class="space-y-4">
956
+ <div class="product-feature flex items-start">
957
+ <div class="bg-purple-100 p-2 rounded-full mr-4">
958
+ <i class="fas fa-user-tie text-purple-600"></i>
959
+ </div>
960
+ <div>
961
+ <h4 class="font-medium">Contact Management</h4>
962
+ <p class="text-gray-600 text-sm">
963
+ Centralize all customer information, interactions, and history in one place.
964
+ </p>
965
+ </div>
966
+ </div>
967
+ <div class="product-feature flex items-start">
968
+ <div class="bg-purple-100 p-2 rounded-full mr-4">
969
+ <i class="fas fa-funnel-dollar text-purple-600"></i>
970
+ </div>
971
+ <div>
972
+ <h4 class="font-medium">Sales Pipeline</h4>
973
+ <p class="text-gray-600 text-sm">
974
+ Visualize and manage your sales process from lead to close.
975
+ </p>
976
+ </div>
977
+ </div>
978
+ <div class="product-feature flex items-start">
979
+ <div class="bg-purple-100 p-2 rounded-full mr-4">
980
+ <i class="fas fa-envelope-open-text text-purple-600"></i>
981
+ </div>
982
+ <div>
983
+ <h4 class="font-medium">Email Tracking</h4>
984
+ <p class="text-gray-600 text-sm">
985
+ Track opens, clicks, and responses to your sales emails.
986
+ </p>
987
+ </div>
988
+ </div>
989
+ <div class="product-feature flex items-start">
990
+ <div class="bg-purple-100 p-2 rounded-full mr-4">
991
+ <i class="fas fa-file-contract text-purple-600"></i>
992
+ </div>
993
+ <div>
994
+ <h4 class="font-medium">Proposal Generation</h4>
995
+ <p class="text-gray-600 text-sm">
996
+ Create professional proposals with customizable templates.
997
+ </p>
998
+ </div>
999
+ </div>
1000
+ <div class="product-feature flex items-start">
1001
+ <div class="bg-purple-100 p-2 rounded-full mr-4">
1002
+ <i class="fas fa-chart-line text-purple-600"></i>
1003
+ </div>
1004
+ <div>
1005
+ <h4 class="font-medium">Sales Analytics</h4>
1006
+ <p class="text-gray-600 text-sm">
1007
+ Gain insights into your sales performance with detailed reports.
1008
+ </p>
1009
+ </div>
1010
+ </div>
1011
+ </div>
1012
+
1013
+ <h3 class="text-xl font-semibold mt-8 mb-4">Integrations</h3>
1014
+ <div class="flex flex-wrap gap-2">
1015
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1016
+ Gmail
1017
+ </span>
1018
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1019
+ Outlook
1020
+ </span>
1021
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1022
+ Mailchimp
1023
+ </span>
1024
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1025
+ QuickBooks
1026
+ </span>
1027
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1028
+ Stripe
1029
+ </span>
1030
+ </div>
1031
+ </div>
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+
1036
+ <!-- Marketing Automation Modal -->
1037
+ <div id="marketing-automation-modal" class="product-modal">
1038
+ <div class="modal-content relative">
1039
+ <span class="close-modal" onclick="closeModal('marketing-automation-modal')">&times;</span>
1040
+ <div class="flex flex-col md:flex-row gap-8">
1041
+ <div class="md:w-1/3">
1042
+ <div class="bg-pink-100 p-6 rounded-lg flex items-center justify-center">
1043
+ <i class="fas fa-comments-dollar text-pink-600 text-6xl"></i>
1044
+ </div>
1045
+ <h2 class="text-2xl font-bold mt-4">Marketing Automation</h2>
1046
+ <p class="text-gray-600 mt-2">
1047
+ Automate and optimize your marketing campaigns across multiple channels.
1048
+ </p>
1049
+ <div class="mt-6">
1050
+ <button class="w-full bg-pink-600 text-white py-2 px-4 rounded-md hover:bg-pink-700 transition">
1051
+ Start Free Trial
1052
+ </button>
1053
+ </div>
1054
+ </div>
1055
+ <div class="md:w-2/3">
1056
+ <h3 class="text-xl font-semibold mb-4">Key Features</h3>
1057
+ <div class="space-y-4">
1058
+ <div class="product-feature flex items-start">
1059
+ <div class="bg-pink-100 p-2 rounded-full mr-4">
1060
+ <i class="fas fa-envelope text-pink-600"></i>
1061
+ </div>
1062
+ <div>
1063
+ <h4 class="font-medium">Email Campaigns</h4>
1064
+ <p class="text-gray-600 text-sm">
1065
+ Design, send, and track beautiful email campaigns with our drag-and-drop editor.
1066
+ </p>
1067
+ </div>
1068
+ </div>
1069
+ <div class="product-feature flex items-start">
1070
+ <div class="bg-pink-100 p-2 rounded-full mr-4">
1071
+ <i class="fas fa-robot text-pink-600"></i>
1072
+ </div>
1073
+ <div>
1074
+ <h4 class="font-medium">Workflow Automation</h4>
1075
+ <p class="text-gray-600 text-sm">
1076
+ Set up automated workflows based on customer behavior and interactions.
1077
+ </p>
1078
+ </div>
1079
+ </div>
1080
+ <div class="product-feature flex items-start">
1081
+ <div class="bg-pink-100 p-2 rounded-full mr-4">
1082
+ <i class="fas fa-users text-pink-600"></i>
1083
+ </div>
1084
+ <div>
1085
+ <h4 class="font-medium">Audience Segmentation</h4>
1086
+ <p class="text-gray-600 text-sm">
1087
+ Create targeted segments based on demographics, behavior, and more.
1088
+ </p>
1089
+ </div>
1090
+ </div>
1091
+ <div class="product-feature flex items-start">
1092
+ <div class="bg-pink-100 p-2 rounded-full mr-4">
1093
+ <i class="fas fa-ad text-pink-600"></i>
1094
+ </div>
1095
+ <div>
1096
+ <h4 class="font-medium">Ad Management</h4>
1097
+ <p class="text-gray-600 text-sm">
1098
+ Create and manage ads across social platforms from one dashboard.
1099
+ </p>
1100
+ </div>
1101
+ </div>
1102
+ <div class="product-feature flex items-start">
1103
+ <div class="bg-pink-100 p-2 rounded-full mr-4">
1104
+ <i class="fas fa-chart-bar text-pink-600"></i>
1105
+ </div>
1106
+ <div>
1107
+ <h4 class="font-medium">ROI Tracking</h4>
1108
+ <p class="text-gray-600 text-sm">
1109
+ Measure the effectiveness of your marketing spend with detailed analytics.
1110
+ </p>
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ <h3 class="text-xl font-semibold mt-8 mb-4">Integrations</h3>
1116
+ <div class="flex flex-wrap gap-2">
1117
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1118
+ Facebook
1119
+ </span>
1120
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1121
+ Instagram
1122
+ </span>
1123
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1124
+ LinkedIn
1125
+ </span>
1126
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1127
+ Google Ads
1128
+ </span>
1129
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1130
+ Shopify
1131
+ </span>
1132
+ </div>
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+ </div>
1137
+
1138
+ <!-- Finance & Accounting Modal -->
1139
+ <div id="finance-accounting-modal" class="product-modal">
1140
+ <div class="modal-content relative">
1141
+ <span class="close-modal" onclick="closeModal('finance-accounting-modal')">&times;</span>
1142
+ <div class="flex flex-col md:flex-row gap-8">
1143
+ <div class="md:w-1/3">
1144
+ <div class="bg-blue-100 p-6 rounded-lg flex items-center justify-center">
1145
+ <i class="fas fa-wallet text-blue-600 text-6xl"></i>
1146
+ </div>
1147
+ <h2 class="text-2xl font-bold mt-4">Finance & Accounting</h2>
1148
+ <p class="text-gray-600 mt-2">
1149
+ Streamline your financial operations with our comprehensive accounting solution.
1150
+ </p>
1151
+ <div class="mt-6">
1152
+ <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">
1153
+ Start Free Trial
1154
+ </button>
1155
+ </div>
1156
+ </div>
1157
+ <div class="md:w-2/3">
1158
+ <h3 class="text-xl font-semibold mb-4">Key Features</h3>
1159
+ <div class="space-y-4">
1160
+ <div class="product-feature flex items-start">
1161
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
1162
+ <i class="fas fa-file-invoice-dollar text-blue-600"></i>
1163
+ </div>
1164
+ <div>
1165
+ <h4 class="font-medium">Invoicing</h4>
1166
+ <p class="text-gray-600 text-sm">
1167
+ Create and send professional invoices with customizable templates.
1168
+ </p>
1169
+ </div>
1170
+ </div>
1171
+ <div class="product-feature flex items-start">
1172
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
1173
+ <i class="fas fa-receipt text-blue-600"></i>
1174
+ </div>
1175
+ <div>
1176
+ <h4 class="font-medium">Expense Tracking</h4>
1177
+ <p class="text-gray-600 text-sm">
1178
+ Capture receipts and track expenses with mobile upload capability.
1179
+ </p>
1180
+ </div>
1181
+ </div>
1182
+ <div class="product-feature flex items-start">
1183
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
1184
+ <i class="fas fa-chart-line text-blue-600"></i>
1185
+ </div>
1186
+ <div>
1187
+ <h4 class="font-medium">Financial Reporting</h4>
1188
+ <p class="text-gray-600 text-sm">
1189
+ Generate balance sheets, profit & loss statements, and cash flow reports.
1190
+ </p>
1191
+ </div>
1192
+ </div>
1193
+ <div class="product-feature flex items-start">
1194
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
1195
+ <i class="fas fa-money-bill-wave text-blue-600"></i>
1196
+ </div>
1197
+ <div>
1198
+ <h4 class="font-medium">Payroll Processing</h4>
1199
+ <p class="text-gray-600 text-sm">
1200
+ Automate payroll calculations, tax filings, and direct deposits.
1201
+ </p>
1202
+ </div>
1203
+ </div>
1204
+ <div class="product-feature flex items-start">
1205
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
1206
+ <i class="fas fa-shield-alt text-blue-600"></i>
1207
+ </div>
1208
+ <div>
1209
+ <h4 class="font-medium">Tax Compliance</h4>
1210
+ <p class="text-gray-600 text-sm">
1211
+ Stay compliant with automated tax calculations and filings.
1212
+ </p>
1213
+ </div>
1214
+ </div>
1215
+ </div>
1216
+
1217
+ <h3 class="text-xl font-semibold mt-8 mb-4">Integrations</h3>
1218
+ <div class="flex flex-wrap gap-2">
1219
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1220
+ Stripe
1221
+ </span>
1222
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1223
+ PayPal
1224
+ </span>
1225
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1226
+ QuickBooks
1227
+ </span>
1228
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1229
+ Xero
1230
+ </span>
1231
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1232
+ Square
1233
+ </span>
1234
+ </div>
1235
+ </div>
1236
+ </div>
1237
+ </div>
1238
+ </div>
1239
+
1240
+ <!-- HR & People Ops Modal -->
1241
+ <div id="hr-people-modal" class="product-modal">
1242
+ <div class="modal-content relative">
1243
+ <span class="close-modal" onclick="closeModal('hr-people-modal')">&times;</span>
1244
+ <div class="flex flex-col md:flex-row gap-8">
1245
+ <div class="md:w-1/3">
1246
+ <div class="bg-green-100 p-6 rounded-lg flex items-center justify-center">
1247
+ <i class="fas fa-users text-green-600 text-6xl"></i>
1248
+ </div>
1249
+ <h2 class="text-2xl font-bold mt-4">HR & People Ops</h2>
1250
+ <p class="text-gray-600 mt-2">
1251
+ Manage your workforce with tools for hiring, onboarding, and performance management.
1252
+ </p>
1253
+ <div class="mt-6">
1254
+ <button class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition">
1255
+ Start Free Trial
1256
+ </button>
1257
+ </div>
1258
+ </div>
1259
+ <div class="md:w-2/3">
1260
+ <h3 class="text-xl font-semibold mb-4">Key Features</h3>
1261
+ <div class="space-y-4">
1262
+ <div class="product-feature flex items-start">
1263
+ <div class="bg-green-100 p-2 rounded-full mr-4">
1264
+ <i class="fas fa-user-plus text-green-600"></i>
1265
+ </div>
1266
+ <div>
1267
+ <h4 class="font-medium">Recruitment</h4>
1268
+ <p class="text-gray-600 text-sm">
1269
+ Post jobs, track applicants, and manage the hiring process from one platform.
1270
+ </p>
1271
+ </div>
1272
+ </div>
1273
+ <div class="product-feature flex items-start">
1274
+ <div class="bg-green-100 p-2 rounded-full mr-4">
1275
+ <i class="fas fa-user-check text-green-600"></i>
1276
+ </div>
1277
+ <div>
1278
+ <h4 class="font-medium">Onboarding</h4>
1279
+ <p class="text-gray-600 text-sm">
1280
+ Automate new hire onboarding with customizable checklists and workflows.
1281
+ </p>
1282
+ </div>
1283
+ </div>
1284
+ <div class="product-feature flex items-start">
1285
+ <div class="bg-green-100 p-2 rounded-full mr-4">
1286
+ <i class="fas fa-calendar-alt text-green-600"></i>
1287
+ </div>
1288
+ <div>
1289
+ <h4 class="font-medium">Time Off Management</h4>
1290
+ <p class="text-gray-600 text-sm">
1291
+ Track and approve vacation, sick days, and other time off requests.
1292
+ </p>
1293
+ </div>
1294
+ </div>
1295
+ <div class="product-feature flex items-start">
1296
+ <div class="bg-green-100 p-2 rounded-full mr-4">
1297
+ <i class="fas fa-chart-line text-green-600"></i>
1298
+ </div>
1299
+ <div>
1300
+ <h4 class="font-medium">Performance Reviews</h4>
1301
+ <p class="text-gray-600 text-sm">
1302
+ Conduct 360-degree performance reviews with customizable templates.
1303
+ </p>
1304
+ </div>
1305
+ </div>
1306
+ <div class="product-feature flex items-start">
1307
+ <div class="bg-green-100 p-2 rounded-full mr-4">
1308
+ <i class="fas fa-graduation-cap text-green-600"></i>
1309
+ </div>
1310
+ <div>
1311
+ <h4 class="font-medium">Learning Management</h4>
1312
+ <p class="text-gray-600 text-sm">
1313
+ Create and track employee training programs and certifications.
1314
+ </p>
1315
+ </div>
1316
+ </div>
1317
+ </div>
1318
+
1319
+ <h3 class="text-xl font-semibold mt-8 mb-4">Integrations</h3>
1320
+ <div class="flex flex-wrap gap-2">
1321
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1322
+ LinkedIn
1323
+ </span>
1324
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1325
+ Indeed
1326
+ </span>
1327
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1328
+ Slack
1329
+ </span>
1330
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1331
+ Microsoft Teams
1332
+ </span>
1333
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
1334
+ Google Workspace
1335
+ </span>
1336
+ </div>
1337
+ </div>
1338
+ </div>
1339
+
1340
+ </html>