106 lines
3.8 KiB
TypeScript
106 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { Cable } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Integration4Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Integration4 = ({ className }: Integration4Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="relative z-10 container flex flex-col items-center gap-5">
|
|
<div className="relative my-4 flex flex-row gap-14 md:gap-20 lg:gap-28">
|
|
{/* Connection Lines SVG */}
|
|
<svg
|
|
className="absolute top-1/2 left-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2"
|
|
viewBox="0 0 200 50"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
aria-hidden
|
|
>
|
|
{/* Grid pattern in background */}
|
|
<pattern
|
|
id="grid"
|
|
width="20"
|
|
height="20"
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<path
|
|
d="M 20 0 L 0 0 0 20"
|
|
fill="none"
|
|
stroke="rgba(0,0,0,0.1)"
|
|
strokeWidth="0.5"
|
|
/>
|
|
</pattern>
|
|
<rect width="200" height="50" fill="url(#grid)" opacity="0.7" />
|
|
|
|
{/* Single connecting line */}
|
|
<path
|
|
d="M 40 25 L 160 25"
|
|
stroke="black"
|
|
strokeWidth="1"
|
|
strokeOpacity="0.2"
|
|
fill="none"
|
|
/>
|
|
|
|
{/* Connection dots */}
|
|
<circle cx="40" cy="25" r="3" fill="black" fillOpacity="0.3" />
|
|
<circle cx="80" cy="25" r="2" fill="black" fillOpacity="0.3" />
|
|
<circle cx="120" cy="25" r="2" fill="black" fillOpacity="0.3" />
|
|
<circle cx="160" cy="25" r="3" fill="black" fillOpacity="0.3" />
|
|
|
|
<defs>
|
|
<linearGradient id="lineGradient" x1="0" y1="0" x2="200" y2="0">
|
|
<stop offset="0%" stopColor="black" stopOpacity="0.3" />
|
|
<stop offset="50%" stopColor="black" stopOpacity="0.6" />
|
|
<stop offset="100%" stopColor="black" stopOpacity="0.3" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div className="relative mb-3 flex h-16 w-16 rounded-xl border bg-background shadow-md md:h-20 md:w-20">
|
|
<Cable
|
|
strokeWidth={1.5}
|
|
className="m-auto h-6 w-6 md:h-10 md:w-10"
|
|
aria-hidden
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative mb-3 flex h-16 w-16 rounded-xl border bg-background p-4 shadow-md md:h-20 md:w-20">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/slack-icon.svg"
|
|
alt="Slack"
|
|
className="h-full w-full object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<h1 className="mb-4 max-w-2xl text-3xl font-medium text-foreground md:text-xl lg:text-2xll">
|
|
اتصال جهانی یکپارچه
|
|
</h1>
|
|
|
|
<p className="max-w-2xl text-sm text-muted-foreground md:text-base lg:text-lg">
|
|
پلتفرم ما تضمین میکند دادههای شما در هر نقطه جهان همگام بمانند.
|
|
چه بهصورت محلی کار کنید چه بینالمللی، اطلاعاتتان بهصورت لحظهای
|
|
بهروزرسانی میشود تا دقیقترین و بهروزترین بینشها را داشته
|
|
باشید.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative mt-8 aspect-3/1 w-[90%] md:mt-10 md:w-[80%]">
|
|
<img
|
|
className="h-full w-full rounded-xl object-cover"
|
|
src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
|
|
alt="اتصال جهانی"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Integration4 };
|