67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
import { ChevronRight, Menu } from "lucide-react";
|
|
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature109Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature109 = ({ className }: Feature109Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="grid place-items-center gap-10 lg:grid-cols-2">
|
|
<div className="flex flex-col gap-5 text-start">
|
|
<Badge variant="outline" className="w-fit bg-background">
|
|
کمپین
|
|
</Badge>
|
|
<h3 className="text-3xl font-semibold lg:text-2xll">
|
|
ردیابی UTM
|
|
</h3>
|
|
<p className="text-muted-foreground lg:text-lg">
|
|
گزارش ROI
|
|
</p>
|
|
<Button className="mt-2.5 w-fit gap-2" size="lg">
|
|
با سگمنتبندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان میدهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
|
|
<Menu className="h-auto w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="relative rounded-xl">
|
|
<img
|
|
src="/block-media/external/unsplash/photo-1567320743368-9db24e12ebf0.jpg"
|
|
alt="تحلیل عملکرد کمپین"
|
|
className="rounded-xl object-cover md:aspect-video lg:aspect-auto"
|
|
/>
|
|
<div className="absolute inset-0 rounded-xl bg-linear-to-t from-primary via-transparent to-transparent" />
|
|
<div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
|
|
<span className="ms-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm">
|
|
<Avatar className="size-7 rounded-full">
|
|
<AvatarImage
|
|
src="/block-media/shadcnblocks/block/avatar-1.webp"
|
|
alt="نمودار ROI"
|
|
/>
|
|
</Avatar>
|
|
رشد برند
|
|
</span>
|
|
<div className="flex flex-col gap-5 text-background">
|
|
<h4 className="text-lg font-semibold lg:text-3xl">
|
|
مدیریت کمپین
|
|
</h4>
|
|
<a href="#" className="flex items-center gap-1 font-medium">
|
|
سگمنتبندی مخاطب
|
|
<ChevronRight className="h-auto w-4 rtl:rotate-180" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature109 };
|