Getting Started
Templates
Components
Blocks
A complete hero section featuring a dot pattern accent, fixed navbar with scroll-aware styling, animated entrance, infinite logo cloud slider, and a themed dashboard preview. Built for SaaS and product landing pages.
Key Features:
import { HeroDotPattern } from "@/components/ui/hero-dot-pattern"
export default function Example() {
return (
<HeroDotPattern
brandName="Acme"
title={"Build Stunning Apps\nWith Zero Friction."}
subtitle="Ship faster with AI-powered components and seamless integrations."
ctaText="Get Started Free"
ctaHref="/signup"
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
brandName | string | "Syntorio" | Brand name displayed in the navbar |
brandIcon | React.ReactNode | SVG grid icon | Custom brand icon/logo |
navItems | HeroDotPatternNavItem[] | Default nav items | Navigation menu items |
navCtaText | string | "See Our Work" | CTA button text in navbar |
navCtaHref | string | "#" | CTA button link in navbar |
title | string | "Build Stunning Apps\nWith Zero Friction." | Hero heading (supports \n for line breaks) |
subtitle | string | Default description | Hero subtitle text |
ctaText | string | "Get Started Free" | Main CTA button text |
ctaHref | string | "#" | Main CTA button link |
logos | HeroDotPatternLogo[] | Default logo set | Logos for the infinite slider |
logoCloudLabel | string | "Powering the best teams" | Label next to logo cloud |
dashboardBgImage | string | undefined | Background image for dashboard preview |
className | string | undefined | Additional CSS classes |
The navbar uses a scroll listener that applies glassmorphism styling after scrolling 50px:
The dashboard section supports two modes:
dashboardBgImage: Uses the provided image as backgroundThe dashboard screenshot automatically switches between light and dark variants based on the active theme.