Installation
Usage
import { StructuredHeroSection } from "@/components/ruixen/structured-hero-section";
export default function App() {
return (
<StructuredHeroSection
announcement="350+ Components and Counting"
announcementAction={{ label: "Browse", href: "/docs/components" }}
title="Modern Components for Every Interface"
description="Modern, fast, and customizable React components built with Tailwind CSS, TypeScript, and accessibility in mind."
primaryAction={{ href: "/docs", label: "Get Started" }}
secondaryAction={{ href: "/pricing", label: "Get Pro Access" }}
cards={[
{
label: "Calendars",
imageSrcLight: "/cal-light.png",
imageSrcDark: "/cal-dark.png",
},
{ label: "Cards" },
{ label: "Buttons" },
]}
trustedBy={{
heading: "Built with the technologies you trust",
logos: [<ReactIcon key="react" />, <TailwindIcon key="tw" />],
}}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
announcement | string | "New release available" | Text inside the announcement pill |
announcementAction | Action | - | Optional link beside the announcement |
title | ReactNode | Required | Main headline text |
description | string | - | Subtitle / description paragraph |
primaryAction | Action | - | Primary CTA button |
secondaryAction | Action | - | Secondary CTA button |
cards | ShowcaseCard[] | - | Up to 3 overlapping showcase cards |
trustedBy | TrustedBySection | - | Trusted-by / built-with logo strip |
className | string | - | Additional CSS classes |
Action Type
type Action = {
href: string;
label: string;
};ShowcaseCard Type
interface ShowcaseCard {
label?: string;
imageSrcLight?: string;
imageSrcDark?: string;
}Cards without images render a skeleton placeholder UI. Provide imageSrcLight and/or imageSrcDark for theme-aware image cards.
TrustedBySection Type
interface TrustedBySection {
heading?: string;
action?: Action;
logos: React.ReactNode[];
}Features
- Announcement Pill: Clean pill with ring border and optional action link
- Overlapping Cards: Up to 3 cards with rotation and z-index stacking
- Dual Card Modes: Image mode (light/dark) or skeleton placeholder
- Trusted-By Strip: Logo grid with heading and optional action
- Dual CTAs: Primary (filled) and secondary (outlined) action buttons
- Responsive: Stacks cleanly on mobile, full layout on desktop
- Semantic Tokens: Uses foreground/background/primary tokens for theme compatibility
- Zero Dependencies: No external libraries required