پابرگ · بلوک‌های UI

footer.tsx

"use client"

export default function FooterSimple() {
  return (
    <div dir="rtl" lang="fa" className="flex min-h-svh flex-col bg-background">
      <main className="flex flex-1 items-center justify-center px-6 text-sm text-muted-foreground">
        محتوای صفحه
      </main>
      <footer className="border-t px-6 py-6">
        <p className="mx-auto max-w-5xl text-center text-sm text-muted-foreground">
          © ۱۴۰۵ FarsiUI · همهٔ حقوق محفوظ است
        </p>
      </footer>
    </div>
  )
}

footer.tsx

"use client"

import * as React from "react"

const LINKS = ["مستندات", "بلوک‌ها", "قیمت‌گذاری", "تماس"] as const

function demoNavClick(event: React.MouseEvent<HTMLAnchorElement>) {
  event.preventDefault()
}

export default function FooterLinks() {
  return (
    <div dir="rtl" lang="fa" className="flex min-h-svh flex-col bg-background">
      <main className="flex flex-1 items-center justify-center px-6 text-sm text-muted-foreground">
        محتوای صفحه
      </main>
      <footer className="border-t">
        <div className="mx-auto flex w-full max-w-5xl flex-col gap-4 px-6 py-8 sm:flex-row sm:items-center sm:justify-between md:px-10">
          <a
            href="#"
            onClick={demoNavClick}
            className="text-sm font-bold tracking-tight"
          >
            FarsiUI
          </a>
          <nav className="flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted-foreground">
            {LINKS.map((label) => (
              <a
                key={label}
                href="#"
                onClick={demoNavClick}
                className="transition-colors hover:text-foreground"
              >
                {label}
              </a>
            ))}
          </nav>
          <p className="text-sm text-muted-foreground">© ۱۴۰۵</p>
        </div>
      </footer>
    </div>
  )
}

footer.tsx

"use client"

import * as React from "react"

import { Separator } from "@/components/ui/separator"

const COLUMNS = [
  {
    title: "محصول",
    links: ["بلوک‌ها", "کامپوننت‌ها", "تم‌ها", "قیمت‌گذاری"],
  },
  {
    title: "منابع",
    links: ["مستندات", "نمونه کار", "تغییرات", "وضعیت سرویس"],
  },
  {
    title: "شرکت",
    links: ["درباره ما", "تماس", "فرصت شغلی", "قوانین"],
  },
] as const

function demoNavClick(event: React.MouseEvent<HTMLAnchorElement>) {
  event.preventDefault()
}

export default function FooterColumns() {
  return (
    <div dir="rtl" lang="fa" className="flex min-h-svh flex-col bg-background">
      <main className="flex flex-1 items-center justify-center px-6 text-sm text-muted-foreground">
        محتوای صفحه
      </main>
      <footer className="border-t bg-muted/20">
        <div className="mx-auto w-full max-w-5xl px-6 py-10 md:px-10">
          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
            <div className="sm:col-span-2 lg:col-span-1">
              <p className="text-sm font-bold tracking-tight">FarsiUI</p>
              <p className="mt-2 max-w-xs text-sm text-muted-foreground">
                رابط فارسی، آمادهٔ استفاده برای تیم‌های محصول
              </p>
            </div>
            {COLUMNS.map((column) => (
              <div key={column.title}>
                <p className="text-sm font-medium">{column.title}</p>
                <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
                  {column.links.map((label) => (
                    <li key={label}>
                      <a
                        href="#"
                        onClick={demoNavClick}
                        className="hover:text-foreground"
                      >
                        {label}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <Separator className="my-8" />
          <p className="text-sm text-muted-foreground">
            © ۱۴۰۵ FarsiUI · همهٔ حقوق محفوظ است
          </p>
        </div>
      </footer>
    </div>
  )
}

footer.tsx

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

const COLUMNS = [
  {
    title: "محصول",
    links: ["بلوک‌ها", "کامپوننت‌ها", "قیمت‌گذاری"],
  },
  {
    title: "پشتیبانی",
    links: ["مستندات", "سوالات متداول", "تماس"],
  },
] as const

function demoNavClick(event: React.MouseEvent<HTMLAnchorElement>) {
  event.preventDefault()
}

export default function FooterNewsletter() {
  const [done, setDone] = React.useState(false)

  return (
    <div dir="rtl" lang="fa" className="flex min-h-svh flex-col bg-background">
      <main className="flex flex-1 items-center justify-center px-6 text-sm text-muted-foreground">
        محتوای صفحه
      </main>
      <footer className="border-t">
        <div className="mx-auto w-full max-w-5xl px-6 py-10 md:px-10">
          <div className="grid gap-10 lg:grid-cols-[1.2fr_1fr]">
            <div>
              <p className="text-sm font-bold tracking-tight">FarsiUI</p>
              <p className="mt-2 max-w-sm text-sm text-muted-foreground">
                هر جمعه یک نکتهٔ کاربردی برای ساخت محصول فارسی
              </p>
              {done ? (
                <p className="mt-4 text-sm font-medium text-foreground">
                  عضو شدید · ایمیل تأیید را چک کنید
                </p>
              ) : (
                <form
                  className="mt-4 flex max-w-md flex-col gap-2 sm:flex-row"
                  onSubmit={(e) => {
                    e.preventDefault()
                    setDone(true)
                  }}
                >
                  <Input
                    type="email"
                    required
                    placeholder="name@example.com"
                    dir="ltr"
                    className="text-start"
                  />
                  <Button type="submit" className="shrink-0">
                    عضویت
                  </Button>
                </form>
              )}
            </div>
            <div className="grid grid-cols-2 gap-8">
              {COLUMNS.map((column) => (
                <div key={column.title}>
                  <p className="text-sm font-medium">{column.title}</p>
                  <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
                    {column.links.map((label) => (
                      <li key={label}>
                        <a
                          href="#"
                          onClick={demoNavClick}
                          className="hover:text-foreground"
                        >
                          {label}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
          <Separator className="my-8" />
          <p className="text-sm text-muted-foreground">
            © ۱۴۰۵ FarsiUI · بدون اسپم، هر زمان لغو کنید
          </p>
        </div>
      </footer>
    </div>
  )
}

footer.tsx

"use client"

import * as React from "react"
import { cn } from "cn"
import { GithubIcon, InstagramIcon, LinkedinIcon } from "lucide-react"

import { Button, buttonVariants } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

const COLUMNS = [
  {
    title: "محصول",
    links: ["بلوک‌ها", "کامپوننت‌ها", "تم‌ها", "قیمت‌گذاری"],
  },
  {
    title: "منابع",
    links: ["مستندات", "نمونه کار", "تغییرات", "وضعیت"],
  },
  {
    title: "شرکت",
    links: ["درباره", "تماس", "قوانین", "حریم خصوصی"],
  },
] as const

const SOCIAL = [
  { label: "گیت‌هاب", icon: GithubIcon },
  { label: "لینکدین", icon: LinkedinIcon },
  { label: "اینستاگرام", icon: InstagramIcon },
] as const

const LEGAL = ["حریم خصوصی", "شرایط استفاده", "کوکی‌ها"] as const

function demoNavClick(event: React.MouseEvent<HTMLAnchorElement>) {
  event.preventDefault()
}

export default function FooterShowcase() {
  const [done, setDone] = React.useState(false)

  return (
    <div dir="rtl" lang="fa" className="flex min-h-svh flex-col bg-background">
      <main className="flex flex-1 items-center justify-center px-6 text-sm text-muted-foreground">
        محتوای صفحه
      </main>
      <footer className="border-t bg-muted/20">
        <div className="mx-auto w-full max-w-6xl px-6 py-12 md:px-10">
          <div className="grid gap-10 lg:grid-cols-[1.1fr_1.5fr]">
            <div className="space-y-5">
              <div>
                <p className="text-base font-bold tracking-tight">FarsiUI</p>
                <p className="mt-2 max-w-sm text-sm text-muted-foreground">
                  ابزار و بلوک برای تیم‌هایی که محصول فارسی می‌سازند
                </p>
              </div>
              <div className="flex items-center gap-2">
                {SOCIAL.map((item) => (
                  <a
                    key={item.label}
                    href="#"
                    onClick={demoNavClick}
                    aria-label={item.label}
                    className={cn(
                      buttonVariants({ variant: "outline", size: "icon-sm" })
                    )}
                  >
                    <item.icon className="size-4" />
                  </a>
                ))}
              </div>
              {done ? (
                <p className="text-sm font-medium">عضو خبرنامه شدید</p>
              ) : (
                <form
                  className="flex max-w-sm flex-col gap-2 sm:flex-row"
                  onSubmit={(e) => {
                    e.preventDefault()
                    setDone(true)
                  }}
                >
                  <Input
                    type="email"
                    required
                    placeholder="name@example.com"
                    dir="ltr"
                    className="text-start"
                  />
                  <Button type="submit" className="shrink-0">
                    عضویت
                  </Button>
                </form>
              )}
            </div>

            <div className="grid grid-cols-2 gap-8 sm:grid-cols-3">
              {COLUMNS.map((column) => (
                <div key={column.title}>
                  <p className="text-sm font-medium">{column.title}</p>
                  <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
                    {column.links.map((label) => (
                      <li key={label}>
                        <a
                          href="#"
                          onClick={demoNavClick}
                          className="hover:text-foreground"
                        >
                          {label}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>

          <Separator className="my-8" />

          <div className="flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
            <p>© ۱۴۰۵ FarsiUI · ساخته‌شده برای وب فارسی</p>
            <div className="flex flex-wrap gap-x-4 gap-y-1">
              {LEGAL.map((label) => (
                <a
                  key={label}
                  href="#"
                  onClick={demoNavClick}
                  className="hover:text-foreground"
                >
                  {label}
                </a>
              ))}
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}

footer.tsx

"use client"

export default function FooterSimple() {
  return (
    <div dir="rtl" lang="fa" className="flex min-h-svh flex-col bg-background">
      <main className="flex flex-1 items-center justify-center px-6 text-sm text-muted-foreground">
        محتوای صفحه
      </main>
      <footer className="border-t px-6 py-6">
        <p className="mx-auto max-w-5xl text-center text-sm text-muted-foreground">
          © ۱۴۰۵ FarsiUI · همهٔ حقوق محفوظ است
        </p>
      </footer>
    </div>
  )
}

footer.tsx

"use client"

import * as React from "react"

const LINKS = ["مستندات", "بلوک‌ها", "قیمت‌گذاری", "تماس"] as const

function demoNavClick(event: React.MouseEvent<HTMLAnchorElement>) {
  event.preventDefault()
}

export default function FooterLinks() {
  return (
    <div dir="rtl" lang="fa" className="flex min-h-svh flex-col bg-background">
      <main className="flex flex-1 items-center justify-center px-6 text-sm text-muted-foreground">
        محتوای صفحه
      </main>
      <footer className="border-t">
        <div className="mx-auto flex w-full max-w-5xl flex-col gap-4 px-6 py-8 sm:flex-row sm:items-center sm:justify-between md:px-10">
          <a
            href="#"
            onClick={demoNavClick}
            className="text-sm font-bold tracking-tight"
          >
            FarsiUI
          </a>
          <nav className="flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted-foreground">
            {LINKS.map((label) => (
              <a
                key={label}
                href="#"
                onClick={demoNavClick}
                className="transition-colors hover:text-foreground"
              >
                {label}
              </a>
            ))}
          </nav>
          <p className="text-sm text-muted-foreground">© ۱۴۰۵</p>
        </div>
      </footer>
    </div>
  )
}

footer.tsx

"use client"

import * as React from "react"

import { Separator } from "@/components/ui/separator"

const COLUMNS = [
  {
    title: "محصول",
    links: ["بلوک‌ها", "کامپوننت‌ها", "تم‌ها", "قیمت‌گذاری"],
  },
  {
    title: "منابع",
    links: ["مستندات", "نمونه کار", "تغییرات", "وضعیت سرویس"],
  },
  {
    title: "شرکت",
    links: ["درباره ما", "تماس", "فرصت شغلی", "قوانین"],
  },
] as const

function demoNavClick(event: React.MouseEvent<HTMLAnchorElement>) {
  event.preventDefault()
}

export default function FooterColumns() {
  return (
    <div dir="rtl" lang="fa" className="flex min-h-svh flex-col bg-background">
      <main className="flex flex-1 items-center justify-center px-6 text-sm text-muted-foreground">
        محتوای صفحه
      </main>
      <footer className="border-t bg-muted/20">
        <div className="mx-auto w-full max-w-5xl px-6 py-10 md:px-10">
          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
            <div className="sm:col-span-2 lg:col-span-1">
              <p className="text-sm font-bold tracking-tight">FarsiUI</p>
              <p className="mt-2 max-w-xs text-sm text-muted-foreground">
                رابط فارسی، آمادهٔ استفاده برای تیم‌های محصول
              </p>
            </div>
            {COLUMNS.map((column) => (
              <div key={column.title}>
                <p className="text-sm font-medium">{column.title}</p>
                <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
                  {column.links.map((label) => (
                    <li key={label}>
                      <a
                        href="#"
                        onClick={demoNavClick}
                        className="hover:text-foreground"
                      >
                        {label}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <Separator className="my-8" />
          <p className="text-sm text-muted-foreground">
            © ۱۴۰۵ FarsiUI · همهٔ حقوق محفوظ است
          </p>
        </div>
      </footer>
    </div>
  )
}

footer.tsx

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

const COLUMNS = [
  {
    title: "محصول",
    links: ["بلوک‌ها", "کامپوننت‌ها", "قیمت‌گذاری"],
  },
  {
    title: "پشتیبانی",
    links: ["مستندات", "سوالات متداول", "تماس"],
  },
] as const

function demoNavClick(event: React.MouseEvent<HTMLAnchorElement>) {
  event.preventDefault()
}

export default function FooterNewsletter() {
  const [done, setDone] = React.useState(false)

  return (
    <div dir="rtl" lang="fa" className="flex min-h-svh flex-col bg-background">
      <main className="flex flex-1 items-center justify-center px-6 text-sm text-muted-foreground">
        محتوای صفحه
      </main>
      <footer className="border-t">
        <div className="mx-auto w-full max-w-5xl px-6 py-10 md:px-10">
          <div className="grid gap-10 lg:grid-cols-[1.2fr_1fr]">
            <div>
              <p className="text-sm font-bold tracking-tight">FarsiUI</p>
              <p className="mt-2 max-w-sm text-sm text-muted-foreground">
                هر جمعه یک نکتهٔ کاربردی برای ساخت محصول فارسی
              </p>
              {done ? (
                <p className="mt-4 text-sm font-medium text-foreground">
                  عضو شدید · ایمیل تأیید را چک کنید
                </p>
              ) : (
                <form
                  className="mt-4 flex max-w-md flex-col gap-2 sm:flex-row"
                  onSubmit={(e) => {
                    e.preventDefault()
                    setDone(true)
                  }}
                >
                  <Input
                    type="email"
                    required
                    placeholder="name@example.com"
                    dir="ltr"
                    className="text-start"
                  />
                  <Button type="submit" className="shrink-0">
                    عضویت
                  </Button>
                </form>
              )}
            </div>
            <div className="grid grid-cols-2 gap-8">
              {COLUMNS.map((column) => (
                <div key={column.title}>
                  <p className="text-sm font-medium">{column.title}</p>
                  <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
                    {column.links.map((label) => (
                      <li key={label}>
                        <a
                          href="#"
                          onClick={demoNavClick}
                          className="hover:text-foreground"
                        >
                          {label}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
          <Separator className="my-8" />
          <p className="text-sm text-muted-foreground">
            © ۱۴۰۵ FarsiUI · بدون اسپم، هر زمان لغو کنید
          </p>
        </div>
      </footer>
    </div>
  )
}

footer.tsx

"use client"

import * as React from "react"
import { cn } from "cn"
import { GithubIcon, InstagramIcon, LinkedinIcon } from "lucide-react"

import { Button, buttonVariants } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

const COLUMNS = [
  {
    title: "محصول",
    links: ["بلوک‌ها", "کامپوننت‌ها", "تم‌ها", "قیمت‌گذاری"],
  },
  {
    title: "منابع",
    links: ["مستندات", "نمونه کار", "تغییرات", "وضعیت"],
  },
  {
    title: "شرکت",
    links: ["درباره", "تماس", "قوانین", "حریم خصوصی"],
  },
] as const

const SOCIAL = [
  { label: "گیت‌هاب", icon: GithubIcon },
  { label: "لینکدین", icon: LinkedinIcon },
  { label: "اینستاگرام", icon: InstagramIcon },
] as const

const LEGAL = ["حریم خصوصی", "شرایط استفاده", "کوکی‌ها"] as const

function demoNavClick(event: React.MouseEvent<HTMLAnchorElement>) {
  event.preventDefault()
}

export default function FooterShowcase() {
  const [done, setDone] = React.useState(false)

  return (
    <div dir="rtl" lang="fa" className="flex min-h-svh flex-col bg-background">
      <main className="flex flex-1 items-center justify-center px-6 text-sm text-muted-foreground">
        محتوای صفحه
      </main>
      <footer className="border-t bg-muted/20">
        <div className="mx-auto w-full max-w-6xl px-6 py-12 md:px-10">
          <div className="grid gap-10 lg:grid-cols-[1.1fr_1.5fr]">
            <div className="space-y-5">
              <div>
                <p className="text-base font-bold tracking-tight">FarsiUI</p>
                <p className="mt-2 max-w-sm text-sm text-muted-foreground">
                  ابزار و بلوک برای تیم‌هایی که محصول فارسی می‌سازند
                </p>
              </div>
              <div className="flex items-center gap-2">
                {SOCIAL.map((item) => (
                  <a
                    key={item.label}
                    href="#"
                    onClick={demoNavClick}
                    aria-label={item.label}
                    className={cn(
                      buttonVariants({ variant: "outline", size: "icon-sm" })
                    )}
                  >
                    <item.icon className="size-4" />
                  </a>
                ))}
              </div>
              {done ? (
                <p className="text-sm font-medium">عضو خبرنامه شدید</p>
              ) : (
                <form
                  className="flex max-w-sm flex-col gap-2 sm:flex-row"
                  onSubmit={(e) => {
                    e.preventDefault()
                    setDone(true)
                  }}
                >
                  <Input
                    type="email"
                    required
                    placeholder="name@example.com"
                    dir="ltr"
                    className="text-start"
                  />
                  <Button type="submit" className="shrink-0">
                    عضویت
                  </Button>
                </form>
              )}
            </div>

            <div className="grid grid-cols-2 gap-8 sm:grid-cols-3">
              {COLUMNS.map((column) => (
                <div key={column.title}>
                  <p className="text-sm font-medium">{column.title}</p>
                  <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
                    {column.links.map((label) => (
                      <li key={label}>
                        <a
                          href="#"
                          onClick={demoNavClick}
                          className="hover:text-foreground"
                        >
                          {label}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>

          <Separator className="my-8" />

          <div className="flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
            <p>© ۱۴۰۵ FarsiUI · ساخته‌شده برای وب فارسی</p>
            <div className="flex flex-wrap gap-x-4 gap-y-1">
              {LEGAL.map((label) => (
                <a
                  key={label}
                  href="#"
                  onClick={demoNavClick}
                  className="hover:text-foreground"
                >
                  {label}
                </a>
              ))}
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}