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 - Features</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 .features-grid {
98 display: grid;
99 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
100 gap: 2rem;
101 margin-bottom: 4rem;
102 }
103
104 .feature-card {
105 background-color: white;
106 border-radius: 0.75rem;
107 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
108 overflow: hidden;
109 transition: transform 0.3s, box-shadow 0.3s;
110 }
111
112 .feature-card:hover {
113 transform: translateY(-5px);
114 box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
115 }
116
117 .feature-image {
118 width: 100%;
119 height: 200px;
120 background-color: #f3f4f6;
121 display: flex;
122 align-items: center;
123 justify-content: center;
124 }
125
126 .feature-image.text-gen {
127 background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
128 }
129
130 .feature-image.image-gen {
131 background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
132 }
133
134 .feature-image.audio-trans {
135 background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
136 }
137
138 .feature-icon {
139 font-size: 4rem;
140 color: white;
141 }
142
143 .feature-content {
144 padding: 1.5rem;
145 }
146
147 .feature-content h2 {
148 font-size: 1.5rem;
149 margin-bottom: 0.75rem;
150 color: var(--dark);
151 }
152
153 .feature-content p {
154 color: var(--gray);
155 margin-bottom: 1.5rem;
156 min-height: 80px;
157 }
158
159 .feature-link {
160 display: inline-block;
161 padding: 0.75rem 1.5rem;
162 background-color: var(--primary);
163 color: white;
164 text-decoration: none;
165 border-radius: 0.5rem;
166 font-weight: 500;
167 transition: background-color 0.2s;
168 }
169
170 .feature-link:hover {
171 background-color: var(--primary-dark);
172 }
173
174 .feature-link.text-gen {
175 background-color: var(--primary);
176 }
177
178 .feature-link.text-gen:hover {
179 background-color: var(--primary-dark);
180 }
181
182 .feature-link.image-gen {
183 background-color: var(--secondary);
184 }
185
186 .feature-link.image-gen:hover {
187 background-color: #0da571;
188 }
189
190 .feature-link.audio-trans {
191 background-color: var(--accent);
192 }
193
194 .feature-link.audio-trans:hover {
195 background-color: #ea580c;
196 }
197
198 footer {
199 background-color: var(--dark);
200 color: white;
201 padding: 2rem;
202 text-align: center;
203 }
204
205 .footer-content {
206 max-width: 1200px;
207 margin: 0 auto;
208 display: flex;
209 flex-wrap: wrap;
210 justify-content: space-between;
211 gap: 2rem;
212 }
213
214 .footer-section {
215 flex: 1;
216 min-width: 200px;
217 }
218
219 .footer-section h3 {
220 margin-bottom: 1rem;
221 font-size: 1.25rem;
222 }
223
224 .footer-section a {
225 display: block;
226 color: var(--gray);
227 text-decoration: none;
228 margin-bottom: 0.5rem;
229 transition: color 0.2s;
230 }
231
232 .footer-section a:hover {
233 color: white;
234 }
235
236 .copyright {
237 margin-top: 2rem;
238 padding-top: 1rem;
239 border-top: 1px solid #374151;
240 color: var(--gray);
241 }
242
243 @media (max-width: 768px) {
244 .features-grid {
245 grid-template-columns: 1fr;
246 }
247
248 .nav-links {
249 display: none;
250 }
251 }
252 </style>
253 </head>
254 <body>
255 <header>
256 <nav>
257 <div class="logo">
258 <span>AIToolkit</span>
259 </div>
260 <div class="nav-links">
261 <a href="/">Home</a>
262 <a href="/features">Features</a>
263 <a href="/contact">Contact us</a>
264 <a href="/about">About</a>
265 </div>
266 </nav>
267 </header>
268
269 <main>
270 <div class="page-title">
271 <h1>Our AI-Powered Features</h1>
272 <p>
273 Discover our suite of cutting-edge AI tools designed to enhance your
274 productivity and creativity
275 </p>
276 </div>
277
278 <div class="features-grid">
279 <!-- Text Generation Feature -->
280 <div class="feature-card">
281 <div class="feature-image text-gen">
282 <div class="feature-icon"><i class="fas fa-comments"></i></div>
283 </div>
284 <div class="feature-content">
285 <h2>Image & Document Chat</h2>
286 <p>Interactive AI-powered conversations with your files.</p>
287 <a href="/text-generator" class="feature-link text-gen"
288 >Try Text Generator</a
289 >
290 </div>
291 </div>
292
293 <!-- Image Generation Feature -->
294 <div class="feature-card">
295 <div class="feature-image image-gen">
296 <div class="feature-icon"><i class="fas fa-chart-pie"></i></div>
297 </div>
298 <div class="feature-content">
299 <h2>Data Visualization</h2>
300 <p>Transform your ideas into stunning visuals.</p>
301 <a href="#" class="feature-link image-gen">Try Image Creator</a>
302 </div>
303 </div>
304
305 <!-- Audio Transcription Feature -->
306 <div class="feature-card">
307 <div class="feature-image audio-trans">
308 <div class="feature-icon"><i class="fas fa-language"></i></div>
309 </div>
310 <div class="feature-content">
311 <h2>Document Translation</h2>
312 <p>Document translation to any language.</p>
313 <a href="#" class="feature-link audio-trans"
314 >Try Audio Transcriber</a
315 >
316 </div>
317 </div>
318 </div>
319 </main>
320
321 <footer>
322 <div class="footer-content">
323 <div class="footer-section">
324 <h3>AIToolkit</h3>
325 <p>Empowering creativity and productivity with advanced AI tools.</p>
326 </div>
327 <div class="footer-section">
328 <h3>Quick Links</h3>
329 <a href="/index">Home</a>
330 <a href="/features">Features</a>
331 <a href="#">Pricing</a>
332 <a href="/about">About Us</a>
333 </div>
334 <div class="footer-section">
335 <h3>Resources</h3>
336 <a href="#">Documentation</a>
337 <a href="#">Tutorials</a>
338 <a href="#">Blog</a>
339 <a href="#">API</a>
340 </div>
341 <div class="footer-section">
342 <h3>Support</h3>
343 <a href="/contact">Contact Us</a>
344 <a href="#">FAQs</a>
345 <a href="#">Privacy Policy</a>
346 <a href="#">Terms of Service</a>
347 </div>
348 </div>
349 <div class="copyright">
350 <p>© 2025 AIToolkit. All rights reserved.</p>
351 </div>
352 </footer>
353
354 <!-- Replace the FontAwesome script that requires a kit with a public CDN link -->
355 <script
356 src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"
357 integrity="sha512-Tn2m0TIpgVyTzzvmxLNuqbSJH3JP8jm+Cy3hvHrW7ndTDcJ1w5mBiksqDBb8GpE2ksktFvDB/ykZ0mDpsZj20w=="
358 crossorigin="anonymous"
359 referrerpolicy="no-referrer"
360 ></script>
361 </body>
362</html>
363