18Switch language to English
تيلويند CSSابدأ مع تيلويند الإصدار 4

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