bumicerts-monorepo · organizations-route-visual-comparison

Bumicerts /organizations visual comparison

@satyam-mishra-pce

Image1 asks for a soft editorial organizations index with a botanical hero, aligned controls, filter chips, and calm organization cards.

Date: 2026-05-11 · partial · Target: /organizations

Headline result

4
Target areas matched
2
Residual differences
4
Screenshots/assets
2
Checks passed

Summary. The route moved from a sparse heading-and-grid screen to the Image1 composition: a full-width botanical hero, no desktop route header above the content, tighter control/chip spacing, and softer cards with country badges and Bumicert count footers. Remaining differences are mostly live-data dependent: the local route currently returns a different set/order of organizations and fewer country chips than the reference screenshot.

Walkthrough

Image1 target reference for the organizations route
Target Image1. Hero card with botanical art, two-line serif heading, search/sort row, filter chips, and a three-column card grid.
Updated organizations route after implementation
After update. The route now uses the same page rhythm and a GPT-generated raster hero image instead of SVG drawing.
Original organizations route before changes
BeforeStandalone heading, visible top header, large vertical gap, and older cover-led cards.
Generated botanical hero art asset
Generated artRaster botanical hero artwork created from the GPT image tool and used as a Next image asset.

Findings

Hero composition now matches the target structure

The page now opens with a rounded hero panel, uppercase organization eyebrow, “Discover organizations / healing our planet” title, matching descriptive copy, and right-side botanical art. The decorative art is loaded from public/assets/organizations/organizations-hero-botanical.png rather than inline SVG.

Layout rhythm is aligned with Image1

The desktop header above the route is hidden only for /organizations, which brings the hero to the same vertical position as the target. Search, sort, chip rows, separator, and first card row were tightened to match the reference spacing.

Cards moved toward the target card language

Organization cards now use soft botanical surfaces, prominent circular logos, country badges, serif italic names, body copy, and a contained Bumicert count footer. A small shared createBloAddress utility removed the previous unsafe DID-to-blo cast while preserving deterministic fallback avatars.

Live data is not identical to Image1

The local screenshot shows different organizations and fewer country chips than Image1 because the route renders live organization data. With a dataset matching Image1, the chip limit and “More” control will expose the longer country list, but this run cannot force identical content without fixture data.

Pixel-perfect art still depends on the generated asset

The generated raster art matches the pale sun, green hills, birds, and right-side leaves, but it is not a handcrafted source file. If the team wants exact brand illustration control, the next step is to replace the generated PNG with a final art-directed raster export at the same path.

Reproducing

Routehttp://127.0.0.1:3001/organizations Screenshotsagent-browser screenshot after opening the route Lintbun run lint — completed with existing warnings, no errors Buildbun run build — completed successfully; dashboard prerender retried once due a slow live-data fetch