diff --git a/assets/css/custom.scss b/assets/css/custom.scss index 5a41cea0..3f9fdd99 100644 --- a/assets/css/custom.scss +++ b/assets/css/custom.scss @@ -4250,4 +4250,411 @@ font-size: 1.55rem; } } +// --------------------------------------------------------------------------- +// HOME — CASE STUDY HIGHLIGHTS SLIDER (#case-study-highlights, .csh-*) +// Featured case-study cards on a sliding track, navigated by a client-logo +// tab strip with an autoplay progress bar. Markup lives in +// layouts/shortcodes/case-study-slider.html; see docs/case-studies.md. +// --------------------------------------------------------------------------- +.csh { + margin-top: 1.8rem; + + &__viewport { + overflow: hidden; + border-radius: 24px; + box-shadow: 0 24px 48px -28px rgba(14, 56, 58, 0.45); + } + &__track { + display: flex; + transition: transform 0.65s cubic-bezier(0.33, 0, 0.15, 1); + will-change: transform; + } +} + +.csh-slide { + flex: 0 0 100%; + min-width: 100%; + // Keep off-screen slides out of the accessibility tree / paint until they + // slide in: hide only after the track transition has finished. + visibility: hidden; + transition: visibility 0s 0.65s; + &.is-active { + visibility: visible; + transition-delay: 0s; + } +} + +.csh-card { + display: flex; + height: 100%; + min-height: 460px; + position: relative; + overflow: hidden; + border-radius: 24px; + background: linear-gradient(135deg, #0e383a 0%, #0a2a2c 55%, #061d1e 100%); + color: #fff; + + // soft mint / pink glows (echoes the case-study hero) + &::before { + content: ""; + position: absolute; + inset: 0; + background: + radial-gradient(ellipse at 85% 15%, rgba(42, 217, 194, 0.16), transparent 55%), + radial-gradient(ellipse at 8% 92%, rgba(216, 145, 206, 0.12), transparent 50%); + pointer-events: none; + } + // faint dot grid, fading downward + &::after { + content: ""; + position: absolute; + inset: 0; + background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); + background-size: 28px 28px; + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 80%); + -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 80%); + pointer-events: none; + } + + &__topline { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + z-index: 2; + background: linear-gradient(92deg, #ede497 -0.66%, #2ad9c2 26%, #d891ce 59.55%); + } + + &__body { + position: relative; + z-index: 1; + flex: 1 1 55%; + min-width: 0; + padding: 2.2rem 2.8rem; + display: flex; + flex-direction: column; + align-items: flex-start; + // slides share the tallest card's height; centering the content group keeps + // a shorter card (fewer title lines / blurb) balanced instead of leaving a + // dead gap above a bottom-pinned CTA + justify-content: center; + } + + &__logo { + margin-bottom: 1.1rem; + img { + display: block; + height: var(--cs-client-logo-h, 32px); + width: auto; + } + } + + &__title { + font-size: 1.85rem; + font-weight: 800; + line-height: 1.22em; + color: #fff; + margin-bottom: 0.9rem; + max-width: 36rem; + } + + &__blurb { + color: rgba(255, 255, 255, 0.82); + font-size: 1rem; + line-height: 1.55em; + margin-bottom: 1.3rem; + max-width: 34rem; + } + + &__cta { + margin-top: 0.4rem; + } + + &__media { + flex: 1 1 45%; + position: relative; + min-height: 260px; + img { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + // blend the photo into the pine card + &::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(90deg, rgba(10, 42, 44, 0.55) 0%, rgba(10, 42, 44, 0) 35%); + pointer-events: none; + } + } +} + +.csh-nav { + display: flex; + align-items: center; + // centered on the outer row; the inner __tabs group scrolls when it + // overflows (centering the scroll container itself would clip its left end) + justify-content: center; + gap: 0.9rem; + margin-top: 1.1rem; + min-width: 0; + + &__tabs { + display: flex; + gap: 1rem; + min-width: 0; + overflow-x: auto; + padding: 0.25rem 0.25rem 0.45rem; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } + } + + // persistent autoplay pause/play control (WCAG 2.2.2) + &__toggle { + flex: 0 0 auto; + appearance: none; + -webkit-appearance: none; + width: 46px; + height: 46px; + display: flex; + align-items: center; + justify-content: center; + background: #fff; + border: 1px solid #dfe7e7; + border-radius: 50%; + cursor: pointer; + transition: + border-color 0.25s, + box-shadow 0.25s; + svg { + display: block; + width: 13px; + height: 13px; + fill: #0e383a; + } + .csh-nav__icon-play { + display: none; + } + &:hover, + &:focus-visible { + border-color: #2ad9c2; + } + &:focus-visible { + outline: 2px solid #2ad9c2; + outline-offset: 2px; + } + } + + // text fallback when a case study has no logo for the tab strip + &__name { + display: block; + font-weight: 700; + font-size: 1rem; + line-height: 30px; + color: #0e383a; + white-space: nowrap; + } + + &__tab { + flex: 0 0 auto; + appearance: none; + -webkit-appearance: none; + background: #fff; + border: 1px solid #dfe7e7; + border-radius: 14px; + padding: 1.05rem 2.2rem 1.2rem; + cursor: pointer; + position: relative; + overflow: hidden; + transition: + border-color 0.25s, + box-shadow 0.25s; + + img { + display: block; + height: 30px; + width: auto; + filter: grayscale(1); + opacity: 0.5; + transition: + filter 0.25s, + opacity 0.25s; + } + &:hover, + &:focus-visible { + border-color: #b9cdcd; + img { + filter: none; + opacity: 1; + } + } + &:focus-visible { + outline: 2px solid #2ad9c2; + outline-offset: 2px; + } + &.is-active { + border-color: rgba(42, 217, 194, 0.5); + box-shadow: 0 12px 24px -14px rgba(14, 56, 58, 0.4); + img { + filter: none; + opacity: 1; + } + } + } + + &__bar { + display: block; + position: absolute; + // inset 1px so the bar hugs the inside of the tab border and its rounded + // corners instead of notching past them + left: 1px; + right: 1px; + bottom: 1px; + height: 4px; + border-radius: 0 0 13px 13px; + overflow: hidden; + background: rgba(14, 56, 58, 0.08); + } + &__progress { + display: block; + height: 100%; + // full-width gradient revealed by the clip-path animation, so the colors + // stay put while the bar fills (a width animation would stretch them) + width: 100%; + background: linear-gradient(92deg, #ede497 -0.66%, #2ad9c2 26%, #d891ce 59.55%); + clip-path: inset(0 100% 0 0); + } +} + +// Autoplay: the active tab's bar fills over 8s (only while the slider is on +// screen); the shortcode JS advances on animationend and toggles the classes. +// The paused/stopped rules must match the run rule's specificity and come +// AFTER it — the `animation` shorthand resets animation-play-state to +// `running`, so a lower-specificity pause rule would silently lose. +.csh.csh--inview .csh-nav__tab.is-active .csh-nav__progress { + animation: cshProgress 8s linear forwards; +} +.csh.csh--paused .csh-nav__tab.is-active .csh-nav__progress { + animation-play-state: paused; +} +.csh.csh--stopped .csh-nav__tab.is-active .csh-nav__progress { + animation: none; +} +.csh.csh--stopped .csh-nav__toggle { + .csh-nav__icon-pause { + display: none; + } + .csh-nav__icon-play { + display: block; + } +} +@keyframes cshProgress { + from { + clip-path: inset(0 100% 0 0); + } + to { + clip-path: inset(0 0 0 0); + } +} + +.csh-see-all { + margin-top: 1.6rem; +} + +@media (prefers-reduced-motion: reduce) { + .csh__track { + transition: none; + } + .csh-slide { + transition: none; + } + .csh .csh-nav__progress { + animation: none !important; + } +} + +@media (max-width: 991px) { + .csh-card { + // media (last child) on top, text below — mirrors the list-page cards + flex-direction: column-reverse; + min-height: 0; + + &__body { + padding: 2.2rem 1.7rem 2rem; + } + &__title { + font-size: 1.45rem; + } + &__media { + flex: 0 0 auto; + width: 100%; + min-height: 0; + height: 240px; + &::after { + background: linear-gradient(0deg, rgba(10, 42, 44, 0.55) 0%, rgba(10, 42, 44, 0) 40%); + } + } + } + .csh-nav__toggle { + width: 40px; + height: 40px; + } + .csh-nav__tab { + padding: 0.85rem 1.5rem 1rem; + border-radius: 12px; + img { + height: 24px; + } + } + .csh-nav__name { + line-height: 24px; + font-size: 0.95rem; + } +} + +@media (max-width: 575px) { + .csh { + margin-top: 1.8rem; + } + .csh__viewport { + border-radius: 18px; + } + .csh-card { + border-radius: 18px; + &__body { + padding: 1.9rem 1.3rem 1.8rem; + } + &__media { + height: 200px; + } + } + // tighten the control strip so toggle + both tabs fit a small phone + .csh-nav { + gap: 0.6rem; + } + .csh-nav__tabs { + gap: 0.6rem; + } + .csh-nav__toggle { + width: 36px; + height: 36px; + } + .csh-nav__tab { + padding: 0.7rem 1.1rem 0.85rem; + img { + height: 22px; + } + } + .csh-nav__name { + line-height: 22px; + font-size: 0.9rem; + } +} + @import "case-studies.scss"; diff --git a/content/case-studies/cursor.md b/content/case-studies/cursor.md index 85552f03..859a8533 100644 --- a/content/case-studies/cursor.md +++ b/content/case-studies/cursor.md @@ -12,7 +12,7 @@ client_logo: /img/case-studies/cursor/cursor-lockup-white.svg client_logo_height: 40px hero_title: "How Cursor Rebuilt Its Terraform Workflow with Masterpoint: 5x Faster Plans, 2x More Deployments" hero_aside_image: /img/case-studies/cursor/cursor-team-photo.webp -hero_aside_alt: "A Cursor engineer leads a team discussion at a chalkboard sketched with background-agent architecture" +hero_aside_alt: "Cursor engineers having a team whiteboard discussion about AI agent architecture." hero_photo_inset: true # photo sits in the right 75% (25% plain-pine inseam on the left), left-biased crop # At-a-glance stat strip (appears under hero) — headline % / x increase on top, @@ -31,12 +31,19 @@ stat_bar: preview_image: /img/case-studies/cursor/cursor-masterpoint.png og_img: /img/case-studies/cursor/cursor-masterpoint.png +# Homepage highlight card (see docs/case-studies.md → Homepage slider) +highlight: + blurb: "Cursor's AWS infrastructure had outgrown the architecture and engineers had stopped trusting the system. Masterpoint audited, re-architected, and modernized the platform so the whole engineering org now ships infrastructure changes quickly and with confidence." + image: /img/case-studies/cursor/cursor-team-photo.webp + image_alt: "Cursor engineers having a team whiteboard discussion about AI agent architecture." + logo: /img/logos/cursor.svg + sitemap: priority: 0 --- {{< csi-section accent="true" title="Executive Summary" variant="light" align="center" >}} -[Cursor is an applied research AI lab](https://cursor.com/), with products used by [over half of the Fortune 500](https://cursor.com/enterprise). Cursor's AWS cloud infrastructure had outgrown the monolithic Terraform architecture it was built on: plans & deployments took 10+ minutes, diffs were noisy and unreadable, and engineers had stopped trusting the system. Masterpoint audited the infrastructure, decomposed the [terralith](https://masterpoint.io/blog/terralith-monolithic-terraform-architecture/), built an [Infrastructure as Code](https://aws.amazon.com/what-is/iac/) platform with a new scalable architecture, migrated to Spacelift & OpenTofu, and embedded AI agent guardrails so the new architecture sticks, along with a series of platform improvements detailed in the story below. Plans now run **5x faster**, engineers ship **2.6x more** infrastructure changes every week, and with a **91% reduction in blast radius**. +[Cursor is an applied research AI lab](https://cursor.com/), with products used by [over half of the Fortune 500](https://cursor.com/enterprise). Cursor's AWS cloud infrastructure had outgrown the monolithic Terraform architecture it was built on: plans & deployments took 10+ minutes, diffs were noisy and unreadable, and engineers had stopped trusting the system. Masterpoint audited the infrastructure, decomposed the [terralith](https://masterpoint.io/blog/terralith-monolithic-terraform-architecture/), built an [Infrastructure as Code](https://aws.amazon.com/what-is/iac/) platform with a new scalable architecture, migrated to Spacelift & OpenTofu, and embedded AI agent guardrails so the new architecture sticks, along with a series of platform improvements detailed in the story below. Plans now run **5x faster** and engineers ship **2.6x more** infrastructure changes every week, all with a **91% reduction in blast radius**. {{< csi-carousel >}} image: /img/case-studies/cursor/cursor-terraform-5x-faster-masterpoint.png diff --git a/content/case-studies/marketspark.md b/content/case-studies/marketspark.md index 2e1a2671..9530f461 100644 --- a/content/case-studies/marketspark.md +++ b/content/case-studies/marketspark.md @@ -29,6 +29,13 @@ stat_bar: preview_image: /img/case-studies/marketspark/marketspark-aws.png og_img: /img/case-studies/marketspark/marketspark-aws.png +# Homepage highlight card (see docs/case-studies.md → Homepage slider) +highlight: + blurb: "Masterpoint rebuilt MarketSpark's single manually-operated AWS account into an 11-account AWS Organization: fully codified, automated, and scalable to business growth." + image: /img/case-studies/marketspark/telecommunications.jpg + image_alt: "City lights glowing across Earth at night, seen from orbit" + logo: /img/case-studies/marketspark/marketspark-logo-dark.png + sitemap: priority: 0 --- diff --git a/content/case-studies/power-digital.md b/content/case-studies/power-digital.md index 5e2fe24f..ee87ae45 100644 --- a/content/case-studies/power-digital.md +++ b/content/case-studies/power-digital.md @@ -1,7 +1,7 @@ --- title: "Power Digital: 10x Reduction in Infrastructure Automation Costs, 8x Faster Client Onboarding" weight: 3 -description: "Masterpoint migrated Power Digital's 43,000-resource Terraform monolith from Terraform Cloud to Spacelift and OpenTofu: 10x lower projected automation costs, plan/apply cycles down from 25 minutes to under 3, failed runs eliminated, and 100+ new clients onboarded in the first 60 days." +description: "Masterpoint decomposed & migrated Power Digital's 43,000-resource Terraform monolith from Terraform Cloud to Spacelift and OpenTofu: 10x lower projected automation costs, plan/apply cycles down from 25 minutes to under 3, failed runs eliminated, and 100+ new clients onboarded in the first 60 days." layout: immersive @@ -29,6 +29,13 @@ stat_bar: preview_image: /img/case-studies/power-digital/power-digital-case-study-preview.jpg og_img: /img/case-studies/power-digital/power-digital-case-study-preview.jpg +# Homepage highlight card (see docs/case-studies.md → Homepage slider) +highlight: + blurb: "Masterpoint decomposed & migrated Power Digital's 43,000-resource Terraform monolith to Spacelift and OpenTofu, and the platform onboarded 100+ new clients in the first 60 days." + image: /img/case-studies/power-digital/power-digital-team.jpg + image_alt: "Power Digital team collaborating in their office" + logo: /img/case-studies/power-digital/power-digital-logo.png + sitemap: priority: 0 diff --git a/content/sections/home-case-studies.md b/content/sections/home-case-studies.md new file mode 100644 index 00000000..966575a3 --- /dev/null +++ b/content/sections/home-case-studies.md @@ -0,0 +1,23 @@ +--- +title: Case Study Success Stories +weight: 5 +section_categories: + - Home +id: case-study-highlights +--- + +
+
+ +### SUCCESS STORIES {.groupTitle .text-center .text-rhythm} + +

See case study success stories and learn how engineering teams partner with Masterpoint to turn tangled infrastructure into platforms that scale.

+ +
+
+ +{{}} + +
+See All Case Studies → +
diff --git a/content/sections/home-our-word.md b/content/sections/home-our-word.md index 772aec2d..0e77fc25 100644 --- a/content/sections/home-our-word.md +++ b/content/sections/home-our-word.md @@ -1,6 +1,6 @@ --- title: Don't take our word for it... -weight: 5 +weight: 6 #position: align-items-center justify-content-end size: col-12 col-md-7 #section_image: /img/doctor_and_patient.jpg diff --git a/docs/case-studies.md b/docs/case-studies.md index 7a6bee88..6a9c9983 100644 --- a/docs/case-studies.md +++ b/docs/case-studies.md @@ -72,6 +72,46 @@ card grid to stay scannable as the list grows. Card image = each study's --- +## Homepage highlights slider + +Featured case-study slider on the homepage (section +`content/sections/home-case-studies.md`, id `#case-study-highlights`, weight 5). +One dark pine card per study (logo pill, title, blurb, CTA, photo) on a sliding +track navigated by a client-logo tab strip. + +- **Files:** `layouts/shortcodes/case-study-slider.html` (self-contained vanilla + JS, no jQuery — NOT flexslider, which `plugins.js` would hijack) + the `.csh-*` + block in `assets/css/custom.scss` (literal hex; `$cs-*` vars aren't defined + there yet). Iterates case studies **ByWeight**, so `weight:` orders the slides. +- **Content: optional `highlight:` front-matter map** (see marketspark.md / + power-digital.md), all fields optional with fallbacks: + + ```yaml + highlight: + title: "... ..." # → hero_title → page title + blurb: "..." # → description + image: /img/case-studies/CLIENT/photo.jpg # → preview_image + image_alt: "..." + logo: /img/case-studies/CLIENT/CLIENT-logo-dark.png # tab strip only (white bg) → DARK variant; falls back to client_logo + ``` + + Two logo surfaces, two variants: the **card** (dark pine) uses the WHITE + `client_logo` — same lockup as the hero / sticky nav, no pill — overridable + with `highlight.card_logo`; the **tab strip** (white bg) uses the DARK + `highlight.logo`. `highlight: false` excludes a study; any other non-map value + includes it with pure fallbacks (template guards with `reflect.IsMap` so a + scalar can't crash the build). No logo → client name renders as a text tab. +- **Autoplay** is driven by the active tab's progress-bar CSS animation (advances + on `animationend`). Gated off by four independent CSS classes: `.csh--inview` + (≥25% visible), `.csh--paused` (hover/focus), `.csh--stopped` (WCAG pause/play + toggle), and `prefers-reduced-motion`. Pause/stop rules must match the run + rule's 5-class specificity or they silently lose. +- **Single study** → tab strip, toggle, autoplay, and tabpanel ARIA all omitted. +- Section heading/intro and "See All Case Studies" button live in the section + content file, not the shortcode. + +--- + ## Modern layout — front matter schema ```yaml diff --git a/layouts/shortcodes/case-study-slider.html b/layouts/shortcodes/case-study-slider.html new file mode 100644 index 00000000..c9fec8c1 --- /dev/null +++ b/layouts/shortcodes/case-study-slider.html @@ -0,0 +1,248 @@ +{{- /* + Homepage case-study highlights slider (see docs/case-studies.md → Homepage slider). + One featured card per case study (logo pill, title, blurb, CTA, photo) + sliding in a track, with a client-logo tab strip as the navigation. + Card content comes from each case study's optional `highlight:` front matter, + falling back to title / description / preview_image / client_logo. + Set `highlight: false` on a case study to keep it out of the slider; any other + non-map value (e.g. `highlight: true`) includes it with pure fallbacks. +*/ -}} +{{- $pages := slice -}} +{{- range (where site.RegularPages "Section" "case-studies").ByWeight -}} + {{- if ne .Params.highlight false -}}{{- $pages = $pages | append . -}}{{- end -}} +{{- end -}} +{{- $multi := gt (len $pages) 1 -}} +
+
+
+ {{- range $i, $p := $pages -}} + {{- $h := dict -}} + {{- if reflect.IsMap $p.Params.highlight -}}{{- $h = $p.Params.highlight -}}{{- end -}} + {{- $client := $p.Params.client | default $p.Title -}} +
+
+ +
+ {{- with $h.card_logo | default $p.Params.client_logo }} + + {{- end }} +

+ {{ $h.title | default $p.Params.hero_title | default $p.Title | safeHTML }} +

+

+ {{ $h.blurb | default $p.Description | safeHTML }} +

+ + Read the Case Study → + +
+ {{- with $h.image | default $p.Params.preview_image }} +
+ {{ $h.image_alt | default (printf `%s case study` $client) }} +
+ {{- end }} +
+
+ {{- end }} +
+
+ {{- if $multi }} +
+ {{- /* Rotation control first in the carousel's tab order (WCAG 2.2.2 / APG) */}} + +
+ {{- range $i, $p := $pages -}} + {{- $h := dict -}} + {{- if reflect.IsMap $p.Params.highlight -}}{{- $h = $p.Params.highlight -}}{{- end -}} + {{- $client := $p.Params.client | default $p.Title -}} + {{- $logo := $h.logo | default $p.Params.client_logo -}} + + {{- end }} +
+
+ {{- end }} +
+