drminsight-pro / pricing.html
mosal1978's picture
Der nächste Schritt wäre eine echte Software-Architektur.
10ae199 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DRMInsight Pro - Pricing</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-900 text-white">
<!-- Navigation -->
<nav class="bg-gray-800 bg-opacity-80 backdrop-blur-sm border-b border-gray-700 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">
<a href="/" class="flex items-center">
<i data-feather="shield" class="text-primary-500 mr-2"></i>
<span class="text-xl font-bold text-primary-400">DRMInsight Pro</span>
</a>
</div>
<div class="flex items-center space-x-4">
<a href="/" class="text-gray-300 hover:text-primary-400 transition-colors">Home</a>
<a href="/architecture.html" class="text-gray-300 hover:text-primary-400 transition-colors">Architecture</a>
<a href="/pricing.html" class="text-primary-400">Pricing</a>
</div>
</div>
</div>
</nav>
<!-- Pricing Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<h1 class="text-4xl font-bold text-primary-400 mb-8">Pricing Plans</h1>
<section class="mb-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="border border-gray-700 rounded-xl overflow-hidden">
<div class="bg-gray-800 p-6 text-center">
<h2 class="text-2xl font-bold mb-2">Starter</h2>
<p class="text-gray-400 mb-4">For individual developers</p>
<div class="text-4xl font-bold mb-4">$49<span class="text-lg text-gray-400">/month</span></div>
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-3 rounded-lg font-semibold transition-colors">
Get Started
</button>
</div>
<div class="bg-gray-800 p-6 border-t border-gray-700">
<ul class="space-y-3">
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>50 tests/month</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>Basic DRM analysis</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>Email support</span>
</li>
<li class="flex items-start text-gray-500">
<i data-feather="x" class="mr-2 mt-1 w-4"></i>
<span>No team members</span>
</li>
<li class="flex items-start text-gray-500">
<i data-feather="x" class="mr-2 mt-1 w-4"></i>
<span>No API access</span>
</li>
</ul>
</div>
</div>
<div class="border border-primary-500 rounded-xl overflow-hidden transform scale-105 z-10 shadow-lg">
<div class="bg-primary-900 p-6 text-center">
<div class="inline-block bg-primary-700 text-primary-100 text-xs px-3 py-1 rounded-full mb-3">MOST POPULAR</div>
<h2 class="text-2xl font-bold mb-2">Professional</h2>
<p class="text-primary-200 mb-4">For growing teams</p>
<div class="text-4xl font-bold mb-4">$199<span class="text-lg text-primary-300">/month</span></div>
<button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-3 rounded-lg font-semibold transition-colors">
Start Free Trial
</button>
</div>
<div class="bg-gray-800 p-6 border-t border-primary-500">
<ul class="space-y-3">
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>500 tests/month</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>Advanced analytics</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>Priority support</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>Up to 5 team members</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>Basic API access</span>
</li>
</ul>
</div>
</div>
<div class="border border-gray-700 rounded-xl overflow-hidden">
<div class="bg-gray-800 p-6 text-center">
<h2 class="text-2xl font-bold mb-2">Enterprise</h2>
<p class="text-gray-400 mb-4">For large organizations</p>
<div class="text-4xl font-bold mb-4">Custom</div>
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-3 rounded-lg font-semibold transition-colors">
Contact Sales
</button>
</div>
<div class="bg-gray-800 p-6 border-t border-gray-700">
<ul class="space-y-3">
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>Unlimited tests</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>Premium analytics</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>24/7 dedicated support</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>Unlimited team members</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1 w-4"></i>
<span>Full API access</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="mb-12">
<h2 class="text-2xl font-bold text-primary-300 mb-6">Monetization Strategy</h2>
<div class="bg-gray-800 rounded-xl p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4">Revenue Streams</h3>
<ul class="space-y-4">
<li class="flex items-start">
<div class="bg-primary-500 rounded-full p-2 mr-4">
<i data-feather="credit-card" class="text-white w-5"></i>
</div>
<div>
<h4 class="font-medium">Subscription Plans</h4>
<p class="text-gray-400 text-sm">Monthly/annual SaaS subscriptions with tiered feature sets</p>
</div>
</li>
<li class="flex items-start">
<div class="bg-primary-500 rounded-full p-2 mr-4">
<i data-feather="briefcase" class="text-white w-5"></i>
</div>
<div>
<h4 class="font-medium">Enterprise Licensing</h4>
<p class="text-gray-400 text-sm">Custom deployments with white-label options</p>
</div>
</li>
<li class="flex items-start">
<div class="bg-primary-500 rounded-full p-2 mr-4">
<i data-feather="codesandbox" class="text-white w-5"></i>
</div>
<div>
<h4 class="font-medium">API Usage Fees</h4>
<p class="text-gray-400 text-sm">Pay-per-call model for API access beyond plan limits</p>
</div>
</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">Business Model</h3>
<div class="bg-gray-700 rounded-lg p-4">
<div class="flex items-center mb-3">
<i data-feather="trending-up" class="text-green-400 mr-2"></i>
<h4 class="font-medium">B2B SaaS Focus</h4>
</div>
<p class="text-gray-300 text-sm mb-4">Targeting media companies, DRM providers, and security teams with:</p>
<ul class="text-gray-300 text-sm space-y-2">
<li>Annual contracts (10% discount)</li>
<li>Volume pricing for tests</li>
<li>Professional services add-ons</li>
<li>Training and certification</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section>
<h2 class="text-2xl font-bold text-primary-300 mb-6">Frequently Asked Questions</h2>
<div class="bg-gray-800 rounded-xl p-6">
<div class="space-y-4">
<div class="border-b border-gray-700 pb-4">
<h3 class="text-lg font-semibold mb-2">Can I change plans later?</h3>
<p class="text-gray-400">Yes, you can upgrade or downgrade your plan at any time. Prorated credits will be applied when upgrading.</p>
</div>
<div class="border-b border-gray-700 pb-4">
<h3 class="text-lg font-semibold mb-2">Is there a free trial?</h3>
<p class="text-gray-400">We offer a 14-day free trial of the Professional plan with full feature access.</p>
</div>
<div class="border-b border-gray-700 pb-4">
<h3 class="text-lg font-semibold mb-2">Do you offer discounts?</h3>
<p class="text-gray-400">Annual subscriptions receive 10% discount. Educational and non-profit organizations may qualify for additional discounts.</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">How are API calls counted?</h3>
<p class="text-gray-400">Each test initiation, metadata request, or analysis counts as one API call. Webhook notifications don't count against your limit.</p>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-gray-800 border-t border-gray-700 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p class="text-gray-400">
DRMInsight Pro Pricing - Version 2.0
</p>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html>