Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FreelanceFlow Pro | The Operating System for Modern Freelancers</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <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."> | |
| <!-- Open Graph / Social Media Meta Tags --> | |
| <meta property="og:title" content="FreelanceFlow Pro | The Operating System for Modern Freelancers"> | |
| <meta property="og:description" content="The all-in-one platform that helps elite freelancers streamline operations, impress clients, and get paid faster."> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:url" content="https://freelanceflowpro.com"> | |
| <meta property="og:image" content="https://freelanceflowpro.com/images/social-preview.jpg"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| }, | |
| dark: '#0f172a', | |
| light: '#f8fafc', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| display: ['Calibre', 'Inter', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'fade-in': 'fadeIn 0.5s ease-out', | |
| 'gradient-x': 'gradientX 15s ease infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| fadeIn: { | |
| '0%': { opacity: '0', transform: 'translateY(10px)' }, | |
| '100%': { opacity: '1', transform: 'translateY(0)' }, | |
| }, | |
| gradientX: { | |
| '0%, 100%': { 'background-position': '0% 50%' }, | |
| '50%': { 'background-position': '100% 50%' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| color: #0f172a; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); | |
| background-size: 200% 200%; | |
| animation: gradientX 15s ease infinite; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .shadow-soft { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02); | |
| } | |
| .shadow-hard { | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); | |
| } | |
| .hover-scale { | |
| transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| .hover-scale:hover { | |
| transform: translateY(-4px) scale(1.01); | |
| } | |
| .progress-bar { | |
| transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| .input-focus { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .input-focus:focus { | |
| box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn-secondary { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .btn-secondary:hover { | |
| background-color: rgba(15, 23, 42, 0.05); | |
| transform: translateY(-1px); | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .tooltip-text { | |
| visibility: hidden; | |
| opacity: 0; | |
| transform: translateY(5px); | |
| transition: all 0.2s ease; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: #0f172a; | |
| color: white; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| white-space: nowrap; | |
| } | |
| .tooltip-text:after { | |
| content: ""; | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| margin-left: -5px; | |
| border-width: 5px; | |
| border-style: solid; | |
| border-color: #0f172a transparent transparent transparent; | |
| } | |
| .value-prop-card { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .value-prop-card:hover { | |
| border-left-color: #8b5cf6; | |
| transform: translateX(4px); | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute top-0 right-0 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-float"></div> | |
| <div class="absolute bottom-0 left-0 w-64 h-64 bg-indigo-300 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-float" style="animation-delay: 2s;"></div> | |
| </div> | |
| <div class="container mx-auto px-6 py-12 relative z-10"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-bezier-curve text-white text-lg"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold tracking-tight">FreelanceFlow<span class="text-primary-200">Pro</span></h1> | |
| </div> | |
| <nav class="hidden md:block"> | |
| <ul class="flex space-x-8"> | |
| <li><a href="#" class="hover:text-primary-100 transition flex items-center"> | |
| <span>Dashboard</span> | |
| <span class="ml-1.5 w-2 h-2 bg-primary-200 rounded-full animate-pulse"></span> | |
| </a></li> | |
| <li><a href="#" class="hover:text-primary-100 transition">Solutions</a></li> | |
| <li><a href="#" class="hover:text-primary-100 transition">Pricing</a></li> | |
| <li><a href="#" class="hover:text-primary-100 transition">Resources</a></li> | |
| <li> | |
| <div class="tooltip"> | |
| <button class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| <span class="tooltip-text">More options</span> | |
| </div> | |
| </li> | |
| </ul> | |
| </nav> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="mt-24 text-center max-w-4xl mx-auto"> | |
| <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-white/10 text-primary-100 mb-6"> | |
| <span class="w-2 h-2 rounded-full bg-primary-200 mr-2 animate-pulse"></span> | |
| Trusted by 25,000+ elite freelancers worldwide | |
| </div> | |
| <h2 class="text-5xl font-bold mb-6 leading-tight">The Operating System for <span class="text-primary-200">Modern Freelancers</span></h2> | |
| <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> | |
| <div class="mt-10 flex justify-center space-x-4"> | |
| <button class="btn-primary text-white px-8 py-3.5 rounded-lg font-medium shadow-lg"> | |
| Get Started Free | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <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"> | |
| <i class="fas fa-play-circle mr-2"></i> | |
| See Platform Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-20 mb-10 flex justify-center"> | |
| <div class="glass-card p-6 rounded-2xl shadow-hard max-w-4xl w-full"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="font-semibold text-lg">Your Business. Automated.</h3> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-primary-500 text-white flex items-center justify-center hover:bg-primary-600 transition"> | |
| <i class="fas fa-plus text-sm"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition"> | |
| <i class="fas fa-ellipsis-h text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-5 rounded-xl shadow-soft hover-scale value-prop-card"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-pen-to-square text-primary-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium mb-2">Client Onboarding</h4> | |
| <p class="text-sm text-gray-500">Convert more leads with beautiful, automated intake forms that adapt to your services</p> | |
| </div> | |
| <div class="bg-white p-5 rounded-xl shadow-soft hover-scale value-prop-card"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-file-contract text-blue-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium mb-2">Smart Proposals</h4> | |
| <p class="text-sm text-gray-500">Close deals faster with dynamic proposals that calculate pricing and terms automatically</p> | |
| </div> | |
| <div class="bg-white p-5 rounded-xl shadow-soft hover-scale value-prop-card"> | |
| <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-credit-card text-green-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium mb-2">Frictionless Payments</h4> | |
| <p class="text-sm text-gray-500">Get paid 2x faster with automated invoicing and multiple payment options</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-6 py-16"> | |
| <!-- Workflow Steps --> | |
| <section class="mb-24"> | |
| <div class="text-center max-w-2xl mx-auto mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">The <span class="text-primary-600">FreelanceFlow Pro</span> Advantage</h2> | |
| <p class="text-gray-500">We've rebuilt the freelance toolkit from the ground up to help you work smarter, not harder.</p> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline --> | |
| <div class="hidden lg:block absolute left-1/2 top-0 h-full w-0.5 bg-gradient-to-b from-primary-100 to-primary-300 transform -translate-x-1/2"></div> | |
| <!-- Steps --> | |
| <div class="space-y-16 lg:space-y-24"> | |
| <!-- Step 1 --> | |
| <div class="relative group"> | |
| <div class="lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2 lg:-translate-y-1/2 top-1/2 w-16 h-16 rounded-2xl bg-white shadow-hard flex items-center justify-center z-10 mx-auto lg:mx-0"> | |
| <div class="w-12 h-12 rounded-xl bg-primary-100 flex items-center justify-center text-primary-600 text-xl"> | |
| <i class="fas fa-pen-to-square"></i> | |
| </div> | |
| </div> | |
| <div class="lg:grid lg:grid-cols-2 gap-12 items-center mt-8 lg:mt-0"> | |
| <div class="lg:pr-24 order-2 lg:order-1"> | |
| <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-3">First Impressions That Convert</h3> | |
| <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> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary-500 mt-1 mr-3"></i> | |
| <span>Branded client portals that build trust</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary-500 mt-1 mr-3"></i> | |
| <span>Smart conditional logic that adapts to project types</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-primary-500 mt-1 mr-3"></i> | |
| <span>Automated follow-ups that never let leads slip</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="order-1 lg:order-2 mb-8 lg:mb-0"> | |
| <div class="bg-gradient-to-br from-primary-50 to-white p-1 rounded-2xl shadow-soft"> | |
| <div class="bg-white rounded-xl overflow-hidden"> | |
| <div class="bg-primary-600 text-white px-4 py-2.5 flex items-center"> | |
| <div class="flex space-x-1.5 mr-3"> | |
| <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span> | |
| <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span> | |
| <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span> | |
| </div> | |
| <span class="text-xs font-medium">New Client Request</span> | |
| </div> | |
| <div class="p-5"> | |
| <div class="mb-4"> | |
| <label class="block text-xs font-medium text-gray-500 mb-1">Client Name</label> | |
| <div class="h-9 bg-gray-50 rounded-lg"></div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-xs font-medium text-gray-500 mb-1">Email Address</label> | |
| <div class="h-9 bg-gray-50 rounded-lg"></div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-xs font-medium text-gray-500 mb-1">Project Type</label> | |
| <div class="h-9 bg-gray-50 rounded-lg"></div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-xs font-medium text-gray-500 mb-1">Project Details</label> | |
| <div class="h-20 bg-gray-50 rounded-lg"></div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <div class="h-9 w-24 bg-primary-600 rounded-lg"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="relative group"> | |
| <div class="lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2 lg:-translate-y-1/2 top-1/2 w-16 h-16 rounded-2xl bg-white shadow-hard flex items-center justify-center z-10 mx-auto lg:mx-0"> | |
| <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center text-blue-600 text-xl"> | |
| <i class="fas fa-file-contract"></i> | |
| </div> | |
| </div> | |
| <div class="lg:grid lg:grid-cols-2 gap-12 items-center mt-8 lg:mt-0"> | |
| <div class="lg:pl-24 order-2"> | |
| <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-3">Proposals That Close Themselves</h3> | |
| <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> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i> | |
| <span>Interactive pricing calculators built-in</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i> | |
| <span>One-click contract generation with e-signature</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i> | |
| <span>Automated follow-ups that increase close rates by 37%</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="order-1 mb-8 lg:mb-0"> | |
| <div class="bg-gradient-to-br from-blue-50 to-white p-1 rounded-2xl shadow-soft"> | |
| <div class="bg-white rounded-xl overflow-hidden"> | |
| <div class="bg-blue-600 text-white px-4 py-2.5 flex items-center"> | |
| <div class="flex space-x-1.5 mr-3"> | |
| <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span> | |
| <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span> | |
| <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span> | |
| </div> | |
| <span class="text-xs font-medium">Proposal for Acme Corp</span> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <div class="h-4 w-32 bg-blue-100 rounded mb-2"></div> | |
| <div class="h-3 w-24 bg-gray-100 rounded"></div> | |
| </div> | |
| <div class="h-10 w-10 rounded-full bg-blue-100"></div> | |
| </div> | |
| <div class="space-y-4 mb-6"> | |
| <div class="h-3 w-full bg-gray-100 rounded"></div> | |
| <div class="h-3 w-4/5 bg-gray-100 rounded"></div> | |
| <div class="h-3 w-3/5 bg-gray-100 rounded"></div> | |
| </div> | |
| <div class="border-t border-b border-gray-100 py-4 my-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="h-3 w-20 bg-gray-100 rounded"></div> | |
| <div class="h-3 w-12 bg-gray-100 rounded"></div> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="h-3 w-24 bg-gray-100 rounded"></div> | |
| <div class="h-3 w-12 bg-gray-100 rounded"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="h-3 w-20 bg-gray-100 rounded"></div> | |
| <div class="h-3 w-12 bg-gray-100 rounded"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="h-3 w-16 bg-gray-100 rounded"></div> | |
| <div class="h-3 w-16 bg-blue-100 rounded"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="relative group"> | |
| <div class="lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2 lg:-translate-y-1/2 top-1/2 w-16 h-16 rounded-2xl bg-white shadow-hard flex items-center justify-center z-10 mx-auto lg:mx-0"> | |
| <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center text-green-600 text-xl"> | |
| <i class="fas fa-credit-card"></i> | |
| </div> | |
| </div> | |
| <div class="lg:grid lg:grid-cols-2 gap-12 items-center mt-8 lg:mt-0"> | |
| <div class="lg:pr-24 order-2 lg:order-1"> | |
| <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale"> | |
| <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> | |
| <h3 class="text-xl font-bold mb-3">Get Paid Like Clockwork</h3> | |
| <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> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Automated payment reminders reduce late payments by 72%</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Recurring billing for retainers with smart usage tracking</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Multi-currency support for global clients</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="order-1 lg:order-2 mb-8 lg:mb-0"> | |
| <div class="bg-gradient-to-br from-green-50 to-white p-1 rounded-2xl shadow-soft"> | |
| <div class="bg-white rounded-xl overflow-hidden"> | |
| <div class="bg-green-600 text-white px-4 py-2.5 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex space-x-1.5 mr-3"> | |
| <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span> | |
| <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span> | |
| <span class="w-2.5 h-2.5 rounded-full bg-white/30"></span> | |
| </div> | |
| <span class="text-xs font-medium">Invoice #1001</span> | |
| </div> | |
| <span class="text-xs font-medium">$3,200.00</span> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <div class="h-4 w-32 bg-green-100 rounded mb-2"></div> | |
| <div class="h-3 w-24 bg-gray-100 rounded"></div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="h-3 w-20 bg-gray-100 rounded mb-2"></div> | |
| <div class="h-3 w-16 bg-gray-100 rounded"></div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-100 rounded-lg overflow-hidden mb-4"> | |
| <div class="bg-gray-50 px-3 py-2.5 flex"> | |
| <div class="w-8/12 text-xs font-medium text-gray-500">Description</div> | |
| <div class="w-2/12 text-xs font-medium text-gray-500 text-center">Qty</div> | |
| <div class="w-2/12 text-xs font-medium text-gray-500 text-right">Amount</div> | |
| </div> | |
| <div class="divide-y divide-gray-100"> | |
| <div class="px-3 py-3 flex items-center"> | |
| <div class="w-8/12"> | |
| <div class="h-3 w-4/5 bg-gray-100 rounded mb-1"></div> | |
| <div class="h-2 w-3/5 bg-gray-100 rounded"></div> | |
| </div> | |
| <div class="w-2/12 text-center"> | |
| <div class="h-3 w-4 bg-gray-100 rounded mx-auto"></div> | |
| </div> | |
| <div class="w-2/12 text-right"> | |
| <div class="h-3 w-10 bg-gray-100 rounded ml-auto"></div> | |
| </div> | |
| </div> | |
| <div class="px-3 py-3 flex items-center"> | |
| <div class="w-8/12"> | |
| <div class="h-3 w-3/5 bg-gray-100 rounded mb-1"></div> | |
| <div class="h-2 w-2/5 bg-gray-100 rounded"></div> | |
| </div> | |
| <div class="w-2/12 text-center"> | |
| <div class="h-3 w-4 bg-gray-100 rounded mx-auto"></div> | |
| </div> | |
| <div class="w-2/12 text-right"> | |
| <div class="h-3 w-10 bg-gray-100 rounded ml-auto"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <div class="w-32"> | |
| <div class="flex justify-between mb-1"> | |
| <div class="h-3 w-12 bg-gray-100 rounded"></div> | |
| <div class="h-3 w-10 bg-gray-100 rounded"></div> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <div class="h-3 w-16 bg-gray-100 rounded"></div> | |
| <div class="h-3 w-10 bg-gray-100 rounded"></div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div class="h-3 w-12 bg-gray-100 rounded"></div> | |
| <div class="h-3 w-14 bg-green-100 rounded"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-100"> | |
| <div class="h-10 w-full bg-green-600 rounded-lg"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Client Testimonials --> | |
| <section class="mb-24"> | |
| <div class="text-center max-w-2xl mx-auto mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Join <span class="text-primary-600">25,000+</span> Freelancers Who've Automated Their Business</h2> | |
| <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> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-primary-600 text-xl mr-4"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">UI/UX Designer • 6 years freelancing</p> | |
| </div> | |
| </div> | |
| <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> | |
| <div class="flex items-center"> | |
| <div class="flex mr-4"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| <span class="text-xs text-gray-400">2+ years using FFP</span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-xl mr-4"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <p class="text-sm text-gray-500">Web Developer • 4 years freelancing</p> | |
| </div> | |
| </div> | |
| <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> | |
| <div class="flex items-center"> | |
| <div class="flex mr-4"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| <span class="text-xs text-gray-400">18 months using FFP</span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-soft hover-scale"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-xl mr-4"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Emma Rodriguez</h4> | |
| <p class="text-sm text-gray-500">Marketing Consultant • 8 years freelancing</p> | |
| </div> | |
| </div> | |
| <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> | |
| <div class="flex items-center"> | |
| <div class="flex mr-4"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| <span class="text-xs text-gray-400">3+ years using FFP</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white rounded-3xl overflow-hidden"> | |
| <div class="container mx-auto px-8 py-16 relative"> | |
| <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> | |
| <div class="relative z-10 max-w-3xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Freelance Business?</h2> | |
| <p class="text-lg text-primary-100 mb-8">Start your 14-day free trial today. No credit card required. Cancel anytime.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="btn-primary text-white px-8 py-3.5 rounded-lg font-medium shadow-lg"> | |
| Start Free Trial | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <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"> | |
| <i class="fas fa-comment-dots mr-2"></i> | |
| Book Demo | |
| </button> | |
| </div> | |
| <p class="text-sm text-primary-100 mt-4">Join 25,000+ freelancers who've automated their business</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-16"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-5 gap-12 mb-12"> | |
| <div class="md:col-span-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-primary-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-bezier-curve text-white text-lg"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">FreelanceFlow<span class="text-primary-400">Pro</span></h3> | |
| </div> | |
| <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> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 transition flex items-center justify-center"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 transition flex items-center justify-center"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 transition flex items-center justify-center"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 transition flex items-center justify-center"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Product</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Templates</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Resources</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Freelance Academy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Webinars</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Company</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Legal</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Stay Updated</h4> | |
| <p class="text-gray-400 mb-4">Subscribe to our newsletter for freelance growth tips</p> | |
| <div class="flex"> | |
| <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"> | |
| <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 FreelanceFlow Pro. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Security</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">GDPR</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('.md\\:hidden').addEventListener('click', function() { | |
| // In a real implementation, this would toggle a mobile menu | |
| alert('Mobile menu would open here'); | |
| }); | |
| // Animate elements when they come into view | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.hover-scale'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.2; | |
| if (elementPosition < screenPosition) { | |
| element.classList.add('fade-in'); | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', animateOnScroll); | |
| window.addEventListener('load', animateOnScroll); | |
| // Form submission | |
| document.getElementById('clientRequestForm')?.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const clientName = document.getElementById('client-name')?.value; | |
| const clientEmail = document.getElementById('client-email')?.value; | |
| const projectType = document.getElementById('project-type')?.value; | |
| const budget = document.getElementById('budget')?.value; | |
| const projectDetails = document.getElementById('project-details')?.value; | |
| const startDate = document.getElementById('start-date')?.value; | |
| const deadline = document.getElementById('deadline')?.value; | |
| // Validate | |
| if (!clientName || !clientEmail || !projectType || !budget || !projectDetails) { | |
| alert('Please fill in all required fields'); | |
| return; | |
| } | |
| // In a real app, you would send this data to your backend | |
| console.log('Form submitted:', { | |
| clientName, | |
| clientEmail, | |
| projectType, | |
| budget, | |
| projectDetails, | |
| startDate, | |
| deadline | |
| }); | |
| // Show success message | |
| alert('Request submitted successfully! We will get back to you soon.'); | |
| // Reset form | |
| this.reset(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/freelancepro-template" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |