From 652e12089356a7a8c19c0bd03984798e0431eda3 Mon Sep 17 00:00:00 2001 From: Tiago Araujo Date: Thu, 18 Jun 2026 16:02:12 -0700 Subject: [PATCH 1/3] feat: add Why SSW video and move testimonial to its own full-width row MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Embeds youtube.com/watch?v=Jveq6VFjWTA under the Why SSW section. Layout change: Before — .why-grid was a 2-col grid with the row list (left) and the testimonial card (right). The new YouTube embed takes the right- column slot, and the testimonial moves down to its own full-width row at the end of the section. Two reasons over the alternatives: - Stacking video + testimonial in the same right column would have pushed the column 2-3x taller than the rows, breaking the visual balance. - Dropping the video full-width above the rows would have buried the row list under the fold and broken the "why-card framing the section" rhythm. New markup pieces: - .why-video — 16:9 iframe wrapper inside the grid. Uses aspect-ratio for the frame, rounded corners + hairline border matching the testimonial card so they read as the same visual family. loading="lazy" + youtube-nocookie.com so we don't fetch the iframe or drop cookies until the user scrolls/plays. - .why-card-shell — full-width wrapper below the grid that centers the testimonial card and caps its measure at 880px so the muted italic pull-quote stays readable (without the cap the card would stretch to the container's 1240px and the line length would get unreadable for a paragraph-length quote). The YouTube URL is hardcoded for the same reason the hero video is — adding a Tina field on the why block would trigger the schema-sync gotcha. Swap the videoId in the iframe src if marketing wants a different cut. Co-Authored-By: Claude Opus 4.7 --- src/components/islands/LandingBody.astro | 37 +++++++++++++++++++++--- src/styles/landing.css | 31 ++++++++++++++++++++ 2 files changed, 64 insertions(+), 4 deletions(-) diff --git a/src/components/islands/LandingBody.astro b/src/components/islands/LandingBody.astro index f040abf..d839302 100644 --- a/src/components/islands/LandingBody.astro +++ b/src/components/islands/LandingBody.astro @@ -330,8 +330,37 @@ const footer = data.footer; )} - {why.testimonial && ( - - )} - + + )} )} diff --git a/src/styles/landing.css b/src/styles/landing.css index 930aaf0..0b3cc08 100644 --- a/src/styles/landing.css +++ b/src/styles/landing.css @@ -894,6 +894,37 @@ section.block.sunken { background: var(--bg-sunken); } .why-row .icon { margin-top: 2px; } .why-row h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-neutral-strong); margin: 0 0 4px; } .why-row p { font-size: 16px; color: var(--text-neutral-weak); line-height: 1.55; margin: 0; } +/* YouTube embed living in the right column of .why-grid, balancing the row + list on the left. aspect-ratio keeps the 16:9 frame at any column width + without padding-bottom percentage hacks. Same rounded-corner + hairline + border treatment as the testimonial card for visual continuity inside + the section. */ +.why-video { + position: relative; + width: 100%; + aspect-ratio: 16 / 9; + border-radius: 18px; + overflow: hidden; + border: 1px solid var(--stroke-neutral); + background: #0e0e0e; +} +.why-video iframe { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: 0; +} +/* Full-width row below the why-grid that holds the testimonial. Caps the + measure so the muted italic quote stays comfortable to read — without + this, the card would stretch to the container's 1240px and the line + length would get unreadable for a paragraph-length pull-quote. */ +.why-card-shell { + margin-top: clamp(56px, 7vw, 96px); + display: flex; + justify-content: center; +} +.why-card-shell > .why-card { width: 100%; max-width: 880px; } /* Testimonial card. Near-black panel with rounded corners; a large translucent closing-quote glyph anchors the top-right as a decorative mark. Body text reads in a muted off-white while phrases From 2698b5bf0a82ad09a70bc4ba7bf5b839d30c8086 Mon Sep 17 00:00:00 2001 From: Tiago Araujo Date: Thu, 18 Jun 2026 16:34:27 -0700 Subject: [PATCH 2/3] fix: drop min-height from testimonial card to remove empty space MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The .why-card had min-height: 440px from when it lived in the right column of the 2-col why-grid and needed presence next to the row list. PR #57 moved it to a full-width row below the grid, so the natural height of the italic pull-quote + attribution now fills the card on its own — and the min-height was forcing the blockquote and .attr apart via justify-content: space-between, leaving visible empty space between them. Removed min-height, switched justify-content from space-between to flex-start so the children sit at their natural positions with just the existing 24px gap between them. Co-Authored-By: Claude Opus 4.7 --- src/styles/landing.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/styles/landing.css b/src/styles/landing.css index 0b3cc08..f08b36a 100644 --- a/src/styles/landing.css +++ b/src/styles/landing.css @@ -940,8 +940,12 @@ section.block.sunken { background: var(--bg-sunken); } padding: 40px; display: flex; flex-direction: column; gap: 24px; - min-height: 440px; - justify-content: space-between; + /* min-height was 440px when this card lived in the right column of the + 2-col why-grid and needed presence next to the row list. Now that it's + in a full-width row below the grid, the natural height of the quote + + attribution fills the card; min-height was forcing visible empty space + between blockquote and .attr via justify-content: space-between. */ + justify-content: flex-start; overflow: hidden; } /* Decorative closing-quote glyph in the top-right corner. Big serif weight, From 249a9d02421707e72146861a64d0ea330c85c117 Mon Sep 17 00:00:00 2001 From: Tiago Araujo Date: Thu, 18 Jun 2026 16:36:56 -0700 Subject: [PATCH 3/3] chore: remove duplicate contact-aside next to the contact form MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Americas / hello@ssw.com mini-cards rendered next to the contact form were duplicating info already visible on the page: - "Americas" repeats the strip-meta badge next to the logo and the same region kicker used in the nav. - "hello@ssw.com" repeats the email already linked from the footer and the privacy page contact section. Removed the JSX