Skip to content

Commit 13a3fc2

Browse files
tstrombergtstromberg
committed
product page improvements
1 parent 84c937c commit 13a3fc2

File tree

2 files changed

+192
-10
lines changed

2 files changed

+192
-10
lines changed

‎src/assets/css/style.css‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -674,6 +674,93 @@ button,
674674
font-weight: 600;
675675
}
676676

677+
/* Products Page Specific Styles */
678+
.products-mission {
679+
font-size: clamp(18px, 2vw + 14px, 22px);
680+
color: var(--cyan);
681+
margin-bottom: calc(var(--space) * 4);
682+
font-weight: 600;
683+
}
684+
685+
.product-badge {
686+
display: inline-block;
687+
font-size: clamp(13px, 1vw + 11px, 14px);
688+
color: #666 !important;
689+
font-weight: 600;
690+
margin-bottom: calc(var(--space) * 2);
691+
letter-spacing: 0.3px;
692+
}
693+
694+
.product-features {
695+
list-style: none;
696+
margin: calc(var(--space) * 2) 0 calc(var(--space) * 3) 0;
697+
padding: 0;
698+
}
699+
700+
.product-features li {
701+
padding-left: calc(var(--space) * 3);
702+
position: relative;
703+
margin-bottom: calc(var(--space) * 1.5);
704+
line-height: var(--leading);
705+
color: #333 !important;
706+
}
707+
708+
.product-features li::before {
709+
content: "•";
710+
position: absolute;
711+
left: var(--space);
712+
color: var(--cyan);
713+
font-weight: 700;
714+
font-size: clamp(18px, 1.5vw + 14px, 22px);
715+
}
716+
717+
.product-features a {
718+
color: #0066cc !important;
719+
font-weight: 600;
720+
text-decoration: underline;
721+
}
722+
723+
.card--comparison {
724+
background: rgba(92, 225, 230, 0.05);
725+
border: 2px solid rgba(92, 225, 230, 0.3);
726+
padding: calc(var(--space) * 4);
727+
margin-bottom: calc(var(--space) * 5);
728+
}
729+
730+
.card--comparison h3 {
731+
margin-top: 0;
732+
margin-bottom: calc(var(--space) * 2);
733+
font-size: clamp(20px, 2vw + 16px, 24px);
734+
color: var(--cyan);
735+
font-weight: 700;
736+
}
737+
738+
.comparison-list {
739+
list-style: none;
740+
margin: 0;
741+
padding: 0;
742+
}
743+
744+
.comparison-list li {
745+
padding-left: calc(var(--space) * 3);
746+
position: relative;
747+
margin-bottom: calc(var(--space) * 2);
748+
line-height: var(--leading);
749+
font-size: clamp(16px, 1vw + 14px, 18px);
750+
}
751+
752+
.comparison-list li:last-child {
753+
margin-bottom: 0;
754+
}
755+
756+
.comparison-list li::before {
757+
content: "→";
758+
position: absolute;
759+
left: 0;
760+
color: var(--cyan);
761+
font-weight: 700;
762+
}
763+
677764
/* Card content components - work within white cards */
678765
.card__image {
679766
width: 150px;
@@ -807,6 +894,86 @@ button,
807894
color: var(--black) !important;
808895
}
809896

897+
/* Product Page Cards - More Professional SaaS Layout */
898+
.card--white {
899+
padding: calc(var(--space) * 5);
900+
margin-bottom: calc(var(--space) * 5);
901+
}
902+
903+
.card--white .support-hero-image {
904+
width: 180px;
905+
height: 180px;
906+
}
907+
908+
.card--white h2 {
909+
margin-top: 0;
910+
margin-bottom: calc(var(--space) * 2);
911+
font-size: clamp(26px, 2.5vw + 20px, 32px);
912+
font-weight: 700;
913+
letter-spacing: 0.5px;
914+
}
915+
916+
.card--white h2 a {
917+
color: var(--cyan) !important;
918+
text-decoration: none;
919+
transition: color 0.2s;
920+
}
921+
922+
.card--white h2 a:hover {
923+
color: #000 !important;
924+
}
925+
926+
.card--white .support-hero-text {
927+
margin-bottom: calc(var(--space) * 3);
928+
font-size: clamp(17px, 1.2vw + 14px, 19px);
929+
line-height: 1.6;
930+
color: #333 !important;
931+
}
932+
933+
.card--white .cta-button {
934+
margin-top: calc(var(--space) * 1);
935+
padding: calc(var(--space) * 2) calc(var(--space) * 5);
936+
font-size: clamp(15px, 1vw + 13px, 17px);
937+
font-weight: 700;
938+
letter-spacing: 0.3px;
939+
}
940+
941+
/* Product CTA Card Styling */
942+
.card--yellow {
943+
padding: calc(var(--space) * 6);
944+
border: 4px solid var(--yellow);
945+
background: rgba(255, 232, 56, 0.1);
946+
}
947+
948+
.product-card__cta-title {
949+
font-size: clamp(20px, 2vw + 16px, 24px);
950+
font-weight: 700;
951+
margin-bottom: calc(var(--space) * 2);
952+
color: var(--white);
953+
letter-spacing: 0.5px;
954+
}
955+
956+
.product-card__cta-text {
957+
font-size: clamp(16px, 1vw + 14px, 18px);
958+
margin-bottom: calc(var(--space) * 3);
959+
color: var(--white);
960+
}
961+
962+
.product-card__links {
963+
display: flex;
964+
gap: calc(var(--space) * 2);
965+
justify-content: center;
966+
flex-wrap: wrap;
967+
}
968+
969+
/* Utility Classes */
970+
.u-mt-0 { margin-top: 0 !important; }
971+
.u-mt-20 { margin-top: calc(var(--space) * 2.5) !important; }
972+
.u-mt-40 { margin-top: calc(var(--space) * 5) !important; }
973+
.u-mb-20 { margin-bottom: calc(var(--space) * 2.5) !important; }
974+
.u-mb-40 { margin-bottom: calc(var(--space) * 5) !important; }
975+
.u-flex-shrink-0 { flex-shrink: 0 !important; }
976+
810977
/* White card with full-width content */
811978
.card--white-full h2 {
812979
color: #333 !important;

‎src/products/index.njk‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,34 +10,49 @@ eleventyExcludeFromCollections: true
1010

1111
<div class="content-hero-inner">
1212
<h1>PRODUCTS</h1>
13+
<p class="products-mission">Code review latency kills velocity. We fix it.</p>
1314

1415
<div class="card card--white u-mt-40">
1516
<picture class="u-flex-shrink-0">
1617
<source srcset="/assets/review-goose.webp" type="image/webp">
1718
<img src="/assets/review-goose.png" alt="Ready to Review" class="support-hero-image" />
1819
</picture>
1920
<div class="support-hero-content">
20-
<h2 class="u-mt-0"><a href="/products/ready-to-review/" style="color: var(--cyan); text-decoration: none;">READY TO REVIEW</a></h2>
21-
<p class="support-hero-text u-mb-20" style="font-size: 18px;">Hyper-intelligent pull request notifications and automated reviewer assignments for teams that ship fast.</p>
22-
<a href="/products/ready-to-review/" class="cta-button">Learn More →</a>
21+
<h2><a href="/products/ready-to-review/">READY TO REVIEW</a></h2>
22+
<p class="product-badge">Public Beta • For Teams • GitHub</p>
23+
<p class="support-hero-text">
24+
Cut PR merge time from days to under an hour. Saves senior engineers 5+ hours/week.
25+
No more begging for reviews or forgotten pull requests.
26+
</p>
27+
<ul class="product-features">
28+
<li>Live updates prevent wasted work on stale or broken PRs</li>
29+
<li>Context-driven assignments that prevent bottlenecks</li>
30+
<li>Works in Slack, Web, and Desktop</li>
31+
<li>Built by the team behind <a href="https://github.com/google/triage-party">Triage Party</a> (used by Kubernetes)</li>
32+
</ul>
33+
<a href="/products/ready-to-review/" class="cta-button">See how it works →</a>
2334
</div>
2435
</div>
2536

26-
<div class="card card--white u-mt-40">
37+
<div class="card card--white">
2738
<picture class="u-flex-shrink-0">
2839
<source srcset="/assets/goose-logo-small.png" type="image/png">
2940
<img src="/assets/goose-logo-small.png" alt="Goose" class="support-hero-image" />
3041
</picture>
3142
<div class="support-hero-content">
32-
<h2 class="u-mt-0"><a href="/products/goose/" style="color: var(--cyan); text-decoration: none;">GOOSE</a></h2>
33-
<p class="support-hero-text u-mb-20" style="font-size: 18px;">Native menubar app for tracking PRs blocked on you - built for individuals (no permission required).</p>
34-
<a href="/products/goose/" class="cta-button">Learn More →</a>
43+
<h2><a href="/products/goose/">GOOSE</a></h2>
44+
<p class="product-badge">Individual • No Permission Required</p>
45+
<p class="support-hero-text">
46+
Lightweight menubar app for individual developers.
47+
Track PRs blocked on you without requiring team buy-in.
48+
</p>
49+
<a href="/products/goose/" class="cta-button">Learn more →</a>
3550
</div>
3651
</div>
3752

38-
<div class="card card--centered card--spacious card--yellow">
39-
<p class="product-card__cta-title">NOT SURE WHICH ONE IS RIGHT FOR YOU?</p>
40-
<p class="product-card__cta-text">We're here to help. Get in touch.</p>
53+
<div class="card card--centered card--yellow">
54+
<p class="product-card__cta-title">QUESTIONS?</p>
55+
<p class="product-card__cta-text">Let's talk about your code review workflow.</p>
4156
<div class="product-card__links">
4257
<a href="#" class="cta-button cta-button--yellow" id="email-contact" data-email-prefix="find-your-fit">Email us</a>
4358
<a href="https://calendar.app.google/TbQmeX8iWnvx6Ci89" class="cta-button">Book a call</a>

0 commit comments

Comments
 (0)