Hugging Face's logo

Spaces:
imranali291
/
undefined
Running

App Files Community
imranali291 commited on
Commit
10cafff
·
verified ·
1 Parent(s): 3bcfaa4

please use all sections on website, and same text etc, just improve ui/ux

Browse files
Files changed (2) hide show
  1. README.md +8 -4
  2. index.html +464 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🌖
4
  colorFrom: purple
5
- colorTo: gray
 
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: purple
4
+ colorTo: green
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,465 @@
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>DocuGenius - Document Automation for Property Professionals</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#10B981',
16
+ secondary: '#0EA5E9'
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ </head>
23
+ <body class="bg-white font-sans antialiased">
24
+ <!-- Navigation -->
25
+ <nav class="bg-white border-b border-gray-100 shadow-sm sticky top-0 z-50 transition-all duration-300 hover:shadow-md">
26
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
27
+ <div class="flex justify-between h-16">
28
+ <div class="flex">
29
+ <div class="flex-shrink-0 flex items-center">
30
+ <i data-feather="file-text" class="h-8 w-8 text-primary transition-transform hover:rotate-12"></i>
31
+ <span class="ml-2 text-xl font-bold text-gray-800 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">DocuGenius Pro</span>
32
+ </div>
33
+ </div>
34
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
35
+ <a href="#" class="border-primary text-gray-900 inline-flex items-center px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-50 transition-all group">
36
+ <span class="border-primary border-b-2 pb-1">Home</span>
37
+ <span class="ml-1 opacity-0 group-hover:opacity-100 transition-opacity">🏠</span>
38
+ </a>
39
+ <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-50 transition-all group">
40
+ <span>Features</span>
41
+ <span class="ml-1 opacity-0 group-hover:opacity-100 transition-opacity">✨</span>
42
+ </a>
43
+ <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-50 transition-all group">
44
+ <span>Pricing</span>
45
+ <span class="ml-1 opacity-0 group-hover:opacity-100 transition-opacity">💎</span>
46
+ </a>
47
+ <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-50 transition-all group">
48
+ <span>Testimonials</span>
49
+ <span class="ml-1 opacity-0 group-hover:opacity-100 transition-opacity">🌟</span>
50
+ </a>
51
+ </div>
52
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
53
+ <a href="https://www.docubien.ai/register" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-lg text-white bg-gradient-to-r from-primary to-secondary hover:from-green-600 hover:to-blue-600 transform hover:scale-105 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
54
+ Start Free Trial
55
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
56
+ </a>
57
+ </div>
58
+ <div class="-mr-2 flex items-center sm:hidden">
59
+ <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-green-500">
60
+ <i data-feather="menu" class="block h-6 w-6"></i>
61
+ </button>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </nav>
66
+
67
+ <!-- Hero Section -->
68
+ <div class="relative bg-gradient-to-b from-white to-gray-50 overflow-hidden">
69
+ <div class="max-w-7xl mx-auto">
70
+ <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
71
+ <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 lg:mt-16 lg:px-8 xl:mt-20">
72
+ <div class="sm:text-center lg:text-left">
73
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl animate-fadeIn">
74
+ <span class="block transition-all duration-500 hover:translate-x-2">Faster Documents.</span>
75
+ <span class="block text-primary transition-all duration-500 hover:translate-x-4">Happier Clients.</span>
76
+ <span class="block transition-all duration-500 hover:translate-x-6">Provable Compliance.</span>
77
+ </h1>
78
+ <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
79
+ Document automation and data rooms for property professionals. Generate polished, signature-ready documents that build client confidence and referrals.
80
+ </p>
81
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start space-y-3 sm:space-y-0 sm:space-x-4">
82
+ <div class="rounded-md shadow">
83
+ <a href="https://www.docubien.ai/register" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md shadow-lg text-white bg-gradient-to-r from-primary to-secondary hover:from-green-600 hover:to-blue-600 transform hover:scale-105 transition-all md:py-4 md:text-lg md:px-10">
84
+ Start Your Free Trial
85
+ <i data-feather="chevron-right" class="ml-2 w-5 h-5"></i>
86
+ </a>
87
+ </div>
88
+ <div class="mt-3 sm:mt-0 sm:ml-3">
89
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md shadow-md text-primary bg-white hover:bg-gray-50 transform hover:scale-105 transition-all md:py-4 md:text-lg md:px-10">
90
+ Learn More
91
+ <i data-feather="info" class="ml-2 w-5 h-5"></i>
92
+ </a>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </main>
97
+ </div>
98
+ </div>
99
+ <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
100
+ <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://www.docubien.ai/assets/hero_new-DxOOWHwr.png" alt="Document automation for property professionals">
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Features Section -->
105
+ <div class="py-16 bg-gradient-to-b from-gray-50 to-white">
106
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
107
+ <div class="lg:text-center">
108
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Features</h2>
109
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
110
+ Beyond Basic Mail-Merge Documents
111
+ </p>
112
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
113
+ Your CRM produces documents in seconds—but they're generic, require editing, and look unprofessional.
114
+ </p>
115
+ </div>
116
+ <div class="mt-12">
117
+ <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
118
+ <!-- Feature 1 -->
119
+ <div class="relative p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 hover:-translate-y-1">
120
+ <div class="absolute -top-6 left-6 flex items-center justify-center h-12 w-12 rounded-full bg-gradient-to-br from-primary to-secondary text-white shadow-md">
121
+ <i data-feather="check-circle" class="w-6 h-6"></i>
122
+ </div>
123
+ <h3 class="mt-6 text-lg font-semibold text-gray-900">Use any document template</h3>
124
+ <p class="mt-2 text-base text-gray-600">
125
+ Use templates from any supplier with professional formatting and custom front sheets.
126
+ </p>
127
+ <div class="mt-4">
128
+ <a href="#" class="text-primary hover:text-secondary text-sm font-medium inline-flex items-center transition-colors">
129
+ Learn more <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
130
+ </a>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Feature 2 -->
135
+ <div class="relative p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 hover:-translate-y-1">
136
+ <div class="absolute -top-6 left-6 flex items-center justify-center h-12 w-12 rounded-full bg-gradient-to-br from-primary to-secondary text-white shadow-md">
137
+ <i data-feather="database" class="w-6 h-6"></i>
138
+ </div>
139
+ <h3 class="mt-6 text-lg font-semibold text-gray-900">Pull information from everywhere</h3>
140
+ <p class="mt-2 text-base text-gray-600">
141
+ Eliminate data entry by pulling information from multiple sources automatically.
142
+ </p>
143
+ <div class="mt-4">
144
+ <a href="#" class="text-primary hover:text-secondary text-sm font-medium inline-flex items-center transition-colors">
145
+ Learn more <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
146
+ </a>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Feature 3 -->
151
+ <div class="relative p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 hover:-translate-y-1">
152
+ <div class="absolute -top-6 left-6 flex items-center justify-center h-12 w-12 rounded-full bg-gradient-to-br from-primary to-secondary text-white shadow-md">
153
+ <i data-feather="shield" class="w-6 h-6"></i>
154
+ </div>
155
+ <h3 class="mt-6 text-lg font-semibold text-gray-900">Reduce costly errors</h3>
156
+ <p class="mt-2 text-base text-gray-600">
157
+ Pre-verified data from connected sources prevents rekeying mistakes that plague manual preparation.
158
+ </p>
159
+ <div class="mt-4">
160
+ <a href="#" class="text-primary hover:text-secondary text-sm font-medium inline-flex items-center transition-colors">
161
+ Learn more <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
162
+ </a>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Feature 4 -->
167
+ <div class="relative p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 hover:-translate-y-1">
168
+ <div class="absolute -top-6 left-6 flex items-center justify-center h-12 w-12 rounded-full bg-gradient-to-br from-primary to-secondary text-white shadow-md">
169
+ <i data-feather="layers" class="w-6 h-6"></i>
170
+ </div>
171
+ <h3 class="mt-6 text-lg font-semibold text-gray-900">Turn compliance into advantage</h3>
172
+ <p class="mt-2 text-base text-gray-600">
173
+ Secure data rooms with audit logs showing exactly who accessed which documents when.
174
+ </p>
175
+ <div class="mt-4">
176
+ <a href="#" class="text-primary hover:text-secondary text-sm font-medium inline-flex items-center transition-colors">
177
+ Learn more <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
178
+ </a>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Image Sections -->
187
+ <div class="relative bg-white py-16 sm:py-24">
188
+ <div class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:gap-24 lg:items-start">
189
+ <div class="relative sm:py-16 lg:py-0">
190
+ <div class="relative max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:px-0 lg:max-w-none lg:py-20">
191
+ <div class="relative pt-64 pb-10 rounded-2xl shadow-xl overflow-hidden">
192
+ <img class="absolute inset-0 h-full w-full object-cover" src="https://www.docubien.ai/assets/mail_merge-Dn0KY6st.png" alt="Beyond Basic Mail-Merge Documents">
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="relative mt-12 sm:mt-16 lg:mt-0">
198
+ <div class="lg:px-8 lg:py-8">
199
+ <div class="prose prose-lg text-gray-500 mx-auto">
200
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
201
+ Documents That Look Professional
202
+ </h2>
203
+ <p class="mt-3 text-xl text-gray-500">
204
+ Your CRM may produce documents quickly, but they lack the data points and logic needed to create truly tailored agreements.
205
+ </p>
206
+ <ul class="mt-5">
207
+ <li>Logic-based clause selection ensures only relevant content appears</li>
208
+ <li>Professional formatting and custom front sheets</li>
209
+ <li>Documents that justify your fee and demonstrate your expertise</li>
210
+ </ul>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Testimonials -->
218
+ <div class="bg-gradient-to-b from-white to-gray-50 pt-20 pb-24 px-4 sm:px-6 lg:pt-28 lg:pb-32 lg:px-8">
219
+ <div class="relative max-w-7xl mx-auto">
220
+ <div class="text-center">
221
+ <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
222
+ Trusted by Property Professionals
223
+ </h2>
224
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
225
+ Join thousands of agents who've transformed their document workflow
226
+ </p>
227
+ </div>
228
+ <div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
229
+ <!-- Testimonial 1 -->
230
+ <div class="flex flex-col rounded-xl shadow-lg overflow-hidden bg-white transform hover:scale-105 transition-transform duration-300">
231
+ <div class="flex-shrink-0 pt-6 px-6">
232
+ <img class="h-16 w-16 rounded-full mx-auto" src="https://www.docubien.ai/assets/sara-0_JSeZMJ.png" alt="Sarah Mitchell">
233
+ </div>
234
+ <div class="flex-1 bg-white p-6 flex flex-col justify-between">
235
+ <div class="flex-1">
236
+ <div class="text-center">
237
+ <p class="text-xl font-semibold text-gray-900">Sarah Mitchell</p>
238
+ <p class="text-sm text-primary">Lettings Manager</p>
239
+ </div>
240
+ <blockquote class="mt-3">
241
+ <p class="text-base text-gray-500">
242
+ "The time savings are incredible – what used to take 20 minutes now takes 2 minutes. Our team loves how it pulls everything straight from our CRM and creates perfect tenancy agreements every time."
243
+ </p>
244
+ </blockquote>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Testimonial 2 -->
250
+ <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white">
251
+ <div class="flex-shrink-0 pt-6 px-6">
252
+ <img class="h-16 w-16 rounded-full mx-auto" src="https://www.docubien.ai/assets/james-CSyIkXv8.png" alt="James Robertson">
253
+ </div>
254
+ <div class="flex-1 bg-white p-6 flex flex-col justify-between">
255
+ <div class="flex-1">
256
+ <div class="text-center">
257
+ <p class="text-xl font-semibold text-gray-900">James Robertson</p>
258
+ <p class="text-sm text-primary">Estate Agent</p>
259
+ </div>
260
+ <blockquote class="mt-3">
261
+ <p class="text-base text-gray-500">
262
+ "Having all our documents centrally controlled means I never worry about agents using outdated contracts. The professional presentation has definitely impressed our vendors."
263
+ </p>
264
+ </blockquote>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Testimonial 3 -->
270
+ <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white">
271
+ <div class="flex-shrink-0 pt-6 px-6">
272
+ <img class="h-16 w-16 rounded-full mx-auto" src="https://www.docubien.ai/assets/mark-B9Rzt6YU.jpg" alt="Mark Johnson">
273
+ </div>
274
+ <div class="flex-1 bg-white p-6 flex flex-col justify-between">
275
+ <div class="flex-1">
276
+ <div class="text-center">
277
+ <p class="text-xl font-semibold text-gray-900">Mark Johnson</p>
278
+ <p class="text-sm text-primary">Landlord</p>
279
+ </div>
280
+ <blockquote class="mt-3">
281
+ <p class="text-base text-gray-500">
282
+ "Professional documents every time. My tenants are impressed with the quality and consistency. The automated formatting saves me hours each week."
283
+ </p>
284
+ </blockquote>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Pricing -->
293
+ <div class="bg-gradient-to-b from-gray-50 to-white">
294
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
295
+ <div class="text-center">
296
+ <h2 class="text-base font-semibold text-primary tracking-wide uppercase">Pricing</h2>
297
+ <p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
298
+ Simple, Transparent Pricing
299
+ </p>
300
+ <p class="max-w-xl mt-5 mx-auto text-xl text-gray-500">
301
+ Everything you need to streamline your document workflow
302
+ </p>
303
+ </div>
304
+
305
+ <div class="mt-12 bg-white rounded-xl shadow-xl overflow-hidden transform hover:scale-102 transition-transform duration-300">
306
+ <div class="px-6 py-8 sm:p-10 sm:pb-6">
307
+ <div class="flex justify-between">
308
+ <h3 class="inline-flex px-4 py-1 rounded-full text-sm font-semibold tracking-wide uppercase bg-white text-gray-800">
309
+ Standard Plan
310
+ </h3>
311
+ <div class="text-3xl font-extrabold text-gray-900">
312
+ £69<span class="ml-1 text-xl font-medium text-gray-500">/month</span>
313
+ </div>
314
+ </div>
315
+ <div class="mt-4">
316
+ <p class="text-base text-gray-500">
317
+ Unlimited documents, full data room functionality, and integrations with your CRM.
318
+ </p>
319
+ </div>
320
+ <div class="mt-6">
321
+ <h4 class="sr-only">Features</h4>
322
+ <ul class="space-y-4">
323
+ <li class="flex items-start">
324
+ <div class="flex-shrink-0">
325
+ <svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
326
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
327
+ </svg>
328
+ </div>
329
+ <p class="ml-3 text-base text-gray-700">5 users included</p>
330
+ </li>
331
+ <li class="flex items-start">
332
+ <div class="flex-shrink-0">
333
+ <svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
334
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
335
+ </svg>
336
+ </div>
337
+ <p class="ml-3 text-base text-gray-700">5 workspaces</p>
338
+ </li>
339
+ <li class="flex items-start">
340
+ <div class="flex-shrink-0">
341
+ <svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
342
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
343
+ </svg>
344
+ </div>
345
+ <p class="ml-3 text-base text-gray-700">Unlimited properties</p>
346
+ </li>
347
+ <li class="flex items-start">
348
+ <div class="flex-shrink-0">
349
+ <svg class="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
350
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
351
+ </svg>
352
+ </div>
353
+ <p class="ml-3 text-base text-gray-700">Unlimited documents</p>
354
+ </li>
355
+ </ul>
356
+ </div>
357
+ </div>
358
+ <div class="px-6 pt-6 pb-8 bg-gray-100 sm:p-10 sm:pt-6">
359
+ <a href="https://www.docubien.ai/register" class="block w-full bg-primary border border-transparent rounded-md py-3 text-center text-base font-medium text-white hover:bg-green-600 shadow">
360
+ Start Your Free Trial
361
+ </a>
362
+ <p class="mt-3 text-sm text-center text-gray-500">
363
+ 3 day free trial • 3 month money-back guarantee
364
+ </p>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- CTA -->
371
+ <div class="bg-gradient-to-r from-primary/5 to-secondary/5">
372
+ <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">
373
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
374
+ <span class="block">Ready to transform your document workflow?</span>
375
+ <span class="block text-primary">Start your free trial today.</span>
376
+ </h2>
377
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
378
+ <div class="inline-flex rounded-md shadow">
379
+ <a href="https://www.docubien.ai/register" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-green-600">
380
+ Get Started
381
+ </a>
382
+ </div>
383
+ <div class="ml-3 inline-flex rounded-md shadow">
384
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50">
385
+ Learn more
386
+ </a>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Footer -->
393
+ <footer class="bg-gradient-to-b from-gray-50 to-white border-t border-gray-100">
394
+ <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
395
+ <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
396
+ <div class="px-5 py-2">
397
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a>
398
+ </div>
399
+ <div class="px-5 py-2">
400
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">Features</a>
401
+ </div>
402
+ <div class="px-5 py-2">
403
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">Pricing</a>
404
+ </div>
405
+ <div class="px-5 py-2">
406
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">Testimonials</a>
407
+ </div>
408
+ <div class="px-5 py-2">
409
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">Contact</a>
410
+ </div>
411
+ <div class="px-5 py-2">
412
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">Privacy</a>
413
+ </div>
414
+ </nav>
415
+ <div class="mt-8 flex justify-center space-x-6">
416
+ <a href="#" class="text-gray-400 hover:text-gray-500">
417
+ <span class="sr-only">Facebook</span>
418
+ <i data-feather="facebook" class="h-6 w-6"></i>
419
+ </a>
420
+ <a href="#" class="text-gray-400 hover:text-gray-500">
421
+ <span class="sr-only">Twitter</span>
422
+ <i data-feather="twitter" class="h-6 w-6"></i>
423
+ </a>
424
+ <a href="#" class="text-gray-400 hover:text-gray-500">
425
+ <span class="sr-only">LinkedIn</span>
426
+ <i data-feather="linkedin" class="h-6 w-6"></i>
427
+ </a>
428
+ </div>
429
+ <p class="mt-8 text-center text-base text-gray-400">
430
+ &copy; 2023 DocuGenius. All rights reserved.
431
+ </p>
432
+ </div>
433
+ </footer>
434
+
435
+ <script>
436
+ feather.replace();
437
+
438
+ // Animation on scroll
439
+ document.addEventListener('DOMContentLoaded', function() {
440
+ const animateOnScroll = function() {
441
+ const elements = document.querySelectorAll('.animate-fadeIn');
442
+ elements.forEach(element => {
443
+ const elementPosition = element.getBoundingClientRect().top;
444
+ const screenPosition = window.innerHeight / 1.3;
445
+
446
+ if (elementPosition < screenPosition) {
447
+ element.style.opacity = '1';
448
+ element.style.transform = 'translateY(0)';
449
+ }
450
+ });
451
+ };
452
+
453
+ // Set initial state for animated elements
454
+ document.querySelectorAll('.animate-fadeIn').forEach(el => {
455
+ el.style.opacity = '0';
456
+ el.style.transform = 'translateY(20px)';
457
+ el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
458
+ });
459
+
460
+ window.addEventListener('scroll', animateOnScroll);
461
+ animateOnScroll(); // Run once on load
462
+ });
463
+ </script>
464
+ </body>
465
  </html>