paolomoz · aem-code-connector · Nov 7, 2025
diff --git a/blocks/hero-trends/hero-trends.css b/blocks/hero-trends/hero-trends.css
@@ -0,0 +1,153 @@
+.hero-trends {
+  background-color: rgba(139, 254, 248, 0.5);
+  min-height: 884px;
+  padding: 0;
+}
+
+.hero-trends-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 96px;
+  max-width: 1248px;
+  margin: 0 auto;
+  padding: 0 24px;
+  min-height: 884px;
+  align-items: center;
+}
+
+.hero-trends-content {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.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: 90.4px;
+  font-weight: 400;
+  line-height: 94.02px;
+  letter-spacing: -0.904px;
+  color: #000;
+  margin: 0;
+}
+
+.hero-trends-description {
+  font-family: var(--body-font-family);
+  font-size: 32px;
+  line-height: 51.2px;
+  color: #000;
+  font-weight: 400;
+}
+
+.hero-trends-description p {
+  margin: 0;
+}
+
+.hero-trends-cta-text {
+  font-family: var(--body-font-family);
+  font-size: 16px;
+  line-height: 25.6px;
+  color: rgba(0, 0, 0, 0.6);
+  font-weight: 400;
+}
+
+.hero-trends-cta-text p {
+  margin: 0;
+}
+
+.hero-trends-button-container {
+  margin-top: 8px;
+}
+
+.hero-trends-button-container .button {
+  display: inline-block;
+  padding: 16px 24px;
+  background-color: rgba(255, 255, 255, 0);
+  color: #000;
+  border-radius: 1600px;
+  box-shadow: 0 0 0 2px inset #000, 4px 4px 0 0 rgba(244, 254, 139, 0.5);
+  text-decoration: none;
+  font-size: 16px;
+  line-height: 19.2px;
+  transition: box-shadow 0.2s;
+}
+
+.hero-trends-button-container .button:hover {
+  box-shadow: 0 0 0 2px inset #000, 7px 7px 0 0 rgba(244, 254, 139, 0.5);
+}
+
+.hero-trends-image {
+  position: relative;
+  height: 100%;
+  min-height: 883.2px;
+  display: flex;
+  align-items: center;
+}
+
+.hero-trends-image picture {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.hero-trends-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 20px;
+}
+
+/* Mobile responsive */
+@media (max-width: 900px) {
+  .hero-trends {
+    min-height: auto;
+  }
+
+  .hero-trends-container {
+    grid-template-columns: 1fr;
+    gap: 48px;
+    padding: 60px 24px;
+    min-height: auto;
+  }
+
+  .hero-trends-heading {
+    font-size: 48px;
+    line-height: 50px;
+  }
+
+  .hero-trends-description {
+    font-size: 20px;
+    line-height: 32px;
+  }
+
+  .hero-trends-image {
+    min-height: 400px;
+    max-height: 500px;
+  }
+}
+
+/* Tablet responsive */
+@media (min-width: 900px) and (max-width: 1200px) {
+  .hero-trends-heading {
+    font-size: 64px;
+    line-height: 68px;
+  }
+
+  .hero-trends-description {
+    font-size: 24px;
+    line-height: 38px;
+  }
+
+  .hero-trends-image {
+    min-height: 600px;
+  }
+}
diff --git a/blocks/hero-trends/hero-trends.js 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 (large, multi-line display)
+  // Row 3: Description text
+  // Row 4: Call-to-action text
+  // Row 5: Button link
+  // Row 6: Hero image
+
+  const rows = [...block.children];
+
+  // Create the main container structure
+  const container = document.createElement('div');
+  container.className = 'hero-trends-container';
+
+  // Create text content wrapper
+  const textContent = document.createElement('div');
+  textContent.className = 'hero-trends-content';
+
+  // Create image wrapper
+  const imageWrapper = document.createElement('div');
+  imageWrapper.className = 'hero-trends-image';
+
+  // Process each row
+  rows.forEach((row, index) => {
+    const cells = [...row.children];
+    const content = cells[0];
+
+    if (index === 0 && content) {
+      // Byline
+      const byline = document.createElement('div');
+      byline.className = 'hero-trends-byline';
+      byline.innerHTML = content.innerHTML;
+      textContent.appendChild(byline);
+    } else if (index === 1 && content) {
+      // Main heading
+      const heading = document.createElement('h1');
+      heading.className = 'hero-trends-heading';
+      heading.innerHTML = content.innerHTML;
+      textContent.appendChild(heading);
+    } else if (index === 2 && content) {
+      // Description
+      const description = document.createElement('div');
+      description.className = 'hero-trends-description';
+      description.innerHTML = content.innerHTML;
+      textContent.appendChild(description);
+    } else if (index === 3 && content) {
+      // CTA text
+      const ctaText = document.createElement('div');
+      ctaText.className = 'hero-trends-cta-text';
+      ctaText.innerHTML = content.innerHTML;
+      textContent.appendChild(ctaText);
+    } else if (index === 4 && content) {
+      // Button
+      const buttonContainer = document.createElement('div');
+      buttonContainer.className = 'hero-trends-button-container';
+      const link = content.querySelector('a');
+      if (link) {
+        link.className = 'button';
+      }
+      buttonContainer.innerHTML = content.innerHTML;
+      textContent.appendChild(buttonContainer);
+    } else if (index === 5 && content) {
+      // Image
+      const picture = content.querySelector('picture');
+      if (picture) {
+        imageWrapper.appendChild(picture);
+      }
+    }
+  });
+
+  // Clear the block and add new structure
+  block.innerHTML = '';
+  container.appendChild(textContent);
+  container.appendChild(imageWrapper);
+  block.appendChild(container);
+}
diff --git a/blocks/hero-trends/metadata.json b/blocks/hero-trends/metadata.json
@@ -0,0 +1,57 @@
+{
+  "variantName": "hero-trends",
+  "baseBlock": "hero",
+  "version": "1.0.0",
+  "created": "2025-11-07T10:30:00.000Z",
+  "sourceContext": {
+    "originUrl": "Figma Design Import",
+    "originPage": "Trends Landing Page Hero",
+    "blockPosition": "top"
+  },
+  "visualCharacteristics": {
+    "colorScheme": "light-cyan",
+    "density": "spacious",
+    "purpose": "trends-showcase",
+    "imagePattern": "side-by-side",
+    "textLength": "long"
+  },
+  "contentPattern": {
+    "structure": "byline + large heading + description + cta text + button + hero image",
+    "headingMaxLength": 50,
+    "descriptionMaxLength": 300,
+    "buttonCount": 1,
+    "imageCount": 1
+  },
+  "reuseGuidance": {
+    "suitableFor": [
+      "Fashion trends landing pages",
+      "Editorial-style hero sections",
+      "Lifestyle content headers",
+      "Magazine-style article intros",
+      "Seasonal campaign pages"
+    ],
+    "notSuitableFor": [
+      "Simple CTAs without long descriptions",
+      "Product-focused pages",
+      "E-commerce category pages",
+      "Video backgrounds"
+    ],
+    "similarVariants": ["hero-feature", "hero-subscribe"]
+  },
+  "designTokens": {
+    "primaryColor": "#000000",
+    "backgroundColor": "rgba(139, 254, 248, 0.5)",
+    "accentColor": "rgba(244, 254, 139, 0.5)",
+    "fontFamilyHeading": "Syncopate",
+    "fontFamilyBody": "Instrument Sans",
+    "headingSizeDesktop": "90.4px",
+    "descriptionSizeDesktop": "32px",
+    "borderRadius": "20px",
+    "padding": "0 24px"
+  },
+  "usage": {
+    "pagesUsing": [],
+    "reuseCount": 0,
+    "lastUsed": "2025-11-07T10:30:00.000Z"
+  }
+}
diff --git 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: var(--accent-color-transparent) 4px 4px 0px 0px;
+  --button-box-shadow-hover: var(--accent-color-transparent) 7px 7px 0px 0px;
+  --button-background-hover: #000;
   --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;