PagesStable

Shop

Sourcecomponents/blocks/ShopSection.astro

The shop

The Sparklin Shop — a violet Half Hero, a Filter Tabs bar, a count row, and a responsive grid of Product Cards. The tabs filter the grid live by category, and the heading + count update with the selection.

Switch viewport, or click a filter in the preview — the grid narrows and the count updates.

Sparklin Shop

Built from

Half Hero — the violet header.
Filter Tabs — the category filter bar.
Product Card — each offering in the grid.

Behaviour

Live filter — clicking a tab (via its filter:select event) hides the non-matching cards, updates the heading to the category and the count to the number shown.
Responsive grid — one column on mobile, two on tablet, three on desktop.
Client-side — all products render up front; filtering just toggles visibility, so it's instant.

Props

Prop	Type	Default	Notes
`title`	string	`—`	The Half Hero title. Required.
`eyebrow / lead`	string	`—`	The Half Hero eyebrow and lead paragraph.
`categories`	{value,label}[]	`—`	The filter tabs. The first is the "all" tab. Required.
`products`	Product[]	`—`	{ title, description?, category, price?, image? }. Required.
`categoryLabel`	(value)=>string	`identity`	Maps a product category value to the tag label on its card.
`ctaLabel`	string	`'Anfragen'`	The request Button label on every card.

Usage

Feed it a categories list (first = "all") and a products list whose category matches. Lives at /sparklin/shop.

<ShopSection
  eyebrow="Alchemy Services"
  title="Erschaffe etwas Aussergewöhnliches."
  lead="Wähle zwischen vielen Angeboten des Alchemy-Teams …"
  categories={shopCategories}
  products={shopProducts}
  categoryLabel={categoryLabel}
/>