From 69d20d1237410cd42d6ac4df2d79d893275bcd14 Mon Sep 17 00:00:00 2001 From: AEMY Studio Date: Mon, 10 Nov 2025 18:48:48 +0000 Subject: [PATCH] Update EDS migration changes Automated migration updates generated by Experience Catalyst. Changed files (2): - styles/styles.css - blocks/hero-trends/ --- blocks/hero-trends/hero-trends.css | 123 +++++++++++++++++++++++++++++ blocks/hero-trends/hero-trends.js | 77 ++++++++++++++++++ styles/styles.css | 4 +- 3 files changed, 202 insertions(+), 2 deletions(-) create mode 100644 blocks/hero-trends/hero-trends.css create mode 100644 blocks/hero-trends/hero-trends.js diff --git a/blocks/hero-trends/hero-trends.css b/blocks/hero-trends/hero-trends.css new file mode 100644 index 0000000..ecb15e9 --- /dev/null +++ b/blocks/hero-trends/hero-trends.css @@ -0,0 +1,123 @@ +.hero-trends { + background-color: rgba(139, 254, 248, 0.5); + padding: 60px 24px; + min-height: 600px; +} + +.hero-trends-container { + display: grid; + grid-template-columns: 1fr; + gap: 40px; + max-width: 1248px; + margin: 0 auto; + align-items: center; +} + +.hero-trends-content { + display: flex; + flex-direction: column; + gap: 24px; +} + +.hero-trends-byline { + font-family: var(--body-font-family); + font-size: 14.4px; + color: rgba(0, 0, 0, 0.6); + text-transform: uppercase; + letter-spacing: 0.144px; + line-height: 18.72px; +} + +.hero-trends-heading { + font-family: var(--heading-font-family); + font-size: var(--heading-font-size-xxl); + font-weight: var(--heading-font-weight); + line-height: 1.04; + letter-spacing: var(--h1-letter-spacing); + color: var(--text-color); + margin: 0; +} + +.hero-trends-heading p { + margin: 0; + line-height: 1.04; +} + +.hero-trends-description { + font-family: var(--body-font-family); + font-size: 32px; + line-height: 1.6; + color: var(--text-color); + max-width: 575px; +} + +.hero-trends-description p { + margin: 0; +} + +.hero-trends-secondary { + font-family: var(--body-font-family); + font-size: 16px; + line-height: 1.6; + color: rgba(0, 0, 0, 0.6); + max-width: 545px; +} + +.hero-trends-secondary p { + margin: 0; +} + +.hero-trends-cta { + margin-top: 12px; +} + +.hero-trends-cta .button { + margin: 0; +} + +.hero-trends-image { + position: relative; + border-radius: 20px; + overflow: hidden; + aspect-ratio: 576 / 883; +} + +.hero-trends-image img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +/* Desktop layout */ +@media (width >= 900px) { + .hero-trends { + padding: 80px 32px; + min-height: 884px; + } + + .hero-trends-container { + grid-template-columns: 1fr 576px; + gap: 96px; + } + + .hero-trends-content { + padding-right: 40px; + } + + .hero-trends-description { + font-size: 32px; + } +} + +/* Tablet adjustments */ +@media (width >= 600px) and (width < 900px) { + .hero-trends-container { + gap: 48px; + } + + .hero-trends-image { + max-width: 500px; + margin: 0 auto; + } +} diff --git a/blocks/hero-trends/hero-trends.js b/blocks/hero-trends/hero-trends.js new file mode 100644 index 0000000..e921b69 --- /dev/null +++ b/blocks/hero-trends/hero-trends.js @@ -0,0 +1,77 @@ +export default function decorate(block) { + // Hero-trends block structure: + // Row 1: Byline (optional) + // Row 2: Main heading (multi-line) + // Row 3: Description text + // Row 4: Secondary text (optional) + // Row 5: CTA button + // Row 6: Hero image + + const rows = [...block.children]; + + // Create container + const container = document.createElement('div'); + container.classList.add('hero-trends-container'); + + // Create content wrapper (left side) + const content = document.createElement('div'); + content.classList.add('hero-trends-content'); + + // Create image wrapper (right side) + const imageWrapper = document.createElement('div'); + imageWrapper.classList.add('hero-trends-image'); + + // Process rows + rows.forEach((row, index) => { + const cells = [...row.children]; + + if (index === 0 && cells[0]?.textContent.trim()) { + // Byline + const byline = document.createElement('div'); + byline.classList.add('hero-trends-byline'); + byline.textContent = cells[0].textContent; + content.appendChild(byline); + } else if (index === 1) { + // Main heading + const heading = document.createElement('h1'); + heading.classList.add('hero-trends-heading'); + heading.innerHTML = cells[0].innerHTML; + content.appendChild(heading); + } else if (index === 2) { + // Description + const description = document.createElement('div'); + description.classList.add('hero-trends-description'); + description.innerHTML = cells[0].innerHTML; + content.appendChild(description); + } else if (index === 3 && cells[0]?.textContent.trim()) { + // Secondary text + const secondary = document.createElement('div'); + secondary.classList.add('hero-trends-secondary'); + secondary.innerHTML = cells[0].innerHTML; + content.appendChild(secondary); + } else if (index === 4) { + // CTA button + const ctaWrapper = document.createElement('div'); + ctaWrapper.classList.add('hero-trends-cta'); + const link = cells[0].querySelector('a'); + if (link) { + link.classList.add('button'); + ctaWrapper.appendChild(link); + } + content.appendChild(ctaWrapper); + } else if (index === 5) { + // Hero image + const img = cells[0].querySelector('img'); + if (img) { + imageWrapper.appendChild(img); + } + } + }); + + // Assemble the block + container.appendChild(content); + container.appendChild(imageWrapper); + + block.textContent = ''; + block.appendChild(container); +} diff --git a/styles/styles.css b/styles/styles.css index 7ab722d..45116e4 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -229,8 +229,8 @@ button { line-height: 1.2; text-align: center; text-decoration: none; - background-color: transparent; - color: var(--text-color); + background-color: var(--dark-color); + color: var(--text-color-inverse); cursor: pointer; overflow: hidden; text-overflow: ellipsis;