task/1.15
1{{template "base" .}}
2
3{{define "main"}}
4<div class="about-page">
5 <div class="about-header">
6 <h1>About buylater.email</h1>
7 <p class="about-subtitle">Restoring friction to the buying process in an age of instant gratification</p>
8 </div>
9
10 <div class="about-content">
11 <section class="service-explanation">
12 <h2>What is buylater.email?</h2>
13 <p>
14 buylater.email is a simple service designed to help you make more intentional purchasing decisions.
15 In our culture of one-click buying and instant gratification, we've lost the natural pause that
16 comes with thoughtful consumption.
17 </p>
18 <p>
19 Our service adds back that crucial thinking time by scheduling email reminders for items you're
20 considering purchasing. Instead of buying impulsively, you can schedule a reminder to reconsider
21 the purchase after a waiting period of your choice.
22 </p>
23 </section>
24
25 <section class="philosophy">
26 <h2>Our Philosophy</h2>
27 <div class="philosophy-grid">
28 <div class="philosophy-item">
29 <h3>🛒 Buy Less, Buy Better</h3>
30 <p>
31 Every purchase should be intentional. By adding time between desire and action,
32 you can distinguish between wants and needs, leading to more satisfying purchases.
33 </p>
34 </div>
35 <div class="philosophy-item">
36 <h3>⏳ Delayed Gratification</h3>
37 <p>
38 Research shows that delaying purchases often reveals that we don't actually need
39 or want many items we initially felt compelled to buy.
40 </p>
41 </div>
42 <div class="philosophy-item">
43 <h3>🎯 Intentional Consumption</h3>
44 <p>
45 Move away from impulse buying toward thoughtful consumption that aligns with
46 your values, needs, and long-term goals.
47 </p>
48 </div>
49 <div class="philosophy-item">
50 <h3>💡 Mindful Decision Making</h3>
51 <p>
52 Create space for reflection in your purchasing decisions. Ask yourself:
53 "Do I still want this after thinking about it?"
54 </p>
55 </div>
56 </div>
57 </section>
58
59 <section class="how-it-works">
60 <h2>How It Works</h2>
61 <div class="workflow-steps">
62 <div class="workflow-step">
63 <div class="step-number">1</div>
64 <div class="step-content">
65 <h3>Submit a Product URL</h3>
66 <p>
67 Found something you want to buy? Instead of purchasing immediately,
68 paste the product URL into our form along with your email address.
69 </p>
70 </div>
71 </div>
72
73 <div class="workflow-step">
74 <div class="step-number">2</div>
75 <div class="step-content">
76 <h3>Choose Your Waiting Period</h3>
77 <p>
78 Select how long you'd like to wait: 3 days for quick decisions,
79 2 weeks for bigger purchases, or up to a month for major items.
80 </p>
81 </div>
82 </div>
83
84 <div class="workflow-step">
85 <div class="step-number">3</div>
86 <div class="step-content">
87 <h3>Confirm Your Reminder</h3>
88 <p>
89 We'll send you a confirmation email with a magic link. Click it to
90 activate your reminder and confirm your email address.
91 </p>
92 </div>
93 </div>
94
95 <div class="workflow-step">
96 <div class="step-number">4</div>
97 <div class="step-content">
98 <h3>Receive Your Reminder</h3>
99 <p>
100 When your chosen waiting period ends, we'll email you the product
101 link and ask: "Do you still want to buy this?"
102 </p>
103 </div>
104 </div>
105
106 <div class="workflow-step">
107 <div class="step-number">5</div>
108 <div class="step-content">
109 <h3>Make an Intentional Choice</h3>
110 <p>
111 With time for reflection, decide whether the purchase still makes sense.
112 Many users find they no longer want the item!
113 </p>
114 </div>
115 </div>
116 </div>
117 </section>
118
119 <section class="service-principles">
120 <h2>Our Principles</h2>
121 <div class="principles-list">
122 <div class="principle">
123 <h3>🔒 Privacy First</h3>
124 <p>No passwords required. No tracking. No data sales. We only store what's necessary to send your reminders.</p>
125 </div>
126 <div class="principle">
127 <h3>✨ Simplicity</h3>
128 <p>No app to download. No account to manage. Just email reminders when you need them.</p>
129 </div>
130 <div class="principle">
131 <h3>🎯 Single Purpose</h3>
132 <p>We do one thing well: help you pause before purchasing. No upsells, no ads, no distractions.</p>
133 </div>
134 </div>
135 </section>
136
137 <section class="get-started">
138 <h2>Ready to Try Intentional Shopping?</h2>
139 <p>
140 Start by scheduling a reminder for something you're considering buying.
141 Experience the power of the pause.
142 </p>
143 <a href="/submit" class="cta-button">Schedule Your First Reminder</a>
144 </section>
145 </div>
146</div>
147
148<style>
149.about-page {
150 max-width: 800px;
151 margin: 0 auto;
152}
153
154.about-header {
155 text-align: center;
156 margin-bottom: 3rem;
157}
158
159.about-header h1 {
160 color: #2c3e50;
161 font-size: 2.5rem;
162 margin-bottom: 1rem;
163}
164
165.about-subtitle {
166 color: #6c757d;
167 font-size: 1.2rem;
168 font-style: italic;
169 max-width: 600px;
170 margin: 0 auto;
171}
172
173.about-content section {
174 margin-bottom: 4rem;
175}
176
177.about-content h2 {
178 color: #2c3e50;
179 margin-bottom: 1.5rem;
180 font-size: 1.8rem;
181}
182
183.about-content p {
184 color: #555;
185 line-height: 1.7;
186 margin-bottom: 1rem;
187}
188
189.philosophy-grid {
190 display: grid;
191 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
192 gap: 2rem;
193 margin-top: 2rem;
194}
195
196.philosophy-item {
197 background: white;
198 padding: 1.5rem;
199 border-radius: 8px;
200 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
201}
202
203.philosophy-item h3 {
204 color: #2c3e50;
205 margin-bottom: 0.5rem;
206 font-size: 1.1rem;
207}
208
209.philosophy-item p {
210 margin: 0;
211 font-size: 0.95rem;
212}
213
214.workflow-steps {
215 display: grid;
216 gap: 2rem;
217 margin-top: 2rem;
218}
219
220.workflow-step {
221 display: flex;
222 align-items: flex-start;
223 gap: 1.5rem;
224}
225
226.step-number {
227 width: 50px;
228 height: 50px;
229 background-color: #2c3e50;
230 color: white;
231 border-radius: 50%;
232 display: flex;
233 align-items: center;
234 justify-content: center;
235 font-weight: bold;
236 font-size: 1.2rem;
237 flex-shrink: 0;
238}
239
240.step-content h3 {
241 color: #2c3e50;
242 margin-bottom: 0.5rem;
243 font-size: 1.2rem;
244}
245
246.step-content p {
247 margin: 0;
248 color: #555;
249}
250
251.principles-list {
252 display: grid;
253 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
254 gap: 2rem;
255 margin-top: 2rem;
256}
257
258.principle {
259 background: white;
260 padding: 1.5rem;
261 border-radius: 8px;
262 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
263}
264
265.principle h3 {
266 color: #2c3e50;
267 margin-bottom: 0.5rem;
268 font-size: 1.1rem;
269}
270
271.principle p {
272 margin: 0;
273 font-size: 0.95rem;
274}
275
276.get-started {
277 text-align: center;
278 background: white;
279 padding: 2.5rem;
280 border-radius: 12px;
281 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
282}
283
284.get-started h2 {
285 margin-bottom: 1rem;
286}
287
288.get-started p {
289 margin-bottom: 1.5rem;
290 font-size: 1.1rem;
291}
292
293.cta-button {
294 display: inline-block;
295 background-color: #2c3e50;
296 color: white;
297 padding: 1rem 2rem;
298 text-decoration: none;
299 border-radius: 8px;
300 font-weight: 600;
301 font-size: 1.1rem;
302 transition: background-color 0.2s;
303}
304
305.cta-button:hover {
306 background-color: #34495e;
307}
308
309@media (max-width: 768px) {
310 .about-header h1 {
311 font-size: 2rem;
312 }
313
314 .about-subtitle {
315 font-size: 1.1rem;
316 }
317
318 .philosophy-grid,
319 .principles-list {
320 grid-template-columns: 1fr;
321 gap: 1.5rem;
322 }
323
324 .workflow-step {
325 flex-direction: column;
326 text-align: center;
327 gap: 1rem;
328 }
329
330 .step-number {
331 margin: 0 auto;
332 }
333
334 .get-started {
335 padding: 2rem 1.5rem;
336 }
337}
338</style>
339{{end}}