feat: embed Why SSW YouTube video, move testimonial to its own full-width row#57
Open
tiagov8 wants to merge 3 commits into
Open
feat: embed Why SSW YouTube video, move testimonial to its own full-width row#57tiagov8 wants to merge 3 commits into
tiagov8 wants to merge 3 commits into
Conversation
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 <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
ssw-website-global | 249a9d0 | Commit Preview URL Branch Preview URL |
Jun 18 2026, 11:38 PM |
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 <noreply@anthropic.com>
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 <aside class="contact-aside"> block and the matching .contact-aside CSS rules (six selectors). With nothing left in the right column, simplified .contact-grid from a 2-col grid (1.25fr 0.9fr with a 920px-breakpoint stack) to a single-column wrapper capped at 720px and centered, so the form stays at a readable width on wide viewports instead of stretching across the landing's full 1240px container. contact.asideItems is left in the Tina schema so the field stays editable in case marketing wants to reintroduce a sidebar later — the JSX render is gone but the data shape is preserved, which keeps this PR free of the schema-sync gotcha. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Embeds youtube.com/watch?v=Jveq6VFjWTA under the Why SSW section.
Layout choice
The Why section was already a 2-col grid: 5 rows on the left, testimonial on the right. I considered three options and picked the third:
So the final structure is:
New rules
.why-video— 16:9 iframe wrapper.aspect-ratio: 16 / 9for the frame, 18px rounded corners + hairline border matching.why-cardso they read as the same visual family.loading="lazy"+youtube-nocookie.com(privacy-enhanced mode), so YouTube doesn'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 and caps its measure at 880px. Without the cap the card would stretch to the container's 1240px and the line length would get unreadable for a paragraph-length italic pull-quote.Why hardcoded
The YouTube URL is hardcoded inline rather than wired to a Tina field on
whySection, same rationale as the hero video and the mid-CTA — adding fields to existing landing blocks triggers the Tina Cloud schema-sync gotcha (deploy serves "Not Found" until the cloud schema catches up). If marketing wants to swap the cut later, it's a one-line edit to theiframe src.Test plan
/#why. Rows on the left, YouTube embed on the right inside the same 2-col grid. Video frame has 18px rounded corners + a subtle border, matching the testimonial card below.youtube-nocookie.com)..why-gridcollapses to a single column (rows above, video below), then the testimonial sits beneath at full container width.🤖 Generated with Claude Code