Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dynamic Reputation Score | Content Value Assessment</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F3F4F6', | |
| accent: '#F59E0B', | |
| platinum: '#E5E4E2', | |
| gold: '#FFD700', | |
| silver: '#C0C0C0', | |
| bronze: '#CD7F32' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%); | |
| } | |
| .score-ring { | |
| stroke-dasharray: 440; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: translateY(-5px); | |
| } | |
| .license-tier { | |
| transition: all 0.3s ease; | |
| } | |
| .license-tier:hover { | |
| transform: scale(1.03); | |
| } | |
| .license-tier.active { | |
| border-color: #4F46E5; | |
| box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3); | |
| } | |
| .greek-letter { | |
| font-family: 'Times New Roman', Times, serif; | |
| font-style: italic; | |
| } | |
| .boost-card { | |
| transition: all 0.3s ease; | |
| background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%); | |
| } | |
| .boost-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-chart-line text-3xl"></i> | |
| <h1 class="text-2xl font-bold">Dynamic Reputation Score</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-accent transition">Home</a> | |
| <a href="#" class="hover:text-accent transition">How It Works</a> | |
| <a href="#" class="hover:text-accent transition">Benefits</a> | |
| <a href="#" class="hover:text-accent transition">Pricing</a> | |
| </nav> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="mt-16 mb-20 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Your Content Value, Quantified</h2> | |
| <p class="text-xl max-w-3xl mx-auto mb-8"> | |
| Measure your digital reputation across platforms to unlock better crypto loan terms and content monetization opportunities. | |
| </p> | |
| <button class="bg-accent hover:bg-yellow-600 text-white font-bold py-3 px-8 rounded-full transition"> | |
| Calculate Your Score Now | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Score Dashboard --> | |
| <section class="bg-white rounded-xl shadow-lg p-6 mb-12"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <!-- Score Visualization --> | |
| <div class="w-full md:w-1/3 flex justify-center mb-8 md:mb-0"> | |
| <div class="relative w-64 h-64"> | |
| <svg class="w-full h-full" viewBox="0 0 160 160"> | |
| <circle cx="80" cy="80" r="70" stroke="#E5E7EB" stroke-width="10" fill="none"/> | |
| <circle id="score-ring" class="score-ring" cx="80" cy="80" r="70" stroke="#4F46E5" stroke-width="10" fill="none" stroke-dashoffset="440"/> | |
| </svg> | |
| <div class="absolute inset-0 flex flex-col items-center justify-center"> | |
| <div class="flex flex-col items-center"> | |
| <div class="flex items-end"> | |
| <span id="greek-letter" class="greek-letter text-5xl font-bold text-primary"></span> | |
| </div> | |
| <span id="level-title" class="text-xl font-medium text-dark"></span> | |
| <span id="main-score" class="text-sm text-gray-500 mt-1">Score: <span class="font-medium">0</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Score Details --> | |
| <div class="w-full md:w-2/3"> | |
| <h3 class="text-2xl font-bold text-dark mb-4">Your Digital Reputation Breakdown</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-light p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Content Value Score</span> | |
| <span id="content-score" class="font-bold">0</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="content-score-bar" class="bg-primary h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-light p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Engagement Score</span> | |
| <span id="engagement-score" class="font-bold">0</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="engagement-score-bar" class="bg-secondary h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-light p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Longevity Score</span> | |
| <span id="longevity-score" class="font-bold">0</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="longevity-score-bar" class="bg-accent h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-light p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Borrowing Power</span> | |
| <span id="borrowing-power" class="font-bold">$0</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="borrowing-power-bar" class="bg-purple-500 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-info-circle text-blue-500 text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium text-blue-800">Licensing Impact</h4> | |
| <p class="text-sm text-blue-700" id="license-impact-text"> | |
| Your current licensing activity is not impacting your score. Increase your licensing to boost your reputation and borrowing power. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="update-btn" class="bg-primary hover:bg-indigo-7 00 text-white font-bold py-2 px-6 rounded-full transition"> | |
| Update My Score | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Boost Section --> | |
| <section class="bg-white rounded-xl shadow-lg p-8 mb-12"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-3xl font-bold text-dark">Boost Your Score</h2> | |
| <p class="text-gray-600">Annuitize your earnings for stable income verification with unspent.cash</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="boost-card border border-gray-200 rounded-xl p-6 cursor-pointer" data-boost="basic"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">Basic Stability</h3> | |
| <p class="text-gray-500 text-sm">3-month annuitization</p> | |
| </div> | |
| <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs font-bold">+5 pts</div> | |
| </div> | |
| <ul class="text-sm text-gray-600 space-y-2 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 3-month income verification</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Basic unspent.cash integration</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Small boost to reputation</li> | |
| </ul> | |
| <div class="text-center"> | |
| <button class="select-boost-btn w-full py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50"> | |
| Connect to unspent.app | |
| </button> | |
| </div> | |
| </div> | |
| <div class="boost-card border border-gray-200 rounded-xl p-6 cursor-pointer" data-boost="professional"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">Professional Stability</h3> | |
| <p class="text-gray-500 text-sm">6-month annuitization</p> | |
| </div> | |
| <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs font-bold">+15 pts</div> | |
| </div> | |
| <ul class="text-sm text-gray-600 space-y-2 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 6-month income verification</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Full unspent.cash integration</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Medium boost to reputation</li> | |
| </ul> | |
| <div class="text-center"> | |
| <button class="select-boost-btn w-full py-2 px-4 bg-purple-600 text-white rounded-lg hover:bg-purple-700"> | |
| Connect to unspent.app | |
| </button> | |
| </div> | |
| </div> | |
| <div class="boost-card border border-gray-200 rounded-xl p-6 cursor-pointer" data-boost="enterprise"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">Enterprise Stability</h3> | |
| <p class="text-gray-500 text-sm">12-month annuitization</p> | |
| </div> | |
| <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs font-bold">+30 pts</div> | |
| </div> | |
| <ul class="text-sm text-gray-600 space-y-2 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 12-month income verification</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Premium unspent.cash features</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Large boost to reputation</li> | |
| </ul> | |
| <div class="text-center"> | |
| <button class="select-boost-btn w-full py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50"> | |
| Connect to unspent.app | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-purple-50 rounded-lg p-4"> | |
| <h3 class="font-bold text-purple-800 mb-2">How Annuitization Boosts Your Score</h3> | |
| <p class="text-purple-700 text-sm"> | |
| By connecting your unspent.cash account and annuitizing a portion of your earnings, you demonstrate | |
| stable income streams to lenders. This significantly improves your reputation score by verifying | |
| your ability to repay loans. The longer the annuitization period, the greater the boost to your score. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Licensing Activity Section --> | |
| <section class="bg-white rounded-xl shadow-lg p-8 mb-12"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-file-contract text-xl"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-3xl font-bold text-dark">Licensing Activity</h2> | |
| <p class="text-gray-600">Your content licensing history is a strong indicator of repayment ability</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="license-tier border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-tier="basic"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">Basic Licensing</h3> | |
| <p class="text-gray-500 text-sm">Occasional content licensing</p> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-bold">+15 pts</div> | |
| </div> | |
| <ul class="text-sm text-gray-600 space-y-2 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> 1-5 licenses per year</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Small-scale partnerships</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Standard verification</li> | |
| </ul> | |
| <div class="text-center"> | |
| <button class="select-tier-btn w-full py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50"> | |
| Select Tier | |
| </button> | |
| </div> | |
| </div> | |
| <div class="license-tier border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-tier="professional"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">Professional Licensing</h3> | |
| <p class="text-gray-500 text-sm">Regular content licensing</p> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-bold">+30 pts</div> | |
| </div> | |
| <ul class="text-sm text-gray-600 space-y-2 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> 6-20 licenses per year</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Medium-scale partnerships</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Enhanced verification</li> | |
| </ul> | |
| <div class="text-center"> | |
| <button class="select-tier-btn w-full py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> | |
| Select Tier | |
| </button> | |
| </div> | |
| </div> | |
| <div class="license-tier border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-tier="enterprise"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg">Enterprise Licensing</h3> | |
| <p class="text-gray-500 text-sm">High-volume content licensing</p> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-bold">+50 pts</div> | |
| </div> | |
| <ul class="text-sm text-gray-600 space-y-2 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> 20+ licenses per year</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Large-scale partnerships</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Premium verification</li> | |
| </ul> | |
| <div class="text-center"> | |
| <button class="select-tier-btn w-full py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50"> | |
| Select Tier | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 rounded-lg p-4"> | |
| <h3 class="font-bold text-blue-800 mb-2">Why Licensing Matters</h3> | |
| <p class="text-blue-700 text-sm"> | |
| Content licensing demonstrates your ability to generate consistent revenue from your digital assets. | |
| This is a strong indicator of repayment ability for crypto loans, making it a heavily weighted factor | |
| in your reputation score. Higher licensing tiers unlock better loan terms and increased borrowing limits. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Social Media Integration --> | |
| <section class="mb-12"> | |
| <h2 class="text-3xl font-bold text-dark mb-8 text-center">Connect Your Social Profiles</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="youtube"> | |
| <div class="social-icon bg-red-100 text-red-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fab fa-youtube text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">YouTube</h3> | |
| <p class="text-gray-500 text-sm">Subscribers & Watch Time</p> | |
| </div> | |
| <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="twitter"> | |
| <div class="social-icon bg-blue-100 text-blue-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fab fa-twitter text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Twitter</h3> | |
| <p class="text-gray-500 text-sm">Followers & Engagement</p> | |
| </div> | |
| <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="instagram"> | |
| <div class="social-icon bg-pink-100 text-pink-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fab fa-instagram text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">Instagram</h3> | |
| <p class="text-gray-500 text-sm">Followers & Engagement</p> | |
| </div> | |
| <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="tiktok"> | |
| <div class="social-icon bg-black text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fab fa-tiktok text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">TikTok</h3> | |
| <p class="text-gray-500 text-sm">Followers & Views</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Metrics Input --> | |
| <section class="bg-white rounded-xl shadow-lg p-8 mb-12"> | |
| <h2 class="text-3xl font-bold text-dark mb-6">Enhance Your Score</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Left Column --> | |
| <div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Content Uploads (per month)</label> | |
| <input type="range" id="content-uploads" min="0" max="50" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-sm text-gray-500 mt-1"> | |
| <span>0</span> | |
| <span>10</span> | |
| <span>20</span> | |
| <span>30</span> | |
| <span>40</span> | |
| <span>50+</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Content Performance (avg. views)</label> | |
| <select id="content-performance" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> | |
| <option value="100">Under 100</option> | |
| <option value="1000">100-1,000</option> | |
| <option value="10000" selected>1,000-10,000</option> | |
| <option value="100000">10,000-100,000</option> | |
| <option value="1000000">100,000-1M</option> | |
| <option value="10000000">1M+</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Community Building</label> | |
| <div class="flex space-x-4"> | |
| <button class="community-btn flex-1 py-2 px-4 border rounded-lg" data-value="0">None</button> | |
| <button class="community-btn flex-1 py-2 px-4 border rounded-lg bg-primary text-white" data-value="1">Some</button> | |
| <button class="community-btn flex-1 py-2 px-4 border rounded-lg" data-value="2">Strong</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Curation Participation</label> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="curation-check" class="w-5 h-5 text-primary rounded focus:ring-primary"> | |
| <label for="curation-check" class="ml-2 text-gray-700">Actively curate content</label> | |
| </div> | |
| <div class="flex items-center mt-2"> | |
| <input type="checkbox" id="moderation-check" class="w-5 h-5 text-primary rounded focus:ring-primary"> | |
| <label for="moderation-check" class="ml-2 text-gray-700">Community moderation</label> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Years of Activity</label> | |
| <div class="flex items-center space-x-2"> | |
| <button id="years-minus" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <span id="years-value" class="text-xl font-bold">3</span> | |
| <button id="years-plus" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <span class="text-gray-500 ml-2">years</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2">Verified Revenue Streams</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="ads"> | |
| <i class="fas fa-ad mr-1"></i> Ad Revenue | |
| </button> | |
| <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="sponsorships"> | |
| <i class="fas fa-handshake mr-1"></i> Sponsorships | |
| </button> | |
| <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="merch"> | |
| <i class="fas fa-tshirt mr-1"></i> Merchandise | |
| </button> | |
| <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="donations"> | |
| <i class="fas fa-donate mr-1"></i> Donations | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section class="mb-12"> | |
| <h2 class="text-3xl font-bold text-dark mb-8 text-center">Unlock New Opportunities</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="w-12 h-12 gradient-bg text-white rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-coins text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">Better Crypto Loan Terms</h3> | |
| <p class="text-gray-600">Higher reputation scores qualify you for lower interest rates and higher borrowing limits.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="w-12 h-12 gradient-bg text-white rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-handshake text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">Premium Partnerships</h3> | |
| <p class="text-gray-600">Brands seek out creators with high reputation scores for collaborations.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="w-12 h-12 gradient-bg text-white rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-pie text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">Content Monetization</h3> | |
| <p class="text-gray-600">Access exclusive monetization options based on your content value.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="mb-12"> | |
| <h2 class="text-3xl font-bold text-dark mb-8 text-center">Trusted by Creators</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-gray-500 text-sm">Tech YouTuber</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700"> | |
| "After documenting my licensing deals, my reputation score jumped 25 points and I qualified for a crypto loan at 3% lower interest. The impact was immediate!" | |
| </p> | |
| <div class="flex mt-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> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <p class="text-gray-500 text-sm">Photography Influencer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700"> | |
| "The licensing verification process was simple, and the boost to my borrowing power was substantial. I was able to secure funding for new equipment within days." | |
| </p> | |
| <div class="flex mt-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-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i> Dynamic Reputation | |
| </h3> | |
| <p class="text-gray-400"> | |
| Quantifying your digital footprint to unlock financial opportunities and content monetization. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</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> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-6 border-t border-gray-800 text-center text-gray-400"> | |
| <p>© 2023 Dynamic Reputation Score. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scripts --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize scores | |
| </html> |