Spaces:
Running
Running
please create a landing page to showcase this app we are about to launch: Imagine you and your friends want to start a business together, but you're worried about trust and money management. What if there was a way to automatically handle all the financial stuff fairly, without anyone having to manually manage it? That's exactly what this system does! Let me break it down in simple terms: ## π’ The Problem We're Solving **Traditional Business Problem:** - You and 3 friends start a project - One person handles all the money - Someone might not deliver on their promises - Arguments about who gets paid what - Manual tracking of who brought in which clients **Our Solution:** Think of it like a **smart vending machine for business partnerships** - it automatically handles everything fairly! ## π± How It Works (In Simple Terms) ### 1. **Create a Group Chat** - You create a Telegram group with your business partners - Add a special bot to the group - The bot automatically creates a "shared bank account" (but digital) ### 2. **Set Up the Rules** - Tell the bot: "Designer gets 30%, Developer gets 40%, Marketer gets 30%" - Set milestones: "When the website is done, release 50% of funds" - The bot remembers these rules forever ### 3. **Money Comes In** - Clients pay through special links - Money goes directly to the shared account - No one person can take the money - it's locked by rules ### 4. **Automatic Payments** - When someone completes their work, the bot automatically pays them - If someone doesn't deliver, they don't get paid - Everything is transparent - everyone can see what's happening ## οΏ½οΏ½ Real-World Example **Scenario:** You're building a website with a designer and developer **Step 1:** Create Telegram group β Bot creates shared wallet **Step 2:** Set rules: "Designer 30%, Developer 40%, You 30%" **Step 3:** Client pays $10,000 β Money goes to shared wallet **Step 4:** Designer finishes mockups β Bot automatically pays $3,000 **Step 5:** Developer finishes coding β Bot automatically pays $4,000 **Step 6:** Project complete β Bot pays you $3,000 **No arguments, no manual tracking, no trust issues!** ## οΏ½οΏ½ Why This Is Better Than Traditional Business ### **Traditional Way:** - One person controls all the money - Manual tracking of who did what - Arguments about payments - Risk of someone running off with the money ### **Our Way:** - Rules are written in code (can't be changed) - Automatic payments based on work completion - Everyone can see everything - No single person can steal the money ## π‘ Think of It Like... **A Smart Escrow Service:** - Like eBay's escrow, but for business partnerships - Money is held safely until work is done - Automatic release when conditions are met **A Digital Business Contract:** - Instead of lawyers and paperwork - Rules are written in computer code - Enforces itself automatically **A Fair Payment System:** - Like Uber's automatic payment system - But for business partnerships instead of rides ## π The Magic Parts ### **1. Smart Contracts** Think of them as "digital contracts that enforce themselves" - If you say "pay $100 when the logo is done" - The computer automatically pays when the logo is uploaded - No human needed to approve it ### **2. Multi-Signature Wallets** Think of them as "shared bank accounts that need multiple approvals" - Like a joint bank account, but digital - No single person can withdraw all the money - Requires multiple people to approve big decisions ### **3. Referral Tracking** Think of it as "automatic commission tracking" - Each person gets a unique link to share - When someone buys through their link, they get credit - Like affiliate marketing, but built into the system ## π― Who This Helps ### **Freelancers Working Together:** - Designer + Developer + Marketer teams - No more "who gets paid first" arguments - Automatic splitting of project revenue ### **Startup Founders:** - Co-founders with different roles - Fair equity distribution based on contributions - Transparent financial management ### **Agency Teams:** - Multiple specialists working on projects - Automatic commission tracking - Fair revenue sharing ## π The Bottom Line This system turns **business partnerships into automated, fair, and transparent relationships**. Instead of relying on trust and manual management, you rely on code that automatically handles everything fairly. **It's like having a business manager that never sleeps, never makes mistakes, and never takes sides - it just follows the rules you set up together!** The beauty is that once you set up the rules, the system runs itself. No more arguments about money, no more manual tracking, no more trust issues. Just focus on building your business while the system handles all the financial complexity automatically. **Think of it as "business on autopilot" - but fair and transparent!** π - Initial Deployment
0439b97 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PartnerPay | Automated Business Partnerships</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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F9FAFB' | |
| }, | |
| fontFamily: { | |
| 'poppins': ['Poppins', 'sans-serif'], | |
| 'inter': ['Inter', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .step-card { | |
| transition: all 0.3s ease; | |
| } | |
| .step-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .comparison-table td { | |
| padding: 1rem; | |
| border-bottom: 1px solid #E5E7EB; | |
| } | |
| .comparison-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .glow { | |
| box-shadow: 0 0 20px rgba(79, 70, 229, 0.3); | |
| } | |
| .animated-bg { | |
| animation: gradient 15s ease infinite; | |
| background-size: 200% 200%; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-inter bg-light text-dark"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="bg-primary w-8 h-8 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-handshake text-white"></i> | |
| </div> | |
| <span class="ml-3 text-xl font-bold text-primary">PartnerPay</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#features" class="text-gray-600 hover:text-primary font-medium">Features</a> | |
| <a href="#how-it-works" class="text-gray-600 hover:text-primary font-medium">How It Works</a> | |
| <a href="#benefits" class="text-gray-600 hover:text-primary font-medium">Benefits</a> | |
| <a href="#audience" class="text-gray-600 hover:text-primary font-medium">For Whom</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-primary text-white px-6 py-2 rounded-lg font-medium hover:bg-indigo-700 transition duration-300"> | |
| Join Waitlist | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold font-poppins leading-tight"> | |
| Business Partnerships <br> <span class="bg-yellow-400 text-dark px-2 rounded">On Autopilot</span> | |
| </h1> | |
| <p class="mt-6 text-xl opacity-90 max-w-2xl"> | |
| Automate financial management in partnerships. No trust issues, no manual tracking - just fair, transparent business relationships powered by smart technology. | |
| </p> | |
| <div class="mt-10 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button class="bg-white text-primary px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center"> | |
| <i class="fab fa-telegram mr-3"></i> Get Started on Telegram | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-primary transition duration-300"> | |
| Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <div class="relative"> | |
| <div class="absolute -top-10 -left-10 w-64 h-64 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-30"></div> | |
| <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-30"></div> | |
| <div class="relative bg-white rounded-2xl shadow-xl p-6 max-w-sm"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="text-dark font-bold">Shared Wallet</div> | |
| <div class="text-primary font-bold">$10,000</div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-palette text-purple-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">Designer</div> | |
| <div class="text-sm text-gray-500">Mockups completed</div> | |
| </div> | |
| </div> | |
| <div class="text-green-600 font-bold">$3,000</div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-code text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">Developer</div> | |
| <div class="text-sm text-gray-500">Coding completed</div> | |
| </div> | |
| </div> | |
| <div class="text-green-600 font-bold">$4,000</div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-green-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">You</div> | |
| <div class="text-sm text-gray-500">Project management</div> | |
| </div> | |
| </div> | |
| <div class="text-green-600 font-bold">$3,000</div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-200"> | |
| <div class="text-center text-sm text-gray-500">Payments automatically distributed based on pre-set rules</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Problem & Solution --> | |
| <section class="py-20 bg-white" id="features"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-poppins">Solving Partnership Pain Points</h2> | |
| <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Traditional business partnerships are fraught with financial friction. We eliminate it. | |
| </p> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <!-- Problem --> | |
| <div class="bg-red-50 rounded-2xl p-8"> | |
| <div class="flex items-center"> | |
| <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i> | |
| </div> | |
| <h3 class="ml-4 text-2xl font-bold">The Problem</h3> | |
| </div> | |
| <ul class="mt-6 space-y-4"> | |
| <li class="flex"> | |
| <i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i> | |
| <span>One person controls all the money creating power imbalance</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i> | |
| <span>Manual tracking of contributions leads to disputes</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i> | |
| <span>Payment arguments damage relationships</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i> | |
| <span>Risk of someone leaving with the funds</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-times-circle text-red-500 mt-1 mr-3"></i> | |
| <span>Time wasted on financial administration</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Solution --> | |
| <div class="bg-green-50 rounded-2xl p-8"> | |
| <div class="flex items-center"> | |
| <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="ml-4 text-2xl font-bold">Our Solution</h3> | |
| </div> | |
| <ul class="mt-6 space-y-4"> | |
| <li class="flex"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Automated payments based on pre-defined rules</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Transparent tracking of all contributions</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Funds locked until work is verified</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Multi-signature security for all transactions</span> | |
| </li> | |
| <li class="flex"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Automatic commission tracking for referrals</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-20 bg-gray-50" id="how-it-works"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-poppins">How PartnerPay Works</h2> | |
| <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Set up in minutes, automate forever. Here's the simple process: | |
| </p> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <!-- Step 1 --> | |
| <div class="step-card bg-white rounded-2xl p-6 shadow-md hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-2xl font-bold text-primary">1</span> | |
| </div> | |
| <h3 class="mt-6 text-xl font-bold">Create Group</h3> | |
| <p class="mt-3 text-gray-600">Start a Telegram group with your partners and add our bot</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center"> | |
| <i class="fab fa-telegram text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="step-card bg-white rounded-2xl p-6 shadow-md hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-2xl font-bold text-primary">2</span> | |
| </div> | |
| <h3 class="mt-6 text-xl font-bold">Set Rules</h3> | |
| <p class="mt-3 text-gray-600">Define payment splits, milestones, and conditions</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-sliders-h text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="step-card bg-white rounded-2xl p-6 shadow-md hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-2xl font-bold text-primary">3</span> | |
| </div> | |
| <h3 class="mt-6 text-xl font-bold">Receive Payments</h3> | |
| <p class="mt-3 text-gray-600">Clients pay through your unique payment links</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-link text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="step-card bg-white rounded-2xl p-6 shadow-md hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <span class="text-2xl font-bold text-primary">4</span> | |
| </div> | |
| <h3 class="mt-6 text-xl font-bold">Automate Payouts</h3> | |
| <p class="mt-3 text-gray-600">Funds distribute automatically when conditions are met</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Real World Example --> | |
| <div class="mt-20 bg-white rounded-2xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-indigo-50 p-8 md:p-12"> | |
| <h3 class="text-2xl font-bold text-primary">Real-World Example</h3> | |
| <p class="mt-4 text-gray-700"> | |
| Building a website with a designer and developer: | |
| </p> | |
| <ul class="mt-6 space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 w-6 h-6 bg-primary rounded-full flex items-center justify-center mt-1"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <span class="ml-3">Client pays $10,000 to shared wallet</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 w-6 h-6 bg-primary rounded-full flex items-center justify-center mt-1"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <span class="ml-3">Designer completes mockups β $3,000 auto-paid</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 w-6 h-6 bg-primary rounded-full flex items-center justify-center mt-1"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <span class="ml-3">Developer finishes coding β $4,000 auto-paid</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 w-6 h-6 bg-primary rounded-full flex items-center justify-center mt-1"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <span class="ml-3">Project complete β $3,000 auto-paid to you</span> | |
| </li> | |
| </ul> | |
| <div class="mt-8 bg-white p-4 rounded-lg border border-indigo-200"> | |
| <p class="text-center font-bold text-primary">No arguments. No manual tracking. No trust issues!</p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 bg-gradient-to-br from-indigo-500 to-purple-600 p-8 md:p-12 flex items-center"> | |
| <div class="text-white"> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-lightbulb text-yellow-300 text-3xl"></i> | |
| <h3 class="ml-3 text-2xl font-bold">The Magic Happens Automatically</h3> | |
| </div> | |
| <p class="text-lg opacity-90"> | |
| Our system combines three powerful technologies to make partnership payments seamless: | |
| </p> | |
| <div class="mt-6 space-y-6"> | |
| <div> | |
| <h4 class="font-bold text-xl flex items-center"> | |
| <i class="fas fa-file-contract mr-3"></i> Smart Contracts | |
| </h4> | |
| <p class="mt-2 opacity-90">Self-executing digital agreements that automatically enforce your payment rules</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-xl flex items-center"> | |
| <i class="fas fa-wallet mr-3"></i> Multi-Signature Wallets | |
| </h4> | |
| <p class="mt-2 opacity-90">Shared accounts requiring multiple approvals for transactions</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-xl flex items-center"> | |
| <i class="fas fa-share-alt mr-3"></i> Referral Tracking | |
| </h4> | |
| <p class="mt-2 opacity-90">Automatic commission attribution for client referrals</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Comparison --> | |
| <section class="py-20 bg-white" id="benefits"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-poppins">Why PartnerPay is Better</h2> | |
| <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Traditional vs Automated Partnership Management | |
| </p> | |
| </div> | |
| <div class="mt-16 overflow-x-auto"> | |
| <table class="comparison-table w-full bg-gray-50 rounded-xl overflow-hidden"> | |
| <thead> | |
| <tr class="bg-primary text-white"> | |
| <th class="text-left rounded-tl-xl"></th> | |
| <th class="text-center py-4 font-bold text-lg">Traditional Way</th> | |
| <th class="text-center py-4 font-bold text-lg">PartnerPay Way</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="bg-white"> | |
| <td class="font-bold">Money Control</td> | |
| <td class="text-center text-red-500"><i class="fas fa-user-shield mr-2"></i> One person controls funds</td> | |
| <td class="text-center text-green-500"><i class="fas fa-users mr-2"></i> Multi-signature security</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="font-bold">Payment Process</td> | |
| <td class="text-center text-red-500"><i class="fas fa-hand-holding-usd mr-2"></i> Manual payments & tracking</td> | |
| <td class="text-center text-green-500"><i class="fas fa-robot mr-2"></i> Automatic distribution</td> | |
| </tr> | |
| <tr class="bg-white"> | |
| <td class="font-bold">Transparency</td> | |
| <td class="text-center text-red-500"><i class="fas fa-eye-slash mr-2"></i> Limited visibility</td> | |
| <td class="text-center text-green-500"><i class="fas fa-eye mr-2"></i> Full transparency</td> | |
| </tr> | |
| <tr class="bg-gray-50"> | |
| <td class="font-bold">Dispute Resolution</td> | |
| <td class="text-center text-red-500"><i class="fas fa-balance-scale mr-2"></i> Arguments & negotiations</td> | |
| <td class="text-center text-green-500"><i class="fas fa-code mr-2"></i> Rules enforced by code</td> | |
| </tr> | |
| <tr class="bg-white"> | |
| <td class="font-bold">Security</td> | |
| <td class="text-center text-red-500"><i class="fas fa-running mr-2"></i> Risk of fund misappropriation</td> | |
| <td class="text-center text-green-500"><i class="fas fa-lock mr-2"></i> Funds locked until conditions met</td> | |
| </tr> | |
| <tr class="bg-gray-50 rounded-b-xl"> | |
| <td class="font-bold">Referral Tracking</td> | |
| <td class="text-center text-red-500"><i class="fas fa-file-excel mr-2"></i> Manual spreadsheets</td> | |
| <td class="text-center text-green-500"><i class="fas fa-chart-line mr-2"></i> Automatic attribution</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-20 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-8 md:p-12 text-white"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto"> | |
| <i class="fas fa-bolt text-3xl text-yellow-300"></i> | |
| </div> | |
| <h2 class="text-3xl md:text-4xl font-bold mt-6">Business on Autopilot</h2> | |
| <p class="mt-6 text-xl opacity-90"> | |
| Focus on building your business while PartnerPay handles all the financial complexity automatically. | |
| It's like having a business manager that never sleeps, never makes mistakes, and never takes sides. | |
| </p> | |
| <div class="mt-10"> | |
| <button class="bg-white text-primary px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition duration-300"> | |
| Start Your Automated Partnership | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Target Audience --> | |
| <section class="py-20 bg-gray-50" id="audience"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-poppins">Who Benefits Most</h2> | |
| <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto"> | |
| PartnerPay transforms these professional relationships | |
| </p> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Freelancers --> | |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg"> | |
| <div class="h-3 bg-indigo-500"></div> | |
| <div class="p-8"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-laptop-code text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-2xl font-bold">Freelancer Teams</h3> | |
| <p class="mt-4 text-gray-600"> | |
| Designer + Developer + Marketer collaborations without payment disputes | |
| </p> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Automatic splitting of project revenue</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>No more "who gets paid first" arguments</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Clear attribution of work contributions</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Startup Founders --> | |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg"> | |
| <div class="h-3 bg-purple-500"></div> | |
| <div class="p-8"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-rocket text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-2xl font-bold">Startup Founders</h3> | |
| <p class="mt-4 text-gray-600"> | |
| Co-founders with different roles and contributions | |
| </p> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Fair equity distribution based on contributions</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Transparent financial management</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Automated milestone-based compensation</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Agencies --> | |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg"> | |
| <div class="h-3 bg-blue-500"></div> | |
| <div class="p-8"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-building text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-2xl font-bold">Agency Teams</h3> | |
| <p class="mt-4 text-gray-600"> | |
| Teams with multiple specialists working on client projects | |
| </p> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Automatic commission tracking</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Fair revenue sharing across departments</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span>Client payment automation</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="py-20 gradient-bg"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white">Ready to Transform Your Business Partnerships?</h2> | |
| <p class="mt-6 text-xl text-white opacity-90"> | |
| Join thousands of professionals who've eliminated partnership friction | |
| </p> | |
| <div class="mt-10"> | |
| <button class="bg-white text-primary px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition duration-300"> | |
| Get Started Free | |
| </button> | |
| </div> | |
| <div class="mt-12 flex flex-wrap justify-center gap-6"> | |
| <div class="flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt=""> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| </div> | |
| <div class="ml-4 text-left"> | |
| <p class="text-white font-medium">500+ Teams</p> | |
| <p class="text-indigo-200 text-sm">Already automating partnerships</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-dollar-sign text-white"></i> | |
| </div> | |
| <div class="ml-4 text-left"> | |
| <p class="text-white font-medium">$10M+</p> | |
| <p class="text-indigo-200 text-sm">Processed automatically</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-gray-400 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center"> | |
| <div class="bg-primary w-8 h-8 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-handshake text-white"></i> | |
| </div> | |
| <span class="ml-3 text-xl font-bold text-white">PartnerPay</span> | |
| </div> | |
| <p class="mt-4"> | |
| Automated financial management for business partnerships. Fair, transparent, and trustless. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Features</a></li> | |
| <li><a href="#" class="hover:text-white">How It Works</a></li> | |
| <li><a href="#" class="hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="hover:text-white">Blog</a></li> | |
| <li><a href="#" class="hover:text-white">Support</a></li> | |
| <li><a href="#" class="hover:text-white">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-sm">Subscribe to our newsletter</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="bg-gray-800 rounded-l-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <button class="bg-primary text-white px-4 rounded-r-lg">Join</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 text-center"> | |
| <p>© 2023 PartnerPay. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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=web3district/bondr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |