Skip to content

feat: embed Why SSW YouTube video, move testimonial to its own full-width row #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tiagov8 wants to merge 3 commits into
base: main
Choose a base branch
from
+80 −30
Open

feat: embed Why SSW YouTube video, move testimonial to its own full-width row #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
652e120
feat: add Why SSW video and move testimonial to its own full-width row
tiagov8 Jun 18, 2026
2698b5b
fix: drop min-height from testimonial card to remove empty space
tiagov8 Jun 18, 2026
249a9d0
chore: remove duplicate contact-aside next to the contact form
tiagov8 Jun 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 38 additions & 17 deletions src/components/islands/LandingBody.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,8 +330,37 @@ const footer = data.footer;
</div>
)}

{why.testimonial && (
<aside class="why-card reveal" style="--reveal-delay: 120ms">
{/* YouTube embed for the Why-SSW pitch video, occupying the right
column of the why-grid. Sits in the same 2-col rhythm as the
testimonial used to (now moved below as its own full-width row).
URL is hardcoded for the same reason the hero video is — adding
a Tina field on the why block hits the schema-sync gotcha. Swap
the videoId below to replace.

youtube-nocookie.com (privacy-enhanced mode) so YouTube doesn't
drop cookies until the user hits play; loading="lazy" defers
the iframe until it scrolls near the viewport. */}
<div class="why-video reveal" style="--reveal-delay: 120ms">
<iframe
src="https://www.youtube-nocookie.com/embed/Jveq6VFjWTA"
title="Why SSW"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
</div>

{/* Testimonial moved out of the why-grid so it sits as its own
full-width row below the rows + video pair. Cap its measure with
the .why-card-shell wrapper so the muted italic quote stays
comfortable at the wider container — running it edge-to-edge
at the landing's full 1240px max would have made the line
length unreadable. */}
{why.testimonial && (
<div class="why-card-shell">
<aside class="why-card reveal" style="--reveal-delay: 0ms">
{/* Closing quotation mark, decorative, anchored to the card's
top-right corner via CSS. aria-hidden so screen readers don't
announce a stray punctuation character. */}
Expand All @@ -354,8 +383,8 @@ const footer = data.footer;
</div>
</div>
</aside>
)}
</div>
</div>
)}
</div>
</section>
)}
Expand Down Expand Up @@ -579,19 +608,11 @@ const footer = data.footer;
</div>
)}

{contact.asideItems && contact.asideItems.length > 0 && (
<aside class="contact-aside reveal" style="--reveal-delay: 120ms">
{contact.asideItems.map((item) => item && (
<div class="item">
<div class="icon"><i class={`fa-solid ${item.icon ?? ''}`}></i></div>
<div>
<h4 data-tina-field={tinaField(item, 'title')}>{item.title}</h4>
<p data-tina-field={tinaField(item, 'description')}>{item.description}</p>
</div>
</div>
))}
</aside>
)}
{/* Right-column aside (Americas / hello@ssw.com cards) removed —
duplicated info already covered by the nav region badge and
the footer contact links. contact.asideItems data is left in
place in the Tina schema so the field stays editable, but
no longer renders. */}
</div>
</div>
</section>
Expand Down
55 changes: 42 additions & 13 deletions src/styles/landing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <strong> phrases
Expand All @@ -909,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,
Expand Down Expand Up @@ -974,13 +1009,13 @@ section.block.sunken { background: var(--bg-sunken); }
margin-top: 2px;
}

/* Was a 2-col grid (form + aside) before the aside was removed. Now a
single-column wrapper that caps the form width so it stays readable on
wide viewports instead of stretching to the full landing container. */
.contact-grid {
display: grid;
grid-template-columns: 1.25fr 0.9fr;
gap: clamp(40px, 5vw, 64px);
align-items: start;
max-width: 720px;
margin: 0 auto;
}
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }

.form-card {
background: var(--bg-raised);
Expand Down Expand Up @@ -1098,12 +1133,6 @@ section.block.sunken { background: var(--bg-sunken); }
.form-error i { color: var(--red-500); flex-shrink: 0; }
.form-error a { color: var(--red-700); text-decoration: underline; text-underline-offset: 2px; }

.contact-aside { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.contact-aside .item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--stroke-neutral-weak); }
.contact-aside .item:last-child { border-bottom: none; }
.contact-aside .item .icon { flex-shrink: 0; }
.contact-aside h4 { font-size: 17px; font-weight: 600; color: var(--text-neutral-strong); margin: 0 0 4px; }
.contact-aside p { font-size: 16px; color: var(--text-neutral-weak); margin: 0; line-height: 1.5; }

.faq-grid {
display: grid;
Expand Down