99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
import { BadgeCheck } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import {
|
|
CardBody,
|
|
CardContainer,
|
|
CardItem,
|
|
} from "@/components/aceternity/3d-card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const FEATURES = [
|
|
{ id: "instant", label: "کمپین" },
|
|
{ id: "one-time", label: "رشد برند" },
|
|
{ id: "developer", label: "بازاریابی دیجیتال" },
|
|
{ id: "responsive", label: "جذب مخاطب" },
|
|
{ id: "production", label: "کمپین" },
|
|
{ id: "support", label: "رشد برند" },
|
|
{ id: "updates", label: "بازاریابی دیجیتال" },
|
|
{ id: "customizable", label: "جذب مخاطب" },
|
|
{ id: "performance", label: "کمپین" },
|
|
{ id: "accessibility", label: "رشد برند" },
|
|
{ id: "cross-browser", label: "بازاریابی دیجیتال" },
|
|
{ id: "docs", label: "جذب مخاطب" },
|
|
] as const;
|
|
|
|
interface Feature269Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature269 = ({ className }: Feature269Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"relative h-full w-full overflow-hidden py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative container flex h-full min-w-0 flex-col items-start justify-between gap-10 lg:flex-row">
|
|
<div className="w-full min-w-0 space-y-5 text-start lg:w-3/5">
|
|
<h1 className="mx-auto mb-15 w-full max-w-lg text-center text-2xll font-semibold tracking-tighter text-balance lg:mx-0 lg:text-start lg:text-2xll">
|
|
کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند؟
|
|
</h1>
|
|
<div className="mb-18 flex w-full min-w-0 max-w-md items-center gap-4 px-5 lg:px-0">
|
|
<span className="h-px min-w-0 flex-1 bg-muted-foreground/20" />
|
|
<p className="shrink-0 text-sm tracking-wide text-muted-foreground/50">
|
|
ویژگی‌ها
|
|
</p>
|
|
<span className="h-px min-w-0 flex-1 bg-muted-foreground/20" />
|
|
</div>
|
|
<ul className="grid w-full min-w-0 grid-cols-2 gap-3 lg:max-w-md">
|
|
{FEATURES.map((feature) => (
|
|
<li key={feature.id} className="flex min-w-0 gap-2 lg:items-center">
|
|
<BadgeCheck className="size-4 shrink-0 text-muted-foreground/80" />
|
|
<p className="min-w-0 tracking-tight text-pretty text-muted-foreground/80">
|
|
{feature.label}
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<CardContainer
|
|
className="w-full min-w-0"
|
|
containerClassName="h-full w-full min-w-0 p-0 m-0 lg:w-2/5"
|
|
>
|
|
<CardBody className="group/card flex h-full w-full! min-w-0 flex-col items-center justify-center rounded-3xl bg-muted/70 p-5">
|
|
<CardItem
|
|
translateZ="60"
|
|
className="mt-10 mb-2 max-w-xs text-center text-2xl leading-none font-semibold tracking-tighter text-balance sm:text-3xl"
|
|
>
|
|
ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد
|
|
</CardItem>
|
|
<CardItem
|
|
as="p"
|
|
translateZ="25"
|
|
className="my-4 flex w-full max-w-sm items-center justify-center gap-2 text-sm tracking-tight"
|
|
>
|
|
<span className="opacity-50">خوش آمدید به</span>
|
|
<span className="font-semibold">رشد برند</span>
|
|
</CardItem>
|
|
<CardItem translateZ="60" className="mt-4 w-full min-w-0 max-w-full">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/guri3/img7.jpeg"
|
|
height="1000"
|
|
width="1000"
|
|
className="h-70 w-full max-w-full rounded-3xl object-cover group-hover/card:shadow-xl"
|
|
alt="تحلیل عملکرد کمپین"
|
|
/>
|
|
</CardItem>
|
|
</CardBody>
|
|
</CardContainer>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature269 };
|