69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import {
|
|
ArrowRight,
|
|
Blocks,
|
|
MessagesSquare,
|
|
MoveRight,
|
|
Users,
|
|
} from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero26Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero26 = ({ className }: Hero26Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="text-center">
|
|
<a
|
|
href="#"
|
|
className="mx-auto mb-3 inline-flex items-center gap-3 rounded-full border px-2 py-1 text-sm"
|
|
>
|
|
<Badge className="rounded-full">نسخه جدید</Badge>
|
|
معرفی Collaboration 2.0
|
|
<span className="flex size-7 items-center justify-center rounded-full bg-muted">
|
|
<ArrowRight className="w-4" />
|
|
</span>
|
|
</a>
|
|
<h1 className="mx-auto mt-4 mb-3 max-w-3xl text-xl font-semibold text-balance lg:mb-7 lg:text-2xll">
|
|
همکاری مؤثر را تجربه کنید
|
|
</h1>
|
|
<p className="m mx-auto max-w-3xl text-muted-foreground lg:text-xl">
|
|
پلتفرمی برای توانمندسازی
|
|
<span className="relative top-[5px] mx-2 inline-flex font-medium text-primary md:top-[3px]">
|
|
<Users className="me-1 w-4 md:w-5" />
|
|
تیمها
|
|
</span>
|
|
در
|
|
<span className="relative top-[5px] mx-2 inline-flex font-medium text-primary md:top-[3px]">
|
|
<Blocks className="me-1 w-5" />
|
|
همکاری،
|
|
</span>
|
|
<span className="relative top-[5px] mx-2 inline-flex font-medium text-primary md:top-[3px]">
|
|
<MessagesSquare className="me-1 w-5" />
|
|
ارتباط مؤثر
|
|
</span>
|
|
و مدیریت پروژهها. بدون نیاز به کارت بانکی، رایگان شروع کنید.
|
|
</p>
|
|
<div className="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
|
|
<Button size="lg">
|
|
شروع رایگان
|
|
<MoveRight className="ms-2 rtl:rotate-180" strokeWidth={1} />
|
|
</Button>
|
|
<Button size="lg" variant="ghost">
|
|
آشنایی بیشتر
|
|
<MoveRight className="ms-2 rtl:rotate-180" strokeWidth={1} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero26 };
|