File size: 9,361 Bytes
21acf71 20d3c9a 21acf71 20d3c9a 21acf71 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing - HandSpeak AI</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
<custom-navbar></custom-navbar>
<header class="bg-gradient-to-r from-gray-900 to-gray-800 py-16">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
Pricing Plans
</h1>
<p class="text-xl text-gray-300 max-w-2xl mx-auto">
Choose the plan that fits your needs
</p>
</div>
</header>
<main class="flex-grow container mx-auto px-4 py-12">
<div class="max-w-6xl mx-auto">
<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">
Simple, Transparent Pricing
</h1>
<p class="text-xl text-gray-300 text-center max-w-2xl mx-auto mb-12">
Choose the plan that fits your needs. Cancel anytime.
</p>
<div class="grid md:grid-cols-3 gap-8">
<!-- Free Tier -->
<div class="bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-700">
<h2 class="text-2xl font-bold mb-4">Free</h2>
<p class="text-4xl font-bold mb-6">$0<span class="text-lg text-gray-400">/month</span></p>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<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>
Basic sign recognition
</li>
<li class="flex items-center">
<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>
Up to 50 signs
</li>
<li class="flex items-center">
<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>
Community support
</li>
</ul>
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-medium transition">
Get Started
</button>
</div>
<!-- Pro Tier -->
<div class="bg-gray-800 rounded-xl p-8 shadow-lg border-2 border-teal-500 relative">
<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">
POPULAR
</div>
<h2 class="text-2xl font-bold mb-4">Pro</h2>
<p class="text-4xl font-bold mb-6">$9.99<span class="text-lg text-gray-400">/month</span></p>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<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>
Advanced sign recognition
</li>
<li class="flex items-center">
<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>
Unlimited signs
</li>
<li class="flex items-center">
<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>
Priority support
</li>
<li class="flex items-center">
<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>
Custom sign creation
</li>
<li class="flex items-center">
<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>
API Access
</li>
</ul>
<button class="w-full bg-teal-600 hover:bg-teal-500 text-white px-6 py-3 rounded-lg font-medium transition">
Start Free Trial
</button>
</div>
<!-- Enterprise Tier -->
<div class="bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-700">
<h2 class="text-2xl font-bold mb-4">Enterprise</h2>
<p class="text-4xl font-bold mb-6">Custom</p>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<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>
All Pro features
</li>
<li class="flex items-center">
<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>
White-label solutions
</li>
<li class="flex items-center">
<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>
Dedicated support
</li>
<li class="flex items-center">
<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>
On-premise deployment
</li>
<li class="flex items-center">
<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>
Custom integrations
</li>
</ul>
<button class="w-full bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-lg font-medium transition">
Contact Sales
</button>
</div>
</div>
<div class="mt-16 text-center">
<h3 class="text-2xl font-bold mb-4">Frequently Asked Questions</h3>
<div class="max-w-3xl mx-auto space-y-4">
<div class="bg-gray-800 rounded-lg p-4">
<h4 class="font-medium">Is there a free trial available?</h4>
<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>
</div>
<div class="bg-gray-800 rounded-lg p-4">
<h4 class="font-medium">Can I cancel anytime?</h4>
<p class="text-gray-400 text-sm mt-1">Absolutely. There are no long-term contracts or cancellation fees.</p>
</div>
<div class="bg-gray-800 rounded-lg p-4">
<h4 class="font-medium">Do you offer discounts for non-profits?</h4>
<p class="text-gray-400 text-sm mt-1">Yes, we offer special pricing for educational institutions and non-profit organizations.</p>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="script.js"></script>
</body>
</html> |