File: /var/www/html/tmpr/..//tmpr/..//tmpr/../tmpr/../choose.php
<?php
// Simple branded landing page to choose payment provider
// Links to PayPal (index.php) and Paystack (paystack.php)
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Choose Payment Method | TheBrand</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--brand-primary: #635BFF;
--brand-secondary: #4f46e5;
--text-main: #0f172a;
--text-secondary: #475569;
--bg-light: #f8fafc;
--border-color: rgba(99,91,255,0.18);
--success-color: #10b981;
}
html, body { height: 100%; }
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: radial-gradient(1200px 600px at 10% 10%, rgba(99,91,255,0.12), transparent),
radial-gradient(1200px 600px at 90% 0%, rgba(56,189,248,0.10), transparent),
linear-gradient(180deg, #f9fafb, #eef2ff);
color: var(--text-main);
}
.checkout-container {
max-width: 1100px;
margin: 2.5rem auto;
padding: 2.5rem;
background: rgba(255,255,255,0.92);
border: 1px solid var(--border-color);
border-radius: 16px;
box-shadow: 0 18px 60px rgba(0,0,0,0.10);
}
header { text-align: center; margin-bottom: 2rem; }
header img {
width: 120px; height: 120px; object-fit: contain; display: block; margin: 0 auto 0.5rem;
}
header h1 { font-size: 2.2rem; margin: 0.5rem 0; }
header .subtitle {
color: var(--text-secondary);
max-width: 720px;
margin: 0.5rem auto 1rem;
}
.trust-indicators {
display: flex; justify-content: center; flex-wrap: wrap; gap: 1.25rem; margin: 1rem 0 0.75rem;
}
.trust-item { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); }
.guarantee-badge {
display: inline-block; margin-top: 0.6rem; padding: 0.4rem 0.75rem; border-radius: 999px;
background: rgba(16,185,129,0.10); color: var(--success-color); border: 1px solid rgba(16,185,129,0.20);
font-weight: 600; font-size: 0.95rem;
}
.payment-options {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1rem;
}
.option-card {
background: rgba(255,255,255,0.95);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 1.25rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
transition: transform .15s ease, box-shadow .15s ease;
}
.option-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,0.10); }
.option-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.option-icon { font-size: 1.35rem; }
.option-title { font-weight: 700; font-size: 1.05rem; }
.option-desc { color: var(--text-secondary); margin: 0.5rem 0 0.75rem; }
.option-features { list-style: none; padding: 0; margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
.option-features li { margin: 0.35rem 0; }
.cta-row { display: flex; gap: 0.75rem; margin-top: 0.9rem; }
.cta-button {
background: var(--brand-primary);
color: #fff;
border: none;
padding: 0.7rem 1rem;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, transform .15s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cta-button:hover { background: var(--brand-secondary); transform: translateY(-1px); }
.cta-outline {
background: transparent; color: var(--brand-primary); border: 1px solid var(--brand-primary);
}
.security-note {
text-align: center; margin-top: 2rem; padding: 1.25rem; background: rgba(255,255,255,0.85);
border-radius: 12px; border: 1px solid var(--border-color);
}
.security-icons { display: flex; justify-content: center; gap: 1rem; margin-bottom: 0.6rem; }
@media (max-width: 768px) {
.checkout-container { margin: 1rem; padding: 2rem 1.5rem; }
header h1 { font-size: 1.9rem; }
.cta-row { flex-direction: column; }
}
</style>
</head>
<body>
<div class="checkout-container">
<header>
<img src="https://www.thebrand.ai/i/uploads/logo/logo_62a4de26e93f0.png" alt="TheBrand Logo">
<h1>Choose Your Secure Payment Method</h1>
<p class="subtitle">Pay confidently with your preferred processor. One-time purchases and subscriptions available via PayPal or Paystack.</p>
<div class="trust-indicators">
<div class="trust-item"><span>⭐⭐⭐⭐⭐</span><span>4.9/5 from 8,500+ customers</span></div>
<div class="trust-item"><span>⚡</span><span>48-hour delivery</span></div>
<div class="trust-item"><span>🔒</span><span>Bank-level security</span></div>
</div>
<div class="guarantee-badge">💯 100% Money-Back Guarantee</div>
</header>
<section class="payment-options">
<div class="option-card">
<div class="option-header">
<span class="option-icon">💳</span>
<span class="option-title">Pay with PayPal</span>
</div>
<p class="option-desc">Best for international cards and instant PayPal checkout. Trusted worldwide.</p>
<ul class="option-features">
<li>Instant secure checkout</li>
<li>Supports cards and PayPal balance</li>
<li>One-time purchases and memberships</li>
</ul>
<div class="cta-row">
<a class="cta-button" href="index.php">Go to PayPal</a>
<a class="cta-button cta-outline" href="one.php">One-time (PayPal)</a>
</div>
</div>
<div class="option-card">
<div class="option-header">
<span class="option-icon">🔐</span>
<span class="option-title">Pay with Paystack</span>
</div>
<p class="option-desc">Great for local cards, bank transfers, and NG-based payments. Secure and fast.</p>
<ul class="option-features">
<li>Bank-level encryption</li>
<li>Card and bank transfer support</li>
<li>One-time purchases and subscriptions</li>
</ul>
<div class="cta-row">
<a class="cta-button" href="paystack.php">Go to Paystack</a>
<a class="cta-button cta-outline" href="one_paystack.php">One-time (Paystack)</a>
</div>
</div>
</section>
<div class="security-note">
<div class="security-icons"><span>🔒</span><span>💳</span><span>✅</span></div>
<p><strong>Your payment is secured with bank-level encryption</strong></p>
<p>We never store your payment information. Processed by trusted providers.</p>
</div>
</div>
</body>
</html>