Getting Started
Templates
Components
import {
ServicesScroll,
type ServiceCard,
} from "@/components/ruixen/services-scroll"
const services: ServiceCard[] = [
{
id: 1,
number: "01",
title: "Components",
description: "Premium UI components built for performance.",
},
{
id: 2,
number: "02",
title: "Templates",
description: "Production-ready landing pages that convert.",
},
]
export default function Example() {
return (
<ServicesScroll
badge="What we offer"
title="Build faster, ship better"
description="Our components are crafted to make your landing pages stand out."
ctaText="Browse components"
ctaHref="/components"
cards={services}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | string | "Services" | Badge text displayed above the title |
title | string | "How we can help" | Main heading text |
description | string | - | Description paragraph below the title |
ctaText | string | "View work" | Call-to-action button text |
ctaHref | string | "#" | Link destination for the CTA button |
cards | ServiceCard[] | Default cards | Array of service cards to display |
className | string | - | Additional CSS classes |
| Prop | Type | Description |
|---|---|---|
id | string | number | Unique identifier for the card |
number | string | Display number (e.g., "01", "02") |
title | string | Card title |
description | string | Card description text |