73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const people = [
|
|
{
|
|
id: 1,
|
|
name: "Alex",
|
|
designation: "مهندس نرم‌افزار",
|
|
image:
|
|
"/block-media/shadcnblocks/block/lummi/bw2.jpeg",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Lisa",
|
|
designation: "طراح محصول",
|
|
image:
|
|
"/block-media/shadcnblocks/block/lummi/bw3.jpeg",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Julia",
|
|
designation: "پژوهشگر تجربه کاربری",
|
|
image:
|
|
"/block-media/shadcnblocks/block/lummi/bw11.jpeg",
|
|
},
|
|
];
|
|
|
|
interface Hero248Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero248 = ({ className }: Hero248Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="grid grid-cols-1 items-start gap-12 md:grid-cols-2 lg:gap-16">
|
|
<div className="space-y-8">
|
|
<h1 className="text-xl font-semibold tracking-tight md:text-2xll">
|
|
تیم ما{" "}
|
|
<span className="inline-flex items-start gap-4">
|
|
<div className="relative flex items-start">
|
|
<div className="flex [&>div]:transition-transform [&>div]:duration-300 [&>div:hover]:rotate-0 [&>div:nth-child(1)]:-rotate-3 [&>div:nth-child(2)]:rotate-2 [&>div:nth-child(3)]:-rotate-1">
|
|
{/* <AnimatedTooltip items={people} /> */}
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<span className="ms-6">
|
|
محصولات دیجیتالی طراحی می‌کنیم که نیاز کاربران و اهداف کسب‌وکار را هم‌زمان پوشش می‌دهند.
|
|
</span>
|
|
</h1>
|
|
<p className="text-lg leading-relaxed text-muted-foreground md:text-xl">
|
|
از ایده تا اجرا تجربه‌های بصری و راهکارهای مقیاس‌پذیر می‌سازیم
|
|
که با اهداف کسب‌وکار شما هم‌راستا است و واقعاً با مخاطبان‌تان
|
|
ارتباط برقرار می‌کند.
|
|
</p>
|
|
<Button size="lg">
|
|
درخواست مشاوره
|
|
<ArrowRight className="h-4 w-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
<div className="mx-auto max-w-xl lg:pt-4"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero248 };
|