Hugging Face's logo

Spaces:
kubodimo0
/
langpal
Running

App Files Community
kubodimo0 commited on
Commit
e437d9a
·
verified ·
1 Parent(s): d212233

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +8 -79
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>LangPal - Your AI Language Practice Partner</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>
@@ -50,12 +50,11 @@
50
  <div class="hidden md:flex space-x-8">
51
  <a href="#features" class="hover:text-blue-600 transition">Features</a>
52
  <a href="#how-it-works" class="hover:text-blue-600 transition">How It Works</a>
53
- <a href="#testimonials" class="hover:text-blue-600 transition">Testimonials</a>
54
  <a href="#faq" class="hover:text-blue-600 transition">FAQ</a>
55
  </div>
56
  <div>
57
  <button class="gradient-bg text-white px-6 py-2 rounded-full hover:opacity-90 transition shadow-lg">
58
- Get Started
59
  </button>
60
  </div>
61
  </nav>
@@ -67,11 +66,11 @@
67
  Speak a new language <span class="text-blue-600">with confidence</span>
68
  </h1>
69
  <p class="text-lg text-gray-600 mb-8">
70
- LangPal is your AI-powered language practice partner. Enter any dialogue and start practicing real conversations through interactive role-play scenarios.
71
  </p>
72
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
73
  <button class="gradient-bg text-white px-8 py-3 rounded-full hover:opacity-90 transition shadow-lg font-medium">
74
- Start Practicing Free
75
  </button>
76
  <button class="border-2 border-gray-300 px-8 py-3 rounded-full hover:bg-gray-50 transition font-medium">
77
  Watch Demo
@@ -244,83 +243,15 @@
244
  </div>
245
  </section>
246
 
247
- <!-- Testimonials Section -->
248
- <section id="testimonials" class="py-16 bg-gray-50">
249
- <div class="container mx-auto px-6">
250
- <div class="text-center mb-16">
251
- <h2 class="text-3xl font-bold mb-4">What Our Users Say</h2>
252
- <p class="text-lg text-gray-600 max-w-2xl mx-auto">
253
- Join thousands of language learners who improved their speaking skills with LangPal
254
- </p>
255
- </div>
256
- <div class="grid md:grid-cols-3 gap-8">
257
- <div class="bg-white p-8 rounded-xl">
258
- <div class="flex items-center mb-4">
259
- <img src="https://randomuser.me/api/portraits/women/32.jpg" class="w-12 h-12 rounded-full">
260
- <div class="ml-4">
261
- <h4 class="font-bold">Sarah K.</h4>
262
- <div class="flex text-yellow-400">
263
- <i class="fas fa-star"></i>
264
- <i class="fas fa-star"></i>
265
- <i class="fas fa-star"></i>
266
- <i class="fas fa-star"></i>
267
- <i class="fas fa-star"></i>
268
- </div>
269
- </div>
270
- </div>
271
- <p class="text-gray-600">
272
- "I was nervous about speaking Spanish before my trip to Mexico. After two weeks with LangPal, I could confidently order food and ask for directions. The role-play feature is amazing!"
273
- </p>
274
- </div>
275
- <div class="bg-white p-8 rounded-xl">
276
- <div class="flex items-center mb-4">
277
- <img src="https://randomuser.me/api/portraits/men/54.jpg" class="w-12 h-12 rounded-full">
278
- <div class="ml-4">
279
- <h4 class="font-bold">James L.</h4>
280
- <div class="flex text-yellow-400">
281
- <i class="fas fa-star"></i>
282
- <i class="fas fa-star"></i>
283
- <i class="fas fa-star"></i>
284
- <i class="fas fa-star"></i>
285
- <i class="fas fa-star"></i>
286
- </div>
287
- </div>
288
- </div>
289
- <p class="text-gray-600">
290
- "As a business professional, I needed to improve my French for client meetings. LangPal's custom scenarios let me practice exactly the conversations I needed. My colleagues noticed the improvement immediately."
291
- </p>
292
- </div>
293
- <div class="bg-white p-8 rounded-xl">
294
- <div class="flex items-center mb-4">
295
- <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full">
296
- <div class="ml-4">
297
- <h4 class="font-bold">Priya M.</h4>
298
- <div class="flex text-yellow-400">
299
- <i class="fas fa-star"></i>
300
- <i class="fas fa-star"></i>
301
- <i class="fas fa-star"></i>
302
- <i class="fas fa-star"></i>
303
- <i class="fas fa-star-half-alt"></i>
304
- </div>
305
- </div>
306
- </div>
307
- <p class="text-gray-600">
308
- "The pronunciation feedback is incredibly accurate. I've tried many apps, but LangPal is the first that actually helped me sound more like a native German speaker."
309
- </p>
310
- </div>
311
- </div>
312
- </div>
313
- </section>
314
-
315
  <!-- CTA Section -->
316
  <section class="py-16 gradient-bg text-white">
317
  <div class="container mx-auto px-6 text-center">
318
  <h2 class="text-3xl font-bold mb-6">Ready to Speak with Confidence?</h2>
319
  <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
320
- Join thousands of language learners improving their speaking skills with LangPal
321
  </p>
322
  <button class="bg-white text-blue-600 px-8 py-3 rounded-full hover:bg-gray-100 transition font-bold shadow-lg">
323
- Start Practicing Free
324
  </button>
325
  </div>
326
  </section>
@@ -341,7 +272,7 @@
341
  <i class="fas fa-chevron-down text-blue-600"></i>
342
  </button>
343
  <div class="mt-2 text-gray-600">
344
- Yes! LangPal offers a completely free tier with access to all core features. We also offer a premium version with additional advanced features for those who want even more practice options.
345
  </div>
346
  </div>
347
  <div class="mb-6 border-b pb-4">
@@ -387,7 +318,7 @@
387
  <span class="text-xl font-bold">LangPal</span>
388
  </div>
389
  <p class="text-gray-400">
390
- Your AI-powered language practice partner helping you speak with confidence.
391
  </p>
392
  <div class="flex space-x-4 mt-6">
393
  <a href="#" class="text-gray-400 hover:text-white">
@@ -408,7 +339,6 @@
408
  <h3 class="font-bold text-lg mb-4">Product</h3>
409
  <ul class="space-y-2">
410
  <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
411
- <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
412
  <li><a href="#" class="text-gray-400 hover:text-white">Languages</a></li>
413
  <li><a href="#" class="text-gray-400 hover:text-white">Download</a></li>
414
  </ul>
@@ -417,7 +347,6 @@
417
  <h3 class="font-bold text-lg mb-4">Company</h3>
418
  <ul class="space-y-2">
419
  <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
420
- <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
421
  <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
422
  <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
423
  </ul>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LangPal - Your Free AI Language Practice Partner</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>
 
50
  <div class="hidden md:flex space-x-8">
51
  <a href="#features" class="hover:text-blue-600 transition">Features</a>
52
  <a href="#how-it-works" class="hover:text-blue-600 transition">How It Works</a>
 
53
  <a href="#faq" class="hover:text-blue-600 transition">FAQ</a>
54
  </div>
55
  <div>
56
  <button class="gradient-bg text-white px-6 py-2 rounded-full hover:opacity-90 transition shadow-lg">
57
+ Start Free
58
  </button>
59
  </div>
60
  </nav>
 
66
  Speak a new language <span class="text-blue-600">with confidence</span>
67
  </h1>
68
  <p class="text-lg text-gray-600 mb-8">
69
+ LangPal is your completely free AI-powered language practice partner. Enter any dialogue and start practicing real conversations through interactive role-play scenarios.
70
  </p>
71
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
72
  <button class="gradient-bg text-white px-8 py-3 rounded-full hover:opacity-90 transition shadow-lg font-medium">
73
+ Start Practicing Now
74
  </button>
75
  <button class="border-2 border-gray-300 px-8 py-3 rounded-full hover:bg-gray-50 transition font-medium">
76
  Watch Demo
 
243
  </div>
244
  </section>
245
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  <!-- CTA Section -->
247
  <section class="py-16 gradient-bg text-white">
248
  <div class="container mx-auto px-6 text-center">
249
  <h2 class="text-3xl font-bold mb-6">Ready to Speak with Confidence?</h2>
250
  <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
251
+ Join thousands of language learners improving their speaking skills with our completely free platform
252
  </p>
253
  <button class="bg-white text-blue-600 px-8 py-3 rounded-full hover:bg-gray-100 transition font-bold shadow-lg">
254
+ Start Practicing Now
255
  </button>
256
  </div>
257
  </section>
 
272
  <i class="fas fa-chevron-down text-blue-600"></i>
273
  </button>
274
  <div class="mt-2 text-gray-600">
275
+ Yes! LangPal is completely free with no hidden costs. We believe language learning should be accessible to everyone, so we offer all our features at no charge.
276
  </div>
277
  </div>
278
  <div class="mb-6 border-b pb-4">
 
318
  <span class="text-xl font-bold">LangPal</span>
319
  </div>
320
  <p class="text-gray-400">
321
+ Your completely free AI-powered language practice partner helping you speak with confidence.
322
  </p>
323
  <div class="flex space-x-4 mt-6">
324
  <a href="#" class="text-gray-400 hover:text-white">
 
339
  <h3 class="font-bold text-lg mb-4">Product</h3>
340
  <ul class="space-y-2">
341
  <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
 
342
  <li><a href="#" class="text-gray-400 hover:text-white">Languages</a></li>
343
  <li><a href="#" class="text-gray-400 hover:text-white">Download</a></li>
344
  </ul>
 
347
  <h3 class="font-bold text-lg mb-4">Company</h3>
348
  <ul class="space-y-2">
349
  <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
 
350
  <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
351
  <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
352
  </ul>