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/how-it-works-01/page.tsx
import { HowItWorks } from "@/components/how-it-works-01"
import { dictionary } from "@/registry/bases/base/blocks/how-it-works-01/how-it-works-01-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return <HowItWorks dictionary={dictionary[locale]} lang={locale} />
}
Three numbered steps with icon medallions joined by a dashed connector, revealed in sequence on scroll.
how-it-works-01
how-it-works-01
Files
app/how-it-works-02/page.tsx
import { HowItWorks } from "@/components/how-it-works-02"
import { dictionary } from "@/registry/bases/base/blocks/how-it-works-02/how-it-works-02-dictionary"

export default async function Page({
  params,
}: {
  params?: Promise<{ lang?: string }>
}) {
  const { lang } = (await params) ?? {}
  const locale = lang === "ar" ? "ar" : "en"
  return <HowItWorks dictionary={dictionary[locale]} lang={locale} />
}
Big heading over four columns of use-case cards that drift apart as you scroll (looping tracks on mobile), closed by a stats row.
how-it-works-02
how-it-works-02