Skip to content

Commit 7ae986e

Browse files
tstrombergtstromberg
committed
v3
1 parent 11d7583 commit 7ae986e

File tree

1 file changed

+81
-78
lines changed

1 file changed

+81
-78
lines changed

‎index.html‎

Lines changed: 81 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
width: 100%;
8484
display: grid;
8585
grid-template-columns: 1fr 2fr;
86-
gap: 60px;
86+
gap: 80px;
8787
align-items: center;
8888
}
8989

@@ -142,58 +142,62 @@
142142
font-size: 2.5rem;
143143
font-weight: bold;
144144
color: black;
145+
background: white;
146+
padding: 20px 30px;
147+
border: 4px solid black;
148+
border-bottom: 8px solid black;
149+
border-right: 8px solid black;
150+
box-shadow: 6px 6px 0 black;
145151
margin-bottom: 30px;
146152
transform: rotate(1deg);
147153
display: inline-block;
148-
text-shadow: 3px 3px 0 white;
149154
}
150155

151156
.content-section {
152-
margin-bottom: 50px;
157+
margin-bottom: 40px;
153158
}
154159

155-
.mystery-reveal {
160+
.main-content {
156161
background: white;
157-
padding: 30px;
162+
padding: 40px;
158163
border: 4px solid black;
159164
border-bottom: 8px solid black;
160165
border-right: 8px solid black;
161166
box-shadow: 8px 8px 0 black;
162-
margin: 40px 0;
163-
transform: rotate(-1deg);
164-
position: relative;
167+
margin: 30px 0;
165168
}
166169

167-
168170
.stat-highlight {
169171
font-family: "Arial", "Helvetica", sans-serif;
170-
font-size: 1.6rem;
172+
font-size: 1.4rem;
171173
font-weight: bold;
172174
color: black;
173-
background: white;
174-
padding: 20px 30px;
175-
border: 4px solid black;
176-
border-bottom: 8px solid black;
177-
border-right: 8px solid black;
175+
background: #ffff00;
176+
padding: 15px 25px;
177+
border: 3px solid black;
178+
border-bottom: 6px solid black;
179+
border-right: 6px solid black;
178180
display: inline-block;
179-
margin-bottom: 30px;
180-
transform: skew(-5deg);
181-
box-shadow: 6px 6px 0 black;
182-
position: relative;
181+
margin: 20px 0;
182+
transform: skew(-3deg);
183+
box-shadow: 4px 4px 0 black;
183184
}
184185

185-
186186
.benefit-text {
187187
font-family: "Arial", "Helvetica", sans-serif;
188-
font-size: 1.2rem;
189-
line-height: 1.7;
190-
margin-bottom: 30px;
188+
font-size: 1.3rem;
189+
line-height: 1.8;
190+
margin-bottom: 25px;
191+
}
192+
193+
.benefit-text:last-of-type {
194+
margin-bottom: 35px;
191195
}
192196

193197
.user-types {
194198
display: flex;
195-
gap: 20px;
196-
margin: 30px 0;
199+
gap: 25px;
200+
margin: 20px 0 0 0;
197201
}
198202

199203
.user-type {
@@ -213,12 +217,17 @@
213217
box-shadow: 6px 6px 0 black;
214218
}
215219

216-
217220
.user-type h3 {
218221
font-family: "Arial", "Helvetica", sans-serif;
219-
font-size: 1.1rem;
222+
font-size: 1.2rem;
220223
font-weight: bold;
221-
margin-bottom: 10px;
224+
margin-bottom: 12px;
225+
}
226+
227+
.user-type p {
228+
font-size: 1rem;
229+
line-height: 1.5;
230+
margin: 0;
222231
}
223232

224233
.cta-section {
@@ -234,7 +243,6 @@
234243
transform: rotate(0.5deg);
235244
}
236245

237-
238246
.cta-button {
239247
font-family: "Arial", "Helvetica", sans-serif;
240248
font-size: 1.5rem;
@@ -261,33 +269,19 @@
261269
background: white;
262270
}
263271

264-
265272
.social-proof {
266273
font-family: "Arial", "Helvetica", sans-serif;
267274
font-size: 1rem;
268275
color: black;
269276
margin-top: 15px;
270277
}
271278

272-
.waveform-border {
273-
height: 20px;
274-
background: repeating-linear-gradient(
275-
90deg,
276-
black 0px,
277-
black 4px,
278-
white 4px,
279-
white 8px,
280-
black 8px,
281-
black 12px,
282-
white 12px,
283-
white 20px,
284-
black 20px,
285-
black 24px,
286-
white 24px,
287-
white 28px
288-
);
279+
.section-divider {
280+
height: 3px;
281+
background: black;
289282
margin: 30px 0;
290-
border: 2px solid black;
283+
width: 40%;
284+
opacity: 0.6;
291285
}
292286

293287
.contact-info {
@@ -333,6 +327,10 @@
333327
}
334328
.pain-point {
335329
font-size: 1.8rem;
330+
padding: 15px 20px;
331+
}
332+
.benefit-text {
333+
font-size: 1.1rem;
336334
}
337335
.mystery-reveal {
338336
transform: rotate(0deg);
@@ -353,20 +351,27 @@
353351
<script>
354352
function sendEmail() {
355353
// 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-
354+
const parts = ["lets-go-faster-plz", "codegroove", "dev"];
355+
const email = parts[0] + "@" + parts[1] + "." + parts[2];
356+
357+
const subject = "Early Access Request - CodeGroove";
358+
const body =
359+
"Hi CodeGroove team,\n\nI'm interested in getting early access to your developer tools.\n\nThanks!";
360+
361+
const mailtoLink =
362+
"mailto:" +
363+
email +
364+
"?subject=" +
365+
encodeURIComponent(subject) +
366+
"&body=" +
367+
encodeURIComponent(body);
368+
364369
showPopup(email, mailtoLink);
365370
}
366371

367372
function showPopup(email, mailtoLink) {
368373
// Create popup overlay
369-
const overlay = document.createElement('div');
374+
const overlay = document.createElement("div");
370375
overlay.style.cssText = `
371376
position: fixed;
372377
top: 0;
@@ -381,7 +386,7 @@
381386
`;
382387

383388
// Create popup content
384-
const popup = document.createElement('div');
389+
const popup = document.createElement("div");
385390
popup.style.cssText = `
386391
background: #FFFF00;
387392
border: 5px solid black;
@@ -423,7 +428,7 @@ <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; color: bla
423428
document.body.appendChild(overlay);
424429

425430
// Close popup when clicking outside
426-
overlay.addEventListener('click', function(e) {
431+
overlay.addEventListener("click", function (e) {
427432
if (e.target === overlay) {
428433
closePopup();
429434
}
@@ -458,24 +463,17 @@ <h1>codeGROOVE</h1>
458463

459464
<div class="hero-right">
460465
<div class="content-section">
461-
<div class="pain-point">Out-ship your competitors.</div>
462-
<div class="stat-highlight">
463-
85%+ improvement in developer velocity.
464-
</div>
465-
<div class="benefit-text">
466-
Code quality doesn't have to slow you down. Reviews happen fast without interrupting your flow. Focus on building instead of waiting.
467-
</div>
466+
<div class="pain-point">Out-ship your competition.</div>
468467
</div>
469468

470-
<div class="waveform-border"></div>
471-
472-
<div class="mystery-reveal">
469+
<div class="main-content">
473470
<div class="benefit-text">
474-
Tools that amplify what you're already good at. Ship faster without compromising quality. Scale your impact as your team grows.
471+
Code reviews in minutes instead of days. Bots that
472+
assist with broken tests before they slow you down.
473+
Allow your favorite engineers to go on vacation without
474+
disrupting project productivity.
475475
</div>
476-
</div>
477476

478-
<div class="content-section">
479477
<div class="user-types">
480478
<div class="user-type">
481479
<h3>Open Source Teams</h3>
@@ -485,13 +483,14 @@ <h3>Open Source Teams</h3>
485483
</div>
486484
<div class="user-type">
487485
<h3>Large Enterprises</h3>
488-
<p>Scale your development velocity, not your overhead</p>
486+
<p>
487+
Scale your development velocity, not your
488+
overhead
489+
</p>
489490
</div>
490491
</div>
491492
</div>
492493

493-
<div class="funk-divider"></div>
494-
495494
<div class="cta-section">
496495
<h2
497496
style="
@@ -502,10 +501,14 @@ <h3>Large Enterprises</h3>
502501
margin-bottom: 15px;
503502
"
504503
>
505-
Fast reviews. Preserved flow. Better code.
504+
Fast reviews. Better flow. Better code.
506505
</h2>
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>
506+
<a
507+
href="#"
508+
class="cta-button"
509+
onclick="sendEmail(); return false;"
510+
>Get Early Access</a
511+
>
509512
</div>
510513
</div>
511514
</div>

0 commit comments

Comments
 (0)