3emibrahim/debugging-testing2
0
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>AIToolkit - About Us</title>
7 <style>
8 :root {
9 --primary: #4f46e5;
10 --primary-dark: #4338ca;
11 --secondary: #10b981;
12 --accent: #f97316;
13 --light: #f3f4f6;
14 --dark: #1f2937;
15 --gray: #9ca3af;
16 }
17
18 * {
19 margin: 0;
20 padding: 0;
21 box-sizing: border-box;
22 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
23 }
24
25 body {
26 background-color: #f9fafb;
27 color: var(--dark);
28 line-height: 1.6;
29 }
30
31 header {
32 background-color: white;
33 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
34 padding: 1rem 2rem;
35 position: sticky;
36 top: 0;
37 z-index: 10;
38 }
39
40 nav {
41 display: flex;
42 justify-content: space-between;
43 align-items: center;
44 max-width: 1200px;
45 margin: 0 auto;
46 }
47
48 .logo {
49 font-size: 1.5rem;
50 font-weight: 700;
51 color: var(--primary);
52 display: flex;
53 align-items: center;
54 gap: 0.5rem;
55 }
56
57 .nav-links {
58 display: flex;
59 gap: 2rem;
60 }
61
62 .nav-links a {
63 text-decoration: none;
64 color: var(--dark);
65 font-weight: 500;
66 transition: color 0.2s;
67 }
68
69 .nav-links a:hover {
70 color: var(--primary);
71 }
72
73 main {
74 max-width: 1200px;
75 margin: 0 auto;
76 padding: 2rem;
77 }
78
79 .page-title {
80 text-align: center;
81 margin-bottom: 3rem;
82 }
83
84 .page-title h1 {
85 font-size: 2.5rem;
86 color: var(--dark);
87 margin-bottom: 1rem;
88 }
89
90 .page-title p {
91 font-size: 1.2rem;
92 color: var(--gray);
93 max-width: 700px;
94 margin: 0 auto;
95 }
96
97 .about-intro {
98 display: flex;
99 align-items: center;
100 gap: 3rem;
101 margin-bottom: 4rem;
102 }
103
104 .about-image {
105 flex: 1;
106 border-radius: 0.75rem;
107 overflow: hidden;
108 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
109 }
110
111 .about-image img {
112 width: 100%;
113 height: auto;
114 display: block;
115 }
116
117 .about-content {
118 flex: 1;
119 }
120
121 .about-content h2 {
122 font-size: 1.8rem;
123 margin-bottom: 1.5rem;
124 color: var(--dark);
125 }
126
127 .about-content p {
128 margin-bottom: 1rem;
129 color: #4b5563;
130 }
131
132 .company-stats {
133 display: grid;
134 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
135 gap: 1.5rem;
136 margin: 2rem 0;
137 }
138
139 .stat-card {
140 background-color: white;
141 padding: 1.5rem;
142 border-radius: 0.5rem;
143 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
144 text-align: center;
145 }
146
147 .stat-number {
148 font-size: 2.5rem;
149 font-weight: 700;
150 color: var(--primary);
151 margin-bottom: 0.5rem;
152 }
153
154 .stat-label {
155 color: var(--gray);
156 }
157
158 .timeline-section {
159 margin: 4rem 0;
160 }
161
162 .timeline-section h2 {
163 font-size: 1.8rem;
164 text-align: center;
165 margin-bottom: 3rem;
166 }
167
168 .timeline {
169 position: relative;
170 max-width: 1000px;
171 margin: 0 auto;
172 }
173
174 .timeline::after {
175 content: "";
176 position: absolute;
177 width: 4px;
178 background-color: var(--primary);
179 top: 0;
180 bottom: 0;
181 left: 50%;
182 margin-left: -2px;
183 }
184
185 .timeline-item {
186 padding: 10px 40px;
187 position: relative;
188 width: 50%;
189 }
190
191 .timeline-item::after {
192 content: "";
193 position: absolute;
194 width: 20px;
195 height: 20px;
196 background-color: white;
197 border: 4px solid var(--primary);
198 border-radius: 50%;
199 top: 15px;
200 right: -12px;
201 z-index: 1;
202 }
203
204 .timeline-left {
205 left: 0;
206 }
207
208 .timeline-right {
209 left: 50%;
210 }
211
212 .timeline-right::after {
213 left: -12px;
214 }
215
216 .timeline-content {
217 padding: 1.5rem;
218 background-color: white;
219 border-radius: 0.5rem;
220 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
221 }
222
223 .timeline-year {
224 display: inline-block;
225 padding: 0.25rem 0.75rem;
226 background-color: var(--primary);
227 color: white;
228 border-radius: 0.25rem;
229 margin-bottom: 0.5rem;
230 }
231
232 .timeline-content h3 {
233 margin-bottom: 0.5rem;
234 }
235
236 .team-section {
237 margin: 4rem 0;
238 }
239
240 .team-section h2 {
241 font-size: 1.8rem;
242 text-align: center;
243 margin-bottom: 3rem;
244 }
245
246 .team-grid {
247 display: grid;
248 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
249 gap: 2rem;
250 }
251
252 .team-card {
253 background-color: white;
254 border-radius: 0.5rem;
255 overflow: hidden;
256 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
257 transition: transform 0.3s, box-shadow 0.3s;
258 }
259
260 .team-card:hover {
261 transform: translateY(-5px);
262 box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
263 }
264
265 .team-member-img {
266 width: 100%;
267 height: 300px;
268 object-fit: cover;
269 }
270
271 .team-member-info {
272 padding: 1.5rem;
273 text-align: center;
274 }
275
276 .team-member-info h3 {
277 margin-bottom: 0.5rem;
278 }
279
280 .team-member-info p {
281 color: var(--gray);
282 margin-bottom: 1rem;
283 }
284
285 .team-social-links {
286 display: flex;
287 justify-content: center;
288 gap: 0.75rem;
289 }
290
291 .team-social-link {
292 width: 36px;
293 height: 36px;
294 border-radius: 50%;
295 display: flex;
296 align-items: center;
297 justify-content: center;
298 color: white;
299 font-size: 1rem;
300 transition: transform 0.3s;
301 }
302
303 .team-social-link:hover {
304 transform: scale(1.1);
305 }
306
307 .values-section {
308 margin: 4rem 0;
309 }
310
311 .values-section h2 {
312 font-size: 1.8rem;
313 text-align: center;
314 margin-bottom: 3rem;
315 }
316
317 .values-grid {
318 display: grid;
319 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
320 gap: 2rem;
321 }
322
323 .value-card {
324 background-color: white;
325 padding: 2rem;
326 border-radius: 0.5rem;
327 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
328 text-align: center;
329 }
330
331 .value-icon {
332 width: 60px;
333 height: 60px;
334 border-radius: 50%;
335 margin: 0 auto 1rem;
336 display: flex;
337 align-items: center;
338 justify-content: center;
339 font-size: 1.5rem;
340 color: white;
341 }
342
343 .innovation {
344 background-color: var(--primary);
345 }
346
347 .integrity {
348 background-color: var(--secondary);
349 }
350
351 .inclusion {
352 background-color: var(--accent);
353 }
354
355 .value-card h3 {
356 margin-bottom: 1rem;
357 }
358
359 .cta-section {
360 background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
361 padding: 4rem 2rem;
362 text-align: center;
363 border-radius: 0.75rem;
364 margin: 4rem 0;
365 color: white;
366 }
367
368 .cta-section h2 {
369 font-size: 2rem;
370 margin-bottom: 1rem;
371 }
372
373 .cta-section p {
374 margin-bottom: 2rem;
375 max-width: 600px;
376 margin-left: auto;
377 margin-right: auto;
378 }
379
380 .cta-button {
381 display: inline-block;
382 padding: 0.9rem 2rem;
383 background-color: white;
384 color: var(--primary);
385 text-decoration: none;
386 border-radius: 0.5rem;
387 font-weight: 600;
388 transition: all 0.3s ease;
389 box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
390 }
391
392 .cta-button:hover {
393 transform: translateY(-3px);
394 box-shadow: 0 6px 16px rgba(255, 255, 255, 0.3);
395 background-color: #f3f4f6;
396 }
397
398 footer {
399 background-color: var(--dark);
400 color: white;
401 padding: 2rem;
402 text-align: center;
403 }
404
405 .footer-content {
406 max-width: 1200px;
407 margin: 0 auto;
408 display: flex;
409 flex-wrap: wrap;
410 justify-content: space-between;
411 gap: 2rem;
412 }
413
414 .footer-section {
415 flex: 1;
416 min-width: 200px;
417 }
418
419 .footer-section h3 {
420 margin-bottom: 1rem;
421 font-size: 1.25rem;
422 }
423
424 .footer-section a {
425 display: block;
426 color: var(--gray);
427 text-decoration: none;
428 margin-bottom: 0.5rem;
429 transition: color 0.2s;
430 }
431
432 .footer-section a:hover {
433 color: white;
434 }
435
436 .copyright {
437 margin-top: 2rem;
438 padding-top: 1rem;
439 border-top: 1px solid #374151;
440 color: var(--gray);
441 }
442
443 @media (max-width: 768px) {
444 .nav-links {
445 display: none;
446 }
447
448 .about-intro {
449 flex-direction: column;
450 }
451
452 .timeline::after {
453 left: 31px;
454 }
455
456 .timeline-item {
457 width: 100%;
458 padding-left: 70px;
459 padding-right: 25px;
460 }
461
462 .timeline-right {
463 left: 0%;
464 }
465
466 .timeline-left::after,
467 .timeline-right::after {
468 left: 18px;
469 }
470 }
471 </style>
472 </head>
473 <body>
474 <header>
475 <nav>
476 <div class="logo">
477 <span>AIToolkit</span>
478 </div>
479 <div class="nav-links">
480 <a href="/">Home</a>
481 <a href="/features">Features</a>
482 <a href="/contact">Contact us</a>
483 <a href="/about">About</a>
484 </div>
485 </nav>
486 </header>
487
488 <main>
489 <div class="page-title">
490 <h1>About AIToolkit</h1>
491 <p>
492 Discover our story, our team, and our mission to democratize AI
493 technology.
494 </p>
495 </div>
496
497 <section class="about-intro">
498 <div class="about-image">
499 <img
500 src="https://images.unsplash.com/photo-1573164713988-8665fc963095?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
501 alt="AIToolkit Office"
502 />
503 </div>
504 <div class="about-content">
505 <h2>Our Story</h2>
506 <p>
507 Founded in 2025, AIToolkit began as a university project with a
508 simple vision: to make cutting-edge artificial intelligence
509 accessible to everyone. What started as a small team of AI
510 researchers and engineering students has grown into a leading
511 platform for AI-powered productivity tools.
512 </p>
513 <p>
514 We believe that AI technology should enhance human creativity and
515 productivity, not replace it. Our suite of tools empowers
516 individuals and businesses to accomplish more with less effort,
517 unlocking new possibilities for innovation and growth.
518 </p>
519 <div class="company-stats">
520 <div class="stat-card">
521 <div class="stat-number">50+</div>
522 <div class="stat-label">Active Users</div>
523 </div>
524 <div class="stat-card">
525 <div class="stat-number">120+</div>
526 <div class="stat-label">Countries</div>
527 </div>
528 <div class="stat-card">
529 <div class="stat-number">3</div>
530 <div class="stat-label">AI Models</div>
531 </div>
532 </div>
533 </div>
534 </section>
535 </main>
536
537 <footer>
538 <div class="footer-content">
539 <div class="footer-section">
540 <h3>AIToolkit</h3>
541 <p>Empowering creativity and productivity with advanced AI tools.</p>
542 </div>
543 <div class="footer-section">
544 <h3>Quick Links</h3>
545 <a href="/index">Home</a>
546 <a href="/features.html">Features</a>
547 <a href="#">Pricing</a>
548 <a href="/about">About Us</a>
549 </div>
550 <div class="footer-section">
551 <h3>Resources</h3>
552 <a href="#">Documentation</a>
553 <a href="#">Tutorials</a>
554 <a href="#">Blog</a>
555 <a href="#">API</a>
556 </div>
557 <div class="footer-section">
558 <h3>Support</h3>
559 <a href="/contact">Contact Us</a>
560 <a href="#">FAQs</a>
561 <a href="#">Privacy Policy</a>
562 <a href="#">Terms of Service</a>
563 </div>
564 </div>
565 <div class="copyright">
566 <p>© 2025 AIToolkit. All rights reserved.</p>
567 </div>
568 </footer>
569
570 <script
571 src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"
572 integrity="sha512-Tn2m0TIpgVyTzzvmxLNuqbSJH3JP8jm+Cy3hvHrW7ndTDcJ1w5mBiksqDBb8GpE2ksktFvDB/ykZ0mDpsZj20w=="
573 crossorigin="anonymous"
574 referrerpolicy="no-referrer"
575 ></script>
576 </body>
577</html>
578