feat(trendz): rebrand landing to Trendz indigo color palette

[DmytroKhylko]

Description

• Replace ThingsBoard blue (#2A7DEC) with Trendz indigo (#3D50F5) across all landing SVG icons and CSS custom properties
• Update surface colors to indigo tints (#f4f5fe, #dcdff9)
• Fix hero height on xl: cap at 1000px and subtract header + promo banner height
• Remove static padding-top in favour of header-height-aware layout
• Widen xl hero container max-width from 1400px to 1520px
• Make Metric Explorer CTA full-width on mobile, auto on sm+
• Adjust ProjectScreenFrame hero fill to match new surface tint

Before

After

Type of change

• New / updated documentation page (src/content/docs/**)
• Shared include file (src/content/_includes/**)
• Component, layout, or styling change (src/components/**, src/styles/**)
• Landing / use-case / case-study page (src/pages/**, src/data/**)
• Redirects (src/data/redirects.ts)
• Version bump / release (see release skill)
• Build, CI, scripts, or tooling
• Other (please describe)

Affected products

Trendz

Related issues

• Closes #

Checklist

• pnpm check passes (Astro / TypeScript)
• pnpm lint:eslint passes
• pnpm lint:slugcheck passes (required if pages were added/renamed/moved across languages)
• pnpm lint:linkcheck passes locally — required to merge; run it before requesting review (use pnpm lint:linkcheck:nobuild if you already ran a build)
• Renamed/removed pages have a redirect in src/data/redirects.ts, and pnpm generate:redirects was run
• No hardcoded versions — values come from src/data/versions.ts
• Screenshots attached for visual changes

[vvlladd28]

Review summary

Reviewed 16 changed files in feat(trendz): rebrand landing to Trendz indigo color palette. Left 5 comments inline.

The bulk of the PR is a mechanical color swap (#2A7DEC → #3D50F5) across 12 landing SVGs and the Trendz CSS variables, which looks correct, and the ProjectScreenFrame hero variant is only consumed by the Trendz hero so its fill change doesn't leak to other products. The one thing worth a closer look is the hero layout change: the header-aware height calc() was added only at the xl breakpoint, while the base padding-top that offset the fixed header was removed for all widths — so the mobile/tablet hero may now render under the fixed header. The remaining comments are about the rebrand hardcoding the indigo in several places rather than referencing the existing $color-brand token.

---

This review was auto-generated. Findings may contain errors — please verify before applying changes.

[vvlladd28]

This header-aware height calc only kicks in at xl. But the base #trendz-hero rule lost its padding-top: 100px (and this xl block also dropped padding-top: 80px) with nothing replacing the offset below xl. The header is position: fixed, opaque on this page (headerVariant="solid-shadow"), $header-height: 80px tall (plus --promo-h when the promo banner shows), and BaseLayout zeroes --sl-main-pad — so below 1280px the hero now starts at y: 0 under the fixed header. Won't the trendz chip and the top of the H1 be clipped behind it on mobile/tablet? At xl the shorter height keeps the centered content clear, but the sub-xl range seems to have lost its offset. If a full-bleed-under-header look is intended, ignore this — otherwise the base rule probably needs a padding-top (or margin-top) of roughly var(--header-height) + var(--promo-h, 0px).

[vvlladd28]

#3d50f5 is already defined as $color-brand in src/styles/_variables.scss (documented there as the source of truth for the indigo, and also exposed as the --color-brand CSS var). The previous code referenced a token via #{$color-primary}; this rebrand drops that indirection in favor of the raw hex. Could this be --color-trendz-accent: #{$color-brand} (or var(--color-brand)) instead? Same thought for the surface tints — as written they're floating literals, so the next palette change has to track each one down by hand. (#2336d4 / #6272f7 don't have tokens today, so inlining those is fair.)

[vvlladd28]

This bakes a Trendz-specific tint (#dcdff9, which equals the page's --color-trendz-surface-accent) into the default of a shared, product-agnostic Services component. Trendz is the only consumer of the hero variant today so it works — but the component already reads a --psf-fill override (which the Trendz page sets on :root), so driving the hero fill from the page via that variable would keep the brand color in one place and avoid this literal silently drifting out of sync on the next rebrand.

[vvlladd28]

All 12 Trendz landing icons hardcode fill="#3D50F5", which is why this rebrand had to touch 12 SVGs plus the CSS. These are imported with ?raw and injected via set:html, so they render as inline SVG — the repo's existing currentColor convention (~37 other landing SVGs already use fill="currentColor") would apply cleanly here. Switching the fills to currentColor and setting color: var(--color-trendz-accent) on the .tf-card-icon wrapper would make every icon track the single accent token, turning the next rebrand into a one-line CSS change instead of editing 12 assets. Not blocking, but worth considering for the next iteration.

[vvlladd28]

The blank line right after this width: 100%; has trailing whitespace (tabs) — Prettier/the lint config will flag it, so worth stripping.