Hugging Face's logo

Spaces:
LukasBe
/
freelancepro-template
Running

App Files Community
LukasBe commited on
Commit
051f63e
·
verified ·
1 Parent(s): 14c928f

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +117 -72
index.html CHANGED
@@ -3,9 +3,18 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>FreelanceFlow Pro | Award-Winning Freelance Management</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
 
 
 
 
 
 
9
  <script>
10
  tailwind.config = {
11
  theme: {
@@ -60,6 +69,7 @@
60
  font-family: 'Inter', sans-serif;
61
  background-color: #f8fafc;
62
  color: #0f172a;
 
63
  }
64
 
65
  .gradient-bg {
@@ -164,6 +174,16 @@
164
  border-style: solid;
165
  border-color: #0f172a transparent transparent transparent;
166
  }
 
 
 
 
 
 
 
 
 
 
167
  </style>
168
  </head>
169
  <body class="antialiased">
@@ -188,9 +208,9 @@
188
  <span>Dashboard</span>
189
  <span class="ml-1.5 w-2 h-2 bg-primary-200 rounded-full animate-pulse"></span>
190
  </a></li>
191
- <li><a href="#" class="hover:text-primary-100 transition">Projects</a></li>
192
- <li><a href="#" class="hover:text-primary-100 transition">Clients</a></li>
193
- <li><a href="#" class="hover:text-primary-100 transition">Analytics</a></li>
194
  <li>
195
  <div class="tooltip">
196
  <button class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
@@ -209,18 +229,18 @@
209
  <div class="mt-24 text-center max-w-4xl mx-auto">
210
  <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-white/10 text-primary-100 mb-6">
211
  <span class="w-2 h-2 rounded-full bg-primary-200 mr-2 animate-pulse"></span>
212
- Version 3.0 - Now available
213
  </div>
214
- <h2 class="text-5xl font-bold mb-6 leading-tight">Elevate Your <span class="text-primary-200">Freelance</span> Business</h2>
215
- <p class="text-xl text-primary-100 max-w-2xl mx-auto">The most beautiful way to manage client requests, proposals, and payments all in one place.</p>
216
  <div class="mt-10 flex justify-center space-x-4">
217
  <button class="btn-primary text-white px-8 py-3.5 rounded-lg font-medium shadow-lg">
218
- Start Free Trial
219
  <i class="fas fa-arrow-right ml-2"></i>
220
  </button>
221
  <button class="btn-secondary bg-white/10 text-white px-8 py-3.5 rounded-lg font-medium border border-white/20 hover:border-white/30">
222
  <i class="fas fa-play-circle mr-2"></i>
223
- Watch Demo
224
  </button>
225
  </div>
226
  </div>
@@ -228,7 +248,7 @@
228
  <div class="mt-20 mb-10 flex justify-center">
229
  <div class="glass-card p-6 rounded-2xl shadow-hard max-w-4xl w-full">
230
  <div class="flex items-center justify-between mb-6">
231
- <h3 class="font-semibold text-lg">Quick Project Setup</h3>
232
  <div class="flex space-x-2">
233
  <button class="w-8 h-8 rounded-full bg-primary-500 text-white flex items-center justify-center hover:bg-primary-600 transition">
234
  <i class="fas fa-plus text-sm"></i>
@@ -240,28 +260,28 @@
240
  </div>
241
 
242
  <div class="grid md:grid-cols-3 gap-6">
243
- <div class="bg-white p-5 rounded-xl shadow-soft hover-scale">
244
  <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-4">
245
  <i class="fas fa-pen-to-square text-primary-600 text-xl"></i>
246
  </div>
247
- <h4 class="font-medium mb-2">Client Intake</h4>
248
- <p class="text-sm text-gray-500">Collect all client details through beautiful forms</p>
249
  </div>
250
 
251
- <div class="bg-white p-5 rounded-xl shadow-soft hover-scale">
252
  <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mb-4">
253
  <i class="fas fa-file-contract text-blue-600 text-xl"></i>
254
  </div>
255
- <h4 class="font-medium mb-2">Proposals</h4>
256
- <p class="text-sm text-gray-500">Create stunning proposals in minutes</p>
257
  </div>
258
 
259
- <div class="bg-white p-5 rounded-xl shadow-soft hover-scale">
260
  <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mb-4">
261
  <i class="fas fa-credit-card text-green-600 text-xl"></i>
262
  </div>
263
- <h4 class="font-medium mb-2">Payments</h4>
264
- <p class="text-sm text-gray-500">Get paid faster with automated invoicing</p>
265
  </div>
266
  </div>
267
  </div>
@@ -274,8 +294,8 @@
274
  <!-- Workflow Steps -->
275
  <section class="mb-24">
276
  <div class="text-center max-w-2xl mx-auto mb-16">
277
- <h2 class="text-3xl font-bold mb-4">Streamlined <span class="text-primary-600">Workflow</span></h2>
278
- <p class="text-gray-500">Our carefully crafted process ensures nothing falls through the cracks while maintaining a delightful client experience.</p>
279
  </div>
280
 
281
  <div class="relative">
@@ -295,21 +315,21 @@
295
  <div class="lg:grid lg:grid-cols-2 gap-12 items-center mt-8 lg:mt-0">
296
  <div class="lg:pr-24 order-2 lg:order-1">
297
  <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale">
298
- <span class="inline-block text-xs font-semibold px-2.5 py-1 rounded-full bg-primary-50 text-primary-600 mb-3">Step 1</span>
299
- <h3 class="text-xl font-bold mb-3">Client Intake</h3>
300
- <p class="text-gray-500 mb-5">Capture all necessary client and project information through our beautiful, customizable forms that adapt to your service offerings.</p>
301
  <ul class="space-y-3">
302
  <li class="flex items-start">
303
  <i class="fas fa-check-circle text-primary-500 mt-1 mr-3"></i>
304
- <span>Smart form fields that show/hide based on project type</span>
305
  </li>
306
  <li class="flex items-start">
307
  <i class="fas fa-check-circle text-primary-500 mt-1 mr-3"></i>
308
- <span>File uploads with automatic cloud storage</span>
309
  </li>
310
  <li class="flex items-start">
311
  <i class="fas fa-check-circle text-primary-500 mt-1 mr-3"></i>
312
- <span>Mobile-optimized for clients on the go</span>
313
  </li>
314
  </ul>
315
  </div>
@@ -364,21 +384,21 @@
364
  <div class="lg:grid lg:grid-cols-2 gap-12 items-center mt-8 lg:mt-0">
365
  <div class="lg:pl-24 order-2">
366
  <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale">
367
- <span class="inline-block text-xs font-semibold px-2.5 py-1 rounded-full bg-blue-50 text-blue-600 mb-3">Step 2</span>
368
- <h3 class="text-xl font-bold mb-3">Proposals & Contracts</h3>
369
- <p class="text-gray-500 mb-5">Create professional, branded proposals with our template system that automatically includes pricing, timelines, and terms.</p>
370
  <ul class="space-y-3">
371
  <li class="flex items-start">
372
  <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
373
- <span>Pre-designed templates for different services</span>
374
  </li>
375
  <li class="flex items-start">
376
  <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
377
- <span>Automated calculations for pricing options</span>
378
  </li>
379
  <li class="flex items-start">
380
  <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
381
- <span>Electronic signature integration</span>
382
  </li>
383
  </ul>
384
  </div>
@@ -447,21 +467,21 @@
447
  <div class="lg:grid lg:grid-cols-2 gap-12 items-center mt-8 lg:mt-0">
448
  <div class="lg:pr-24 order-2 lg:order-1">
449
  <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale">
450
- <span class="inline-block text-xs font-semibold px-2.5 py-1 rounded-full bg-green-50 text-green-600 mb-3">Step 3</span>
451
- <h3 class="text-xl font-bold mb-3">Payments & Invoicing</h3>
452
- <p class="text-gray-500 mb-5">Get paid faster with automated invoicing, payment reminders, and multiple payment method options for your clients.</p>
453
  <ul class="space-y-3">
454
  <li class="flex items-start">
455
  <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
456
- <span>Accept credit cards, bank transfers, and PayPal</span>
457
  </li>
458
  <li class="flex items-start">
459
  <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
460
- <span>Automated payment reminders</span>
461
  </li>
462
  <li class="flex items-start">
463
  <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
464
- <span>Recurring billing for retainers</span>
465
  </li>
466
  </ul>
467
  </div>
@@ -560,8 +580,8 @@
560
  <!-- Client Testimonials -->
561
  <section class="mb-24">
562
  <div class="text-center max-w-2xl mx-auto mb-12">
563
- <h2 class="text-3xl font-bold mb-4">Trusted by <span class="text-primary-600">Freelancers</span> Worldwide</h2>
564
- <p class="text-gray-500">Join thousands of professionals who have streamlined their freelance business</p>
565
  </div>
566
 
567
  <div class="grid md:grid-cols-3 gap-8">
@@ -572,16 +592,19 @@
572
  </div>
573
  <div>
574
  <h4 class="font-bold">Sarah Johnson</h4>
575
- <p class="text-sm text-gray-500">UI/UX Designer</p>
576
  </div>
577
  </div>
578
- <p class="text-gray-600 mb-6">"FreelanceFlow Pro has completely transformed how I manage client projects. The proposal templates alone have saved me 10+ hours per month."</p>
579
- <div class="flex">
580
- <i class="fas fa-star text-yellow-400"></i>
581
- <i class="fas fa-star text-yellow-400"></i>
582
- <i class="fas fa-star text-yellow-400"></i>
583
- <i class="fas fa-star text-yellow-400"></i>
584
- <i class="fas fa-star text-yellow-400"></i>
 
 
 
585
  </div>
586
  </div>
587
 
@@ -592,16 +615,19 @@
592
  </div>
593
  <div>
594
  <h4 class="font-bold">Michael Chen</h4>
595
- <p class="text-sm text-gray-500">Web Developer</p>
596
  </div>
597
  </div>
598
- <p class="text-gray-600 mb-6">"The payment automation features have helped me get paid 30% faster. My clients love the professional invoices and easy payment options."</p>
599
- <div class="flex">
600
- <i class="fas fa-star text-yellow-400"></i>
601
- <i class="fas fa-star text-yellow-400"></i>
602
- <i class="fas fa-star text-yellow-400"></i>
603
- <i class="fas fa-star text-yellow-400"></i>
604
- <i class="fas fa-star text-yellow-400"></i>
 
 
 
605
  </div>
606
  </div>
607
 
@@ -612,16 +638,19 @@
612
  </div>
613
  <div>
614
  <h4 class="font-bold">Emma Rodriguez</h4>
615
- <p class="text-sm text-gray-500">Marketing Consultant</p>
616
  </div>
617
  </div>
618
- <p class="text-gray-600 mb-6">"As someone who manages multiple retainers, the recurring billing and client portal features are game-changers. Highly recommend!"</p>
619
- <div class="flex">
620
- <i class="fas fa-star text-yellow-400"></i>
621
- <i class="fas fa-star text-yellow-400"></i>
622
- <i class="fas fa-star text-yellow-400"></i>
623
- <i class="fas fa-star text-yellow-400"></i>
624
- <i class="fas fa-star text-yellow-400"></i>
 
 
 
625
  </div>
626
  </div>
627
  </div>
@@ -633,17 +662,18 @@
633
  <div class="absolute top-0 right-0 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>
634
  <div class="relative z-10 max-w-3xl mx-auto text-center">
635
  <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Freelance Business?</h2>
636
- <p class="text-lg text-primary-100 mb-8">Join thousands of freelancers who have streamlined their workflow and grown their business with FreelanceFlow Pro.</p>
637
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
638
  <button class="btn-primary text-white px-8 py-3.5 rounded-lg font-medium shadow-lg">
639
- Start 14-Day Free Trial
640
  <i class="fas fa-arrow-right ml-2"></i>
641
  </button>
642
  <button class="btn-secondary bg-white/10 text-white px-8 py-3.5 rounded-lg font-medium border border-white/20 hover:border-white/30">
643
  <i class="fas fa-comment-dots mr-2"></i>
644
- Chat with Sales
645
  </button>
646
  </div>
 
647
  </div>
648
  </div>
649
  </section>
@@ -660,7 +690,7 @@
660
  </div>
661
  <h3 class="text-xl font-bold">FreelanceFlow<span class="text-primary-400">Pro</span></h3>
662
  </div>
663
- <p class="text-gray-400 mb-6">The most beautiful way to manage your freelance business from request to delivery.</p>
664
  <div class="flex space-x-4">
665
  <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 transition flex items-center justify-center">
666
  <i class="fab fa-twitter"></i>
@@ -684,16 +714,18 @@
684
  <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
685
  <li><a href="#" class="text-gray-400 hover:text-white transition">Templates</a></li>
686
  <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li>
 
687
  </ul>
688
  </div>
689
 
690
  <div>
691
  <h4 class="font-semibold text-lg mb-4">Resources</h4>
692
  <ul class="space-y-3">
693
- <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
694
- <li><a href="#" class="text-gray-400 hover:text-white transition">Guides</a></li>
695
  <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
696
  <li><a href="#" class="text-gray-400 hover:text-white transition">Webinars</a></li>
 
697
  </ul>
698
  </div>
699
 
@@ -704,8 +736,20 @@
704
  <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
705
  <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
706
  <li><a href="#" class="text-gray-400 hover:text-white transition">Legal</a></li>
 
707
  </ul>
708
  </div>
 
 
 
 
 
 
 
 
 
 
 
709
  </div>
710
 
711
  <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
@@ -713,7 +757,8 @@
713
  <div class="flex space-x-6">
714
  <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
715
  <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
716
- <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
 
717
  </div>
718
  </div>
719
  </div>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FreelanceFlow Pro | The Operating System for Modern Freelancers</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <meta name="description" content="The all-in-one platform that helps elite freelancers streamline operations, impress clients, and get paid faster. Join 25,000+ professionals who've automated their freelance business.">
10
+
11
+ <!-- Open Graph / Social Media Meta Tags -->
12
+ <meta property="og:title" content="FreelanceFlow Pro | The Operating System for Modern Freelancers">
13
+ <meta property="og:description" content="The all-in-one platform that helps elite freelancers streamline operations, impress clients, and get paid faster.">
14
+ <meta property="og:type" content="website">
15
+ <meta property="og:url" content="https://freelanceflowpro.com">
16
+ <meta property="og:image" content="https://freelanceflowpro.com/images/social-preview.jpg">
17
+
18
  <script>
19
  tailwind.config = {
20
  theme: {
 
69
  font-family: 'Inter', sans-serif;
70
  background-color: #f8fafc;
71
  color: #0f172a;
72
+ scroll-behavior: smooth;
73
  }
74
 
75
  .gradient-bg {
 
174
  border-style: solid;
175
  border-color: #0f172a transparent transparent transparent;
176
  }
177
+
178
+ .value-prop-card {
179
+ transition: all 0.3s ease;
180
+ border-left: 4px solid transparent;
181
+ }
182
+
183
+ .value-prop-card:hover {
184
+ border-left-color: #8b5cf6;
185
+ transform: translateX(4px);
186
+ }
187
  </style>
188
  </head>
189
  <body class="antialiased">
 
208
  <span>Dashboard</span>
209
  <span class="ml-1.5 w-2 h-2 bg-primary-200 rounded-full animate-pulse"></span>
210
  </a></li>
211
+ <li><a href="#" class="hover:text-primary-100 transition">Solutions</a></li>
212
+ <li><a href="#" class="hover:text-primary-100 transition">Pricing</a></li>
213
+ <li><a href="#" class="hover:text-primary-100 transition">Resources</a></li>
214
  <li>
215
  <div class="tooltip">
216
  <button class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
 
229
  <div class="mt-24 text-center max-w-4xl mx-auto">
230
  <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-white/10 text-primary-100 mb-6">
231
  <span class="w-2 h-2 rounded-full bg-primary-200 mr-2 animate-pulse"></span>
232
+ Trusted by 25,000+ elite freelancers worldwide
233
  </div>
234
+ <h2 class="text-5xl font-bold mb-6 leading-tight">The Operating System for <span class="text-primary-200">Modern Freelancers</span></h2>
235
+ <p class="text-xl text-primary-100 max-w-2xl mx-auto">Automate your admin work, impress clients with professional systems, and focus on what matters most—your craft.</p>
236
  <div class="mt-10 flex justify-center space-x-4">
237
  <button class="btn-primary text-white px-8 py-3.5 rounded-lg font-medium shadow-lg">
238
+ Get Started Free
239
  <i class="fas fa-arrow-right ml-2"></i>
240
  </button>
241
  <button class="btn-secondary bg-white/10 text-white px-8 py-3.5 rounded-lg font-medium border border-white/20 hover:border-white/30">
242
  <i class="fas fa-play-circle mr-2"></i>
243
+ See Platform Demo
244
  </button>
245
  </div>
246
  </div>
 
248
  <div class="mt-20 mb-10 flex justify-center">
249
  <div class="glass-card p-6 rounded-2xl shadow-hard max-w-4xl w-full">
250
  <div class="flex items-center justify-between mb-6">
251
+ <h3 class="font-semibold text-lg">Your Business. Automated.</h3>
252
  <div class="flex space-x-2">
253
  <button class="w-8 h-8 rounded-full bg-primary-500 text-white flex items-center justify-center hover:bg-primary-600 transition">
254
  <i class="fas fa-plus text-sm"></i>
 
260
  </div>
261
 
262
  <div class="grid md:grid-cols-3 gap-6">
263
+ <div class="bg-white p-5 rounded-xl shadow-soft hover-scale value-prop-card">
264
  <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-4">
265
  <i class="fas fa-pen-to-square text-primary-600 text-xl"></i>
266
  </div>
267
+ <h4 class="font-medium mb-2">Client Onboarding</h4>
268
+ <p class="text-sm text-gray-500">Convert more leads with beautiful, automated intake forms that adapt to your services</p>
269
  </div>
270
 
271
+ <div class="bg-white p-5 rounded-xl shadow-soft hover-scale value-prop-card">
272
  <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mb-4">
273
  <i class="fas fa-file-contract text-blue-600 text-xl"></i>
274
  </div>
275
+ <h4 class="font-medium mb-2">Smart Proposals</h4>
276
+ <p class="text-sm text-gray-500">Close deals faster with dynamic proposals that calculate pricing and terms automatically</p>
277
  </div>
278
 
279
+ <div class="bg-white p-5 rounded-xl shadow-soft hover-scale value-prop-card">
280
  <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mb-4">
281
  <i class="fas fa-credit-card text-green-600 text-xl"></i>
282
  </div>
283
+ <h4 class="font-medium mb-2">Frictionless Payments</h4>
284
+ <p class="text-sm text-gray-500">Get paid 2x faster with automated invoicing and multiple payment options</p>
285
  </div>
286
  </div>
287
  </div>
 
294
  <!-- Workflow Steps -->
295
  <section class="mb-24">
296
  <div class="text-center max-w-2xl mx-auto mb-16">
297
+ <h2 class="text-3xl font-bold mb-4">The <span class="text-primary-600">FreelanceFlow Pro</span> Advantage</h2>
298
+ <p class="text-gray-500">We've rebuilt the freelance toolkit from the ground up to help you work smarter, not harder.</p>
299
  </div>
300
 
301
  <div class="relative">
 
315
  <div class="lg:grid lg:grid-cols-2 gap-12 items-center mt-8 lg:mt-0">
316
  <div class="lg:pr-24 order-2 lg:order-1">
317
  <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale">
318
+ <span class="inline-block text-xs font-semibold px-2.5 py-1 rounded-full bg-primary-50 text-primary-600 mb-3">Client Experience</span>
319
+ <h3 class="text-xl font-bold mb-3">First Impressions That Convert</h3>
320
+ <p class="text-gray-500 mb-5">Your clients deserve a professional experience from day one. Our automated intake system makes you look like you have a full team behind you, even if it's just you.</p>
321
  <ul class="space-y-3">
322
  <li class="flex items-start">
323
  <i class="fas fa-check-circle text-primary-500 mt-1 mr-3"></i>
324
+ <span>Branded client portals that build trust</span>
325
  </li>
326
  <li class="flex items-start">
327
  <i class="fas fa-check-circle text-primary-500 mt-1 mr-3"></i>
328
+ <span>Smart conditional logic that adapts to project types</span>
329
  </li>
330
  <li class="flex items-start">
331
  <i class="fas fa-check-circle text-primary-500 mt-1 mr-3"></i>
332
+ <span>Automated follow-ups that never let leads slip</span>
333
  </li>
334
  </ul>
335
  </div>
 
384
  <div class="lg:grid lg:grid-cols-2 gap-12 items-center mt-8 lg:mt-0">
385
  <div class="lg:pl-24 order-2">
386
  <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale">
387
+ <span class="inline-block text-xs font-semibold px-2.5 py-1 rounded-full bg-blue-50 text-blue-600 mb-3">Sales Conversion</span>
388
+ <h3 class="text-xl font-bold mb-3">Proposals That Close Themselves</h3>
389
+ <p class="text-gray-500 mb-5">Stop leaving money on the table with generic proposals. Our dynamic templates adjust pricing, deliverables, and timelines based on client needs—automatically.</p>
390
  <ul class="space-y-3">
391
  <li class="flex items-start">
392
  <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
393
+ <span>Interactive pricing calculators built-in</span>
394
  </li>
395
  <li class="flex items-start">
396
  <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
397
+ <span>One-click contract generation with e-signature</span>
398
  </li>
399
  <li class="flex items-start">
400
  <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i>
401
+ <span>Automated follow-ups that increase close rates by 37%</span>
402
  </li>
403
  </ul>
404
  </div>
 
467
  <div class="lg:grid lg:grid-cols-2 gap-12 items-center mt-8 lg:mt-0">
468
  <div class="lg:pr-24 order-2 lg:order-1">
469
  <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale">
470
+ <span class="inline-block text-xs font-semibold px-2.5 py-1 rounded-full bg-green-50 text-green-600 mb-3">Cash Flow</span>
471
+ <h3 class="text-xl font-bold mb-3">Get Paid Like Clockwork</h3>
472
+ <p class="text-gray-500 mb-5">Cash flow is the lifeblood of your business. Our payment automation ensures you never have to chase another invoice again.</p>
473
  <ul class="space-y-3">
474
  <li class="flex items-start">
475
  <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
476
+ <span>Automated payment reminders reduce late payments by 72%</span>
477
  </li>
478
  <li class="flex items-start">
479
  <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
480
+ <span>Recurring billing for retainers with smart usage tracking</span>
481
  </li>
482
  <li class="flex items-start">
483
  <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
484
+ <span>Multi-currency support for global clients</span>
485
  </li>
486
  </ul>
487
  </div>
 
580
  <!-- Client Testimonials -->
581
  <section class="mb-24">
582
  <div class="text-center max-w-2xl mx-auto mb-12">
583
+ <h2 class="text-3xl font-bold mb-4">Join <span class="text-primary-600">25,000+</span> Freelancers Who've Automated Their Business</h2>
584
+ <p class="text-gray-500">Don't just take our word for it—here's what our customers say about transforming their freelance operations</p>
585
  </div>
586
 
587
  <div class="grid md:grid-cols-3 gap-8">
 
592
  </div>
593
  <div>
594
  <h4 class="font-bold">Sarah Johnson</h4>
595
+ <p class="text-sm text-gray-500">UI/UX Designer • 6 years freelancing</p>
596
  </div>
597
  </div>
598
+ <p class="text-gray-600 mb-6">"Since implementing FreelanceFlow Pro, I've reduced my admin time by 70% while increasing my average project size by 40%. The professional systems have allowed me to compete with agencies for premium clients."</p>
599
+ <div class="flex items-center">
600
+ <div class="flex mr-4">
601
+ <i class="fas fa-star text-yellow-400"></i>
602
+ <i class="fas fa-star text-yellow-400"></i>
603
+ <i class="fas fa-star text-yellow-400"></i>
604
+ <i class="fas fa-star text-yellow-400"></i>
605
+ <i class="fas fa-star text-yellow-400"></i>
606
+ </div>
607
+ <span class="text-xs text-gray-400">2+ years using FFP</span>
608
  </div>
609
  </div>
610
 
 
615
  </div>
616
  <div>
617
  <h4 class="font-bold">Michael Chen</h4>
618
+ <p class="text-sm text-gray-500">Web Developer • 4 years freelancing</p>
619
  </div>
620
  </div>
621
+ <p class="text-gray-600 mb-6">"The payment automation alone has been worth 10x the price. I went from spending 5-10 hours per month chasing invoices to getting paid automatically. My cash flow has never been more consistent."</p>
622
+ <div class="flex items-center">
623
+ <div class="flex mr-4">
624
+ <i class="fas fa-star text-yellow-400"></i>
625
+ <i class="fas fa-star text-yellow-400"></i>
626
+ <i class="fas fa-star text-yellow-400"></i>
627
+ <i class="fas fa-star text-yellow-400"></i>
628
+ <i class="fas fa-star text-yellow-400"></i>
629
+ </div>
630
+ <span class="text-xs text-gray-400">18 months using FFP</span>
631
  </div>
632
  </div>
633
 
 
638
  </div>
639
  <div>
640
  <h4 class="font-bold">Emma Rodriguez</h4>
641
+ <p class="text-sm text-gray-500">Marketing Consultant • 8 years freelancing</p>
642
  </div>
643
  </div>
644
+ <p class="text-gray-600 mb-6">"The client portal has completely changed how my clients perceive me. They think I've hired a team! My retention rates have doubled and I'm now able to focus on strategy rather than admin work."</p>
645
+ <div class="flex items-center">
646
+ <div class="flex mr-4">
647
+ <i class="fas fa-star text-yellow-400"></i>
648
+ <i class="fas fa-star text-yellow-400"></i>
649
+ <i class="fas fa-star text-yellow-400"></i>
650
+ <i class="fas fa-star text-yellow-400"></i>
651
+ <i class="fas fa-star text-yellow-400"></i>
652
+ </div>
653
+ <span class="text-xs text-gray-400">3+ years using FFP</span>
654
  </div>
655
  </div>
656
  </div>
 
662
  <div class="absolute top-0 right-0 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>
663
  <div class="relative z-10 max-w-3xl mx-auto text-center">
664
  <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Freelance Business?</h2>
665
+ <p class="text-lg text-primary-100 mb-8">Start your 14-day free trial today. No credit card required. Cancel anytime.</p>
666
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
667
  <button class="btn-primary text-white px-8 py-3.5 rounded-lg font-medium shadow-lg">
668
+ Start Free Trial
669
  <i class="fas fa-arrow-right ml-2"></i>
670
  </button>
671
  <button class="btn-secondary bg-white/10 text-white px-8 py-3.5 rounded-lg font-medium border border-white/20 hover:border-white/30">
672
  <i class="fas fa-comment-dots mr-2"></i>
673
+ Book Demo
674
  </button>
675
  </div>
676
+ <p class="text-sm text-primary-100 mt-4">Join 25,000+ freelancers who've automated their business</p>
677
  </div>
678
  </div>
679
  </section>
 
690
  </div>
691
  <h3 class="text-xl font-bold">FreelanceFlow<span class="text-primary-400">Pro</span></h3>
692
  </div>
693
+ <p class="text-gray-400 mb-6">The all-in-one platform for elite freelancers to automate operations, impress clients, and get paid faster.</p>
694
  <div class="flex space-x-4">
695
  <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 transition flex items-center justify-center">
696
  <i class="fab fa-twitter"></i>
 
714
  <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
715
  <li><a href="#" class="text-gray-400 hover:text-white transition">Templates</a></li>
716
  <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li>
717
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Roadmap</a></li>
718
  </ul>
719
  </div>
720
 
721
  <div>
722
  <h4 class="font-semibold text-lg mb-4">Resources</h4>
723
  <ul class="space-y-3">
724
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Freelance Academy</a></li>
725
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li>
726
  <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
727
  <li><a href="#" class="text-gray-400 hover:text-white transition">Webinars</a></li>
728
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li>
729
  </ul>
730
  </div>
731
 
 
736
  <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
737
  <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
738
  <li><a href="#" class="text-gray-400 hover:text-white transition">Legal</a></li>
739
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li>
740
  </ul>
741
  </div>
742
+
743
+ <div>
744
+ <h4 class="font-semibold text-lg mb-4">Stay Updated</h4>
745
+ <p class="text-gray-400 mb-4">Subscribe to our newsletter for freelance growth tips</p>
746
+ <div class="flex">
747
+ <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary-500 w-full">
748
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-r-lg">
749
+ <i class="fas fa-paper-plane"></i>
750
+ </button>
751
+ </div>
752
+ </div>
753
  </div>
754
 
755
  <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
 
757
  <div class="flex space-x-6">
758
  <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
759
  <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
760
+ <a href="#" class="text-gray-400 hover:text-white transition">Security</a>
761
+ <a href="#" class="text-gray-400 hover:text-white transition">GDPR</a>
762
  </div>
763
  </div>
764
  </div>