Hero Tiles

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?w=1600&q=80&auto=format&fit=crop`

const tiles = [
  {
    title: "Book Air",
    text: "So thin. So capable. Now with S5.",
    image: photo("1750056393331-82e69d28c9d9"),
    alt: "A laptop between plants on a wooden desk",
    dark: false,
  },
  {
    title: "Watch",

Two promotional tiles, each with a title, tagline, Learn more and Buy buttons and a product image, one of them rendered in the dark palette. The tiles stack on mobile and sit side by side on desktop. It is a static server component for promoting two products or offers on a home page.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/hero-tiles

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks hero-tiles

Manual

1. Add the cn helper.

2. Add the pieces it builds on: Button.

3. Copy the source into components/blocks/hero-tiles.tsx:

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?w=1600&q=80&auto=format&fit=crop`

const tiles = [
  {
    title: "Book Air",
    text: "So thin. So capable. Now with S5.",
    image: photo("1750056393331-82e69d28c9d9"),
    alt: "A laptop between plants on a wooden desk",
    dark: false,
  },
  {
    title: "Watch",

4. Update the import paths to match your project.

Usage

import { HeroTiles } from "@/components/blocks/hero-tiles"

<HeroTiles />

Edit the tiles array; each tile has a title, text, image, alt text and a dark flag. Dark tiles prefix their title with suiss, so remove that span if it doesn't fit your brand. Connect the buttons to your product pages.

Notes

Images are Unsplash placeholders.