Skip to content

Commit f4f4853

Browse files
tstrombergtstromberg
committed
v0
1 parent 15263aa commit f4f4853

File tree

11 files changed

+386
-0
lines changed

11 files changed

+386
-0
lines changed

‎index.html‎

Lines changed: 385 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,385 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>CodeGroove - Quality Tools for Open Source Engineers</title>
7+
<style>
8+
@font-face {
9+
font-family: "Ojuju Bold";
10+
src: url("media/fonts/Ojuju-Bold.ttf") format("truetype");
11+
font-weight: bold;
12+
font-style: normal;
13+
}
14+
15+
@font-face {
16+
font-family: "Ojuju Regular";
17+
src: url("media/fonts/Ojuju-Regular.ttf") format("truetype");
18+
font-weight: normal;
19+
font-style: normal;
20+
}
21+
22+
@font-face {
23+
font-family: "Ojuju Medium";
24+
src: url("media/fonts/Ojuju-Medium.ttf") format("truetype");
25+
font-weight: 500;
26+
font-style: normal;
27+
}
28+
29+
* {
30+
margin: 0;
31+
padding: 0;
32+
box-sizing: border-box;
33+
}
34+
35+
body {
36+
font-family: "Arial", "Helvetica", sans-serif;
37+
background: #ffff00;
38+
min-height: 100vh;
39+
display: flex;
40+
flex-direction: column;
41+
align-items: center;
42+
justify-content: center;
43+
color: black;
44+
overflow-x: hidden;
45+
position: relative;
46+
}
47+
48+
/* Geometric background elements */
49+
.bg-accent {
50+
position: absolute;
51+
background: black;
52+
z-index: -1;
53+
}
54+
55+
.bg-accent-1 {
56+
width: 140px;
57+
height: 80px;
58+
top: 10%;
59+
left: 5%;
60+
transform: rotate(12deg);
61+
}
62+
63+
.bg-accent-2 {
64+
width: 100px;
65+
height: 120px;
66+
top: 60%;
67+
right: 8%;
68+
transform: rotate(-8deg);
69+
}
70+
71+
.bg-accent-3 {
72+
width: 160px;
73+
height: 40px;
74+
bottom: 15%;
75+
left: 10%;
76+
transform: rotate(5deg);
77+
}
78+
79+
.container {
80+
text-align: left;
81+
padding: 40px 20px;
82+
max-width: 1200px;
83+
width: 100%;
84+
display: grid;
85+
grid-template-columns: 1fr 2fr;
86+
gap: 60px;
87+
align-items: center;
88+
}
89+
90+
.hero-left {
91+
text-align: center;
92+
}
93+
94+
.hero-right {
95+
text-align: left;
96+
}
97+
98+
.logo {
99+
width: 200px;
100+
height: 200px;
101+
margin: 0 auto 40px;
102+
border-radius: 50%;
103+
border: 4px solid black;
104+
border-bottom: 8px solid black;
105+
border-right: 8px solid black;
106+
box-shadow: 8px 8px 0 black;
107+
animation: pulse 3s ease-in-out infinite;
108+
}
109+
110+
@keyframes pulse {
111+
0%,
112+
100% {
113+
transform: scale(1);
114+
}
115+
50% {
116+
transform: scale(1.05);
117+
}
118+
}
119+
120+
h1 {
121+
font-family: "Ojuju Bold", "Arial", sans-serif;
122+
font-size: 4rem;
123+
font-weight: bold;
124+
color: black;
125+
margin-bottom: 20px;
126+
letter-spacing: 2px;
127+
}
128+
129+
.tagline {
130+
font-family: "Arial", "Helvetica", sans-serif;
131+
font-size: 1.8rem;
132+
font-weight: bold;
133+
margin-bottom: 30px;
134+
color: black;
135+
letter-spacing: 1px;
136+
transform: rotate(-2deg);
137+
display: inline-block;
138+
}
139+
140+
.pain-point {
141+
font-family: "Arial", "Helvetica", sans-serif;
142+
font-size: 2rem;
143+
font-weight: bold;
144+
color: black;
145+
margin-bottom: 20px;
146+
transform: rotate(1deg);
147+
display: inline-block;
148+
}
149+
150+
.content-section {
151+
margin-bottom: 40px;
152+
}
153+
154+
.stat-highlight {
155+
font-family: "Arial", "Helvetica", sans-serif;
156+
font-size: 1.4rem;
157+
font-weight: bold;
158+
color: black;
159+
background: white;
160+
padding: 15px 25px;
161+
border: 3px solid black;
162+
border-bottom: 6px solid black;
163+
border-right: 6px solid black;
164+
display: inline-block;
165+
margin-bottom: 20px;
166+
transform: skew(-5deg);
167+
}
168+
169+
.benefit-text {
170+
font-family: "Arial", "Helvetica", sans-serif;
171+
font-size: 1.2rem;
172+
line-height: 1.7;
173+
margin-bottom: 30px;
174+
}
175+
176+
.user-types {
177+
display: flex;
178+
gap: 20px;
179+
margin: 30px 0;
180+
}
181+
182+
.user-type {
183+
background: white;
184+
padding: 20px;
185+
border: 3px solid black;
186+
border-bottom: 6px solid black;
187+
border-right: 6px solid black;
188+
flex: 1;
189+
text-align: center;
190+
}
191+
192+
.user-type h3 {
193+
font-family: "Arial", "Helvetica", sans-serif;
194+
font-size: 1.1rem;
195+
font-weight: bold;
196+
margin-bottom: 10px;
197+
}
198+
199+
.cta-section {
200+
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;
206+
text-align: center;
207+
margin-top: 40px;
208+
}
209+
210+
.cta-button {
211+
font-family: "Arial", "Helvetica", sans-serif;
212+
font-size: 1.3rem;
213+
font-weight: bold;
214+
background: #ffff00;
215+
color: black;
216+
padding: 18px 36px;
217+
border: 4px solid black;
218+
border-bottom: 6px solid black;
219+
border-right: 6px solid black;
220+
cursor: pointer;
221+
text-decoration: none;
222+
display: inline-block;
223+
margin: 20px 0;
224+
transition: transform 0.2s ease;
225+
}
226+
227+
.cta-button:hover {
228+
transform: translate(-2px, -2px);
229+
box-shadow: 6px 6px 0 black;
230+
}
231+
232+
.social-proof {
233+
font-family: "Arial", "Helvetica", sans-serif;
234+
font-size: 1rem;
235+
color: black;
236+
margin-top: 15px;
237+
}
238+
239+
.waveform-border {
240+
height: 20px;
241+
background: repeating-linear-gradient(
242+
90deg,
243+
black 0px,
244+
black 4px,
245+
white 4px,
246+
white 8px,
247+
black 8px,
248+
black 12px,
249+
white 12px,
250+
white 20px,
251+
black 20px,
252+
black 24px,
253+
white 24px,
254+
white 28px
255+
);
256+
margin: 30px 0;
257+
border: 2px solid black;
258+
}
259+
260+
.contact-info {
261+
font-size: 1.1rem;
262+
margin-top: 40px;
263+
font-weight: bold;
264+
color: black;
265+
}
266+
267+
.funk-divider {
268+
width: 200px;
269+
height: 12px;
270+
background: repeating-linear-gradient(
271+
45deg,
272+
black 0px,
273+
black 10px,
274+
white 10px,
275+
white 20px
276+
);
277+
margin: 30px auto;
278+
border: 2px solid black;
279+
border-bottom: 4px solid black;
280+
border-right: 4px solid black;
281+
transform: skew(-10deg);
282+
}
283+
284+
@media (max-width: 768px) {
285+
.container {
286+
grid-template-columns: 1fr;
287+
gap: 40px;
288+
text-align: center;
289+
}
290+
291+
.hero-right {
292+
text-align: center;
293+
}
294+
295+
h1 {
296+
font-size: 2.5rem;
297+
}
298+
.tagline {
299+
font-size: 1.4rem;
300+
}
301+
.pain-point {
302+
font-size: 1.6rem;
303+
}
304+
.user-types {
305+
flex-direction: column;
306+
}
307+
.bg-accent {
308+
display: none;
309+
}
310+
}
311+
</style>
312+
</head>
313+
<body>
314+
<!-- Geometric background accents -->
315+
<div class="bg-accent bg-accent-1"></div>
316+
<div class="bg-accent bg-accent-2"></div>
317+
<div class="bg-accent bg-accent-3"></div>
318+
319+
<div class="container">
320+
<div class="hero-left">
321+
<img src="media/logo.png" alt="CodeGroove Logo" class="logo" />
322+
<h1>codeGROOVE</h1>
323+
<div class="tagline">
324+
Open-source friendly developer tools that scale
325+
</div>
326+
</div>
327+
328+
<div class="hero-right">
329+
<div class="content-section">
330+
<div class="pain-point">Out-ship your competitors.</div>
331+
<div class="stat-highlight">
332+
We figured out something others missed.
333+
</div>
334+
<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.
338+
</div>
339+
</div>
340+
341+
<div class="waveform-border"></div>
342+
343+
<div class="content-section">
344+
<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.
348+
</div>
349+
350+
<div class="user-types">
351+
<div class="user-type">
352+
<h3>Open Source Teams</h3>
353+
<p>
354+
The thing that's been missing from your workflow
355+
</p>
356+
</div>
357+
<div class="user-type">
358+
<h3>Large Enterprises</h3>
359+
<p>What Google figured out but never shared</p>
360+
</div>
361+
</div>
362+
</div>
363+
364+
<div class="funk-divider"></div>
365+
366+
<div class="cta-section">
367+
<h2
368+
style="
369+
font-family:
370+
&quot;Arial&quot;, &quot;Helvetica&quot;,
371+
sans-serif;
372+
font-weight: bold;
373+
margin-bottom: 15px;
374+
"
375+
>
376+
The 10x developer multiplier. Available sooner than you
377+
think.
378+
</h2>
379+
<a href="#" class="cta-button">Get Early Access</a>
380+
<div class="social-proof">Join your competition.</div>
381+
</div>
382+
</div>
383+
</div>
384+
</body>
385+
</html>

‎media/fonts/Ojuju-Bold.ttf‎

131 KB
Binary file not shown.

‎media/fonts/Ojuju-ExtraBold.ttf‎

131 KB
Binary file not shown.

‎media/fonts/Ojuju-ExtraLight.ttf‎

130 KB
Binary file not shown.

‎media/fonts/Ojuju-Light.ttf‎

130 KB
Binary file not shown.

‎media/fonts/Ojuju-Medium.ttf‎

131 KB
Binary file not shown.

‎media/fonts/Ojuju-Regular.ttf‎

131 KB
Binary file not shown.

‎media/fonts/Ojuju-SemiBold.ttf‎

131 KB
Binary file not shown.

‎media/fonts/Ojuju-VariableFont_wght.ttf‎

219 KB
Binary file not shown.

‎media/logo.png‎

382 KB
Loading

0 commit comments

Comments
 (0)