# Data panel hero > Marketing hero with a cluster of data panels, rolling CTAs and a logo wall that cycles on scroll. A shadcn/ui block from the [@craftui](https://www.craftui.space/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/craftui/hero-section). - Page, with a live preview: https://shadcn.exchange/r/craftui/hero-section - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/craftui/hero-section-light-a74c0def3982b75e.png - Registry item: https://www.craftui.space/r/hero-section.json - Categories: marketing - Listed: 2026-10-23, source last changed 2026-10-23 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/craftui/hero-section.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - Registry items: `akta-css` ## Files ### `registry/new-york/hero-section.tsx` ```tsx "use client"; /* Third-party section, kept exactly as authored: its own code style differs * from this repo's lint rules on purely stylistic points, so those are off * for this file only. */ /* oxlint-disable func-style, sort-keys, typescript/consistent-type-definitions, no-nested-ternary, no-negated-condition, curly, unicorn/numeric-separators-style, unicorn/no-nested-ternary */ import { ArrowUpRight01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { IconArrowUpRight, IconChartBar, IconChevronDown, IconCornerDownRight, IconFileDescription, IconFilter, } from "@tabler/icons-react"; import { AnimatePresence, motion, useInView, useReducedMotion, } from "motion/react"; import React, { useEffect, useRef, useState, useSyncExternalStore, } from "react"; import { cn } from "@/lib/utils"; import { AKTA_CSS } from "@/registry/new-york/akta-css"; /* --------------------------------------------------------------------------- * akta-hero-01 — "technical drawing on white paper" * * Every value lives in this file, and the akta- CSS it shares with the other * akta sections comes from ./akta-css (rendered as a
{/* nav — three cells separated by rules, not by padding */}
akta.pro
{/* announcement — the band is full-bleed so its two rules cross the whole viewport past the 1440 grid, while the hatch fill and the corner notches stay on the grid. The notches land exactly where the vertical rails meet the full-bleed rules, marking the junction instead of running the rails through the band. */}
We're live on Product Hunt
{/* hero */}

Private company data and signals API

{/* Separated by rules, not by a pipe glyph. A "|" is a character: it carries its own font metrics, so it sits on a different line-height from the mono labels either side and throws the row's vertical centring. A wrapped row at every width: 59 characters of mono need about 470px, so below sm the phrases reflow onto two lines. The rules only appear from sm, where they all fit on one line — a left rule on an item that has wrapped to the start of a new line reads as a stray tick with nothing to its left. */} {TAGLINE.map((item, i) => ( 0 && RULE_L_SM )} > {item} ))}
Talk to an engineer
{/* panels — the panel sits in flow and sets the stage height; the two cards flank it, overlapping its edges */}
{/* Background plate — a mat the cluster sits on, bled past the stage so it frames the panel rather than hiding behind it. No scrim: the panel and both cards are opaque, so the texture only ever shows in the margin. It bleeds to the full width of the 1440 grid: stage, grid and viewport share a centre line, so `left-1/2 -translate-x-1/2` plus `w-screen` lands it on the rails at every width. It clips inside its own wrapper rather than on the stage, because the cards and the panel's brackets sit outside the stage box. The bottom bleed stays at 40px while the top grows to 64px. It is deliberately asymmetric: above the stage is more of the same section, but below it is the logo wall, and the plate must stop inside the hero's bottom padding. Bleed past that and the photograph lands on the wall's top rule — an 8%-black hairline, invisible against a dark image — so the wall reads as having no separator at all. */}
{/* logo wall — the row is full-bleed so its rules cross the viewport, while the cells sit on the 1440 grid. Every cell carries a flush notch, so each divider is bracketed top and bottom where it meets the row's rules. The wall is opaque and raised so it cleanly clips the plate bleeding down from the stage above. */}
Trusted by{" "} 5,000+ top companies
{LOGOS.map((mark, i) => (
))}
{/* The wall's cells flip through the marks and are aria-hidden, so the customer names are stated once here for assistive tech. */}

Trusted by 5,000+ top companies, including{" "} {LOGOS.map((m) => m.label).join(", ")}.

{/* hatch seam closing the wall */}
); } export default AktaHero01; ```