mpp5525 / index.html
spwotton's picture
Update index.html
d0f544c verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Merchant Processing Pros - TUA for Telehealth</title>
<meta name="description" content="Compare TUA with Klarna for your telehealth payment processing. HIPAA-compliant, transparent, fast approval.">
<meta name="theme-color" content="#1e293b" />
<link rel="stylesheet" href="base.css" />
<script>
// Auto dark mode
document.documentElement.classList.toggle('dark', window.matchMedia('(prefers-color-scheme: dark)').matches);
</script>
</head>
<body class="dark:bg-gray-900 dark:text-white">
<!-- Navigation -->
<nav class="bg-white dark:bg-gray-800 shadow-md fixed top-0 w-full z-50">
<div class="container flex justify-between items-center py-4">
<div class="text-xl font-bold text-blue-600 dark:text-white">Merchant Processing Pros</div>
<div class="space-x-4 hidden sm:block">
<a href="#hero" class="text-gray-700 dark:text-gray-300 hover:text-blue-600">Home</a>
<a href="#compare" class="text-gray-700 dark:text-gray-300 hover:text-blue-600">Compare</a>
<a href="#cta" class="text-gray-700 dark:text-gray-300 hover:text-blue-600">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="hero" class="hero-section">
<div class="overlay-gradient"></div>
<div class="hero-content">
<h1 class="text-4xl font-bold leading-tight mb-4">TUA Payment Plans for Telehealth</h1>
<p class="text-lg mb-6">
Tailored. Transparent. Affordable. Compare TUA vs Klarna and others.
</p>
<a href="#compare" class="btn btn-primary">Compare Now</a>
</div>
</section>
<!-- Main Content -->
<main class="container section">
<section>
<h2 class="text-2xl font-bold text-center mb-4">Why Choose TUA</h2>
<p class="text-lg text-center mb-6">
TUA (Third-Party User Agreement) offers secure, flexible, HIPAA-compliant payment processing tailored for telehealth.
</p>
<ul class="grid gap-4 text-left">
<li>✓ Transparent pricing with no hidden fees</li>
<li>✓ Custom recurring schedules</li>
<li>✓ Secure, HIPAA-compliant handling</li>
<li>✓ Easy integration with telehealth platforms</li>
</ul>
</section>
<!-- Comparison Table -->
<section id="compare" class="section">
<h2 class="text-2xl font-bold text-center mb-6">TUA vs Klarna vs Others</h2>
<div class="overflow-x-auto">
<table class="table">
<thead>
<tr>
<th>Feature</th>
<th>TUA</th>
<th>Klarna</th>
<th>Others</th>
</tr>
</thead>
<tbody>
<tr><td>Transparent Pricing</td><td></td><td></td><td></td></tr>
<tr><td>HIPAA Compliance</td><td></td><td></td><td></td></tr>
<tr><td>Recurring Payments</td><td></td><td></td><td></td></tr>
<tr><td>Monthly Fees</td><td></td><td></td><td></td></tr>
<tr><td>24/7 Support</td><td></td><td>Limited</td><td>Varies</td></tr>
<tr><td>API Integration</td><td>Easy</td><td>Medium</td><td>Hard</td></tr>
<tr><td>Approval Time</td><td>Same-day</td><td>2–5 days</td><td>3–7 days</td></tr>
</tbody>
</table>
</div>
</section>
<!-- CTA Section -->
<section id="cta" class="section bg-blue-600 text-white rounded text-center">
<h2 class="text-2xl font-bold mb-4">Ready to Upgrade Your Payments?</h2>
<p class="mb-6">Switch to TUA and simplify your telehealth billing experience today.</p>
<a href="#" class="btn btn-primary bg-white text-blue-600 hover:bg-blue-100">Contact Us</a>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<p>&copy; 2025 Merchant Processing Pros. All rights reserved.</p>
</footer>
<!-- Smooth Scroll -->
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute("href"));
if (target) target.scrollIntoView({ behavior: "smooth" });
});
});
</script>
</body>
</html>