<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DateNotes - Your Private Dating Command Center</title>
<meta name="description" content="Organize dates, remember what matters, and build genuine connections. Your completely private dating organizer.">
<!-- Open Graph -->
<meta property="og:title" content="DateNotes - Your Private Dating Command Center">
<meta property="og:description" content="Organize dates, remember what matters, and build genuine connections.">
<meta property="og:type" content="website">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #F53C3C;
--primary-dark: #D63333;
--text-dark: #1a1a1a;
--text-gray: #666;
--text-light: #999;
--bg-light: #f8f8f8;
--border: #e0e0e0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Navigation */
nav {
padding: 24px 0;
border-bottom: 1px solid var(--border);
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: 700;
color: var(--text-dark);
}
.logo-accent {
color: var(--primary);
}
.nav-cta {
background: var(--primary);
color: white;
padding: 12px 28px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
transition: background 0.2s;
display: inline-block;
}
.nav-cta:hover {
background: var(--primary-dark);
}
/* Hero Section */
.hero {
padding: 80px 0 60px;
text-align: center;
}
.hero h1 {
font-size: 56px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
color: var(--text-dark);
}
.hero .highlight {
color: var(--primary);
}
.hero p {
font-size: 22px;
color: var(--text-gray);
max-width: 600px;
margin: 0 auto 40px;
line-height: 1.5;
}
.hero-ctas {
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.app-store-badge {
height: 54px;
transition: transform 0.2s;
}
.app-store-badge:hover {
transform: translateY(-2px);
}
.privacy-note {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-light);
font-size: 15px;
}
.privacy-icon {
width: 20px;
height: 20px;
}
/* Screenshots */
.screenshots {
padding: 60px 0;
background: var(--bg-light);
}
.screenshots-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
margin-top: 48px;
}
.screenshot-card {
background: white;
border-radius: 24px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: transform 0.2s;
}
.screenshot-card:hover {
transform: translateY(-4px);
}
.screenshot-card img {
width: 100%;
border-radius: 16px;
margin-bottom: 16px;
}
.screenshot-card h3 {
font-size: 20px;
margin-bottom: 8px;
}
.screenshot-card p {
color: var(--text-gray);
font-size: 15px;
}
/* Features */
.features {
padding: 80px 0;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 42px;
font-weight: 800;
margin-bottom: 16px;
}
.section-header p {
font-size: 20px;
color: var(--text-gray);
max-width: 600px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px;
}
.feature {
text-align: center;
}
.feature-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 32px;
}
.feature h3 {
font-size: 22px;
margin-bottom: 12px;
}
.feature p {
color: var(--text-gray);
line-height: 1.6;
}
/* Privacy Section */
.privacy-section {
background: var(--text-dark);
color: white;
padding: 80px 0;
text-align: center;
}
.privacy-section h2 {
font-size: 42px;
font-weight: 800;
margin-bottom: 24px;
}
.privacy-section p {
font-size: 20px;
max-width: 700px;
margin: 0 auto 40px;
opacity: 0.9;
line-height: 1.6;
}
.privacy-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 32px;
max-width: 900px;
margin: 0 auto;
text-align: left;
}
.privacy-item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.privacy-item-icon {
font-size: 24px;
flex-shrink: 0;
}
.privacy-item h4 {
font-size: 18px;
margin-bottom: 8px;
}
.privacy-item p {
font-size: 15px;
opacity: 0.8;
margin: 0;
}
/* Email Signup */
.email-signup {
padding: 80px 0;
background: var(--bg-light);
}
.signup-form {
max-width: 500px;
margin: 40px auto 0;
}
.form-group {
display: flex;
gap: 12px;
}
.form-group input {
flex: 1;
padding: 16px 20px;
border: 2px solid var(--border);
border-radius: 12px;
font-size: 16px;
transition: border-color 0.2s;
}
.form-group input:focus {
outline: none;
border-color: var(--primary);
}
.form-group button {
background: var(--primary);
color: white;
border: none;
padding: 16px 32px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.form-group button:hover {
background: var(--primary-dark);
}
.form-note {
text-align: center;
margin-top: 12px;
font-size: 14px;
color: var(--text-light);
}
/* CTA Section */
.cta-section {
padding: 80px 0;
text-align: center;
}
.cta-section h2 {
font-size: 42px;
font-weight: 800;
margin-bottom: 24px;
}
.cta-section p {
font-size: 20px;
color: var(--text-gray);
margin-bottom: 40px;
}
/* Footer */
footer {
background: var(--text-dark);
color: white;
padding: 40px 0;
text-align: center;
}
footer p {
opacity: 0.7;
font-size: 14px;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 38px;
}
.hero p {
font-size: 18px;
}
.section-header h2,
.privacy-section h2,
.cta-section h2 {
font-size: 32px;
}
.screenshots-grid {
grid-template-columns: 1fr;
}
.form-group {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav>
<div class="container">
<div class="nav-content">
<div class="logo">Date<span class="logo-accent">Notes</span></div>
<a href="https://apps.apple.com/us/app/datenotes/id6749477897" class="nav-cta">Download Now</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1>Remember what matters.<br>Plan better dates.<br><span class="highlight">Build real connections.</span></h1>
<p>Your completely private dating organizer. Keep track of prospects, plan thoughtful dates, and learn from every experience.</p>
<div class="hero-ctas">
<a href="https://apps.apple.com/us/app/datenotes/id6749477897">
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1234567890" alt="Download on the App Store" class="app-store-badge">
</a>
<div class="privacy-note">
<svg class="privacy-icon" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
</svg>
100% Private. All data stays on your device.
</div>
</div>
</div>
</section>
<!-- Screenshots Section -->
<section class="screenshots">
<div class="container">
<div class="section-header">
<h2>Dating, organized</h2>
<p>Everything you need to be more intentional in your dating life</p>
</div>
<div class="screenshots-grid">
<div class="screenshot-card">
<img src="/api/placeholder/300/650" alt="Track your prospects">
<h3>Track Prospects</h3>
<p>Keep organized profiles with photos, interests, and important details about everyone you're dating.</p>
</div>
<div class="screenshot-card">
<img src="/api/placeholder/300/650" alt="Plan thoughtful dates">
<h3>Plan Dates</h3>
<p>Schedule dates with reminders, save venue ideas, and never forget an important detail again.</p>
</div>
<div class="screenshot-card">
<img src="/api/placeholder/300/650" alt="Reflect and improve">
<h3>Reflect & Learn</h3>
<p>Rate dates, track what worked, see your progress over time, and become better at dating.</p>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features">
<div class="container">
<div class="section-header">
<h2>Built for intentional dating</h2>
<p>Simple tools to help you be more thoughtful and authentic</p>
</div>
<div class="features-grid">
<div class="feature">
<div class="feature-icon">📅</div>
<h3>Date Planning</h3>
<p>Schedule dates, set reminders, and save venue ideas all in one place. Never scramble for date ideas again.</p>
</div>
<div class="feature">
<div class="feature-icon">💭</div>
<h3>Remember Details</h3>
<p>Capture important conversation points, preferences, and personal details. Show up authentically informed.</p>
</div>
<div class="feature">
<div class="feature-icon">📊</div>
<h3>Track Progress</h3>
<p>See your dating patterns, learn what works, and celebrate milestones. Get better over time.</p>
</div>
<div class="feature">
<div class="feature-icon">📝</div>
<h3>Post-Date Reflection</h3>
<p>Rate your dates, capture key moments, and track what you spent. Build a record of your journey.</p>
</div>
<div class="feature">
<div class="feature-icon">🗂️</div>
<h3>Organized Profiles</h3>
<p>Keep all prospect info organized with photos, contact details, and custom notes. Stay on top of it all.</p>
</div>
<div class="feature">
<div class="feature-icon">💡</div>
<h3>Venue Ideas</h3>
<p>Save restaurants, activities, and date spots you want to try. Always have your next date planned.</p>
</div>
</div>
</div>
</section>
<!-- Privacy Section -->
<section class="privacy-section">
<div class="container">
<h2>Your data. Your device. Period.</h2>
<p>DateNotes is built privacy-first. Everything you enter stays completely private on your phone. No cloud sync, no data collection, no social features. This is your personal tool.</p>
<div class="privacy-features">
<div class="privacy-item">
<div class="privacy-item-icon">🔒</div>
<div>
<h4>Local Storage Only</h4>
<p>All your data lives on your device. We never see it, store it, or share it.</p>
</div>
</div>
<div class="privacy-item">
<div class="privacy-item-icon">🚫</div>
<div>
<h4>No Cloud Sync</h4>
<p>Your information never leaves your phone. Complete control, complete privacy.</p>
</div>
</div>
<div class="privacy-item">
<div class="privacy-item-icon">👤</div>
<div>
<h4>No Social Features</h4>
<p>This is a private tool for you. No profiles, no sharing, no social networking.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Email Signup Section -->
<section class="email-signup">
<div class="container">
<div class="section-header">
<h2>Stay updated</h2>
<p>Get tips for better dating and be the first to know about new features</p>
</div>
<form class="signup-form" id="email-form">
<div class="form-group">
<input type="email" id="email-input" placeholder="Enter your email" required>
<button type="submit">Sign Up</button>
</div>
<p class="form-note">No spam. Unsubscribe anytime.</p>
</form>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<h2>Ready to level up your dating game?</h2>
<p>Join guys who are taking a more intentional approach to dating</p>
<a href="https://apps.apple.com/us/app/datenotes/id6749477897">
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1234567890" alt="Download on the App Store" class="app-store-badge">
</a>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<p>© 2026 DateNotes. All rights reserved.</p>
</div>
</footer>
<script>
// Klaviyo email signup
document.getElementById('email-form').addEventListener('submit', async function(e) {
e.preventDefault();
const email = document.getElementById('email-input').value;
const button = this.querySelector('button');
const originalText = button.textContent;
button.textContent = 'Signing up...';
button.disabled = true;
try {
const response = await fetch('https://a.klaviyo.com/api/v2/list/YOUR_LIST_ID/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
api_key: 'YOUR_KLAVIYO_API_KEY', // You'll need to replace this
profiles: [{
email: email
}]
})
});
if (response.ok) {
button.textContent = 'Thanks! ✓';
button.style.background = '#10b981';
document.getElementById('email-input').value = '';
setTimeout(() => {
button.textContent = originalText;
button.style.background = '';
button.disabled = false;
}, 3000);
} else {
throw new Error('Signup failed');
}
} catch (error) {
button.textContent = 'Try again';
button.disabled = false;
console.error('Error:', error);
}
});
</script>
</body>
</html>