18Switch language to العربية
Tailwind CSSGet Started with Tailwind v4

Templates for the Web

Clean, modern templates. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.

Browse TemplatesAdd a template
Files
app/cta-01/page.tsx
import { Cta } from "@/components/cta-01"
import { dictionary } from "@/registry/bases/base/blocks/cta-01/cta-01-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return <Cta dictionary={dictionary[locale]} lang={locale} tone="night" />
}
A rounded call-to-action panel with pill buttons built from cva variants, in night, soft or brand tones.
cta-01
cta-01
Files
app/cta-02/page.tsx
import { Cta } from "@/components/cta-02"
import { dictionary } from "@/registry/bases/base/blocks/cta-02/cta-02-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return <Cta dictionary={dictionary[locale]} lang={locale} />
}
A centered call-to-action banner in a bordered muted card with primary and outline buttons.
cta-02
cta-02
Files
app/cta-03/page.tsx
import { Cta } from "@/components/cta-03"
import { dictionary } from "@/registry/bases/base/blocks/cta-03/cta-03-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return <Cta dictionary={dictionary[locale]} lang={locale} />
}
A full-bleed animated gradient call-to-action that follows the pointer and insets with rounded corners as it scrolls away.
cta-03
cta-03