Hugging Face's logo

Spaces:
dev-Rachitgarg
/
handspeak-ai-translator
Running

App Files Community
dev-Rachitgarg commited on
Commit
21acf71
·
verified ·
1 Parent(s): 2b66289

make ful flege website out of it and also add the subscripton and all the things need for startup website

Browse files
Files changed (3) hide show
  1. about.html +65 -0
  2. contact.html +63 -0
  3. pricing.html +137 -0
about.html ADDED
@@ -0,0 +1,65 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>About HandSpeak AI</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="components/navbar.js"></script>
10
+ <script src="components/footer.js"></script>
11
+ </head>
12
+ <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="flex-grow container mx-auto px-4 py-12">
16
+ <div class="max-w-4xl mx-auto">
17
+ <h1 class="text-4xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
18
+ About HandSpeak AI
19
+ </h1>
20
+
21
+ <div class="space-y-8">
22
+ <section class="bg-gray-800 rounded-xl p-6 shadow-lg">
23
+ <h2 class="text-2xl font-bold mb-4 text-teal-400">Our Mission</h2>
24
+ <p class="text-gray-300 leading-relaxed">
25
+ HandSpeak AI is revolutionizing communication by breaking down barriers between sign language users and the hearing world.
26
+ Our AI-powered translator provides real-time, accurate sign language recognition to foster inclusive communication.
27
+ </p>
28
+ </section>
29
+
30
+ <section class="bg-gray-800 rounded-xl p-6 shadow-lg">
31
+ <h2 class="text-2xl font-bold mb-4 text-teal-400">The Technology</h2>
32
+ <p class="text-gray-300 leading-relaxed">
33
+ Using cutting-edge computer vision and machine learning algorithms, HandSpeak AI detects and interprets hand gestures with
34
+ over 95% accuracy. Our system continuously learns and improves from user interactions.
35
+ </p>
36
+ </section>
37
+
38
+ <section class="bg-gray-800 rounded-xl p-6 shadow-lg">
39
+ <h2 class="text-2xl font-bold mb-4 text-teal-400">The Team</h2>
40
+ <div class="grid md:grid-cols-3 gap-6">
41
+ <div class="text-center">
42
+ <img src="http://static.photos/people/200x200/1" alt="CEO" class="rounded-full w-32 h-32 object-cover mx-auto mb-3">
43
+ <h3 class="font-bold">Alex Chen</h3>
44
+ <p class="text-gray-400 text-sm">CEO & Founder</p>
45
+ </div>
46
+ <div class="text-center">
47
+ <img src="http://static.photos/people/200x200/2" alt="CTO" class="rounded-full w-32 h-32 object-cover mx-auto mb-3">
48
+ <h3 class="font-bold">Maria Rodriguez</h3>
49
+ <p class="text-gray-400 text-sm">CTO</p>
50
+ </div>
51
+ <div class="text-center">
52
+ <img src="http://static.photos/people/200x200/3" alt="Lead Researcher" class="rounded-full w-32 h-32 object-cover mx-auto mb-3">
53
+ <h3 class="font-bold">James Wilson</h3>
54
+ <p class="text-gray-400 text-sm">Lead AI Researcher</p>
55
+ </div>
56
+ </div>
57
+ </section>
58
+ </div>
59
+ </div>
60
+ </main>
61
+
62
+ <custom-footer></custom-footer>
63
+ <script src="script.js"></script>
64
+ </body>
65
+ </html>
contact.html ADDED
@@ -0,0 +1,63 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Contact Us - HandSpeak AI</title>
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/footer.js"></script>
12
+ </head>
13
+ <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <main class="flex-grow container mx-auto px-4 py-12">
17
+ <div class="max-w-4xl mx-auto">
18
+ <h1 class="text-4xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
19
+ Contact Us
20
+ </h1>
21
+
22
+ <div class="grid md:grid-cols-2 gap-8">
23
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
24
+ <h2 class="text-2xl font-bold mb-6 text-teal-400">Get in Touch</h2>
25
+ <form id="contactForm" class="space-y-4">
26
+ <div>
27
+ <label for="name" class="block text-sm font-medium mb-1">Name</label>
28
+ <input type="text" id="name" name="name" required
29
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-teal-500 focus:border-transparent">
30
+ </div>
31
+ <div>
32
+ <label for="email" class="block text-sm font-medium mb-1">Email</label>
33
+ <input type="email" id="email" name="email" required
34
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-teal-500 focus:border-transparent">
35
+ </div>
36
+ <div>
37
+ <label for="subject" class="block text-sm font-medium mb-1">Subject</label>
38
+ <select id="subject" name="subject"
39
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-teal-500 focus:border-transparent">
40
+ <option value="support">Support</option>
41
+ <option value="sales">Sales Inquiry</option>
42
+ <option value="partnership">Partnership</option>
43
+ <option value="other">Other</option>
44
+ </select>
45
+ </div>
46
+ <div>
47
+ <label for="message" class="block text-sm font-medium mb-1">Message</label>
48
+ <textarea id="message" name="message" rows="4" required
49
+ class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-teal-500 focus:border-transparent"></textarea>
50
+ </div>
51
+ <button type="submit"
52
+ class="w-full bg-teal-600 hover:bg-teal-500 text-white px-6 py-3 rounded-lg font-medium transition">
53
+ Send Message
54
+ </button>
55
+ </form>
56
+ </div>
57
+
58
+ <div class="space-y-6">
59
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
60
+ <h3 class="text-xl font-bold mb-4 text-teal-400">Contact Information</h3>
61
+ <div class="space-y-3">
62
+ <div class="flex items-start">
63
+ <svg class="w-5 h-5 text-teal-400 mt-0.5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244
pricing.html ADDED
@@ -0,0 +1,137 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Pricing - HandSpeak AI</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="components/navbar.js"></script>
10
+ <script src="components/footer.js"></script>
11
+ </head>
12
+ <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="flex-grow container mx-auto px-4 py-12">
16
+ <div class="max-w-6xl mx-auto">
17
+ <h1 class="text-4xl font-bold mb-4 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
18
+ Simple, Transparent Pricing
19
+ </h1>
20
+ <p class="text-xl text-gray-300 text-center max-w-2xl mx-auto mb-12">
21
+ Choose the plan that fits your needs. Cancel anytime.
22
+ </p>
23
+
24
+ <div class="grid md:grid-cols-3 gap-8">
25
+ <!-- Free Tier -->
26
+ <div class="bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-700">
27
+ <h2 class="text-2xl font-bold mb-4">Free</h2>
28
+ <p class="text-4xl font-bold mb-6">$0<span class="text-lg text-gray-400">/month</span></p>
29
+ <ul class="space-y-3 mb-8">
30
+ <li class="flex items-center">
31
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
32
+ Basic sign recognition
33
+ </li>
34
+ <li class="flex items-center">
35
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
36
+ Up to 50 signs
37
+ </li>
38
+ <li class="flex items-center">
39
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
40
+ Community support
41
+ </li>
42
+ </ul>
43
+ <button class="w-full bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-medium transition">
44
+ Get Started
45
+ </button>
46
+ </div>
47
+
48
+ <!-- Pro Tier -->
49
+ <div class="bg-gray-800 rounded-xl p-8 shadow-lg border-2 border-teal-500 relative">
50
+ <div class="absolute top-0 right-0 bg-teal-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
51
+ POPULAR
52
+ </div>
53
+ <h2 class="text-2xl font-bold mb-4">Pro</h2>
54
+ <p class="text-4xl font-bold mb-6">$9.99<span class="text-lg text-gray-400">/month</span></p>
55
+ <ul class="space-y-3 mb-8">
56
+ <li class="flex items-center">
57
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
58
+ Advanced sign recognition
59
+ </li>
60
+ <li class="flex items-center">
61
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
62
+ Unlimited signs
63
+ </li>
64
+ <li class="flex items-center">
65
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
66
+ Priority support
67
+ </li>
68
+ <li class="flex items-center">
69
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
70
+ Custom sign creation
71
+ </li>
72
+ <li class="flex items-center">
73
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
74
+ API Access
75
+ </li>
76
+ </ul>
77
+ <button class="w-full bg-teal-600 hover:bg-teal-500 text-white px-6 py-3 rounded-lg font-medium transition">
78
+ Start Free Trial
79
+ </button>
80
+ </div>
81
+
82
+ <!-- Enterprise Tier -->
83
+ <div class="bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-700">
84
+ <h2 class="text-2xl font-bold mb-4">Enterprise</h2>
85
+ <p class="text-4xl font-bold mb-6">Custom</p>
86
+ <ul class="space-y-3 mb-8">
87
+ <li class="flex items-center">
88
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
89
+ All Pro features
90
+ </li>
91
+ <li class="flex items-center">
92
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
93
+ White-label solutions
94
+ </li>
95
+ <li class="flex items-center">
96
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
97
+ Dedicated support
98
+ </li>
99
+ <li class="flex items-center">
100
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
101
+ On-premise deployment
102
+ </li>
103
+ <li class="flex items-center">
104
+ <svg class="w-5 h-5 text-teal-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
105
+ Custom integrations
106
+ </li>
107
+ </ul>
108
+ <button class="w-full bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-lg font-medium transition">
109
+ Contact Sales
110
+ </button>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="mt-16 text-center">
115
+ <h3 class="text-2xl font-bold mb-4">Frequently Asked Questions</h3>
116
+ <div class="max-w-3xl mx-auto space-y-4">
117
+ <div class="bg-gray-800 rounded-lg p-4">
118
+ <h4 class="font-medium">Is there a free trial available?</h4>
119
+ <p class="text-gray-400 text-sm mt-1">Yes, you can try our Pro plan free for 14 days with no credit card required.</p>
120
+ </div>
121
+ <div class="bg-gray-800 rounded-lg p-4">
122
+ <h4 class="font-medium">Can I cancel anytime?</h4>
123
+ <p class="text-gray-400 text-sm mt-1">Absolutely. There are no long-term contracts or cancellation fees.</p>
124
+ </div>
125
+ <div class="bg-gray-800 rounded-lg p-4">
126
+ <h4 class="font-medium">Do you offer discounts for non-profits?</h4>
127
+ <p class="text-gray-400 text-sm mt-1">Yes, we offer special pricing for educational institutions and non-profit organizations.</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </main>
133
+
134
+ <custom-footer></custom-footer>
135
+ <script src="script.js"></script>
136
+ </body>
137
+ </html>