site: tile grid with the market icon in the landing band

[erlendoksvoll]

Replaces the building blocks and the standalone white market icon in the landing band with a three-by-two grid of flat square tiles in the profile's graphic colours (blue, yellow / yellow, blue, red). The data.altinn.no market icon sits in navy inside a white circle in the top middle tile, so icon and tiles read as one composition.

• Plain inline SVG, no images, no shadows or gradients.
• The grid aligns with the content column's right edge and sits 32px above the band's bottom edge. On laptops (901 to 1150px) it shrinks slightly so the three buttons stay on one row.
• Below 900px the art is hidden instead of faded behind the text.

Verified at 1400, 1000 and 700px; production build clean.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Updated the landing-page hero artwork with a compact, flat-colored tile design and a navy market icon on a white background.
  • Adjusted the artwork’s placement and size at medium screen widths. The artwork is hidden on screens up to 900px wide, while the hero icon remains visible.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 46cf6c55-e53f-4f3e-b445-f506975ac909

📥 Commits

Reviewing files that changed from the base of the PR and between 59576b9 and 600e414.

📒 Files selected for processing (2)

• layouts/index.html
• static/css/landing.css

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

Walkthrough

The landing-page hero artwork changes to a compact grid of colored tiles with the market icon in a white circle. CSS updates the artwork’s position, width at medium viewport sizes, and visibility at narrow viewport sizes.

Changes

Landing-page hero artwork

Layer / File(s)	Summary
Artwork composition and placement layouts/index.html, static/css/landing.css	The SVG changes to a five-tile grid with the navy market icon inside a white circle. CSS adjusts the artwork’s bottom offset and width at 901–1150px.
Narrow-screen artwork visibility static/css/landing.css	At widths up to 900px, the artwork is hidden and the rule that hid the hero icon is removed. The opacity rule for widths up to 680px is removed.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to 600e4

The tiled hero artwork and narrow-screen hiding behavior have no identified merge-blocking defect. Mergeable subject to normal checks.

Architecture Summary

Architecture risk: 🔵 Low · up to 600e4

The change affects 2 systems.

Changed systems: layouts, static

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — layouts (service) was modified; 1 changed file maps to changed impact.
• observed — static (service) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in layouts/index.html: The hero SVG changes from a 480×360 composition with a large white market icon and gradient, shadowed building blocks to a 354×232 grid of five colored tiles and a white circle containing the navy market icon. The icon paths remain unchanged.
• observed — Modified behavior in static/css/landing.css: The hero artwork’s bottom offset changes from -6.4rem to -3.2rem.
• observed — Modified behavior in static/css/landing.css: At viewport widths from 901px through 1150px, the hero artwork width changes from 34% to 32%.
• observed — Modified behavior in static/css/landing.css: At widths up to 900px, the hero artwork is now hidden instead of remaining visible as faint, low-right tiles at 60% width; the narrow-screen rule that hid the hero icon is removed.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: replacing the landing band artwork with a tile grid that includes the market icon.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://wonderful-mushroom-02abe3903-52.westeurope.1.azurestaticapps.net

[Copilot]

Copilot review overview

🟢 Approval recommended

The SVG and responsive styling consistently implement the described design without identified issues.

Review effort: Balanced
Findings: None

What changed in this PR

Updates the landing-page hero artwork to the new flat tile composition.

Changes:

• Replaces the previous blocks and icon with an inline SVG tile grid.
• Refines desktop positioning and hides artwork on narrow screens.

File	Description
layouts/​index.html	Defines the new SVG artwork.
static/​css/​landing.css	Adjusts artwork sizing, positioning, and responsive visibility.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.