Hugging Face's logo

Spaces:
Synthify-ai
/
undefined
Running

App Files Community
Synthify-ai commited on
Commit
4805965
·
verified ·
1 Parent(s): 6afc5da

Add a Pricing Section titled “Choose Your Plan”.

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.
• Up to 200 calls or messages per month
• Basic call routing and appointment booking
• Standard business hours coverage

Growth
£1,099 setup fee + £699/month
For growing teams or busy clinics.
• Up to 600 calls or messages per month
• Custom voice and tailored call flow
• Calendar 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 WhatsApp, and SMS integrations
• Priority support
• Full analytics dashboard
• Dedicated account manager

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

Files changed (2) hide show
  1. README.md +7 -3
  2. index.html +338 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 📉
4
  colorFrom: pink
5
  colorTo: purple
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
 
3
  colorFrom: pink
4
  colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,338 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Synthify.AI - AI Receptionists for Local Businesses</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .hero-gradient {
13
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
14
+ }
15
+ .feature-card:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
18
+ }
19
+ .testimonial-card {
20
+ background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
21
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="font-sans antialiased text-gray-800">
26
+ <!-- Navigation -->
27
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-16">
30
+ <div class="flex items-center">
31
+ <div class="flex-shrink-0 flex items-center">
32
+ <i data-feather="cpu" class="h-8 w-8 text-blue-600"></i>
33
+ <span class="ml-2 text-xl font-bold text-gray-900">Synthify.AI</span>
34
+ </div>
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>
45
+ <div class="-mr-2 flex items-center md:hidden">
46
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
47
+ <i data-feather="menu"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- Hero Section -->
55
+ <div class="hero-gradient">
56
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
57
+ <div class="text-center">
58
+ <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
59
+ <span class="block">AI Receptionists That Never</span>
60
+ <span class="block text-blue-600">Sleep, Call In Sick, or Make Mistakes</span>
61
+ </h1>
62
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-600 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
63
+ Synthify.AI handles calls, books appointments, and manages messages - saving your staff hours every day while improving customer experience.
64
+ </p>
65
+ <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
66
+ <div class="rounded-md shadow">
67
+ <a href="#contact" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
68
+ Get Started
69
+ </a>
70
+ </div>
71
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
72
+ <a href="#how-it-works" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
73
+ How It Works
74
+ </a>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- How It Works -->
82
+ <div id="how-it-works" class="py-12 bg-white">
83
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
84
+ <div class="lg:text-center">
85
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Process</h2>
86
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
87
+ Simple Setup, Powerful Results
88
+ </p>
89
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto">
90
+ Get your AI receptionist up and running in days, not months.
91
+ </p>
92
+ </div>
93
+
94
+ <div class="mt-10">
95
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
96
+ <!-- Step 1 -->
97
+ <div class="feature-card relative transition-all duration-300 ease-in-out">
98
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
99
+ <span class="text-xl font-bold">1</span>
100
+ </div>
101
+ <div class="ml-16">
102
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Setup</h3>
103
+ <p class="mt-2 text-base text-gray-600">
104
+ We learn your business specifics, hours, services, and appointment types in a quick onboarding call.
105
+ </p>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Step 2 -->
110
+ <div class="feature-card relative transition-all duration-300 ease-in-out">
111
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
112
+ <span class="text-xl font-bold">2</span>
113
+ </div>
114
+ <div class="ml-16">
115
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Integration</h3>
116
+ <p class="mt-2 text-base text-gray-600">
117
+ We connect with your phone system, calendar, and CRM - no technical work required on your end.
118
+ </p>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Step 3 -->
123
+ <div class="feature-card relative transition-all duration-300 ease-in-out">
124
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
125
+ <span class="text-xl font-bold">3</span>
126
+ </div>
127
+ <div class="ml-16">
128
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Live Agent</h3>
129
+ <p class="mt-2 text-base text-gray-600">
130
+ Your AI receptionist goes live, handling calls 24/7 with human-like conversations tailored to your business.
131
+ </p>
132
+ </div>
133
+ </div>
134
+ </div>
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">
145
+ Who We Help
146
+ </p>
147
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto">
148
+ Local service businesses that rely on phone calls to drive revenue.
149
+ </p>
150
+ </div>
151
+
152
+ <div class="mt-10">
153
+ <div class="grid gap-10 md:grid-cols-3">
154
+ <!-- Dentists -->
155
+ <div class="bg-white overflow-hidden shadow rounded-lg">
156
+ <div class="px-4 py-5 sm:p-6">
157
+ <div class="flex items-center">
158
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
159
+ <i data-feather="activity" class="h-6 w-6 text-white"></i>
160
+ </div>
161
+ <div class="ml-5 w-0 flex-1">
162
+ <h3 class="text-lg font-medium text-gray-900">Dental Clinics</h3>
163
+ </div>
164
+ </div>
165
+ <div class="mt-4">
166
+ <p class="text-base text-gray-600">
167
+ Never miss another new patient call. Your AI receptionist books appointments, answers FAQs, and follows up with patients automatically.
168
+ </p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Pharmacies -->
174
+ <div class="bg-white overflow-hidden shadow rounded-lg">
175
+ <div class="px-4 py-5 sm:p-6">
176
+ <div class="flex items-center">
177
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
178
+ <i data-feather="plus-circle" class="h-6 w-6 text-white"></i>
179
+ </div>
180
+ <div class="ml-5 w-0 flex-1">
181
+ <h3 class="text-lg font-medium text-gray-900">Pharmacies</h3>
182
+ </div>
183
+ </div>
184
+ <div class="mt-4">
185
+ <p class="text-base text-gray-600">
186
+ Handle prescription refills, medication questions, and pickup times without adding staff during busy hours.
187
+ </p>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Service Businesses -->
193
+ <div class="bg-white overflow-hidden shadow rounded-lg">
194
+ <div class="px-4 py-5 sm:p-6">
195
+ <div class="flex items-center">
196
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
197
+ <i data-feather="scissors" class="h-6 w-6 text-white"></i>
198
+ </div>
199
+ <div class="ml-5 w-0 flex-1">
200
+ <h3 class="text-lg font-medium text-gray-900">Local Services</h3>
201
+ </div>
202
+ </div>
203
+ <div class="mt-4">
204
+ <p class="text-base text-gray-600">
205
+ Salons, repair shops, contractors - any business that books appointments by phone can benefit from an always-available AI receptionist.
206
+ </p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Results -->
216
+ <div id="results" class="py-12 bg-white">
217
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
218
+ <div class="lg:text-center">
219
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Results</h2>
220
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
221
+ Measurable Impact
222
+ </p>
223
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto">
224
+ What our clients experience after implementing Synthify.AI
225
+ </p>
226
+ </div>
227
+
228
+ <div class="mt-10 grid gap-10 lg:grid-cols-3">
229
+ <!-- Stat 1 -->
230
+ <div class="bg-white rounded-lg p-6 text-center">
231
+ <div class="text-5xl font-bold text-blue-600">80%</div>
232
+ <div class="mt-2 text-lg font-medium text-gray-900">Reduction in Missed Calls</div>
233
+ <p class="mt-2 text-gray-600">
234
+ Calls are answered instantly, day or night, even during lunch breaks and holidays.
235
+ </p>
236
+ </div>
237
+
238
+ <!-- Stat 2 -->
239
+ <div class="bg-white rounded-lg p-6 text-center">
240
+ <div class="text-5xl font-bold text-blue-600">15+</div>
241
+ <div class="mt-2 text-lg font-medium text-gray-900">Hours Saved Weekly</div>
242
+ <p class="mt-2 text-gray-600">
243
+ Staff spend less time on the phone and more time serving customers in person.
244
+ </p>
245
+ </div>
246
+
247
+ <!-- Stat 3 -->
248
+ <div class="bg-white rounded-lg p-6 text-center">
249
+ <div class="text-5xl font-bold text-blue-600">30%</div>
250
+ <div class="mt-2 text-lg font-medium text-gray-900">More Appointments Booked</div>
251
+ <p class="mt-2 text-gray-600">
252
+ Our AI never forgets to follow up or ask for the appointment, increasing conversions.
253
+ </p>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Testimonials -->
258
+ <div class="mt-16">
259
+ <h3 class="text-2xl font-bold text-center text-gray-900">What Our Clients Say</h3>
260
+ <div class="mt-8 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
261
+ <!-- Testimonial 1 -->
262
+ <div class="testimonial-card p-6 rounded-lg">
263
+ <div class="flex items-center">
264
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/medical/200x200/1" alt="Dr. Sarah Johnson">
265
+ <div class="ml-4">
266
+ <h4 class="text-lg font-medium">Dr. Sarah Johnson</h4>
267
+ <p class="text-gray-600">Dental Clinic Owner</p>
268
+ </div>
269
+ </div>
270
+ <div class="mt-4">
271
+ <p class="text-gray-700 italic">
272
+ "Synthify.AI has transformed our practice. We went from missing 30% of new patient calls to booking every single one. The AI sounds so natural that patients often don't realize they're not talking to a human."
273
+ </p>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Testimonial 2 -->
278
+ <div class="testimonial-card p-6 rounded-lg">
279
+ <div class="flex items-center">
280
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/retail/200x200/2" alt="Mike Thompson">
281
+ <div class="ml-4">
282
+ <h4 class="text-lg font-medium">Mike Thompson</h4>
283
+ <p class="text-gray-600">Pharmacy Manager</p>
284
+ </div>
285
+ </div>
286
+ <div class="mt-4">
287
+ <p class="text-gray-700 italic">
288
+ "Our staff was overwhelmed with phone calls about refills and hours. Now Synthify handles 80% of these calls automatically, freeing up our pharmacists to focus on patient care."
289
+ </p>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Testimonial 3 -->
294
+ <div class="testimonial-card p-6 rounded-lg">
295
+ <div class="flex items-center">
296
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/workspace/200x200/3" alt="Lisa Chen">
297
+ <div class="ml-4">
298
+ <h4 class="text-lg font-medium">Lisa Chen</h4>
299
+ <p class="text-gray-600">Salon Owner</p>
300
+ </div>
301
+ </div>
302
+ <div class="mt-4">
303
+ <p class="text-gray-700 italic">
304
+ "As a small business, we couldn't afford a full-time receptionist. Synthify gives us professional call handling at a fraction of the cost. Our no-show rate dropped by 40% thanks to the automated reminders."
305
+ </p>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- CTA Section -->
314
+ <div class="bg-blue-700">
315
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
316
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
317
+ <span class="block">Ready to save time and grow your business?</span>
318
+ <span class="block text-blue-200">Get started with Synthify.AI today.</span>
319
+ </h2>
320
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
321
+ <div class="inline-flex rounded-md shadow">
322
+ <a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50">
323
+ Book a Demo
324
+ </a>
325
+ </div>
326
+ <div class="ml-3 inline-flex rounded-md shadow">
327
+ <a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 bg-opacity-60 hover:bg-opacity-70">
328
+ Contact Sales
329
+ </a>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Contact Form -->
336
+ <div id="contact" class="bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
337
+ </body>
338
+ </html>