Skip to content

Commit bbe50af

Browse files
tstrombergtstromberg
committed
tune QR code page
1 parent 13a3fc2 commit bbe50af

File tree

2 files changed

+104
-61
lines changed

2 files changed

+104
-61
lines changed

‎src/assets/css/style.css‎

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -487,7 +487,7 @@ button,
487487
font-size: clamp(24px, 2.5vw + 18px, 32px);
488488
font-weight: 600;
489489
line-height: 1.2;
490-
margin: calc(var(--space) * 5) 0 calc(var(--space) * 3);
490+
margin: calc(var(--space) * 5) 0 calc(var(--space) * 5);
491491
color: var(--yellow);
492492
}
493493

@@ -574,6 +574,7 @@ button,
574574
/* Card Color Modifiers */
575575
.card--cyan {
576576
border-color: var(--cyan);
577+
padding: calc(var(--space) * 5);
577578
}
578579

579580
.card--yellow {
@@ -868,6 +869,52 @@ button,
868869
color: rgba(255, 255, 255, 0.7);
869870
}
870871

872+
/* Unified Card System - h2 inside cards */
873+
.card h2 {
874+
margin-top: 0;
875+
margin-bottom: calc(var(--space) * 2);
876+
font-size: clamp(24px, 2.5vw + 18px, 32px);
877+
font-weight: 700;
878+
color: var(--yellow);
879+
}
880+
881+
.card--cyan h2 {
882+
color: var(--cyan);
883+
}
884+
885+
.card--white h2 {
886+
color: var(--black);
887+
}
888+
889+
/* Product cards with images */
890+
.card--product {
891+
display: flex;
892+
align-items: flex-start;
893+
gap: calc(var(--space) * 4);
894+
flex-wrap: wrap;
895+
}
896+
897+
.product-card__image {
898+
flex-shrink: 0;
899+
}
900+
901+
.product-card__image img {
902+
width: 180px;
903+
height: 180px;
904+
display: block;
905+
}
906+
907+
.product-card__image--white-bg {
908+
background: var(--white);
909+
border-radius: var(--radius);
910+
padding: calc(var(--space) * 2);
911+
}
912+
913+
.product-card__content {
914+
flex: 1;
915+
min-width: 250px;
916+
}
917+
871918
/* Support Page Specific Styles */
872919
.support-hero-image {
873920
width: 150px;
@@ -940,9 +987,9 @@ button,
940987

941988
/* Product CTA Card Styling */
942989
.card--yellow {
943-
padding: calc(var(--space) * 6);
990+
padding: calc(var(--space) * 5);
944991
border: 4px solid var(--yellow);
945-
background: rgba(255, 232, 56, 0.1);
992+
background: var(--black);
946993
}
947994

948995
.product-card__cta-title {
@@ -1985,6 +2032,7 @@ button,
19852032
/* Product card content components - work within .card */
19862033
.product-card__title {
19872034
margin-top: 0;
2035+
margin-bottom: calc(var(--space) * 2);
19882036
color: var(--yellow);
19892037
font-size: clamp(28px, 3vw + 22px, 36px);
19902038
}
@@ -2069,7 +2117,6 @@ button,
20692117
}
20702118

20712119
.product-card__cta {
2072-
text-align: center;
20732120
margin-top: calc(var(--space) * 4);
20742121
}
20752122

‎src/qr/index.njk‎

Lines changed: 53 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -13,78 +13,74 @@ title: Welcome
1313
<img src="/assets/goose-clap.png" alt="Goose clapping in recognition" class="card__image" />
1414
<div class="card__content">
1515
<p class="card__title u-mb-10">DUDE, YOU'RE AT KUBECON TOO?</p>
16-
<p class="card__text u-mb-20 u-font-bold u-font-size-18">THANKS FOR SCANNING THE QR CODE.</p>
17-
<p class="card__text">Built by former Kubernetes contributors who got tired of waiting days for PR reviews. We're on a mission to eliminate code review latency—helping teams merge code 20X faster while keeping developers in flow.</p>
16+
<p class="card__text">Former Kubernetes maintainers. Built <a href="https://github.com/google/triage-party">Triage Party</a>. Now helping teams merge code 20X faster.</p>
1817
</div>
1918
</div>
2019

21-
<h2 class="u-mt-40">OUR PRODUCTS</h2>
20+
<div class="card card--yellow card--product">
21+
<picture class="product-card__image product-card__image--white-bg">
22+
<source srcset="/assets/review-goose.webp" type="image/webp">
23+
<img src="/assets/review-goose.png" alt="Ready to Review" />
24+
</picture>
25+
<div class="product-card__content">
26+
<h2><a href="/products/ready-to-review/" style="color: var(--yellow); text-decoration: none;">Ready to Review</a></h2>
27+
<p class="product-card__subtitle">Built for teams, adored by individual contributors</p>
28+
<p class="product-card__text"><strong>Cut PR merge time from weeks to under an hour. No more begging for reviews.</strong></p>
2229

23-
<div class="card card--yellow">
24-
<h2 class="product-card__title">Ready to Review</h2>
25-
<p class="product-card__subtitle">Hyper-Intelligent Pull Request Notification & Assignment System - for OSS, Startups, and Enterprises alike.</p>
26-
<p class="product-card__text">Perfectly timed, actionable notifications that keep your team in flow. The right notification, at the right time, in the right place.</p>
27-
28-
<div class="product-card__section">
29-
<h3 class="product-card__section-title">Why Teams Choose Us</h3>
3030
<ul class="product-card__features">
31-
<li>
32-
<span class="icon icon--yellow">✓</span>
33-
<strong>Always know whose turn it is</strong> — deterministic state tracking eliminates ambiguity
34-
</li>
35-
<li>
36-
<span class="icon icon--yellow">✓</span>
37-
<strong>Stay in flow</strong> — get notified only when action is needed, not for every comment
38-
</li>
39-
<li>
40-
<span class="icon icon--yellow">✓</span>
41-
<strong>Work your way</strong> — Slack, Desktop (menubar/tray), or command-line integrations
42-
</li>
43-
<li>
44-
<span class="icon icon--yellow">✓</span>
45-
<strong>Free for open source</strong> — forever, no strings attached
46-
</li>
47-
</ul>
48-
</div>
31+
<li>
32+
<span class="icon icon--yellow">✓</span>
33+
<strong>Live updates</strong> — never waste time on stale or broken PRs
34+
</li>
35+
<li>
36+
<span class="icon icon--yellow">✓</span>
37+
<strong>Smart assignments</strong> — right reviewer, every time
38+
</li>
39+
<li>
40+
<span class="icon icon--yellow">✓</span>
41+
<strong>Slack, Desktop, CLI</strong> — works where you work
42+
</li>
43+
<li>
44+
<span class="icon icon--yellow">✓</span>
45+
<strong>Free for open source</strong> — forever
46+
</li>
47+
</ul>
4948

50-
<p class="product-card__text product-card__text--16 u-mb-0 u-mt-25">Curious how much PR latency is costing your team? <a href="https://cost.github.codegroove.app/?mode=org">Calculate your savings</a> with our free GitHub analyzer.</p>
49+
<p class="product-card__text product-card__text--16 u-mb-0 u-mt-25"><a href="https://cost.github.codegroove.app/?mode=org">Calculate your PR latency cost</a> (free GitHub analyzer)</p>
5150

5251
<div class="product-card__cta">
53-
<a href="/products/ready-to-review/" class="cta-button cta-button--green">Learn More & Get Started</a>
52+
<a href="/products/ready-to-review/" class="cta-button cta-button--green">Learn More →</a>
53+
</div>
5454
</div>
5555
</div>
5656

57-
<div class="card card--cyan">
58-
<h2 class="product-card__title product-card__title--cyan">Goose</h2>
59-
<p class="product-card__subtitle product-card__subtitle--yellow">Native Menubar PR Notification App - Built for Individual Contributors</p>
60-
<p class="product-card__text">Open-source desktop app that lives in your menubar (Mac) or system tray (Windows/Linux). Honks when it's your turn to act. No team permissions required.</p>
57+
<div class="card card--cyan card--product">
58+
<picture class="product-card__image product-card__image--white-bg">
59+
<img src="/assets/goose-logo-small.png" alt="Goose" />
60+
</picture>
61+
<div class="product-card__content">
62+
<h2><a href="/products/goose/" style="color: var(--cyan); text-decoration: none;">Goose</a></h2>
63+
<p class="product-card__text"><strong>Open-source menubar app. Honks when PRs are blocked on you.</strong></p>
64+
<p class="product-card__text">No special permissions required. Mac, Windows, Linux.</p>
6165

62-
<div class="product-card__section">
63-
<h3 class="product-card__section-title product-card__section-title--yellow">What You Get</h3>
6466
<ul class="product-card__features">
65-
<li>
66-
<span class="icon icon--cyan">🪿</span>
67-
<strong>Honk notifications</strong> — When you're blocking someone's PR
68-
</li>
69-
<li>
70-
<span class="icon icon--cyan">✈️</span>
71-
<strong>Jet sounds for your PRs</strong> — CI passes, reviews arrive, ready to merge
72-
</li>
73-
<li>
74-
<span class="icon icon--cyan">🧠</span>
75-
<strong>Turn-based tracking</strong> — Know whose court the ball is in
76-
</li>
77-
<li>
78-
<span class="icon icon--cyan">🔒</span>
79-
<strong>Privacy first</strong> — Runs locally, no telemetry, your PRs stay yours
80-
</li>
81-
</ul>
82-
</div>
83-
84-
<p class="product-card__text product-card__text--16 u-text-italic u-mb-0 u-mt-25">Trusted by Kubernetes core developers. Open source forever. <a href="/opensource/">Learn more about our OSS commitment</a></p>
67+
<li>
68+
<span class="icon icon--cyan">🪿</span>
69+
<strong>Honk</strong> — when you're blocking someone
70+
</li>
71+
<li>
72+
<span class="icon icon--cyan">✈️</span>
73+
<strong>Jet sounds</strong> — when your PR is ready to merge
74+
</li>
75+
<li>
76+
<span class="icon icon--cyan">🧠</span>
77+
<strong>Turn-based tracking</strong> — know whose turn it is
78+
</li>
79+
</ul>
8580

8681
<div class="product-card__cta">
87-
<a href="/products/goose/" class="cta-button cta-button--green">Learn More & Get Started</a>
82+
<a href="/products/goose/" class="cta-button cta-button--green">Learn More →</a>
83+
</div>
8884
</div>
8985
</div>
9086

0 commit comments

Comments
 (0)