Fluted glass

Blue hero on a fluted glass shader with a wavy underline.

Usage

import { HeroFluted } from '@/components/blocks/hero-section-08'


<HeroFluted />


<HeroFluted
  brand="Dogear"
  eyebrow="Now on Bazari"
  headlineTop="Inventory that"
  headlineBottom="counts itself"
  colors={{ light: '#a7f3d0', mid: '#10b981', deep: '#047857', glow: '#ecfdf5' }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/hero-section-08

npx shadcn@latest add @pastaui-pro/hero-section-08

yarn dlx shadcn@latest add @pastaui-pro/hero-section-08

bunx --bun shadcn@latest add @pastaui-pro/hero-section-08

Source

Props

Fluted glass props
Prop	Type	Default	Description
brand / brandHref	string	= Minutely / #	Accessible name and link for the pixel logo tile.
navLinks	{ label: string; href: string }[]	= How it works, Pricing, Security	Centred links. Hidden below the md breakpoint.
navAction	{ label: string; href: string }	= Start free	Link on the right of the nav, shown on every screen size.
eyebrow	string	= —	Optional small line with a sparkle above the headline. Nothing renders when omitted.
headlineTop	string	= Meetings that	First headline line.
headlineBottom	string	= write their own notes	Second headline line.
description	string	= Minutely joins your calls…	Supporting copy under the headline.
primaryAction / secondaryAction	{ label: string; href: string }	= Start for free / Watch the demo	White pill with an arrow, and an outlined pill with a play icon.
colors	{ light?: string; mid?: string; deep?: string; glow?: string }	= { light: '#8ec5ff', mid: '#2b7fff', deep: '#1f5ed9', glow: '#d4ecff' }	Hex colours for the shader gradient and flute highlights.
fluteWidth	number	= 88	Flute width in CSS pixels. Narrows automatically on small screens.
speed	number	= 1	How fast the gradient drifts behind the glass.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline overrides for the --pp-* variables. Type defaults: --pp-heading-font 'Manrope Variable', --pp-heading-weight 450, --pp-subheading-weight 550, --pp-heading-size 40px (48px from 640px, 64px from 1024px, 76px from 1280px), --pp-heading-tracking -0.04em, --pp-heading-leading 1.04, --pp-eyebrow-size 11px, --pp-eyebrow-tracking 0.16em.