Spotlight

Code

import { Badge, Button, Spotlight } from "@fadymondy/nasaq/web";export function StoreHero() {  return (    <Spotlight      brand="mahaam"      title="Mahaam"      eyebrow={<Badge variant="accent">Editor's pick</Badge>}      description="Projects, tasks, time and invoices in one place."      actions={        <>          <Button>Start free trial</Button>          <Button variant="ghost">Details</Button>        </>      }    />  );}

Brand · beta

Live examples and controls: Spotlight in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/spotlight.json

A banner that features one product. It renders the product's artwork field with its mark, name, pitch, buttons and a quiet meta line. The whole banner sits in that product's brand scope (data-brand), so a Mahaam spotlight shows Mahaam's colour even inside another product's store, and a primary Button inside it takes the product colour.

When to useCopy Anchor Link

• The hero of a store or product page (size="lg").
• A compact featured tile next to or under the hero (size="md").

When not to useCopy Anchor Link

• A list of products: use ProductCard in a ProductGrid.
• A bundle: use BundleCard.
• A generic marketing hero with no product: compose your own layout.

ImportCopy Anchor Link

import { Spotlight } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Badge, Button, Spotlight } from "@fadymondy/nasaq/web";

export function StoreHero() {
  return (
    <Spotlight
      brand="mahaam"
      title="Mahaam"
      eyebrow={<Badge variant="accent">Editor's pick</Badge>}
      description="Projects, tasks, time and invoices in one place."
      actions={
        <>
          <Button>Start free trial</Button>
          <Button variant="ghost">Details</Button>
        </>
      }
    />
  );
}

AnatomyCopy Anchor Link

Spotlight                    data-slot="spotlight", data-size="lg|md"   <section aria-labelledby>
└─ ProductArtwork            the product's field; @container
   ├─ eyebrow
   ├─ mark + title           ProductMark (or `mark`) and the heading (id for aria-labelledby)
   ├─ description
   ├─ actions
   ├─ meta
   └─ media                  size "lg" only, from 48rem of banner width

APICopy Anchor Link

SpotlightCopy Anchor Link

SpotlightProps extends Omit<ComponentProps<"section">, "title">. Remaining props go to the <section>.

ExamplesCopy Anchor Link

Hero with media, price and ratingCopy Anchor Link

import { Badge, Button, Price, Rating, ScreenshotFrame, Spotlight } from "@fadymondy/nasaq/web";

export function Hero() {
  return (
    <Spotlight
      brand="mahaam"
      titleAs="h1"
      title="مهام"
      eyebrow={<Badge variant="accent">اختيار المحررين</Badge>}
      description="المشاريع والمهام والوقت والفواتير في مكان واحد."
      actions={
        <>
          <Button>ابدأ التجربة</Button>
          <Button variant="ghost">التفاصيل</Button>
        </>
      }
      meta={
        <>
          <Price amount={12} period="seat-month" size="sm" />
          <Rating value={4.8} count={2140} />
        </>
      }
      media={
        <ScreenshotFrame variant="window" title="Mahaam" label="Mahaam board" className="w-72">
          <div className="h-32" />
        </ScreenshotFrame>
      }
    />
  );
}

Compact tileCopy Anchor Link

import { Button, Spotlight } from "@fadymondy/nasaq/web";

export function Tile() {
  return (
    <Spotlight
      size="md"
      brand="zekra"
      title="Zekra"
      description="A memory organ for AI agents."
      actions={<Button size="sm" variant="secondary">Open</Button>}
    />
  );
}

AccessibilityCopy Anchor Link

• A <section> labelled by the title heading (aria-labelledby), so it is a named landmark region.
• The default mark is decorative (title=""). Put the product name in title.
• Pass titleAs="h1" when the banner is the page title; keep heading levels in order.

• Localise title, eyebrow, description, button labels and meta.

RTL & i18nCopy Anchor Link

• Layout uses logical properties and grid, so the copy sits at the inline start and media at the end; both swap in RTL.
• Directional icons in buttons need rtl:-scale-x-100.
• Numbers in meta come from Price and Rating and follow the locale.
• No built-in strings.

Styling & tokensCopy Anchor Link

• The banner is a ProductArtwork field. --nq-brand inside the banner is the product's colour, so a primary Button picks it up.
• Text: text-display (lg title), text-h3 (md), text-body, text-caption, text-foreground, text-muted-foreground.
• Target with [data-slot=spotlight] or [data-size=md].
• Extend with className. Do not recolour with raw hex; change brand.

Do / Don'tCopy Anchor Link

• Do use at most one primary button per view. In a Spotlight it takes the product colour.
• Do keep meta to one quiet line.
• Don't wrap the Spotlight in a bordered card.
• Don't put several Spotlights of different brands side by side with a primary button each.
• Don't pass a title that names a different product than brand.

RelatedCopy Anchor Link

• ProductCard · BundleCard · ProductArtwork · SectionHeader

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-brand-spotlight--docs