Skip to content

Commit 11d7583

Browse files
tstrombergtstromberg
committed
v1
1 parent f4f4853 commit 11d7583

File tree

1 file changed

+171
-43
lines changed

1 file changed

+171
-43
lines changed

‎index.html‎

Lines changed: 171 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -139,33 +139,50 @@
139139

140140
.pain-point {
141141
font-family: "Arial", "Helvetica", sans-serif;
142-
font-size: 2rem;
142+
font-size: 2.5rem;
143143
font-weight: bold;
144144
color: black;
145-
margin-bottom: 20px;
145+
margin-bottom: 30px;
146146
transform: rotate(1deg);
147147
display: inline-block;
148+
text-shadow: 3px 3px 0 white;
148149
}
149150

150151
.content-section {
151-
margin-bottom: 40px;
152+
margin-bottom: 50px;
152153
}
153154

155+
.mystery-reveal {
156+
background: white;
157+
padding: 30px;
158+
border: 4px solid black;
159+
border-bottom: 8px solid black;
160+
border-right: 8px solid black;
161+
box-shadow: 8px 8px 0 black;
162+
margin: 40px 0;
163+
transform: rotate(-1deg);
164+
position: relative;
165+
}
166+
167+
154168
.stat-highlight {
155169
font-family: "Arial", "Helvetica", sans-serif;
156-
font-size: 1.4rem;
170+
font-size: 1.6rem;
157171
font-weight: bold;
158172
color: black;
159173
background: white;
160-
padding: 15px 25px;
161-
border: 3px solid black;
162-
border-bottom: 6px solid black;
163-
border-right: 6px solid black;
174+
padding: 20px 30px;
175+
border: 4px solid black;
176+
border-bottom: 8px solid black;
177+
border-right: 8px solid black;
164178
display: inline-block;
165-
margin-bottom: 20px;
179+
margin-bottom: 30px;
166180
transform: skew(-5deg);
181+
box-shadow: 6px 6px 0 black;
182+
position: relative;
167183
}
168184

185+
169186
.benefit-text {
170187
font-family: "Arial", "Helvetica", sans-serif;
171188
font-size: 1.2rem;
@@ -181,14 +198,22 @@
181198

182199
.user-type {
183200
background: white;
184-
padding: 20px;
185-
border: 3px solid black;
186-
border-bottom: 6px solid black;
187-
border-right: 6px solid black;
201+
padding: 25px;
202+
border: 4px solid black;
203+
border-bottom: 8px solid black;
204+
border-right: 8px solid black;
188205
flex: 1;
189206
text-align: center;
207+
position: relative;
208+
transition: transform 0.2s ease;
190209
}
191210

211+
.user-type:hover {
212+
transform: translate(-3px, -3px);
213+
box-shadow: 6px 6px 0 black;
214+
}
215+
216+
192217
.user-type h3 {
193218
font-family: "Arial", "Helvetica", sans-serif;
194219
font-size: 1.1rem;
@@ -198,37 +223,45 @@
198223

199224
.cta-section {
200225
background: white;
201-
padding: 40px;
202-
border: 4px solid black;
203-
border-bottom: 8px solid black;
204-
border-right: 8px solid black;
205-
box-shadow: 8px 8px 0 black;
226+
padding: 50px;
227+
border: 5px solid black;
228+
border-bottom: 10px solid black;
229+
border-right: 10px solid black;
230+
box-shadow: 12px 12px 0 black;
206231
text-align: center;
207-
margin-top: 40px;
232+
margin-top: 50px;
233+
position: relative;
234+
transform: rotate(0.5deg);
208235
}
209236

237+
210238
.cta-button {
211239
font-family: "Arial", "Helvetica", sans-serif;
212-
font-size: 1.3rem;
240+
font-size: 1.5rem;
213241
font-weight: bold;
214242
background: #ffff00;
215243
color: black;
216-
padding: 18px 36px;
217-
border: 4px solid black;
218-
border-bottom: 6px solid black;
219-
border-right: 6px solid black;
244+
padding: 22px 44px;
245+
border: 5px solid black;
246+
border-bottom: 8px solid black;
247+
border-right: 8px solid black;
220248
cursor: pointer;
221249
text-decoration: none;
222250
display: inline-block;
223-
margin: 20px 0;
224-
transition: transform 0.2s ease;
251+
margin: 25px 0;
252+
transition: all 0.2s ease;
253+
text-transform: uppercase;
254+
letter-spacing: 1px;
255+
position: relative;
225256
}
226257

227258
.cta-button:hover {
228-
transform: translate(-2px, -2px);
229-
box-shadow: 6px 6px 0 black;
259+
transform: translate(-3px, -3px);
260+
box-shadow: 8px 8px 0 black;
261+
background: white;
230262
}
231263

264+
232265
.social-proof {
233266
font-family: "Arial", "Helvetica", sans-serif;
234267
font-size: 1rem;
@@ -299,7 +332,15 @@
299332
font-size: 1.4rem;
300333
}
301334
.pain-point {
302-
font-size: 1.6rem;
335+
font-size: 1.8rem;
336+
}
337+
.mystery-reveal {
338+
transform: rotate(0deg);
339+
padding: 20px;
340+
}
341+
.cta-section {
342+
transform: rotate(0deg);
343+
padding: 30px;
303344
}
304345
.user-types {
305346
flex-direction: column;
@@ -309,6 +350,96 @@
309350
}
310351
}
311352
</style>
353+
<script>
354+
function sendEmail() {
355+
// Obfuscated email address
356+
const parts = ['lets-go-faster-plz', 'codegroove', 'dev'];
357+
const email = parts[0] + '@' + parts[1] + '.' + parts[2];
358+
359+
const subject = 'Early Access Request - CodeGroove';
360+
const body = 'Hi CodeGroove team,\n\nI\'m interested in getting early access to your developer tools.\n\nThanks!';
361+
362+
const mailtoLink = 'mailto:' + email + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
363+
364+
showPopup(email, mailtoLink);
365+
}
366+
367+
function showPopup(email, mailtoLink) {
368+
// Create popup overlay
369+
const overlay = document.createElement('div');
370+
overlay.style.cssText = `
371+
position: fixed;
372+
top: 0;
373+
left: 0;
374+
width: 100%;
375+
height: 100%;
376+
background: rgba(0, 0, 0, 0.8);
377+
z-index: 1000;
378+
display: flex;
379+
align-items: center;
380+
justify-content: center;
381+
`;
382+
383+
// Create popup content
384+
const popup = document.createElement('div');
385+
popup.style.cssText = `
386+
background: #FFFF00;
387+
border: 5px solid black;
388+
border-bottom: 10px solid black;
389+
border-right: 10px solid black;
390+
box-shadow: 12px 12px 0 black;
391+
padding: 40px;
392+
max-width: 500px;
393+
text-align: center;
394+
font-family: "Arial", "Helvetica", sans-serif;
395+
transform: rotate(-1deg);
396+
`;
397+
398+
popup.innerHTML = `
399+
<h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; color: black;">
400+
Get Early Access
401+
</h3>
402+
<p style="font-size: 1.1rem; line-height: 1.6; margin-bottom: 25px; color: black;">
403+
Contact us at <a href="${mailtoLink}" style="color: black; font-weight: bold; text-decoration: underline;">${email}</a> and we'll contact you when we're ready to share something.
404+
</p>
405+
<button onclick="closePopup()" style="
406+
font-family: 'Arial', 'Helvetica', sans-serif;
407+
font-size: 1.1rem;
408+
font-weight: bold;
409+
background: white;
410+
color: black;
411+
padding: 12px 24px;
412+
border: 3px solid black;
413+
border-bottom: 5px solid black;
414+
border-right: 5px solid black;
415+
cursor: pointer;
416+
transition: transform 0.2s ease;
417+
" onmouseover="this.style.transform='translate(-2px, -2px)'; this.style.boxShadow='4px 4px 0 black';" onmouseout="this.style.transform='translate(0, 0)'; this.style.boxShadow='none';">
418+
Got it
419+
</button>
420+
`;
421+
422+
overlay.appendChild(popup);
423+
document.body.appendChild(overlay);
424+
425+
// Close popup when clicking outside
426+
overlay.addEventListener('click', function(e) {
427+
if (e.target === overlay) {
428+
closePopup();
429+
}
430+
});
431+
432+
// Store reference for closing
433+
window.currentPopup = overlay;
434+
}
435+
436+
function closePopup() {
437+
if (window.currentPopup) {
438+
document.body.removeChild(window.currentPopup);
439+
window.currentPopup = null;
440+
}
441+
}
442+
</script>
312443
</head>
313444
<body>
314445
<!-- Geometric background accents -->
@@ -329,34 +460,32 @@ <h1>codeGROOVE</h1>
329460
<div class="content-section">
330461
<div class="pain-point">Out-ship your competitors.</div>
331462
<div class="stat-highlight">
332-
We figured out something others missed.
463+
85%+ improvement in developer velocity.
333464
</div>
334465
<div class="benefit-text">
335-
What if code quality didn't slow you down? Reviews that
336-
happen at the speed of thought. The right things get
337-
attention, everything else flows through.
466+
Code quality doesn't have to slow you down. Reviews happen fast without interrupting your flow. Focus on building instead of waiting.
338467
</div>
339468
</div>
340469

341470
<div class="waveform-border"></div>
342471

343-
<div class="content-section">
472+
<div class="mystery-reveal">
344473
<div class="benefit-text">
345-
The breakthrough everyone's been waiting for. Ship daily
346-
without breaking things. Scale review quality with team
347-
size. It's not what you think.
474+
Tools that amplify what you're already good at. Ship faster without compromising quality. Scale your impact as your team grows.
348475
</div>
476+
</div>
349477

478+
<div class="content-section">
350479
<div class="user-types">
351480
<div class="user-type">
352481
<h3>Open Source Teams</h3>
353482
<p>
354-
The thing that's been missing from your workflow
483+
Keep contributors engaged with instant feedback
355484
</p>
356485
</div>
357486
<div class="user-type">
358487
<h3>Large Enterprises</h3>
359-
<p>What Google figured out but never shared</p>
488+
<p>Scale your development velocity, not your overhead</p>
360489
</div>
361490
</div>
362491
</div>
@@ -373,11 +502,10 @@ <h3>Large Enterprises</h3>
373502
margin-bottom: 15px;
374503
"
375504
>
376-
The 10x developer multiplier. Available sooner than you
377-
think.
505+
Fast reviews. Preserved flow. Better code.
378506
</h2>
379-
<a href="#" class="cta-button">Get Early Access</a>
380-
<div class="social-proof">Join your competition.</div>
507+
<a href="#" class="cta-button" onclick="sendEmail(); return false;">Get Early Access</a>
508+
<div class="social-proof">Join developers building the future of code review</div>
381509
</div>
382510
</div>
383511
</div>

0 commit comments

Comments
 (0)