451 lines
14 KiB
TypeScript
451 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { Cpu, Zap } from "lucide-react";
|
|
import { motion } from "motion/react";
|
|
import type { RefObject } from "react";
|
|
import React, { useRef } from "react";
|
|
import { useEffect, useId, useState } from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature250Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature250 = ({ className }: Feature250Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("relative w-full min-w-0 overflow-hidden py-32", className)}
|
|
>
|
|
<div className="container min-w-0">
|
|
<p className="mx-auto mb-4 max-w-sm text-center text-pretty text-muted-foreground md:text-xl">
|
|
با سگمنتبندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان میدهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
|
|
</p>
|
|
<h1 className="mx-auto mb-2 max-w-3xl text-center text-xl font-medium tracking-tighter text-balance break-words md:text-2xll lg:mb-5 lg:text-2xll">
|
|
کمپینهایی بسازید که واقعاً تبدیل میشوند
|
|
</h1>
|
|
<AnimatedBeamIllustration />
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature250 };
|
|
|
|
const REVERSE = false;
|
|
const DURATION = 4;
|
|
|
|
function AnimatedBeamIllustration() {
|
|
const containerRef = 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 (
|
|
<div
|
|
className="relative flex w-full min-w-0 max-w-full items-center justify-center overflow-hidden p-6 sm:p-10"
|
|
ref={containerRef}
|
|
>
|
|
<div className="flex w-full min-w-0 flex-col items-center justify-between gap-10 lg:flex-row">
|
|
{/* Reserve width on lg so absolute nodes/beams stay inside the frame (avoid lg:w-0 bleed). */}
|
|
<div className="relative z-10 flex h-100 w-full min-w-0 items-center justify-center rounded-3xl lg:w-56 lg:shrink-0">
|
|
<div
|
|
ref={div1Ref}
|
|
className="absolute start-2 top-40 z-10 flex size-18 -translate-y-1/2 items-center justify-center rounded-full bg-background p-1 lg:start-2 lg:top-1/2"
|
|
>
|
|
<div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
|
|
<div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
|
|
<Cpu size={16} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
ref={div2Ref}
|
|
className="absolute end-2 top-40 z-10 flex size-18 -translate-y-1/2 items-center justify-center rounded-full bg-background p-1 lg:start-16 lg:top-20"
|
|
>
|
|
<div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
|
|
<div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
|
|
<Cpu size={16} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
ref={div3Ref}
|
|
className="absolute start-6 bottom-4 z-10 flex size-18 items-center justify-center rounded-full bg-background p-1 lg:start-16 lg:bottom-4"
|
|
>
|
|
<div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
|
|
<div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
|
|
<Cpu size={16} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
ref={div4Ref}
|
|
className="absolute end-6 bottom-4 z-10 flex size-18 items-center justify-center rounded-full bg-background p-1 lg:start-36 lg:top-4"
|
|
>
|
|
<div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
|
|
<div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
|
|
<Cpu size={16} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
ref={div5Ref}
|
|
className="absolute start-1/2 top-20 z-10 flex size-18 -translate-x-1/2 items-center justify-center rounded-full bg-background p-1 rtl:translate-x-1/2 lg:start-36 lg:top-auto lg:bottom-4 lg:translate-x-0 rtl:lg:translate-x-0"
|
|
>
|
|
<div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
|
|
<div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
|
|
<Cpu size={16} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
ref={div6Ref}
|
|
className="z-10 flex size-32 shrink-0 items-center justify-center rounded-3xl border bg-muted lg:size-42"
|
|
>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/block-1.svg"
|
|
className="size-14 lg:size-18 dark:invert"
|
|
alt="تحلیل عملکرد کمپین"
|
|
/>
|
|
</div>
|
|
<div
|
|
ref={div7Ref}
|
|
className="z-10 mt-24 flex size-15 shrink-0 items-center justify-center rounded-xl border bg-muted lg:mt-0"
|
|
>
|
|
<Zap fill="currentColor" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="block lg:hidden">
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
containerRef={containerRef}
|
|
fromRef={div3Ref}
|
|
toRef={div6Ref}
|
|
reverse={REVERSE}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
endYOffset={-60}
|
|
endXOffset={-10}
|
|
curvature={10}
|
|
containerRef={containerRef}
|
|
fromRef={div1Ref}
|
|
toRef={div6Ref}
|
|
reverse={REVERSE}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
containerRef={containerRef}
|
|
fromRef={div5Ref}
|
|
toRef={div6Ref}
|
|
direction="vertical"
|
|
reverse={REVERSE}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
endYOffset={-60}
|
|
endXOffset={10}
|
|
curvature={10}
|
|
containerRef={containerRef}
|
|
fromRef={div2Ref}
|
|
toRef={div6Ref}
|
|
reverse={!REVERSE}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
containerRef={containerRef}
|
|
fromRef={div4Ref}
|
|
toRef={div6Ref}
|
|
reverse={!REVERSE}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
containerRef={containerRef}
|
|
fromRef={div6Ref}
|
|
toRef={div7Ref}
|
|
direction="vertical"
|
|
reverse={REVERSE}
|
|
/>
|
|
</div>
|
|
|
|
<div className="hidden lg:block">
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
containerRef={containerRef}
|
|
fromRef={div1Ref}
|
|
toRef={div6Ref}
|
|
reverse={REVERSE}
|
|
/>
|
|
<AnimatedBeam
|
|
endYOffset={-24}
|
|
endXOffset={24}
|
|
duration={DURATION}
|
|
curvature={-80}
|
|
containerRef={containerRef}
|
|
fromRef={div2Ref}
|
|
toRef={div6Ref}
|
|
reverse={REVERSE}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
endYOffset={24}
|
|
curvature={80}
|
|
containerRef={containerRef}
|
|
fromRef={div3Ref}
|
|
toRef={div6Ref}
|
|
reverse={REVERSE}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
endYOffset={-24}
|
|
endXOffset={-24}
|
|
curvature={-100}
|
|
containerRef={containerRef}
|
|
fromRef={div4Ref}
|
|
toRef={div6Ref}
|
|
reverse={REVERSE}
|
|
/>
|
|
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
endXOffset={-24}
|
|
endYOffset={24}
|
|
curvature={100}
|
|
containerRef={containerRef}
|
|
fromRef={div5Ref}
|
|
toRef={div6Ref}
|
|
reverse={REVERSE}
|
|
/>
|
|
<AnimatedBeam
|
|
duration={DURATION}
|
|
containerRef={containerRef}
|
|
fromRef={div6Ref}
|
|
toRef={div7Ref}
|
|
reverse={REVERSE}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/*
|
|
animated-beam.tsx with direction support.
|
|
The original code is from https://magicui.design/docs/components/animated-beam which doesn't support vertical animations. This is a modified version of the original code to support that.
|
|
*/
|
|
|
|
export interface AnimatedBeamProps {
|
|
className?: string;
|
|
containerRef: RefObject<HTMLElement | null>; // Container ref
|
|
fromRef: RefObject<HTMLElement | null>;
|
|
toRef: RefObject<HTMLElement | null>;
|
|
curvature?: number;
|
|
reverse?: boolean;
|
|
direction?: "horizontal" | "vertical";
|
|
pathColor?: string;
|
|
pathWidth?: number;
|
|
pathOpacity?: number;
|
|
gradientStartColor?: string;
|
|
gradientStopColor?: string;
|
|
delay?: number;
|
|
duration?: number;
|
|
startXOffset?: number;
|
|
startYOffset?: number;
|
|
endXOffset?: number;
|
|
endYOffset?: number;
|
|
}
|
|
|
|
const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
|
|
className,
|
|
containerRef,
|
|
fromRef,
|
|
toRef,
|
|
curvature = 0,
|
|
reverse = false, // Include the reverse prop
|
|
direction = "horizontal",
|
|
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,
|
|
}) => {
|
|
const id = useId();
|
|
const [pathD, setPathD] = useState("");
|
|
const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
|
|
|
|
// Calculate the gradient coordinates based on the direction and 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
|
|
? {
|
|
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;
|
|
|
|
let d: string;
|
|
if (direction === "vertical") {
|
|
const controlX = startX - curvature;
|
|
d = `M ${startX},${startY} Q ${controlX},${
|
|
(startY + endY) / 2
|
|
} ${endX},${endY}`;
|
|
} else {
|
|
const controlY = startY - curvature;
|
|
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 _ 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,
|
|
direction,
|
|
]);
|
|
|
|
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 max-w-full overflow-hidden 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], // https://easings.net/#easeOutExpo
|
|
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>
|
|
);
|
|
};
|