Integration Hub Hero

A landing-page hero: a centred eyebrow, headline, supporting copy and two CTAs on top, and below them a grid of integration icons with your product icon in the centre cell (larger, with an accent outline and soft glow). Every service tile is linked to the centre by a smooth curve, beams flow along the connectors towards the centre in turn (or outwards), and the centre icon breathes gently to the beam rhythm. Hovering a service (or focusing it with the keyboard) turns its connector into a solid accent line and speeds up its beam while the other beams fade back. The grid size is picked from the number of services (3×3, 5×3, 7×3, 7×5…), so the centre cell is always in the middle.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<IntegrationHubHero/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/integration-hub-hero.en.json

Usage

import { Cloud, CreditCard, Database, Mail } from "lucide-react";
import { IntegrationHubHero } from "@/components/ui/integration-hub-hero";

<IntegrationHubHero
  eyebrow="接點雲 · 40+ 種整合"
  title="把每一套工具，接到同一個地方"
  subtitle="資料、收款、通知與排程自動串在一起。"
  primaryAction={{ label: "免費開始", href: "/signup" }}
  secondaryAction={{ label: "瀏覽整合清單", href: "/integrations" }}
  centerLabel="接點雲"
  integrations={[
    { label: "雲庫資料", icon: Database },
    { label: "信鴿郵件", icon: Mail },
    { label: "收款站", icon: CreditCard },
    { label: "雲端倉", icon: Cloud },
    // up to 8 fit a 3×3 grid, up to 14 fit 5×3
  ]}
/>

The sample copy reads: eyebrow "Junction Cloud · 40+ integrations", headline "Plug every tool into one place", buttons "Start free" and "Browse integrations"; the services are "Vault DB", "Pigeon Mail", "PayPost" and "Cloudshed".

Props

IntegrationHubHeroItem

IntegrationHubHeroAction

How it works

• The connectors are an SVG layer under the grid: a ResizeObserver measures each cell centre and draws an S-curve that leaves and enters sideways from each service tile to the centre cell, recomputed whenever the layout changes.
• Each beam is a linearGradient swept along the connector's direction, about 20% of the connector long. Its period reads --wb-integration-hub-hero-beam (default 2.4s, read when the component mounts), and phases are spread evenly by index so beams reach the centre in turn; the hovered one speeds up to half the period.
• The centre icon breathes 1 → 1.05 → 1 on the same period.
• Entrance: eyebrow, headline, copy and CTAs rise 16px and fade in one after another, 80ms apart, over --wb-integration-hub-hero-duration (default 600ms, easing cubic-bezier(0.22, 1, 0.36, 1)); grid cells fade in ring by ring from the centre outwards, 40ms per ring, the connectors draw once the cells are in place, and only then do the beams start.
• Accent: --wb-integration-hub-hero-accent (default #0d9488 in light mode, #2dd4bf in dark), used for the eyebrow, primary button, centre outline and glow, beams and the lit-up connector.
• When there are more services than the grid holds, the grid grows automatically; spare cells stay empty.

Accessibility

• The root is a section labelled by the headline via aria-labelledby; the heading level comes from as.
• The grid is a ul with role="list"; each service tile and the centre cell is an li with an aria-label. Empty cells and the connector SVG are aria-hidden.
• With onIntegrationClick, service tiles are type="button", reachable with Tab; focus lights up the connector just like hover and shows a focus-visible ring. Without it, tiles are not focusable, so the hero does not fill up with Tab stops that do nothing.
• CTAs are a or type="button" with a clear focus-visible ring.
• When the system's reduce motion setting is on, beams and the centre breathing stop and the connectors appear without drawing, leaving a static composition; the entrance becomes a 150ms fade, applied from the first paint by a CSS media query.