90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { ArrowRight } from "lucide-react";
|
||
import React, { useRef } from "react";
|
||
|
||
|
||
import { useMousePosition } from "@/hooks/use-mouse-position";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface Hero222Props {
|
||
className?: string;
|
||
}
|
||
|
||
const Hero222 = ({ className }: Hero222Props) => {
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
|
||
const { x, y } = useMousePosition(containerRef);
|
||
return (
|
||
<section className={cn("py-18", className)}>
|
||
<div className="container">
|
||
<div
|
||
ref={containerRef}
|
||
className="relative flex h-[85vh] flex-col items-center justify-center gap-4 overflow-hidden bg-[url('/block-media/shadcnblocks/block/lummi/bw15.jpeg')] bg-[position:center_-24rem] xl:bg-cover"
|
||
>
|
||
<div className="absolute bottom-10 left-10 flex flex-col mix-blend-exclusion">
|
||
<p className="text-xs text-secondary"> {Math.round(x)}</p>
|
||
<p className="text-xs text-secondary"> {Math.round(y)}</p>
|
||
</div>
|
||
<div className="relative z-10 h-full w-full mix-blend-exclusion">
|
||
<div className="mx-auto mt-62 w-fit">
|
||
<motion.p
|
||
initial={{ opacity: 0, y: -10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
className="font-mono text-lg text-white md:ms-3"
|
||
>
|
||
نسخه ۱{" "}
|
||
</motion.p>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
{/* <VariableFontAndCursor
|
||
label="BEYOND SPEED"
|
||
className="text-2xll tracking-[-5px] text-white sm:text-2xll md:text-9xl md:tracking-[-13px]"
|
||
fontVariationMapping={{
|
||
y: { name: "wght", min: 100, max: 900 },
|
||
x: { name: "slnt", min: 0, max: -10 },
|
||
}}
|
||
containerRef={containerRef as React.RefObject<HTMLDivElement>}
|
||
/> */}
|
||
</motion.div>
|
||
<div
|
||
className="absolute top-0 h-screen w-px -translate-x-1/2 bg-background"
|
||
style={{
|
||
left: `${x - 2}px`,
|
||
}}
|
||
/>
|
||
<div
|
||
className="absolute left-0 h-px w-screen -translate-y-1/2 bg-background"
|
||
style={{
|
||
top: `${y - 2}px`,
|
||
}}
|
||
/>
|
||
<div
|
||
className="absolute h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-xs bg-background"
|
||
style={{
|
||
top: `${y - 2}px`,
|
||
left: `${x - 2}px`,
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<button className="group z-99 mb-10 flex items-center gap-2 bg-background px-4 py-2 text-black transition-all duration-300 hover:gap-4">
|
||
شروع رایگان
|
||
<ArrowRight
|
||
className="-rotate-45 transition-all duration-300 group-hover:rotate-0 rtl:rotate-180"
|
||
size={16}
|
||
/>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Hero222 };
|