1{{template "base" .}}
  2
  3{{define "main"}}
  4<div class="hero">
  5    <h1>Delay gratification, buy intentionally</h1>
  6    <p class="hero-subtitle">Schedule email reminders for your purchases. Take time to think before you buy.</p>
  7    
  8    <div class="cta-section">
  9        <a href="/submit" class="cta-button">Schedule a Reminder</a>
 10        <p class="cta-description">Submit a product URL and we'll remind you later via email</p>
 11    </div>
 12</div>
 13
 14<div class="features">
 15    <div class="feature-grid">
 16        <div class="feature">
 17            <h3>🕒 Delay Purchases</h3>
 18            <p>Schedule reminders for 3 days, 1 week, 2 weeks, or custom timeframes</p>
 19        </div>
 20        <div class="feature">
 21            <h3>📧 Email Reminders</h3>
 22            <p>Get a thoughtful email with your product link when the time is right</p>
 23        </div>
 24        <div class="feature">
 25            <h3>🔒 Privacy First</h3>
 26            <p>No passwords, no tracking, no data sales. Just helpful reminders.</p>
 27        </div>
 28    </div>
 29</div>
 30
 31<div class="philosophy">
 32    <h2>Why delay purchases?</h2>
 33    <p>In our age of instant gratification, adding friction back to the buying process helps us make more intentional decisions. By scheduling purchase reminders, you give yourself time to consider whether you truly need or want an item.</p>
 34    
 35    <blockquote>
 36        "Buy less, buy better. Every delayed purchase is a victory over impulse."
 37    </blockquote>
 38</div>
 39
 40<style>
 41.hero {
 42    text-align: center;
 43    padding: 3rem 0;
 44}
 45
 46.hero h1 {
 47    font-size: 2.5rem;
 48    font-weight: 700;
 49    color: #2c3e50;
 50    margin-bottom: 1rem;
 51}
 52
 53.hero-subtitle {
 54    font-size: 1.2rem;
 55    color: #6c757d;
 56    margin-bottom: 2rem;
 57    max-width: 600px;
 58    margin-left: auto;
 59    margin-right: auto;
 60}
 61
 62.cta-section {
 63    margin: 2rem 0;
 64}
 65
 66.cta-button {
 67    display: inline-block;
 68    background-color: #2c3e50;
 69    color: white;
 70    padding: 1rem 2rem;
 71    text-decoration: none;
 72    border-radius: 8px;
 73    font-weight: 600;
 74    font-size: 1.1rem;
 75    transition: background-color 0.2s;
 76}
 77
 78.cta-button:hover {
 79    background-color: #34495e;
 80}
 81
 82.cta-description {
 83    margin-top: 0.5rem;
 84    color: #6c757d;
 85    font-size: 0.9rem;
 86}
 87
 88.features {
 89    margin: 4rem 0;
 90}
 91
 92.feature-grid {
 93    display: grid;
 94    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 95    gap: 2rem;
 96    margin-top: 2rem;
 97}
 98
 99.feature {
100    background: white;
101    padding: 1.5rem;
102    border-radius: 8px;
103    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
104}
105
106.feature h3 {
107    color: #2c3e50;
108    margin-bottom: 0.5rem;
109}
110
111.philosophy {
112    background: white;
113    padding: 2rem;
114    border-radius: 8px;
115    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
116    margin: 3rem 0;
117}
118
119.philosophy h2 {
120    color: #2c3e50;
121    margin-bottom: 1rem;
122}
123
124.philosophy p {
125    margin-bottom: 1.5rem;
126    line-height: 1.7;
127}
128
129.philosophy blockquote {
130    font-style: italic;
131    font-size: 1.1rem;
132    color: #6c757d;
133    border-left: 4px solid #2c3e50;
134    padding-left: 1rem;
135    margin: 1rem 0;
136}
137
138@media (max-width: 768px) {
139    .hero h1 {
140        font-size: 2rem;
141    }
142    
143    .hero-subtitle {
144        font-size: 1.1rem;
145    }
146    
147    .feature-grid {
148        grid-template-columns: 1fr;
149        gap: 1rem;
150    }
151    
152    .philosophy {
153        padding: 1.5rem;
154    }
155}
156</style>
157{{end}}