Synthify-ai commited on
Commit
9fd863b
·
verified ·
1 Parent(s): 4805965

Add a Pricing Section titled “Choose Your Plan”. under the 'industries' bit

Browse files

Use a clean 3-column layout with modern cards for each plan.
Keep the design minimal, with white backgrounds, blue highlights, and clear “Book a Demo” buttons under each plan.
Display the setup fee and monthly fee clearly at the top of each card.
Use short, easy-to-read bullet points for the features.

Here are the three plans:

Starter
£799 setup fee + £449/month
For small practices and single locations.
• 1 AI receptionist line
• Up to 200 calls or messages per month
• Basic call routing and appointment booking
• Standard business hours coverage
• Email support

Growth
£1,099 setup fee + £699/month
For growing teams or busy clinics.
• 3 AI receptionist lines
• Up to 600 calls or messages per month
• Custom voice and tailored call flow
• Calendar and CRM integration
• After-hours handling
• Monthly performance report

Pro
£1,599 setup fee + £999/month
For high-volume or multi-location businesses.
• Unlimited receptionist lines
• Unlimited calls and messages
• Advanced CRM, WhatsApp, and SMS integrations
• Priority support and onboarding
• Full analytics dashboard
• Dedicated account manager

Make the layout responsive for mobile and ensure each plan card looks clean and professional.

Files changed (1) hide show
  1. index.html +148 -2
index.html CHANGED
@@ -35,10 +35,11 @@
35
  </div>
36
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
37
  <a href="#how-it-works" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">How It Works</a>
 
38
  <a href="#industries" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Industries</a>
39
  <a href="#results" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Results</a>
40
  <a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
41
- <button class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
42
  Book a Demo
43
  </button>
44
  </div>
@@ -135,10 +136,155 @@
135
  </div>
136
  </div>
137
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
 
139
  <!-- Industries -->
140
  <div id="industries" class="py-12 bg-gray-50">
141
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
142
  <div class="lg:text-center">
143
  <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Industries</h2>
144
  <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 
35
  </div>
36
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
37
  <a href="#how-it-works" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">How It Works</a>
38
+ <a href="#pricing" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Pricing</a>
39
  <a href="#industries" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Industries</a>
40
  <a href="#results" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Results</a>
41
  <a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
42
+ <button class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
43
  Book a Demo
44
  </button>
45
  </div>
 
136
  </div>
137
  </div>
138
  </div>
139
+ <!-- Pricing -->
140
+ <div id="pricing" class="py-12 bg-white">
141
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
142
+ <div class="lg:text-center">
143
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Pricing</h2>
144
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
145
+ Choose Your Plan
146
+ </p>
147
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto">
148
+ Simple, transparent pricing with no hidden fees.
149
+ </p>
150
+ </div>
151
+
152
+ <div class="mt-10 grid gap-8 md:grid-cols-3">
153
+ <!-- Starter Plan -->
154
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden border border-gray-200">
155
+ <div class="px-6 py-8">
156
+ <h3 class="text-2xl font-bold text-center text-gray-900">Starter</h3>
157
+ <div class="mt-4 text-center">
158
+ <span class="text-4xl font-bold text-gray-900">£449</span>
159
+ <span class="text-lg font-medium text-gray-600">/month</span>
160
+ </div>
161
+ <p class="mt-2 text-center text-gray-600">+ £799 setup fee</p>
162
+ <p class="mt-4 text-center text-gray-600">For small practices and single locations</p>
163
+ <ul class="mt-6 space-y-4">
164
+ <li class="flex items-start">
165
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
166
+ <span class="ml-3 text-gray-700">1 AI receptionist line</span>
167
+ </li>
168
+ <li class="flex items-start">
169
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
170
+ <span class="ml-3 text-gray-700">Up to 200 calls or messages</span>
171
+ </li>
172
+ <li class="flex items-start">
173
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
174
+ <span class="ml-3 text-gray-700">Basic call routing</span>
175
+ </li>
176
+ <li class="flex items-start">
177
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
178
+ <span class="ml-3 text-gray-700">Standard business hours</span>
179
+ </li>
180
+ <li class="flex items-start">
181
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
182
+ <span class="ml-3 text-gray-700">Email support</span>
183
+ </li>
184
+ </ul>
185
+ </div>
186
+ <div class="px-6 pt-4 pb-8 bg-gray-50 text-center">
187
+ <a href="#contact" class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
188
+ Book a Demo
189
+ </a>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Growth Plan -->
194
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden border-2 border-blue-500 transform scale-105">
195
+ <div class="px-6 py-8">
196
+ <div class="absolute top-0 right-0 bg-blue-500 text-white px-3 py-1 text-xs font-bold uppercase">Popular</div>
197
+ <h3 class="text-2xl font-bold text-center text-gray-900">Growth</h3>
198
+ <div class="mt-4 text-center">
199
+ <span class="text-4xl font-bold text-gray-900">£699</span>
200
+ <span class="text-lg font-medium text-gray-600">/month</span>
201
+ </div>
202
+ <p class="mt-2 text-center text-gray-600">+ £1,099 setup fee</p>
203
+ <p class="mt-4 text-center text-gray-600">For growing teams or busy clinics</p>
204
+ <ul class="mt-6 space-y-4">
205
+ <li class="flex items-start">
206
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
207
+ <span class="ml-3 text-gray-700">3 AI receptionist lines</span>
208
+ </li>
209
+ <li class="flex items-start">
210
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
211
+ <span class="ml-3 text-gray-700">Up to 600 calls or messages</span>
212
+ </li>
213
+ <li class="flex items-start">
214
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
215
+ <span class="ml-3 text-gray-700">Custom voice and call flow</span>
216
+ </li>
217
+ <li class="flex items-start">
218
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
219
+ <span class="ml-3 text-gray-700">Calendar & CRM integration</span>
220
+ </li>
221
+ <li class="flex items-start">
222
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
223
+ <span class="ml-3 text-gray-700">After-hours handling</span>
224
+ </li>
225
+ <li class="flex items-start">
226
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
227
+ <span class="ml-3 text-gray-700">Monthly performance report</span>
228
+ </li>
229
+ </ul>
230
+ </div>
231
+ <div class="px-6 pt-4 pb-8 bg-gray-50 text-center">
232
+ <a href="#contact" class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
233
+ Book a Demo
234
+ </a>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Pro Plan -->
239
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden border border-gray-200">
240
+ <div class="px-6 py-8">
241
+ <h3 class="text-2xl font-bold text-center text-gray-900">Pro</h3>
242
+ <div class="mt-4 text-center">
243
+ <span class="text-4xl font-bold text-gray-900">£999</span>
244
+ <span class="text-lg font-medium text-gray-600">/month</span>
245
+ </div>
246
+ <p class="mt-2 text-center text-gray-600">+ £1,599 setup fee</p>
247
+ <p class="mt-4 text-center text-gray-600">For high-volume or multi-location</p>
248
+ <ul class="mt-6 space-y-4">
249
+ <li class="flex items-start">
250
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
251
+ <span class="ml-3 text-gray-700">Unlimited receptionist lines</span>
252
+ </li>
253
+ <li class="flex items-start">
254
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
255
+ <span class="ml-3 text-gray-700">Unlimited calls and messages</span>
256
+ </li>
257
+ <li class="flex items-start">
258
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
259
+ <span class="ml-3 text-gray-700">Advanced CRM integrations</span>
260
+ </li>
261
+ <li class="flex items-start">
262
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
263
+ <span class="ml-3 text-gray-700">WhatsApp & SMS support</span>
264
+ </li>
265
+ <li class="flex items-start">
266
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
267
+ <span class="ml-3 text-gray-700">Priority support</span>
268
+ </li>
269
+ <li class="flex items-start">
270
+ <i data-feather="check" class="h-5 w-5 text-green-500"></i>
271
+ <span class="ml-3 text-gray-700">Dedicated account manager</span>
272
+ </li>
273
+ </ul>
274
+ </div>
275
+ <div class="px-6 pt-4 pb-8 bg-gray-50 text-center">
276
+ <a href="#contact" class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
277
+ Book a Demo
278
+ </a>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
 
285
  <!-- Industries -->
286
  <div id="industries" class="py-12 bg-gray-50">
287
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
288
  <div class="lg:text-center">
289
  <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Industries</h2>
290
  <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">