6b03e5b7eb
- Dark minimal design (charcoal/slate/muted green) - Hero section with phone mockup placeholder - How It Works (3 steps) - What It Is / Isn't sections - Privacy section with pill badges - Built for Clarity section - Download section with iOS/Android beta badges - Email capture modal for beta signups - Privacy, Terms, Disclaimer page template - Beta signups stored to wp_beta_signups table - Admin panel for viewing/exporting signups Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
262 lines
12 KiB
PHP
262 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html <?php language_attributes(); ?>>
|
|
<head>
|
|
<meta charset="<?php bloginfo('charset'); ?>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Add Months identifies the single change most likely to extend your lifespan. Private, local-first, no tracking.">
|
|
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/assets/images/favicon.png">
|
|
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/assets/images/apple-touch-icon.png">
|
|
<?php wp_head(); ?>
|
|
</head>
|
|
<body <?php body_class(); ?>>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<div class="hero-text">
|
|
<h1>Identify the single change most likely to extend your life.</h1>
|
|
<p class="subheadline">Add Months analyzes your lifestyle and shows your Dominant Challenge — the factor with the greatest potential impact on your lifespan.</p>
|
|
<div class="hero-ctas">
|
|
<button class="btn btn-primary" onclick="openModal('ios')">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
|
</svg>
|
|
Join iOS Beta
|
|
</button>
|
|
<a href="#how-it-works" class="btn btn-secondary">How It Works</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-mockup">
|
|
<div class="phone-mockup" onclick="openModal('ios')">
|
|
<div class="mockup-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
|
|
</svg>
|
|
<div>App Screenshot</div>
|
|
<div style="font-size: 0.75rem; margin-top: 4px;">Click to join beta</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section id="how-it-works" class="how-it-works">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>How It Works</h2>
|
|
</div>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-number">1</div>
|
|
<h3>Enter your baseline.</h3>
|
|
<p>Age, health status, and core lifestyle factors.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">2</div>
|
|
<h3>Analyze your exposures.</h3>
|
|
<p>The app models conservative lifespan impacts using established population data.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">3</div>
|
|
<h3>See your Dominant Challenge.</h3>
|
|
<p>The single change with the largest potential gain — right now.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What It Is -->
|
|
<section class="what-it-is">
|
|
<div class="container">
|
|
<div class="is-column">
|
|
<h2>Add Months is:</h2>
|
|
<ul class="is-list">
|
|
<li>A clarity tool.</li>
|
|
<li>Private and local.</li>
|
|
<li>Based on population-level risk modeling.</li>
|
|
<li>Designed for re-evaluation over time.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="isnt-column">
|
|
<h2>Add Months is not:</h2>
|
|
<ul class="isnt-list">
|
|
<li>Medical advice.</li>
|
|
<li>A habit tracker.</li>
|
|
<li>A social network.</li>
|
|
<li>A coaching app.</li>
|
|
<li>A data collection platform.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Privacy -->
|
|
<section class="privacy-section">
|
|
<div class="container">
|
|
<div class="privacy-content">
|
|
<h2>Your data never leaves your device.</h2>
|
|
<div class="privacy-bullets">
|
|
<span class="privacy-bullet">No accounts required</span>
|
|
<span class="privacy-bullet">No analytics</span>
|
|
<span class="privacy-bullet">No ads</span>
|
|
<span class="privacy-bullet">Encrypted local storage</span>
|
|
<span class="privacy-bullet">Hard delete = permanent</span>
|
|
</div>
|
|
<p class="privacy-statement">We cannot see your inputs. We do not collect or sell behavioral data.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Clarity -->
|
|
<section class="clarity">
|
|
<div class="container">
|
|
<div class="clarity-content">
|
|
<h2>Built for Clarity</h2>
|
|
<p>Most health apps try to optimize everything. Add Months identifies the one lever that matters most — so you can focus your effort where it counts.</p>
|
|
<p class="clarity-subtle">Re-run whenever your life changes.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Download -->
|
|
<section class="download-section">
|
|
<div class="container">
|
|
<div class="download-content">
|
|
<h2>Get Early Access</h2>
|
|
<p>Join the beta to be among the first to try Add Months.</p>
|
|
<div class="app-badges">
|
|
<div class="app-badge" onclick="openModal('ios')">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
|
</svg>
|
|
<div class="app-badge-text">
|
|
<div class="app-badge-small">Join the</div>
|
|
<div class="app-badge-big">iOS Beta</div>
|
|
</div>
|
|
</div>
|
|
<div class="app-badge" onclick="openModal('android')">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24c-1.44-.59-3.01-.9-4.47-.9s-3.03.31-4.47.9L5.65 5.67c-.19-.29-.51-.38-.79-.22-.3.16-.42.54-.26.85L6.4 9.48C3.3 11.25 1.28 14.44 1 18h22c-.28-3.56-2.3-6.75-5.4-8.52zM7 15.25c-.69 0-1.25-.56-1.25-1.25S6.31 12.75 7 12.75 8.25 13.31 8.25 14 7.69 15.25 7 15.25zm10 0c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/>
|
|
</svg>
|
|
<div class="app-badge-text">
|
|
<div class="app-badge-small">Join the</div>
|
|
<div class="app-badge-big">Android Beta</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-links">
|
|
<a href="<?php echo home_url('/privacy/'); ?>">Privacy</a>
|
|
<a href="<?php echo home_url('/terms/'); ?>">Terms</a>
|
|
<a href="<?php echo home_url('/disclaimer/'); ?>">Disclaimer</a>
|
|
<a href="https://help.addmonths.com">Help</a>
|
|
</div>
|
|
<div class="footer-copyright">
|
|
© <?php echo date('Y'); ?> Add Months
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Beta Signup Modal -->
|
|
<div class="modal-overlay" id="signup-modal">
|
|
<div class="modal">
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
|
|
<div class="signup-form" id="signup-form">
|
|
<h2>Join the Beta</h2>
|
|
<p>Enter your email to get early access when we launch.</p>
|
|
|
|
<form id="beta-form">
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" required placeholder="you@example.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="platform">Platform</label>
|
|
<select id="platform" name="platform" required>
|
|
<option value="ios">iOS (TestFlight)</option>
|
|
<option value="android">Android</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary form-submit">Join Beta</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="form-success" id="form-success">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
</svg>
|
|
<h3>You're on the list!</h3>
|
|
<p>We'll email you when the beta is ready.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openModal(platform) {
|
|
document.getElementById('platform').value = platform;
|
|
document.getElementById('signup-modal').classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('signup-modal').classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Close modal on overlay click
|
|
document.getElementById('signup-modal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// Close modal on escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// Handle form submission
|
|
document.getElementById('beta-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
var email = document.getElementById('email').value;
|
|
var platform = document.getElementById('platform').value;
|
|
|
|
var formData = new FormData();
|
|
formData.append('action', 'beta_signup');
|
|
formData.append('email', email);
|
|
formData.append('platform', platform);
|
|
formData.append('nonce', '<?php echo wp_create_nonce("beta_signup_nonce"); ?>');
|
|
|
|
fetch('<?php echo admin_url("admin-ajax.php"); ?>', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(function(response) { return response.json(); })
|
|
.then(function(data) {
|
|
document.getElementById('signup-form').classList.add('hidden');
|
|
document.getElementById('form-success').classList.add('active');
|
|
})
|
|
.catch(function(error) {
|
|
alert('Something went wrong. Please try again.');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<?php wp_footer(); ?>
|
|
</body>
|
|
</html>
|