94 lines
3.9 KiB
TypeScript
94 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("h-full w-screen overflow-hidden py-32", className)}
|
|
>
|
|
<div className="relative container flex h-full flex-col items-start justify-between gap-10 lg:flex-row">
|
|
<div className="w-full 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 items-center gap-4 px-5 lg:max-w-md">
|
|
<span className="h-px w-full bg-muted-foreground/20" />
|
|
<p className="text-sm text-muted-foreground/50">با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.</p>
|
|
<span className="h-px w-full bg-muted-foreground/20" />
|
|
</div>
|
|
<ul className="grid grid-cols-2 gap-3 lg:max-w-md">
|
|
{FEATURES.map((feature) => (
|
|
<li key={feature.id} className="flex gap-2 lg:items-center">
|
|
<BadgeCheck className="size-4 shrink-0 text-muted-foreground/80" />
|
|
<p className="tracking-tight text-pretty text-muted-foreground/80">
|
|
{feature.label}
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<CardContainer
|
|
className="w-full"
|
|
containerClassName="h-full w-full p-0 m-0 lg:w-2/5"
|
|
>
|
|
<CardBody className="group/card flex h-full w-full! 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-3xl leading-none font-semibold tracking-tighter text-balance"
|
|
>
|
|
ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.
|
|
</CardItem>
|
|
<CardItem
|
|
as="p"
|
|
translateZ="25"
|
|
className="my-4 flex w-full max-w-sm items-center justify-center text-sm tracking-tight"
|
|
>
|
|
<span className="ms-2 opacity-50">کمپین</span>
|
|
<span className="font-semibold">رشد برند</span>
|
|
</CardItem>
|
|
<CardItem translateZ="60" className="mt-4 w-full max-w-[1000px]">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/guri3/img7.jpeg"
|
|
height="1000"
|
|
width="1000"
|
|
className="h-70 w-full rounded-3xl object-cover group-hover/card:shadow-xl"
|
|
alt="تحلیل عملکرد کمپین"
|
|
/>
|
|
</CardItem>
|
|
</CardBody>
|
|
</CardContainer>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature269 };
|