95 lines
3.8 KiB
TypeScript
95 lines
3.8 KiB
TypeScript
import { ArrowDown, BookOpen, LayoutGrid, Sparkles } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero235Props {
|
|
className?: string;
|
|
}
|
|
|
|
const SERVICES = [
|
|
{
|
|
icon: Sparkles,
|
|
title: "هویت بصری",
|
|
description:
|
|
"هویت بصری منسجمی طراحی می‌کنیم که به ماندگاری برند و ایجاد ارتباط مؤثر با مخاطبان کمک می‌کند.",
|
|
},
|
|
{
|
|
icon: LayoutGrid,
|
|
title: "تجربه‌های تعاملی",
|
|
description:
|
|
"با ترکیب طراحی، فناوری و تعامل، تجربه‌هایی ماندگار برای کاربران خلق می‌کنیم.",
|
|
},
|
|
{
|
|
icon: BookOpen,
|
|
title: "کارگاه‌ها",
|
|
description:
|
|
"کارگاه‌های آموزشی و مشاوره‌ای متناسب با نیاز تیم شما برگزار می‌کنیم.",
|
|
},
|
|
];
|
|
|
|
const Hero235 = ({ className }: Hero235Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"relative flex h-dvh items-center justify-center overflow-hidden bg-background py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div aria-hidden={true}>
|
|
<div className="absolute -right-0 -bottom-[30rem] size-[35rem] rounded-full bg-rose-400 opacity-40 blur-[5rem] md:-right-[2rem] md:-bottom-[50rem] md:size-[55rem] dark:opacity-20" />
|
|
<div className="absolute -right-[20rem] -bottom-[20rem] size-[35rem] rounded-full bg-sky-500 opacity-40 blur-[5rem] md:-right-[32rem] md:-bottom-[36rem] md:size-[55rem] dark:opacity-20" />
|
|
<div
|
|
className="pointer-events-none absolute inset-0 z-0 opacity-40"
|
|
style={{
|
|
backgroundImage:
|
|
"url(/block-media/shadcnblocks/block/noise.png)",
|
|
backgroundRepeat: "repeat",
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="relative container flex h-full flex-col justify-between">
|
|
<div className="flex flex-1 items-center justify-center">
|
|
<div className="mx-auto flex max-w-2xl flex-col items-center text-center">
|
|
<h1 className="text-xl font-semibold tracking-tight text-balance text-foreground md:text-2xll lg:text-2xll">
|
|
استودیوی طراحی و توسعه محصولات دیجیتال
|
|
</h1>
|
|
<p className="mt-8 max-w-xl text-pretty text-muted-foreground md:text-lg">
|
|
رابط‌های کاربری و تجربه‌های دیجیتالی طراحی می‌کنیم که علاوه بر زیبایی، عملکردی سریع، مقیاس‌پذیر و کاربرپسند داشته باشند.
|
|
</p>
|
|
<Button size="lg" className="mt-10">
|
|
مشاهده مطالعات موردی
|
|
<ArrowDown className="shrink-0" aria-hidden />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="pt-16">
|
|
<div className="grid gap-12 lg:grid-cols-3 lg:gap-0">
|
|
{SERVICES.map((service) => {
|
|
const Icon = service.icon;
|
|
return (
|
|
<div
|
|
key={service.title}
|
|
className={cn(
|
|
"flex flex-col border-l border-primary px-6 md:px-8",
|
|
)}
|
|
>
|
|
<Icon className="mb-4 size-6" aria-hidden />
|
|
<h2 className="font-semibold text-foreground">
|
|
{service.title}
|
|
</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{service.description}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero235 };
|