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/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