Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
123 changes: 123 additions & 0 deletions blocks/hero-trends/hero-trends.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
77 changes: 77 additions & 0 deletions blocks/hero-trends/hero-trends.js
Original file line number Diff line number Diff line change
@@ -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);
}
4 changes: 2 additions & 2 deletions styles/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading