468 lines
14 KiB
TypeScript
468 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "motion/react";
|
|
import type { RefObject } from "react";
|
|
import React, { useRef } from "react";
|
|
import { useEffect, useId, useState } from "react";
|
|
|
|
import { Globe } from "@/components/magicui/globe";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature251Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature251 = ({ className }: Feature251Props) => {
|
|
const containerRef1 = useRef<HTMLDivElement>(null);
|
|
const containerRef2 = useRef<HTMLDivElement>(null);
|
|
const div1Ref = useRef<HTMLDivElement>(null);
|
|
const div2Ref = useRef<HTMLDivElement>(null);
|
|
const div3Ref = useRef<HTMLDivElement>(null);
|
|
const div4Ref = useRef<HTMLDivElement>(null);
|
|
const div5Ref = useRef<HTMLDivElement>(null);
|
|
const div6Ref = useRef<HTMLDivElement>(null);
|
|
const div7Ref = useRef<HTMLDivElement>(null);
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("relative w-full min-w-0 overflow-hidden py-16 md:py-24 lg:py-32", className)}
|
|
>
|
|
<div className="container min-w-0 px-4 sm:px-6">
|
|
<div className="mx-auto flex w-full min-w-0 max-w-5xl flex-wrap items-center justify-center gap-5">
|
|
<Card className="relative h-96 w-full min-w-0 overflow-hidden rounded-3xl border md:w-166">
|
|
<CardHeader className="text-start">
|
|
<h3 className="text-xl font-semibold tracking-tight text-balance">
|
|
تریگر رویداد
|
|
</h3>
|
|
<p className="mt-2 text-pretty text-muted-foreground/70">
|
|
شرط هوشمند
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent ref={containerRef1} className="relative ms-2 overflow-hidden sm:ms-5">
|
|
<IconCard
|
|
ref={div1Ref as React.RefObject<HTMLDivElement>}
|
|
src="/block-media/shadcnblocks/block/logos/google-icon.svg"
|
|
imageAlt="سازنده گردشکار"
|
|
className="mb-3"
|
|
/>
|
|
<IconCard
|
|
ref={div2Ref as React.RefObject<HTMLDivElement>}
|
|
src="/block-media/shadcnblocks/block/logos/figma-icon.svg"
|
|
imageAlt="نمای اتوماسیون فرایند"
|
|
className="translate-x-12 rtl:-translate-x-12 sm:translate-x-20 sm:rtl:-translate-x-20 md:translate-x-32 md:rtl:-translate-x-32"
|
|
/>
|
|
<IconCard
|
|
ref={div3Ref as React.RefObject<HTMLDivElement>}
|
|
src="/block-media/shadcnblocks/block/logos/notion-icon.svg"
|
|
imageAlt="لاگ اجرای خودکار"
|
|
className="mt-3"
|
|
/>
|
|
<IconCard
|
|
ref={div5Ref as React.RefObject<HTMLDivElement>}
|
|
src="/block-media/shadcnblocks/block/block-1.svg"
|
|
imageAlt="سازنده گردشکار"
|
|
className="absolute end-4 top-1/2 -translate-y-1/2 sm:end-8 md:end-12"
|
|
/>
|
|
<div
|
|
ref={div4Ref as React.RefObject<HTMLDivElement>}
|
|
className="absolute top-1/2 left-1/2 z-99 h-4 w-4 -translate-y-1/2 rounded-full border bg-muted"
|
|
/>
|
|
<AnimatedBeam
|
|
duration={3}
|
|
containerRef={containerRef1}
|
|
fromRef={div1Ref}
|
|
curvature={40}
|
|
toRef={div4Ref}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={3}
|
|
containerRef={containerRef1}
|
|
fromRef={div2Ref}
|
|
toRef={div4Ref}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={3}
|
|
containerRef={containerRef1}
|
|
fromRef={div3Ref}
|
|
curvature={-40}
|
|
toRef={div4Ref}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={3}
|
|
containerRef={containerRef1}
|
|
fromRef={div4Ref}
|
|
toRef={div5Ref}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="h-96 w-full min-w-0 overflow-hidden rounded-3xl border md:w-83">
|
|
<CardHeader className="text-start">
|
|
<h3 className="text-xl font-semibold tracking-tight text-balance">
|
|
اعلان خودکار
|
|
</h3>
|
|
<p className="text-pretty text-muted-foreground/70">
|
|
تأیید چندمرحلهای
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent
|
|
ref={containerRef2}
|
|
className="relative flex h-full flex-col items-center justify-between"
|
|
>
|
|
<IconCard
|
|
ref={div6Ref as React.RefObject<HTMLDivElement>}
|
|
src="/block-media/shadcnblocks/block/block-1.svg"
|
|
imageAlt="نمای اتوماسیون فرایند"
|
|
className="mb-3"
|
|
/>
|
|
|
|
<IconCard
|
|
ref={div7Ref as React.RefObject<HTMLDivElement>}
|
|
src="/block-media/shadcnblocks/block/logos/g2-icon.svg"
|
|
imageAlt="لاگ اجرای خودکار"
|
|
className="mt-3"
|
|
/>
|
|
|
|
<AnimatedBeam
|
|
duration={3}
|
|
containerRef={containerRef2}
|
|
fromRef={div6Ref as React.RefObject<HTMLDivElement>}
|
|
direction="vertical"
|
|
curvature={40}
|
|
toRef={div7Ref as React.RefObject<HTMLDivElement>}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="relative flex h-96 w-full min-w-0 flex-col overflow-hidden rounded-3xl border md:w-[330px]">
|
|
<CardContent>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/block-1.svg"
|
|
className="mt-5 size-32"
|
|
alt="سازنده گردشکار"
|
|
/>
|
|
</CardContent>
|
|
<CardHeader className="mt-auto text-start">
|
|
<h3 className="text-xl font-semibold tracking-tight text-balance">
|
|
لاگ اجرا
|
|
</h3>
|
|
<p className="text-pretty text-muted-foreground/70">
|
|
قالب آماده
|
|
</p>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card className="relative flex h-96 w-full min-w-0 flex-col overflow-hidden rounded-3xl border md:w-166">
|
|
<CardHeader className="relative z-10 shrink-0 text-start">
|
|
<h3 className="text-xl font-semibold tracking-tight text-balance">
|
|
اتصال ابزار
|
|
</h3>
|
|
<p className="text-pretty text-muted-foreground/70">
|
|
سازنده گردشکار
|
|
</p>
|
|
</CardHeader>
|
|
|
|
<div className="relative mt-auto h-56 w-full overflow-hidden">
|
|
<Globe className="-top-8" />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature251 };
|
|
|
|
const IconCard = ({
|
|
src,
|
|
imageAlt,
|
|
className,
|
|
ref,
|
|
}: {
|
|
src: string;
|
|
imageAlt: string;
|
|
className?: string;
|
|
ref: React.RefObject<HTMLDivElement>;
|
|
}) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"relative z-10 flex size-14 items-center justify-center rounded-xl bg-muted",
|
|
className,
|
|
)}
|
|
>
|
|
<img src={src} alt={imageAlt} className="size-5" />
|
|
<HandleIcon
|
|
aria-hidden
|
|
className="absolute -top-3 left-1/2 size-6 -translate-x-1/2"
|
|
/>
|
|
<HandleIcon
|
|
aria-hidden
|
|
className="absolute -bottom-3 left-1/2 size-6 -translate-x-1/2"
|
|
/>
|
|
<HandleIcon
|
|
aria-hidden
|
|
className="absolute top-1/2 -start-3 size-6 -translate-y-1/2 rotate-90"
|
|
/>
|
|
<HandleIcon
|
|
aria-hidden
|
|
className="absolute top-1/2 -end-3 size-6 -translate-y-1/2 rotate-90"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const HandleIcon = (props: React.SVGProps<SVGSVGElement>) => {
|
|
return (
|
|
<svg
|
|
{...props}
|
|
width="14"
|
|
height="5"
|
|
viewBox="0 0 14 5"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<line
|
|
x1="0.543457"
|
|
y1="0.972656"
|
|
x2="0.543457"
|
|
y2="4.625"
|
|
stroke="black"
|
|
strokeOpacity="0.2"
|
|
/>
|
|
<line
|
|
x1="4.54346"
|
|
y1="0.972656"
|
|
x2="4.54346"
|
|
y2="4.625"
|
|
stroke="black"
|
|
strokeOpacity="0.2"
|
|
/>
|
|
<line
|
|
x1="8.54346"
|
|
y1="0.972656"
|
|
x2="8.54346"
|
|
y2="4.625"
|
|
stroke="black"
|
|
strokeOpacity="0.2"
|
|
/>
|
|
<line
|
|
x1="12.5435"
|
|
y1="0.972656"
|
|
x2="12.5435"
|
|
y2="4.625"
|
|
stroke="black"
|
|
strokeOpacity="0.2"
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
// Below is the modified component from Magic UI
|
|
// Original source: https://magicui.design/docs/components/animated-beam
|
|
// Modified to follow our coding standards and design system
|
|
// We respect copyright and attribution to the original creators
|
|
|
|
export interface AnimatedBeamProps {
|
|
className?: string;
|
|
containerRef: RefObject<HTMLElement | null>; // Container ref
|
|
fromRef: RefObject<HTMLElement | null>;
|
|
toRef: RefObject<HTMLElement | null>;
|
|
curvature?: number;
|
|
reverse?: boolean;
|
|
pathColor?: string;
|
|
pathWidth?: number;
|
|
pathOpacity?: number;
|
|
gradientStartColor?: string;
|
|
gradientStopColor?: string;
|
|
delay?: number;
|
|
duration?: number;
|
|
startXOffset?: number;
|
|
startYOffset?: number;
|
|
endXOffset?: number;
|
|
endYOffset?: number;
|
|
direction?: "horizontal" | "vertical";
|
|
}
|
|
|
|
export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
|
|
className,
|
|
containerRef,
|
|
fromRef,
|
|
toRef,
|
|
curvature = 0,
|
|
reverse = false, // Include the reverse prop
|
|
duration = Math.random() * 3 + 4,
|
|
delay = 0,
|
|
pathColor = "gray",
|
|
pathWidth = 2,
|
|
pathOpacity = 0.2,
|
|
gradientStartColor = "#ffaa40",
|
|
gradientStopColor = "#9c40ff",
|
|
startXOffset = 0,
|
|
startYOffset = 0,
|
|
endXOffset = 0,
|
|
endYOffset = 0,
|
|
direction = "horizontal",
|
|
}) => {
|
|
const id = useId();
|
|
const [pathD, setPathD] = useState("");
|
|
const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
|
|
|
|
// Calculate the gradient coordinates based on the reverse prop
|
|
const gradientCoordinates =
|
|
direction === "vertical"
|
|
? reverse
|
|
? {
|
|
x1: ["0%", "0%"],
|
|
x2: ["0%", "0%"],
|
|
y1: ["90%", "-10%"],
|
|
y2: ["100%", "0%"],
|
|
}
|
|
: {
|
|
x1: ["0%", "0%"],
|
|
x2: ["0%", "0%"],
|
|
y1: ["10%", "110%"],
|
|
y2: ["0%", "100%"],
|
|
}
|
|
: reverse
|
|
? {
|
|
// Horizontal (existing logic)
|
|
x1: ["90%", "-10%"],
|
|
x2: ["100%", "0%"],
|
|
y1: ["0%", "0%"],
|
|
y2: ["0%", "0%"],
|
|
}
|
|
: {
|
|
x1: ["10%", "110%"],
|
|
x2: ["0%", "100%"],
|
|
y1: ["0%", "0%"],
|
|
y2: ["0%", "0%"],
|
|
};
|
|
|
|
useEffect(() => {
|
|
const updatePath = () => {
|
|
if (containerRef.current && fromRef.current && toRef.current) {
|
|
const containerRect = containerRef.current.getBoundingClientRect();
|
|
const rectA = fromRef.current.getBoundingClientRect();
|
|
const rectB = toRef.current.getBoundingClientRect();
|
|
|
|
const svgWidth = containerRect.width;
|
|
const svgHeight = containerRect.height;
|
|
setSvgDimensions({ width: svgWidth, height: svgHeight });
|
|
|
|
const startX =
|
|
rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
|
|
const startY =
|
|
rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
|
|
const endX =
|
|
rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
|
|
const endY =
|
|
rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
|
|
|
|
const controlY = startY - curvature;
|
|
const d = `M ${startX},${startY} Q ${
|
|
(startX + endX) / 2
|
|
},${controlY} ${endX},${endY}`;
|
|
setPathD(d);
|
|
}
|
|
};
|
|
|
|
// Initialize ResizeObserver
|
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
// For all entries, recalculate the path
|
|
for (const _entry of entries) {
|
|
updatePath();
|
|
}
|
|
});
|
|
|
|
// Observe the container element
|
|
if (containerRef.current) {
|
|
resizeObserver.observe(containerRef.current);
|
|
}
|
|
|
|
// Call the updatePath initially to set the initial path
|
|
updatePath();
|
|
|
|
// Clean up the observer on component unmount
|
|
return () => {
|
|
resizeObserver.disconnect();
|
|
};
|
|
}, [
|
|
containerRef,
|
|
fromRef,
|
|
toRef,
|
|
curvature,
|
|
startXOffset,
|
|
startYOffset,
|
|
endXOffset,
|
|
endYOffset,
|
|
]);
|
|
|
|
return (
|
|
<svg
|
|
fill="none"
|
|
width={svgDimensions.width}
|
|
height={svgDimensions.height}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={cn(
|
|
"pointer-events-none absolute start-0 top-0 transform-gpu stroke-2",
|
|
className,
|
|
)}
|
|
viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
|
|
>
|
|
<path
|
|
d={pathD}
|
|
stroke={pathColor}
|
|
strokeWidth={pathWidth}
|
|
strokeOpacity={pathOpacity}
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d={pathD}
|
|
strokeWidth={pathWidth}
|
|
stroke={`url(#${id})`}
|
|
strokeOpacity="1"
|
|
strokeLinecap="round"
|
|
/>
|
|
<defs>
|
|
<motion.linearGradient
|
|
className="transform-gpu"
|
|
id={id}
|
|
gradientUnits="userSpaceOnUse"
|
|
initial={{
|
|
x1: "0%",
|
|
x2: "0%",
|
|
y1: "0%",
|
|
y2: "0%",
|
|
}}
|
|
animate={{
|
|
x1: gradientCoordinates.x1,
|
|
x2: gradientCoordinates.x2,
|
|
y1: gradientCoordinates.y1,
|
|
y2: gradientCoordinates.y2,
|
|
}}
|
|
transition={{
|
|
delay,
|
|
duration,
|
|
ease: [0.16, 1, 0.3, 1],
|
|
repeat: Infinity,
|
|
repeatDelay: 0,
|
|
}}
|
|
>
|
|
<stop stopColor={gradientStartColor} stopOpacity="0"></stop>
|
|
<stop stopColor={gradientStartColor}></stop>
|
|
<stop offset="32.5%" stopColor={gradientStopColor}></stop>
|
|
<stop
|
|
offset="100%"
|
|
stopColor={gradientStopColor}
|
|
stopOpacity="0"
|
|
></stop>
|
|
</motion.linearGradient>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|