Files
reui-blocks/blocks/feature267.tsx
T

74 lines
2.9 KiB
TypeScript

import { Sparkles } from "lucide-react";
import React from "react";
import { ThreeDMarquee } from "@/components/aceternity/3d-marquee";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
const MARQUEE_IMAGES = [
...Array.from(
{ length: 27 },
(_, i) =>
`/block-media/shadcnblocks/block/guri3/img${i + 1}.jpeg`,
),
...Array.from(
{ length: 9 },
(_, i) =>
`/block-media/shadcnblocks/block/guri3/img${i + 1}.jpeg`,
),
];
interface Feature267Props {
className?: string;
}
const Feature267 = ({ className }: Feature267Props) => {
return (
<section
dir="rtl"
lang="fa"
className={cn(
"relative h-full w-screen overflow-hidden py-32",
className,
)}
>
<div className="container grid grid-cols-1 items-center gap-5 lg:grid-cols-2">
<div className="flex h-full flex-col justify-center text-start">
<div className="flex items-center gap-2">
<Sparkles className="size-5 fill-foreground" />
<p className="w-fit rounded-full py-1 font-medium tracking-tight">
تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
</p>
</div>
<h1 className="mt-3 mb-8 max-w-xl text-2xll font-semibold tracking-tighter text-balance lg:max-w-3xl lg:text-2xll">
فروش تیم‌تان را یکجا مدیریت کنید
</h1>
<p className="max-w-xl text-pretty text-muted-foreground">
از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.
</p>
<div className="mt-10 gap-4">
<div className="flex h-15 w-full max-w-md items-center rounded-full border p-1">
<Input
type="email"
dir="rtl"
className="w-full rounded-full border-none text-start shadow-none ring-0 focus-visible:ring-0 focus-visible:outline-none active:ring-0 active:outline-0"
placeholder="هر سرنخ را تا قرارداد دنبال کنید"
/>
<Button className="h-full shrink-0 rounded-full">
روابط مشتری را در یک نگاه ببینید
</Button>
</div>
</div>
</div>
<div className="items-center justify-center">
<ThreeDMarquee className="rounded-none" images={MARQUEE_IMAGES} />
</div>
</div>
</section>
);
};
export { Feature267 };