my personal site
feat(gymtracker): update ads landing page content and styles for clarity and engagement
- Revised title and meta description to better reflect the app's purpose and target audience.
- Enhanced layout and styling of ad preview components for improved user experience.
- Adjusted padding, margins, and background colors for better visual consistency.
- Updated section headers and text to clarify ad placement and audience targeting.
+78
-63
.DS_Store
.DS_Store
This is a binary file and will not be displayed.
+78
-63
gymtracker/src/ads-landing-html.ts
+78
-63
gymtracker/src/ads-landing-html.ts
···
6
6
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
7
7
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
8
8
<meta http-equiv="Pragma" content="no-cache">
9
-
<title>Advertise on Gym Tracker | A small app. A specific audience. One ad slot.</title>
10
-
<meta name="description" content="A few hundred Virginia Tech students use Gym Tracker to check McComas and War Memorial before they go. One ad slot in the main feed. If VT students are who you're trying to reach, it's a direct line.">
9
+
<title>Advertise on Gym Tracker | Reach VT gym-goers in one placement</title>
10
+
<meta name="description" content="Gym Tracker is used by Virginia Tech students checking McComas and War Memorial. There is one sponsored placement in the main feed.">
11
11
<link rel="icon" href="/favicon/favicon.ico" sizes="any">
12
12
<link rel="icon" href="/favicon/favicon-32x32.png" type="image/png" sizes="32x32">
13
13
<link rel="icon" href="/favicon/favicon-16x16.png" type="image/png" sizes="16x16">
···
313
313
width: 100%;
314
314
display: flex;
315
315
flex-direction: column;
316
-
justify-content: center;
317
316
gap: 0;
318
317
padding: 0;
319
318
border-radius: 0;
320
319
border: 1px solid var(--border);
321
-
background: var(--bg);
320
+
background: rgba(255, 255, 255, 0.82);
322
321
}
323
-
.format-preview-text-lines {
322
+
.format-preview-copy {
324
323
display: flex;
325
324
flex-direction: column;
326
325
gap: 6px;
327
-
padding: 12px;
326
+
padding: 10px 12px 8px;
328
327
}
329
328
.format-preview-banner {
330
329
width: 100%;
···
334
333
border-radius: 0;
335
334
border: 1px solid var(--border);
336
335
overflow: hidden;
337
-
background: var(--bg);
336
+
background: rgba(255, 255, 255, 0.82);
338
337
}
339
338
.format-preview-img {
340
339
height: 70px;
···
348
347
display: flex;
349
348
align-items: center;
350
349
gap: 6px;
351
-
padding: 6px 10px 5px;
350
+
padding: 8px 10px 7px;
352
351
border-bottom: 1px solid var(--border);
353
352
}
354
353
.format-preview-section-logo {
···
363
362
min-width: 0;
364
363
height: 5px;
365
364
max-width: 58%;
366
-
background: var(--text);
367
-
opacity: 0.88;
365
+
background: #aaa19b;
368
366
border-radius: 0;
369
367
}
370
368
.format-preview-section-sponsored {
371
-
font-size: 9px;
369
+
font-size: 8px;
372
370
font-weight: 500;
373
371
color: var(--muted);
374
372
flex-shrink: 0;
373
+
margin-left: auto;
375
374
letter-spacing: 0.02em;
375
+
text-align: right;
376
376
}
377
-
.format-preview-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
378
-
.fph { width: 60%; height: 8px; background: var(--border-strong); border-radius: 0; }
379
-
.fps { width: 45%; height: 6px; background: var(--border); border-radius: 0; }
380
-
.fpc { width: 32%; height: 6px; background: var(--orange); border-radius: 0; opacity: 0.6; margin-top: 4px; }
377
+
.format-preview-body { padding: 0; display: flex; flex-direction: column; gap: 0; }
378
+
.format-preview-img-divider { height: 1px; background: var(--border); }
379
+
.fph { width: 72%; height: 8px; background: #bdb4ae; border-radius: 0; }
380
+
.fps { width: 54%; height: 6px; background: #d9d2cc; border-radius: 0; }
381
+
.format-preview-cta {
382
+
margin: 0 12px 12px;
383
+
height: 18px;
384
+
background: var(--ad-cta-fill);
385
+
display: flex;
386
+
align-items: center;
387
+
justify-content: center;
388
+
}
389
+
.fpc { width: 40%; height: 5px; background: var(--maroon); opacity: 0.75; border-radius: 0; }
381
390
.format-preview-feature .format-preview-img { height: 110px; }
382
391
.format-card-info { padding: 18px 20px; }
383
392
.format-card-name {
···
1079
1088
<section class="hero">
1080
1089
<div class="container hero-content">
1081
1090
<p class="hero-eyebrow">Advertise on Gym Tracker</p>
1082
-
<h1>A small app.<br><em>A specific audience.</em><br>One ad slot.</h1>
1083
-
<p class="hero-sub">VT students check McComas and War Memorial before they go. Six times a week, on average. One ad slot in the feed. If Hokies are your audience, this is it.</p>
1091
+
<h1>Reach Hokies<br><em>Where they are</em></h1>
1092
+
<p class="hero-sub">Be part of their routine.</p>
1084
1093
<div class="hero-actions">
1085
-
<a href="#wizard" class="btn-primary">Build a mockup →</a>
1094
+
<a href="#wizard" class="btn-primary">Preview your ad →</a>
1086
1095
<a href="https://apps.apple.com/us/app/vt-gym-tracker/id6736409867?itscg=30200&itsct=apps_box_badge&mttnsubad=6736409867" class="btn-ghost" target="_blank" rel="noopener noreferrer">View on the App Store</a>
1087
1096
</div>
1088
1097
<div class="hero-stats">
···
1106
1115
<div class="container">
1107
1116
<div class="section-header">
1108
1117
<p class="section-label">How it works</p>
1109
-
<h2 class="section-title">It's part of their routine</h2>
1110
-
<p class="section-sub">Students check occupancy before they go, sometimes more than once a day. The ad is in that same view—not a separate tab or a notification they opted out of.</p>
1118
+
<h2 class="section-title">How placement works</h2>
1119
+
<p class="section-sub">Students open Gym Tracker to check occupancy before going to the gym. The sponsored placement appears in that same feed view.</p>
1111
1120
</div>
1112
1121
1113
1122
<div class="exclusive-callout">
1114
1123
<div class="exclusive-left">
1115
-
<span class="exclusive-tag">One sponsor at a time</span>
1116
-
<p class="exclusive-headline">One ad in the app.<br>Every open. Every user.</p>
1117
-
<p class="exclusive-desc">There’s no rotation or bidding system. While you’re running, every person who opens the app sees your ad.</p>
1124
+
<span class="exclusive-tag">Single placement model</span>
1125
+
<p class="exclusive-headline">One active sponsor slot</p>
1126
+
<p class="exclusive-desc">There is no auction or rotating ad inventory. During your run window, your ad is the sponsored placement shown in the feed.</p>
1118
1127
</div>
1119
1128
<div class="exclusive-right">
1120
1129
<div class="exclusive-stat-row">
1121
1130
<div class="exclusive-stat">
1122
1131
<span class="exclusive-stat-num">100%</span>
1123
-
<span class="exclusive-stat-label">Share of voice</span>
1132
+
<span class="exclusive-stat-label">Placement share</span>
1124
1133
</div>
1125
1134
<div class="exclusive-stat-divider"></div>
1126
1135
<div class="exclusive-stat">
1127
1136
<span class="exclusive-stat-num">0</span>
1128
-
<span class="exclusive-stat-label">Competing ads</span>
1137
+
<span class="exclusive-stat-label">Other in-feed sponsors</span>
1129
1138
</div>
1130
1139
</div>
1131
1140
</div>
···
1140
1149
1141
1150
<div class="feature-card">
1142
1151
<span class="feature-card-tag">Audience</span>
1143
-
<div class="feature-title">That’s the whole audience</div>
1144
-
<div class="feature-desc">Everyone who has this app goes to Virginia Tech and uses the campus gyms. There’s no broader regional audience to filter out.</div>
1152
+
<div class="feature-title">Built around Hokies</div>
1153
+
<div class="feature-desc">The app is specifically for Virginia Tech students. Campaigns are naturally limited to that use case.</div>
1145
1154
</div>
1146
1155
1147
1156
<div class="feature-card">
1148
1157
<span class="feature-card-tag">Scheduling</span>
1149
-
<div class="feature-title">Pick your dates</div>
1150
-
<div class="feature-desc">Set a start and end date. Works for a single event, a semester push, or just a specific week. No long-term commitment.</div>
1158
+
<div class="feature-title">Flexible campaign windows</div>
1159
+
<div class="feature-desc">Choose start and end dates based on your timeline, whether that is a short event push or a longer semester campaign.</div>
1151
1160
</div>
1152
1161
1153
1162
<div class="feature-card">
1154
1163
<span class="feature-card-tag">Reporting</span>
1155
-
<div class="feature-title">Impressions and clicks, tracked directly</div>
1156
-
<div class="feature-desc">No third-party tools or estimates. You’ll see exactly how many times the ad was shown and how many people tapped it.</div>
1164
+
<div class="feature-title">Simple campaign reporting</div>
1165
+
<div class="feature-desc">Reporting includes delivered impressions and clicks for your campaign period.</div>
1157
1166
</div>
1158
1167
</div>
1159
1168
1160
1169
<div class="peaks-card">
1161
1170
<div class="peaks-header">
1162
-
<span class="peaks-title">When students are most active</span>
1163
-
<span class="peaks-note">Follows the semester schedule</span>
1171
+
<span class="peaks-title">Typical seasonal traffic pattern</span>
1172
+
<span class="peaks-note">Higher during active semesters</span>
1164
1173
</div>
1165
1174
<div class="peaks-track-wrap">
1166
1175
<div class="peaks-track">
···
1231
1240
</div>
1232
1241
1233
1242
<div class="social-proof">
1234
-
<p class="social-proof-label">A few things students have said</p>
1243
+
<p class="social-proof-label">What Hokies are saying</p>
1235
1244
<div class="social-quotes">
1236
1245
<div class="social-quote">
1237
1246
<span class="social-quote-text">I be using this all the time ngl. It helped me make an actual good schedule with the gym.</span>
1238
-
<span class="social-quote-source">VT student</span>
1239
1247
</div>
1240
1248
<div class="social-quote">
1241
1249
<span class="social-quote-text">I got this first semester it's so good!</span>
1242
-
<span class="social-quote-source">VT student</span>
1243
1250
</div>
1244
1251
<div class="social-quote">
1245
1252
<span class="social-quote-text">use this app daily bro keep up the good work</span>
1246
-
<span class="social-quote-source">VT student</span>
1247
1253
</div>
1248
1254
<div class="social-quote">
1249
1255
<span class="social-quote-text">wait this is actually so cool, just downloaded</span>
1250
-
<span class="social-quote-source">VT student</span>
1251
1256
</div>
1252
1257
<div class="social-quote">
1253
1258
<span class="social-quote-text">Peak app</span>
1254
-
<span class="social-quote-source">VT student</span>
1255
1259
</div>
1256
1260
<div class="social-quote">
1257
1261
<span class="social-quote-text">this is rad actually</span>
1258
-
<span class="social-quote-source">VT student</span>
1259
1262
</div>
1260
1263
</div>
1261
1264
</div>
···
1268
1271
<path d="M5 7.5l2 2 3.5-3.5"/>
1269
1272
</svg>
1270
1273
</div>
1271
-
<div class="proof-title">It’s a real app, live on the App Store</div>
1272
-
<div class="proof-desc">iPhone, iPad, Apple Watch, and home screen widget. It’s been in the App Store since 2022.</div>
1274
+
<div class="proof-title">Production app with active users</div>
1275
+
<div class="proof-desc">Available on iPhone, iPad, Apple Watch, and as a home screen widget.</div>
1273
1276
</div>
1274
1277
<div class="proof-item">
1275
1278
<div class="proof-icon">
···
1278
1281
<path d="M4 6.5h7M4 9h4"/>
1279
1282
</svg>
1280
1283
</div>
1281
-
<div class="proof-title">Ads are labeled as sponsored</div>
1282
-
<div class="proof-desc">Clearly marked. No tricks.</div>
1284
+
<div class="proof-title">Sponsored content is clearly labeled</div>
1285
+
<div class="proof-desc">Ad units are marked as sponsored in the feed.</div>
1283
1286
</div>
1284
1287
<div class="proof-item">
1285
1288
<div class="proof-icon">
···
1288
1291
<path d="M2 13h11"/>
1289
1292
</svg>
1290
1293
</div>
1291
-
<div class="proof-title">Simple to get started</div>
1292
-
<div class="proof-desc">Send your dates and what you’d like to say. I handle setup and scheduling.</div>
1294
+
<div class="proof-title">Straightforward setup process</div>
1295
+
<div class="proof-desc">Share dates and ad assets, then setup and scheduling are handled for you.</div>
1293
1296
</div>
1294
1297
</div>
1295
1298
</div>
···
1311
1314
<span class="format-preview-section-title" aria-hidden="true"></span>
1312
1315
<span class="format-preview-section-sponsored">Sponsored</span>
1313
1316
</div>
1314
-
<div class="format-preview-text-lines">
1317
+
<div class="format-preview-copy">
1315
1318
<div class="fph"></div>
1316
1319
<div class="fps"></div>
1320
+
</div>
1321
+
<div class="format-preview-cta">
1317
1322
<div class="fpc"></div>
1318
1323
</div>
1319
1324
</div>
···
1338
1343
<span class="format-preview-section-sponsored">Sponsored</span>
1339
1344
</div>
1340
1345
<div class="format-preview-img"><span>Banner image</span></div>
1346
+
<div class="format-preview-img-divider"></div>
1341
1347
<div class="format-preview-body">
1342
-
<div class="fph"></div>
1343
-
<div class="fps"></div>
1344
-
<div class="fpc"></div>
1348
+
<div class="format-preview-copy">
1349
+
<div class="fph"></div>
1350
+
<div class="fps"></div>
1351
+
</div>
1352
+
<div class="format-preview-cta">
1353
+
<div class="fpc"></div>
1354
+
</div>
1345
1355
</div>
1346
1356
</div>
1347
1357
</div>
···
1350
1360
<div class="format-card-desc">An image plus a short block of copy. Standard placement in the feed.</div>
1351
1361
<dl class="format-specs">
1352
1362
<dt>Banner image</dt>
1353
-
<dd>1200×628px (landscape). JPG or PNG, max 2MB.</dd>
1363
+
<dd>1200×628px (landscape). JPG or PNG.</dd>
1354
1364
<dt>Copy</dt>
1355
1365
<dd>Headline, subline (optional), CTA. Optional logo in the section header.</dd>
1356
1366
</dl>
···
1365
1375
<span class="format-preview-section-sponsored">Sponsored</span>
1366
1376
</div>
1367
1377
<div class="format-preview-img"><span>Feature image</span></div>
1378
+
<div class="format-preview-img-divider"></div>
1368
1379
<div class="format-preview-body">
1369
-
<div class="fph"></div>
1370
-
<div class="fps"></div>
1371
-
<div class="fpc"></div>
1380
+
<div class="format-preview-copy">
1381
+
<div class="fph"></div>
1382
+
<div class="fps"></div>
1383
+
</div>
1384
+
<div class="format-preview-cta">
1385
+
<div class="fpc"></div>
1386
+
</div>
1372
1387
</div>
1373
1388
</div>
1374
1389
</div>
···
1377
1392
<div class="format-card-desc">Taller image and more room for copy. The largest format available.</div>
1378
1393
<dl class="format-specs">
1379
1394
<dt>Feature image</dt>
1380
-
<dd>1080×1350px (4:5 portrait). JPG or PNG, max 2MB.</dd>
1395
+
<dd>1080×1350px (4:5 portrait). JPG or PNG.</dd>
1381
1396
<dt>Copy</dt>
1382
1397
<dd>Headline, subline (optional), CTA. Optional logo in the section header. More room for subline.</dd>
1383
1398
</dl>
···
1391
1406
<div class="container">
1392
1407
<div class="section-header">
1393
1408
<p class="section-label">Ad Preview</p>
1394
-
<h2 class="section-title">See what it looks like</h2>
1395
-
<p class="section-sub">Fill in your details and switch between formats. Good for getting a concrete idea before you reach out.</p>
1409
+
<h2 class="section-title">Preview the placement</h2>
1410
+
<p class="section-sub">Enter sample details and switch formats to see how each option appears in-feed.</p>
1396
1411
</div>
1397
1412
<div class="wizard-grid">
1398
1413
<form id="mockupForm" class="admin-form">
···
1429
1444
</div>
1430
1445
<input type="hidden" id="tier" name="tier" value="banner">
1431
1446
<div class="wizard-cta-box">
1432
-
<p>Ready to move forward? Send your target dates and what you want to say. I’ll handle the rest.</p>
1447
+
<p>If this looks like a fit, send dates and your draft copy. You can start with rough content.</p>
1433
1448
<a href="#contact" class="btn-contact">Get in touch →</a>
1434
1449
</div>
1435
1450
</form>
···
1464
1479
<section id="contact" class="section section-dark">
1465
1480
<div class="container">
1466
1481
<div class="contact-inner">
1467
-
<h2 class="section-title on-dark">Get in touch</h2>
1468
-
<p class="section-sub">Send a few details and I’ll follow up with format suggestions and next steps.</p>
1482
+
<h2 class="section-title on-dark">Contact</h2>
1483
+
<p class="section-sub">Share your goals and timing, and you’ll get a follow-up with format recommendations and availability.</p>
1469
1484
<div class="contact-card">
1470
1485
<div>
1471
1486
<h3 class="contact-col-title">What to include</h3>
1472
-
<p class="contact-col-sub">Enough to give you a quick turnaround.</p>
1487
+
<p class="contact-col-sub">A short brief is enough to get started.</p>
1473
1488
<ul class="contact-points">
1474
1489
<li>Your business name and website</li>
1475
1490
<li>Target dates or general campaign window</li>
1476
-
<li>What you’re trying to accomplish (awareness, event, foot traffic)</li>
1491
+
<li>Campaign goal (awareness, event turnout, foot traffic, etc.)</li>
1477
1492
<li>Format preference, if you have one—or just ask</li>
1478
1493
</ul>
1479
1494
</div>
1480
1495
<div class="contact-cta-col">
1481
1496
<p class="contact-cta-label">Direct line</p>
1482
1497
<a href="mailto:hello@jackhannon.net?subject=Gym%20Tracker%20Advertising%20Inquiry" class="btn-email">Email me →</a>
1483
-
<p class="contact-note">I typically reply within a day. Highest traffic windows are January–May and August–December.</p>
1498
+
<p class="contact-note">Typical response time is within one business day. Traffic is usually highest January–May and August–December.</p>
1484
1499
</div>
1485
1500
</div>
1486
1501
</div>