Hugging Face's logo

Spaces:
IssamKLAI
/
datait
Running

App Files Community
IssamKLAI commited on
Commit
ca7e545
·
verified ·
1 Parent(s): 7d743ed

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +810 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Datait
3
- emoji: 📉
4
  colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: datait
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: purple
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,810 @@
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>DataIT | Transforming Data into Actionable Insights</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'datait-pink': '#B51C59',
15
+ 'datait-navy': '#0C1855',
16
+ 'datait-light': '#F0F2F8',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
24
+
25
+ body {
26
+ font-family: 'Inter', sans-serif;
27
+ scroll-behavior: smooth;
28
+ }
29
+
30
+ .hero-gradient {
31
+ background: linear-gradient(135deg, rgba(12,24,85,0.9) 0%, rgba(181,28,89,0.8) 100%);
32
+ }
33
+
34
+ .service-card:hover {
35
+ transform: translateY(-10px);
36
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
37
+ }
38
+
39
+ .nav-link::after {
40
+ content: '';
41
+ display: block;
42
+ width: 0;
43
+ height: 2px;
44
+ background: #B51C59;
45
+ transition: width .3s;
46
+ }
47
+
48
+ .nav-link:hover::after {
49
+ width: 100%;
50
+ }
51
+
52
+ .animate-float {
53
+ animation: float 6s ease-in-out infinite;
54
+ }
55
+
56
+ @keyframes float {
57
+ 0% { transform: translateY(0px); }
58
+ 50% { transform: translateY(-20px); }
59
+ 100% { transform: translateY(0px); }
60
+ }
61
+
62
+ .testimonial-card {
63
+ transition: all 0.3s ease;
64
+ }
65
+
66
+ .testimonial-card:hover {
67
+ border-color: #B51C59;
68
+ }
69
+
70
+ input:focus, textarea:focus {
71
+ outline: none;
72
+ border-color: #B51C59;
73
+ }
74
+ </style>
75
+ </head>
76
+ <body class="bg-datait-light text-gray-800">
77
+ <!-- Cookie Consent Banner -->
78
+ <div id="cookie-consent" class="fixed bottom-0 left-0 right-0 bg-datait-navy text-white p-4 z-50 hidden">
79
+ <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
80
+ <p class="mb-4 md:mb-0">We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.</p>
81
+ <div class="flex space-x-4">
82
+ <button id="cookie-accept" class="bg-datait-pink hover:bg-pink-700 text-white px-4 py-2 rounded">Accept</button>
83
+ <button id="cookie-decline" class="border border-white hover:bg-gray-700 text-white px-4 py-2 rounded">Decline</button>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Navigation -->
89
+ <nav class="bg-white shadow-md sticky top-0 z-40">
90
+ <div class="container mx-auto px-4">
91
+ <div class="flex justify-between items-center py-4">
92
+ <div class="flex items-center">
93
+ <a href="#" class="flex items-center">
94
+ <img src="https://www.datait.fr/logo.png" alt="DataIT Logo" class="h-10 mr-2">
95
+ <span class="text-xl font-bold text-datait-navy">DataIT</span>
96
+ </a>
97
+ </div>
98
+
99
+ <!-- Mobile menu button -->
100
+ <div class="md:hidden">
101
+ <button id="mobile-menu-button" class="text-datait-navy focus:outline-none">
102
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
103
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
104
+ </svg>
105
+ </button>
106
+ </div>
107
+
108
+ <!-- Desktop Menu -->
109
+ <div class="hidden md:flex items-center space-x-8">
110
+ <a href="#home" class="nav-link text-datait-navy font-medium">Home</a>
111
+ <a href="#services" class="nav-link text-datait-navy font-medium">Services</a>
112
+ <a href="#expertise" class="nav-link text-datait-navy font-medium">Expertise</a>
113
+ <a href="#case-studies" class="nav-link text-datait-navy font-medium">Case Studies</a>
114
+ <a href="#about" class="nav-link text-datait-navy font-medium">About Us</a>
115
+ <a href="#contact" class="bg-datait-pink text-white px-6 py-2 rounded-md hover:bg-pink-700 transition duration-300">Contact</a>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Mobile Menu -->
120
+ <div id="mobile-menu" class="hidden md:hidden pb-4">
121
+ <a href="#home" class="block py-2 text-datait-navy font-medium">Home</a>
122
+ <a href="#services" class="block py-2 text-datait-navy font-medium">Services</a>
123
+ <a href="#expertise" class="block py-2 text-datait-navy font-medium">Expertise</a>
124
+ <a href="#case-studies" class="block py-2 text-datait-navy font-medium">Case Studies</a>
125
+ <a href="#about" class="block py-2 text-datait-navy font-medium">About Us</a>
126
+ <a href="#contact" class="block mt-2 bg-datait-pink text-white px-6 py-2 rounded-md text-center hover:bg-pink-700 transition duration-300">Contact</a>
127
+ </div>
128
+ </div>
129
+ </nav>
130
+
131
+ <!-- Hero Section -->
132
+ <section id="home" class="hero-gradient text-white py-20 md:py-32">
133
+ <div class="container mx-auto px-4">
134
+ <div class="flex flex-col md:flex-row items-center">
135
+ <div class="md:w-1/2 mb-12 md:mb-0">
136
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Beyond Management</h1>
137
+ <p class="text-xl mb-8">Transforming data into actionable insights for your business</p>
138
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
139
+ <a href="#contact" class="bg-white text-datait-pink px-8 py-3 rounded-md font-medium hover:bg-gray-100 transition duration-300 text-center">Get Started</a>
140
+ <a href="#services" class="border border-white px-8 py-3 rounded-md font-medium hover:bg-white hover:text-datait-pink transition duration-300 text-center">Our Services</a>
141
+ </div>
142
+ </div>
143
+ <div class="md:w-1/2 flex justify-center">
144
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Data Analytics" class="rounded-lg shadow-xl w-full max-w-lg animate-float">
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </section>
149
+
150
+ <!-- Clients Section -->
151
+ <section class="bg-white py-12">
152
+ <div class="container mx-auto px-4">
153
+ <h2 class="text-2xl font-bold text-center text-datait-navy mb-12">Trusted by industry leaders</h2>
154
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
155
+ <img src="https://via.placeholder.com/150x60?text=Client+1" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
156
+ <img src="https://via.placeholder.com/150x60?text=Client+2" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
157
+ <img src="https://via.placeholder.com/150x60?text=Client+3" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
158
+ <img src="https://via.placeholder.com/150x60?text=Client+4" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
159
+ <img src="https://via.placeholder.com/150x60?text=Client+5" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
160
+ </div>
161
+ </div>
162
+ </section>
163
+
164
+ <!-- Services Section -->
165
+ <section id="services" class="py-20 bg-datait-light">
166
+ <div class="container mx-auto px-4">
167
+ <div class="text-center mb-16">
168
+ <h2 class="text-3xl font-bold text-datait-navy mb-4">Our Services</h2>
169
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">We provide comprehensive data and IT solutions tailored to your business needs</p>
170
+ </div>
171
+
172
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
173
+ <!-- Service 1 -->
174
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
175
+ <div class="p-6">
176
+ <div class="flex items-center mb-4">
177
+ <div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4">
178
+ <i class="fas fa-chart-line text-datait-pink text-xl"></i>
179
+ </div>
180
+ <h3 class="text-xl font-bold text-datait-navy">Data Analytics</h3>
181
+ </div>
182
+ <p class="text-gray-600 mb-4">Unlock the power of your data with advanced analytics solutions that drive decision-making and business growth.</p>
183
+ <ul class="space-y-2 mb-4">
184
+ <li class="flex items-center">
185
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
186
+ <span>Predictive analytics</span>
187
+ </li>
188
+ <li class="flex items-center">
189
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
190
+ <span>Business intelligence</span>
191
+ </li>
192
+ <li class="flex items-center">
193
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
194
+ <span>Data visualization</span>
195
+ </li>
196
+ </ul>
197
+ <a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center">
198
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
199
+ </a>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Service 2 -->
204
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
205
+ <div class="p-6">
206
+ <div class="flex items-center mb-4">
207
+ <div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4">
208
+ <i class="fas fa-cloud text-datait-pink text-xl"></i>
209
+ </div>
210
+ <h3 class="text-xl font-bold text-datait-navy">Cloud Solutions</h3>
211
+ </div>
212
+ <p class="text-gray-600 mb-4">Scalable and secure cloud infrastructure to modernize your IT environment and accelerate digital transformation.</p>
213
+ <ul class="space-y-2 mb-4">
214
+ <li class="flex items-center">
215
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
216
+ <span>Cloud migration</span>
217
+ </li>
218
+ <li class="flex items-center">
219
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
220
+ <span>Hybrid cloud strategy</span>
221
+ </li>
222
+ <li class="flex items-center">
223
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
224
+ <span>Cloud security</span>
225
+ </li>
226
+ </ul>
227
+ <a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center">
228
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
229
+ </a>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Service 3 -->
234
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
235
+ <div class="p-6">
236
+ <div class="flex items-center mb-4">
237
+ <div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4">
238
+ <i class="fas fa-robot text-datait-pink text-xl"></i>
239
+ </div>
240
+ <h3 class="text-xl font-bold text-datait-navy">AI & Machine Learning</h3>
241
+ </div>
242
+ <p class="text-gray-600 mb-4">Leverage artificial intelligence to automate processes, gain insights, and create competitive advantages.</p>
243
+ <ul class="space-y-2 mb-4">
244
+ <li class="flex items-center">
245
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
246
+ <span>Predictive modeling</span>
247
+ </li>
248
+ <li class="flex items-center">
249
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
250
+ <span>Natural language processing</span>
251
+ </li>
252
+ <li class="flex items-center">
253
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
254
+ <span>Computer vision</span>
255
+ </li>
256
+ </ul>
257
+ <a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center">
258
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
259
+ </a>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Service 4 -->
264
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
265
+ <div class="p-6">
266
+ <div class="flex items-center mb-4">
267
+ <div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4">
268
+ <i class="fas fa-database text-datait-pink text-xl"></i>
269
+ </div>
270
+ <h3 class="text-xl font-bold text-datait-navy">Data Engineering</h3>
271
+ </div>
272
+ <p class="text-gray-600 mb-4">Build robust data pipelines and architectures that enable real-time analytics and business intelligence.</p>
273
+ <ul class="space-y-2 mb-4">
274
+ <li class="flex items-center">
275
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
276
+ <span>Data warehousing</span>
277
+ </li>
278
+ <li class="flex items-center">
279
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
280
+ <span>ETL/ELT processes</span>
281
+ </li>
282
+ <li class="flex items-center">
283
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
284
+ <span>Data quality management</span>
285
+ </li>
286
+ </ul>
287
+ <a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center">
288
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
289
+ </a>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Service 5 -->
294
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
295
+ <div class="p-6">
296
+ <div class="flex items-center mb-4">
297
+ <div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4">
298
+ <i class="fas fa-shield-alt text-datait-pink text-xl"></i>
299
+ </div>
300
+ <h3 class="text-xl font-bold text-datait-navy">Cybersecurity</h3>
301
+ </div>
302
+ <p class="text-gray-600 mb-4">Protect your digital assets with comprehensive security solutions tailored to your organization's needs.</p>
303
+ <ul class="space-y-2 mb-4">
304
+ <li class="flex items-center">
305
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
306
+ <span>Risk assessment</span>
307
+ </li>
308
+ <li class="flex items-center">
309
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
310
+ <span>Compliance management</span>
311
+ </li>
312
+ <li class="flex items-center">
313
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
314
+ <span>Incident response</span>
315
+ </li>
316
+ </ul>
317
+ <a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center">
318
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
319
+ </a>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Service 6 -->
324
+ <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300">
325
+ <div class="p-6">
326
+ <div class="flex items-center mb-4">
327
+ <div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4">
328
+ <i class="fas fa-users-cog text-datait-pink text-xl"></i>
329
+ </div>
330
+ <h3 class="text-xl font-bold text-datait-navy">IT Consulting</h3>
331
+ </div>
332
+ <p class="text-gray-600 mb-4">Strategic IT guidance to align technology with your business objectives and drive digital transformation.</p>
333
+ <ul class="space-y-2 mb-4">
334
+ <li class="flex items-center">
335
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
336
+ <span>Technology roadmap</span>
337
+ </li>
338
+ <li class="flex items-center">
339
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
340
+ <span>Digital strategy</span>
341
+ </li>
342
+ <li class="flex items-center">
343
+ <i class="fas fa-check-circle text-datait-pink mr-2"></i>
344
+ <span>IT optimization</span>
345
+ </li>
346
+ </ul>
347
+ <a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center">
348
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
349
+ </a>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </section>
355
+
356
+ <!-- Expertise Section -->
357
+ <section id="expertise" class="py-20 bg-white">
358
+ <div class="container mx-auto px-4">
359
+ <div class="text-center mb-16">
360
+ <h2 class="text-3xl font-bold text-datait-navy mb-4">Industry Expertise</h2>
361
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">We have deep domain knowledge across multiple industries</p>
362
+ </div>
363
+
364
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
365
+ <!-- Industry 1 -->
366
+ <div class="bg-datait-light rounded-lg p-6 flex items-start">
367
+ <div class="bg-datait-pink text-white p-3 rounded-lg mr-4">
368
+ <i class="fas fa-university text-xl"></i>
369
+ </div>
370
+ <div>
371
+ <h3 class="text-xl font-bold text-datait-navy mb-2">Financial Services</h3>
372
+ <p class="text-gray-600">Risk modeling, fraud detection, regulatory compliance, and customer analytics for banks, insurance, and fintech.</p>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Industry 2 -->
377
+ <div class="bg-datait-light rounded-lg p-6 flex items-start">
378
+ <div class="bg-datait-pink text-white p-3 rounded-lg mr-4">
379
+ <i class="fas fa-heartbeat text-xl"></i>
380
+ </div>
381
+ <div>
382
+ <h3 class="text-xl font-bold text-datait-navy mb-2">Healthcare</h3>
383
+ <p class="text-gray-600">Patient data analytics, clinical decision support, population health management, and healthcare IoT solutions.</p>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Industry 3 -->
388
+ <div class="bg-datait-light rounded-lg p-6 flex items-start">
389
+ <div class="bg-datait-pink text-white p-3 rounded-lg mr-4">
390
+ <i class="fas fa-shopping-bag text-xl"></i>
391
+ </div>
392
+ <div>
393
+ <h3 class="text-xl font-bold text-datait-navy mb-2">Retail & E-commerce</h3>
394
+ <p class="text-gray-600">Customer segmentation, recommendation engines, inventory optimization, and pricing analytics.</p>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Industry 4 -->
399
+ <div class="bg-datait-light rounded-lg p-6 flex items-start">
400
+ <div class="bg-datait-pink text-white p-3 rounded-lg mr-4">
401
+ <i class="fas fa-industry text-xl"></i>
402
+ </div>
403
+ <div>
404
+ <h3 class="text-xl font-bold text-datait-navy mb-2">Manufacturing</h3>
405
+ <p class="text-gray-600">Predictive maintenance, supply chain optimization, quality control, and industrial IoT implementations.</p>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- Industry 5 -->
410
+ <div class="bg-datait-light rounded-lg p-6 flex items-start">
411
+ <div class="bg-datait-pink text-white p-3 rounded-lg mr-4">
412
+ <i class="fas fa-truck text-xl"></i>
413
+ </div>
414
+ <div>
415
+ <h3 class="text-xl font-bold text-datait-navy mb-2">Logistics & Transportation</h3>
416
+ <p class="text-gray-600">Route optimization, fleet management, demand forecasting, and real-time tracking solutions.</p>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Industry 6 -->
421
+ <div class="bg-datait-light rounded-lg p-6 flex items-start">
422
+ <div class="bg-datait-pink text-white p-3 rounded-lg mr-4">
423
+ <i class="fas fa-graduation-cap text-xl"></i>
424
+ </div>
425
+ <div>
426
+ <h3 class="text-xl font-bold text-datait-navy mb-2">Education</h3>
427
+ <p class="text-gray-600">Learning analytics, student performance tracking, institutional research, and education technology solutions.</p>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </section>
433
+
434
+ <!-- Stats Section -->
435
+ <section class="py-16 bg-datait-navy text-white">
436
+ <div class="container mx-auto px-4">
437
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
438
+ <div class="p-4">
439
+ <div class="text-4xl font-bold mb-2">150+</div>
440
+ <div class="text-gray-300">Satisfied Clients</div>
441
+ </div>
442
+ <div class="p-4">
443
+ <div class="text-4xl font-bold mb-2">300+</div>
444
+ <div class="text-gray-300">Projects Completed</div>
445
+ </div>
446
+ <div class="p-4">
447
+ <div class="text-4xl font-bold mb-2">95%</div>
448
+ <div class="text-gray-300">Client Retention</div>
449
+ </div>
450
+ <div class="p-4">
451
+ <div class="text-4xl font-bold mb-2">50+</div>
452
+ <div class="text-gray-300">Expert Consultants</div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </section>
457
+
458
+ <!-- Case Studies Section -->
459
+ <section id="case-studies" class="py-20 bg-datait-light">
460
+ <div class="container mx-auto px-4">
461
+ <div class="text-center mb-16">
462
+ <h2 class="text-3xl font-bold text-datait-navy mb-4">Case Studies</h2>
463
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Real-world solutions delivering measurable impact</p>
464
+ </div>
465
+
466
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
467
+ <!-- Case Study 1 -->
468
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
469
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
470
+ <div class="p-6">
471
+ <div class="flex items-center mb-4">
472
+ <div class="bg-datait-pink text-white px-3 py-1 rounded-full text-sm font-medium mr-3">Financial Services</div>
473
+ <div class="text-gray-500 text-sm">6 months project</div>
474
+ </div>
475
+ <h3 class="text-xl font-bold text-datait-navy mb-2">Fraud Detection System for Major Bank</h3>
476
+ <p class="text-gray-600 mb-4">Implemented machine learning models that reduced fraudulent transactions by 78% while decreasing false positives by 40%.</p>
477
+ <div class="flex justify-between items-center">
478
+ <a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center">
479
+ Read case study <i class="fas fa-arrow-right ml-2"></i>
480
+ </a>
481
+ <div class="text-datait-pink font-bold">$2.1M saved annually</div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <!-- Case Study 2 -->
487
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
488
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1532187863485-48b948113084?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
489
+ <div class="p-6">
490
+ <div class="flex items-center mb-4">
491
+ <div class="bg-datait-pink text-white px-3 py-1 rounded-full text-sm font-medium mr-3">Healthcare</div>
492
+ <div class="text-gray-500 text-sm">9 months project</div>
493
+ </div>
494
+ <h3 class="text-xl font-bold text-datait-navy mb-2">Patient Readmission Prediction for Hospital Network</h3>
495
+ <p class="text-gray-600 mb-4">Developed predictive models identifying high-risk patients, enabling targeted interventions that reduced readmissions by 32%.</p>
496
+ <div class="flex justify-between items-center">
497
+ <a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center">
498
+ Read case study <i class="fas fa-arrow-right ml-2"></i>
499
+ </a>
500
+ <div class="text-datait-pink font-bold">$4.7M saved annually</div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <div class="text-center mt-12">
507
+ <a href="#" class="inline-flex items-center bg-datait-pink text-white px-6 py-3 rounded-md font-medium hover:bg-pink-700 transition duration-300">
508
+ View all case studies <i class="fas fa-arrow-right ml-2"></i>
509
+ </a>
510
+ </div>
511
+ </div>
512
+ </section>
513
+
514
+ <!-- Testimonials Section -->
515
+ <section class="py-20 bg-white">
516
+ <div class="container mx-auto px-4">
517
+ <div class="text-center mb-16">
518
+ <h2 class="text-3xl font-bold text-datait-navy mb-4">What Our Clients Say</h2>
519
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Don't just take our word for it - hear from our satisfied clients</p>
520
+ </div>
521
+
522
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
523
+ <!-- Testimonial 1 -->
524
+ <div class="testimonial-card bg-datait-light rounded-lg p-8 border border-transparent">
525
+ <div class="flex items-center mb-4">
526
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
527
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-full h-full object-cover">
528
+ </div>
529
+ <div>
530
+ <h4 class="font-bold text-datait-navy">Sarah Johnson</h4>
531
+ <p class="text-gray-500 text-sm">CTO, FinTech Solutions</p>
532
+ </div>
533
+ </div>
534
+ <p class="text-gray-700 mb-4">"DataIT transformed our approach to data analytics. Their team delivered insights that directly contributed to a 35% increase in customer retention."</p>
535
+ <div class="flex text-yellow-400">
536
+ <i class="fas fa-star"></i>
537
+ <i class="fas fa-star"></i>
538
+ <i class="fas fa-star"></i>
539
+ <i class="fas fa-star"></i>
540
+ <i class="fas fa-star"></i>
541
+ </div>
542
+ </div>
543
+
544
+ <!-- Testimonial 2 -->
545
+ <div class="testimonial-card bg-datait-light rounded-lg p-8 border border-transparent">
546
+ <div class="flex items-center mb-4">
547
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
548
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-full h-full object-cover">
549
+ </div>
550
+ <div>
551
+ <h4 class="font-bold text-datait-navy">Michael Chen</h4>
552
+ <p class="text-gray-500 text-sm">Director of IT, HealthPlus</p>
553
+ </div>
554
+ </div>
555
+ <p class="text-gray-700 mb-4">"The cloud migration strategy developed by DataIT was flawless. We achieved zero downtime during the transition and saw immediate performance improvements."</p>
556
+ <div class="flex text-yellow-400">
557
+ <i class="fas fa-star"></i>
558
+ <i class="fas fa-star"></i>
559
+ <i class="fas fa-star"></i>
560
+ <i class="fas fa-star"></i>
561
+ <i class="fas fa-star"></i>
562
+ </div>
563
+ </div>
564
+
565
+ <!-- Testimonial 3 -->
566
+ <div class="testimonial-card bg-datait-light rounded-lg p-8 border border-transparent">
567
+ <div class="flex items-center mb-4">
568
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
569
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily Rodriguez" class="w-full h-full object-cover">
570
+ </div>
571
+ <div>
572
+ <h4 class="font-bold text-datait-navy">Emily Rodriguez</h4>
573
+ <p class="text-gray-500 text-sm">VP Operations, RetailChain</p>
574
+ </div>
575
+ </div>
576
+ <p class="text-gray-700 mb-4">"Their AI-powered inventory optimization system reduced our stockouts by 62% while decreasing excess inventory by 45%. The results exceeded our expectations."</p>
577
+ <div class="flex text-yellow-400">
578
+ <i class="fas fa-star"></i>
579
+ <i class="fas fa-star"></i>
580
+ <i class="fas fa-star"></i>
581
+ <i class="fas fa-star"></i>
582
+ <i class="fas fa-star-half-alt"></i>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </section>
588
+
589
+ <!-- About Us Section -->
590
+ <section id="about" class="py-20 bg-datait-light">
591
+ <div class="container mx-auto px-4">
592
+ <div class="flex flex-col lg:flex-row items-center">
593
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
594
+ <h2 class="text-3xl font-bold text-datait-navy mb-6">About DataIT</h2>
595
+ <p class="text-gray-600 mb-6">Founded in 2010, DataIT is a leading provider of data and IT consulting services, helping organizations transform their operations through technology and data-driven insights.</p>
596
+ <p class="text-gray-600 mb-8">Our team of 50+ experts combines deep technical expertise with industry knowledge to deliver solutions that drive real business value.</p>
597
+
598
+ <div class="space-y-4">
599
+ <div class="flex items-start">
600
+ <div class="bg-datait-pink text-white p-2 rounded-full mr-4 mt-1">
601
+ <i class="fas fa-bullseye text-sm"></i>
602
+ </div>
603
+ <div>
604
+ <h4 class="font-bold text-datait-navy mb-1">Our Mission</h4>
605
+ <p class="text-gray-600">Empower organizations to harness the full potential of their data through innovative technology solutions.</p>
606
+ </div>
607
+ </div>
608
+
609
+ <div class="flex items-start">
610
+ <div class="bg-datait-pink text-white p-2 rounded-full mr-4 mt-1">
611
+ <i class="fas fa-eye text-sm"></i>
612
+ </div>
613
+ <div>
614
+ <h4 class="font-bold text-datait-navy mb-1">Our Vision</h4>
615
+ <p class="text-gray-600">To be the trusted partner for organizations navigating their digital transformation journey.</p>
616
+ </div>
617
+ </div>
618
+
619
+ <div class="flex items-start">
620
+ <div class="bg-datait-pink text-white p-2 rounded-full mr-4 mt-1">
621
+ <i class="fas fa-gem text-sm"></i>
622
+ </div>
623
+ <div>
624
+ <h4 class="font-bold text-datait-navy mb-1">Our Values</h4>
625
+ <p class="text-gray-600">Integrity, Innovation, Excellence, and Client Success guide everything we do.</p>
626
+ </div>
627
+ </div>
628
+ </div>
629
+ </div>
630
+
631
+ <div class="lg:w-1/2">
632
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
633
+ <div class="p-6">
634
+ <h3 class="text-xl font-bold text-datait-navy mb-4">Our Team</h3>
635
+ <p class="text-gray-600 mb-6">We bring together data scientists, engineers, architects, and industry specialists to form cross-functional teams tailored to each client's needs.</p>
636
+
637
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
638
+ <div class="text-center">
639
+ <div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden">
640
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-full h-full object-cover">
641
+ </div>
642
+ <h4 class="font-medium text-datait-navy">Sophie Martin</h4>
643
+ <p class="text-gray-500 text-sm">Data Science Lead</p>
644
+ </div>
645
+ <div class="text-center">
646
+ <div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden">
647
+ <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Team Member" class="w-full h-full object-cover">
648
+ </div>
649
+ <h4 class="font-medium text-datait-navy">James Wilson</h4>
650
+ <p class="text-gray-500 text-sm">Cloud Architect</p>
651
+ </div>
652
+ <div class="text-center">
653
+ <div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden">
654
+ <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Team Member" class="w-full h-full object-cover">
655
+ </div>
656
+ <h4 class="font-medium text-datait-navy">Priya Patel</h4>
657
+ <p class="text-gray-500 text-sm">AI Specialist</p>
658
+ </div>
659
+ <div class="text-center">
660
+ <div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden">
661
+ <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Team Member" class="w-full h-full object-cover">
662
+ </div>
663
+ <h4 class="font-medium text-datait-navy">David Kim</h4>
664
+ <p class="text-gray-500 text-sm">Data Engineer</p>
665
+ </div>
666
+ <div class="text-center">
667
+ <div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden">
668
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Team Member" class="w-full h-full object-cover">
669
+ </div>
670
+ <h4 class="font-medium text-datait-navy">Emma Johnson</h4>
671
+ <p class="text-gray-500 text-sm">Cybersecurity Expert</p>
672
+ </div>
673
+ <div class="text-center">
674
+ <div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden">
675
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Team Member" class="w-full h-full object-cover">
676
+ </div>
677
+ <h4 class="font-medium text-datait-navy">Carlos Mendez</h4>
678
+ <p class="text-gray-500 text-sm">IT Consultant</p>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </section>
687
+
688
+ <!-- CTA Section -->
689
+ <section class="py-16 bg-datait-pink text-white">
690
+ <div class="container mx-auto px-4 text-center">
691
+ <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Data into Results?</h2>
692
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Let's discuss how we can help your organization leverage data and technology for competitive advantage.</p>
693
+ <a href="#contact" class="inline-block bg-white text-datait-pink px-8 py-3 rounded-md font-medium hover:bg-gray-100 transition duration-300">Get in Touch</a>
694
+ </div>
695
+ </section>
696
+
697
+ <!-- Contact Section -->
698
+ <section id="contact" class="py-20 bg-white">
699
+ <div class="container mx-auto px-4">
700
+ <div class="flex flex-col lg:flex-row">
701
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
702
+ <h2 class="text-3xl font-bold text-datait-navy mb-6">Contact Us</h2>
703
+ <p class="text-gray-600 mb-8">Have questions or want to discuss a project? Our team is here to help.</p>
704
+
705
+ <div class="space-y-6">
706
+ <div class="flex items-start">
707
+ <div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4">
708
+ <i class="fas fa-map-marker-alt text-datait-pink"></i>
709
+ </div>
710
+ <div>
711
+ <h4 class="font-bold text-datait-navy mb-1">Headquarters</h4>
712
+ <p class="text-gray-600">123 Data Street, Tech City, TC 10100</p>
713
+ </div>
714
+ </div>
715
+
716
+ <div class="flex items-start">
717
+ <div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4">
718
+ <i class="fas fa-phone-alt text-datait-pink"></i>
719
+ </div>
720
+ <div>
721
+ <h4 class="font-bold text-datait-navy mb-1">Phone</h4>
722
+ <p class="text-gray-600">+1 (555) 123-4567</p>
723
+ </div>
724
+ </div>
725
+
726
+ <div class="flex items-start">
727
+ <div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4">
728
+ <i class="fas fa-envelope text-datait-pink"></i>
729
+ </div>
730
+ <div>
731
+ <h4 class="font-bold text-datait-navy mb-1">Email</h4>
732
+ <p class="text-gray-600">[email protected]</p>
733
+ </div>
734
+ </div>
735
+
736
+ <div class="flex items-start">
737
+ <div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4">
738
+ <i class="fas fa-clock text-datait-pink"></i>
739
+ </div>
740
+ <div>
741
+ <h4 class="font-bold text-datait-navy mb-1">Business Hours</h4>
742
+ <p class="text-gray-600">Monday - Friday: 9:00 AM - 6:00 PM</p>
743
+ </div>
744
+ </div>
745
+ </div>
746
+
747
+ <div class="mt-10">
748
+ <h4 class="font-bold text-datait-navy mb-4">Follow Us</h4>
749
+ <div class="flex space-x-4">
750
+ <a href="#" class="bg-datait-light text-datait-pink p-3 rounded-full hover:bg-datait-pink hover:text-white transition duration-300">
751
+ <i class="fab fa-linkedin-in"></i>
752
+ </a>
753
+ <a href="#" class="bg-datait-light text-datait-pink p-3 rounded-full hover:bg-datait-pink hover:text-white transition duration-300">
754
+ <i class="fab fa-twitter"></i>
755
+ </a>
756
+ <a href="#" class="bg-datait-light text-datait-pink p-3 rounded-full hover:bg-datait-pink hover:text-white transition duration-300">
757
+ <i class="fab fa-facebook-f"></i>
758
+ </a>
759
+ <a href="#" class="bg-datait-light text-datait-pink p-3 rounded-full hover:bg-datait-pink hover:text-white transition duration-300">
760
+ <i class="fab fa-instagram"></i>
761
+ </a>
762
+ </div>
763
+ </div>
764
+ </div>
765
+
766
+ <div class="lg:w-1/2">
767
+ <div class="bg-datait-light rounded-xl p-8">
768
+ <h3 class="text-xl font-bold text-datait-navy mb-6">Send Us a Message</h3>
769
+ <form id="contact-form">
770
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
771
+ <div>
772
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
773
+ <input type="text" id="name" name="name" class="w-full px-4 py-2 border rounded-md focus:border-datait-pink" required>
774
+ </div>
775
+ <div>
776
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
777
+ <input type="email" id="email" name="email" class="w-full px-4 py-2 border rounded-md focus:border-datait-pink" required>
778
+ </div>
779
+ </div>
780
+ <div class="mb-6">
781
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
782
+ <input type="text" id="subject" name="subject" class="w-full px-4 py-2 border rounded-md focus:border-datait-pink" required>
783
+ </div>
784
+ <div class="mb-6">
785
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
786
+ <textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border rounded-md focus:border-datait-pink" required></textarea>
787
+ </div>
788
+ <button type="submit" class="w-full bg-datait-pink text-white px-6 py-3 rounded-md font-medium hover:bg-pink-700 transition duration-300">Send Message</button>
789
+ </form>
790
+ </div>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ </section>
795
+
796
+ <!-- Map Section -->
797
+ <div class="h-96 bg-gray-200">
798
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215256539349!2d-73.98784492453893!3d40.7579859713895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2sTimes%20Square!5e0!3m2!1sen!2sus!4v1689872623451!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
799
+ </div>
800
+
801
+ <!-- Footer -->
802
+ <footer class="bg-datait-navy text-white py-12">
803
+ <div class="container mx-auto px-4">
804
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
805
+ <div>
806
+ <a href="#" class="flex items-center mb-6">
807
+ <img src="https://www.datait.fr/logo.png" alt="DataIT Logo" class="h-8 mr-2">
808
+ <span class="text-xl font-bold">DataIT</span>
809
+ </
810
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a modern, user-friendly, and responsive website for a data & IT consulting company, inspired by the design and functionality of DataIT. The website should effectively showcase services, expertise, case studies, and contact information while maintaining a professional and clean aesthetic. Key Requirements: Design & Layout: Clean, professional, and corporate aesthetic with a focus on readability. Responsive design (mobile, tablet, desktop). Minimalist color scheme (blues, whites, grays) with strategic use of accent colors. Smooth animations and transitions for a polished feel. Pages & Structure: Homepage: Hero banner with a value proposition, key services, client highlights, and a CTA. Services: Detailed breakdown of IT consulting, data analytics, AI/ML, cloud solutions, etc. Expertise/Industries: Showcase domain expertise (finance, healthcare, retail, etc.). Case Studies/Projects: Success stories with client testimonials. About Us: Company mission, team, and values. Contact: Contact form, location, phone, email, and social media links. Blog/Insights (Optional): Industry articles, whitepapers, or news. Functionality: Smooth navigation with sticky headers/footers. Interactive elements (hover effects, dropdown menus). Contact form with validation and integration (Email/CRM). SEO-optimized structure (metadata, alt tags, fast loading). Multilingual support (if needed). Technical Stack (Suggested): Frontend: HTML5, CSS3, JavaScript (React.js/Vue.js for interactivity). Backend (if dynamic): Node.js, PHP, or headless CMS (WordPress/Strapi). Hosting: Netlify, Vercel, or AWS. Inspiration from DataIT.fr: Card-based service layouts. Clean typography and spacing. Professional imagery/icons. Client logos section. Timeline & Deliverables: Wireframes & UI/UX mockups (Figma/Adobe XD). Development phases (Homepage → Services → Contact). Testing (cross-browser, mobile responsiveness). Deployment & maintenance plan. Additional Notes: Ensure GDPR compliance (cookie consent, data privacy). Optimize for fast load times (image compression, lazy loading). Integrate Google Analytics for tracking. Important request for the website : use theses colors instead of the blue : 'datait-pink': '#B51C59', 'datait-navy': '#0C1855', 'datait-light': '#F0F2F8', logo of the website here: https://www.datait.fr/logo.png Website slogan: Beyond Management Transforming data into actionable insights for your business