From 6cc2040729341f72297da3c24a9432269d423573 Mon Sep 17 00:00:00 2001
From: AEMY Studio <noreply@aemy.studio>
Date: Tue, 11 Nov 2025 03:49:06 +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 | 131 +++++++++++++++++++++++++++++
 blocks/hero-trends/hero-trends.js  |  86 +++++++++++++++++++
 styles/styles.css                  |  12 +--
 3 files changed, 224 insertions(+), 5 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..646d7d8
--- /dev/null
+++ b/blocks/hero-trends/hero-trends.css
@@ -0,0 +1,131 @@
+.hero-trends {
+  background-color: rgba(139, 254, 248, 0.5); /* Light cyan/aqua accent */
+  display: flex;
+  gap: 96px;
+  padding: 80px 24px;
+  margin: 0;
+}
+
+.hero-trends-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 575px;
+}
+
+.hero-trends-image {
+  flex: 1;
+  max-width: 576px;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.hero-trends-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.hero-trends-byline {
+  font-size: 14.4px;
+  font-family: var(--body-font-family);
+  color: rgba(0, 0, 0, 0.6);
+  text-transform: uppercase;
+  letter-spacing: 0.144px;
+  line-height: 18.72px;
+  margin-bottom: 40px;
+}
+
+.hero-trends h1 {
+  font-size: 90.4px;
+  font-family: var(--heading-font-family);
+  font-weight: 400;
+  line-height: 94.02px;
+  letter-spacing: -0.904px;
+  margin-bottom: 40px;
+  color: #000;
+}
+
+.hero-trends-description {
+  font-size: 32px;
+  font-family: var(--body-font-family);
+  line-height: 51.2px;
+  margin-bottom: 40px;
+  color: #000;
+}
+
+.hero-trends-cta-text {
+  font-size: 16px;
+  font-family: var(--body-font-family);
+  line-height: 25.6px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 24px;
+}
+
+.hero-trends-button-wrapper {
+  display: flex;
+}
+
+.hero-trends .button {
+  box-shadow: 0px 0px 0px 2px inset #000000, 4px 4px 0px 0px rgba(244, 254, 139, 0.5);
+}
+
+.hero-trends .button:hover {
+  box-shadow: 0px 0px 0px 2px inset #000000, 7px 7px 0px 0px rgba(244, 254, 139, 0.5);
+}
+
+/* Responsive Design */
+@media (width < 900px) {
+  .hero-trends {
+    flex-direction: column;
+    gap: 40px;
+    padding: 60px 24px;
+  }
+
+  .hero-trends-content {
+    max-width: 100%;
+  }
+
+  .hero-trends-image {
+    max-width: 100%;
+    max-height: 400px;
+  }
+
+  .hero-trends h1 {
+    font-size: 45px;
+    line-height: 47px;
+  }
+
+  .hero-trends-description {
+    font-size: 20px;
+    line-height: 32px;
+  }
+}
+
+@media (width < 600px) {
+  .hero-trends {
+    padding: 40px 16px;
+  }
+
+  .hero-trends h1 {
+    font-size: 36px;
+    line-height: 40px;
+    margin-bottom: 24px;
+  }
+
+  .hero-trends-description {
+    font-size: 18px;
+    line-height: 28px;
+    margin-bottom: 24px;
+  }
+
+  .hero-trends-byline {
+    margin-bottom: 24px;
+  }
+
+  .hero-trends-image {
+    max-height: 300px;
+  }
+}
diff --git a/blocks/hero-trends/hero-trends.js b/blocks/hero-trends/hero-trends.js
new file mode 100644
index 0000000..39e514a
--- /dev/null
+++ b/blocks/hero-trends/hero-trends.js
@@ -0,0 +1,86 @@
+export default function decorate(block) {
+  // Hero-trends block structure:
+  // Row 1: Byline (optional)
+  // Row 2: Image
+  // Row 3: Heading
+  // Row 4: Description
+  // Row 5: Call-to-action text (optional)
+  // Row 6: Button link (optional)
+
+  const rows = [...block.children];
+
+  // Create the content wrapper (left side)
+  const contentWrapper = document.createElement('div');
+  contentWrapper.className = 'hero-trends-content';
+
+  // Create the image wrapper (right side)
+  const imageWrapper = document.createElement('div');
+  imageWrapper.className = 'hero-trends-image';
+
+  // Process byline (row 0) - optional
+  if (rows[0]) {
+    const byline = rows[0].querySelector('p');
+    if (byline && byline.textContent.trim()) {
+      byline.className = 'hero-trends-byline';
+      contentWrapper.appendChild(byline);
+    }
+  }
+
+  // Process image (row 1)
+  if (rows[1]) {
+    const img = rows[1].querySelector('img');
+    if (img) {
+      imageWrapper.appendChild(img);
+    }
+  }
+
+  // Process heading (row 2)
+  if (rows[2]) {
+    const heading = rows[2].querySelector('h1, h2, h3, p');
+    if (heading) {
+      if (heading.tagName !== 'H1') {
+        const h1 = document.createElement('h1');
+        h1.innerHTML = heading.innerHTML;
+        heading.replaceWith(h1);
+        contentWrapper.appendChild(h1);
+      } else {
+        contentWrapper.appendChild(heading);
+      }
+    }
+  }
+
+  // Process description (row 3)
+  if (rows[3]) {
+    const description = rows[3].querySelector('p');
+    if (description) {
+      description.className = 'hero-trends-description';
+      contentWrapper.appendChild(description);
+    }
+  }
+
+  // Process CTA text (row 4) - optional
+  if (rows[4]) {
+    const ctaText = rows[4].querySelector('p');
+    if (ctaText && ctaText.textContent.trim()) {
+      ctaText.className = 'hero-trends-cta-text';
+      contentWrapper.appendChild(ctaText);
+    }
+  }
+
+  // Process button (row 5) - optional
+  if (rows[5]) {
+    const link = rows[5].querySelector('a');
+    if (link) {
+      link.className = 'button';
+      const buttonWrapper = document.createElement('div');
+      buttonWrapper.className = 'hero-trends-button-wrapper';
+      buttonWrapper.appendChild(link);
+      contentWrapper.appendChild(buttonWrapper);
+    }
+  }
+
+  // Clear the block and rebuild with new structure
+  block.innerHTML = '';
+  block.appendChild(contentWrapper);
+  block.appendChild(imageWrapper);
+}
diff --git a/styles/styles.css b/styles/styles.css
index 7ab722d..84d9826 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -57,9 +57,11 @@
   /* button properties */
   --button-border-radius: 1600px;
   --button-padding: 16px 24px;
-  --button-box-shadow: rgb(0, 0, 0) 0px 0px 0px 2px inset, var(--accent-color-transparent) 4px 4px 0px 0px;
-  --button-box-shadow-hover: rgb(0, 0, 0) 0px 0px 0px 2px inset, var(--accent-color-transparent) 7px 7px 0px 0px;
-  --button-background-hover: var(--accent-color-bg);
+  --button-background: #000;
+  --button-color: #fff;
+  --button-box-shadow: none;
+  --button-box-shadow-hover: 0px 4px 8px rgba(0, 0, 0, 0.3);
+  --button-background-hover: #333;
   --button-transition: border-color 0.2s, color 0.2s, background-color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.2s;
 
   /* link properties */
@@ -229,8 +231,8 @@ button {
   line-height: 1.2;
   text-align: center;
   text-decoration: none;
-  background-color: transparent;
-  color: var(--text-color);
+  background-color: var(--button-background);
+  color: var(--button-color);
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;