← All blocks

Feature bento as a photo mosaic

feature-bento · photo-mosaic · feature-bento-photo-mosaic

npx shadcn@latest add @plus-ui/feature-bento-photo-mosaic

Default content

{
  "eyebrow": "How we work",
  "title": "A small studio that stays close to the work",
  "description": "Halftone Atelier is eleven designers and engineers. We test on real people early, ship in weeks and hand over systems your team can keep growing.",
  "cells": [
    {
      "kind": "message",
      "title": "Prototypes on the wall by Thursday",
      "text": "Every engagement starts with a week on site. By the end of it, your customers have already used a working prototype.",
      "image": {
        "src": "https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&w=1400&h=1400&q=80",
        "alt": "A designer pinning printed checkout wireframes to a studio wall"
      },
      "message": {
        "channel": "#ostrelo-checkout",
        "author": "Inês Duarte, Ostrelo",
        "time": "Thu 16:40",
        "body": "Tested the new checkout with six shoppers today. Nobody needed help finding the delivery date.",
        "highlight": "6 of 6 finished unaided"
      }
    },
    {
      "kind": "metric",
      "title": "Identity systems that hold up",
      "text": "Type, colour and components drawn once and documented for every team that touches the brand.",
      "image": {
        "src": "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&w=1200&h=900&q=80",
        "alt": "Printed colour swatches beside a tablet showing brand studies"
      },
      "value": "214",
      "caption": "components in the Pellora library"
    },
    {
      "kind": "metric",
      "title": "Six weeks to the first release",
      "text": "We scope for something real in production, then keep shipping alongside your engineers.",
      "value": "6 wk",
      "caption": "median from kickoff to launch, 2025–26"
    },
    {
      "kind": "funnel",
      "title": "Usability, round by round",
      "text": "Each test round fixes the step where people stall. Brindlebay's claim flow, three rounds in:",
      "funnel": {
        "steps": [
          {
            "label": "Started a claim",
            "value": 100
          },
          {
            "label": "Added photos",
            "value": 91
          },
          {
            "label": "Chose a payout",
            "value": 84
          },
          {
            "label": "Submitted",
            "value": 79
          }
        ]
      }
    },
    {
      "kind": "logos",
      "title": "Trusted by teams that ship",
      "text": "Long engagements, small teams, the same people from kickoff to launch.",
      "image": {
        "src": "https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1400&h=1000&q=80",
        "alt": "The Halftone Atelier loft studio with a long shared table"
      },
      "brands": [
        "ostrelo",
        "pellora",
        "brindlebay",
        "mosswell",
        "quillon",
        "talvik"
      ]
    }
  ]
}