Initial import of 1407 block sources under blocks/
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ar.badiei
@@ -0,0 +1,199 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AnimatePresence,
|
||||
motion,
|
||||
useMotionValue,
|
||||
useSpring,
|
||||
} from "framer-motion";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const projects = [
|
||||
{
|
||||
title: "طراحی مقیاسپذیر",
|
||||
img: "/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg",
|
||||
year: "۱۴۰۴",
|
||||
type: "محصول",
|
||||
},
|
||||
{
|
||||
title: "رابط شهری رنگارنگ",
|
||||
img: "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
|
||||
year: "۱۴۰۴",
|
||||
type: "طراحی وب",
|
||||
},
|
||||
{
|
||||
title: "داشبورد مینیمال لوکس",
|
||||
img: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
|
||||
year: "۱۴۰۴",
|
||||
type: "رابط کاربری",
|
||||
},
|
||||
{
|
||||
title: "صفحه اصلی مینیمال",
|
||||
img: "/block-media/shadcnblocks/block/lummi/bw13.jpeg",
|
||||
year: "۱۴۰۴",
|
||||
type: "طراحی محصول",
|
||||
},
|
||||
{
|
||||
title: "معماری فرانتاند",
|
||||
img: "/block-media/shadcnblocks/block/lummi/bw14.jpeg",
|
||||
year: "۱۴۰۴",
|
||||
type: "تم گرم و دنج",
|
||||
},
|
||||
{
|
||||
title: "کامپوننت در بستر واقعی",
|
||||
img: "/block-media/shadcnblocks/block/lummi/bw16.jpeg",
|
||||
year: "۱۴۰۴",
|
||||
type: "مودال تأیید با بلاک Dialog",
|
||||
},
|
||||
];
|
||||
|
||||
interface Projects12Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Projects12 = ({ className }: Projects12Props) => {
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const mouseX = useMotionValue(0);
|
||||
const mouseY = useMotionValue(0);
|
||||
|
||||
const springX = useSpring(mouseX, {
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
mass: 0.8,
|
||||
});
|
||||
const springY = useSpring(mouseY, {
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
mass: 0.8,
|
||||
});
|
||||
|
||||
const handleContainerMouseMove = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const containerRect = containerRef.current.getBoundingClientRect();
|
||||
const x = e.clientX - containerRect.left;
|
||||
const y = e.clientY - containerRect.top;
|
||||
|
||||
mouseX.set(x - 50);
|
||||
mouseY.set(y + 30);
|
||||
},
|
||||
[mouseX, mouseY],
|
||||
);
|
||||
|
||||
const handleProjectMouseEnter = useCallback((index: number) => {
|
||||
setHoveredIndex(index);
|
||||
setIsHovering(true);
|
||||
}, []);
|
||||
|
||||
const handleContainerMouseLeave = useCallback(() => {
|
||||
setHoveredIndex(null);
|
||||
setIsHovering(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section dir="rtl" lang="fa" className={cn("py-20", className)}>
|
||||
<div className="container">
|
||||
<div className="mb-10 flex items-end justify-between text-start">
|
||||
<h2 className="text-2xl font-semibold">گالری استودیو</h2>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative grid grid-cols-1 gap-x-6 gap-y-7 sm:grid-cols-2 lg:grid-cols-3"
|
||||
onMouseMove={handleContainerMouseMove}
|
||||
onMouseLeave={handleContainerMouseLeave}
|
||||
>
|
||||
{projects.map((project, index) => (
|
||||
<div key={index} className="group relative text-start">
|
||||
<div
|
||||
className="relative cursor-pointer overflow-hidden rounded-xl"
|
||||
onMouseEnter={() => handleProjectMouseEnter(index)}
|
||||
>
|
||||
<img
|
||||
src={project.img}
|
||||
alt={project.title}
|
||||
className="h-[400px] w-full rounded-lg object-cover transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:scale-[1.05] group-hover:brightness-110"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 rounded-lg bg-black/0 transition-all duration-500 group-hover:bg-black/10" />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-between gap-0.5">
|
||||
<h3 className="text-sm leading-tight font-medium transition-colors duration-300 group-hover:text-neutral-800 md:text-base">
|
||||
{project.title}
|
||||
</h3>
|
||||
<div className="flex flex-col items-end text-end">
|
||||
<p className="text-sm text-neutral-600">{project.year}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{project.type}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<AnimatePresence>
|
||||
{isHovering && hoveredIndex !== null && (
|
||||
<motion.div
|
||||
style={{
|
||||
x: springX,
|
||||
y: springY,
|
||||
}}
|
||||
initial={{
|
||||
opacity: 0,
|
||||
scale: 0.8,
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
scale: 0.8,
|
||||
}}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 25,
|
||||
mass: 0.5,
|
||||
}}
|
||||
className="pointer-events-none absolute top-0 left-0 z-[9999] select-none"
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 rounded-xl border border-white/10 bg-black/95 shadow-2xl shadow-black/30 backdrop-blur-md" />
|
||||
|
||||
<div className="relative flex items-center gap-3 px-3 py-3 text-sm font-medium whitespace-nowrap text-white">
|
||||
<span className="text-base">کاوش</span>
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded-full border border-white/30 bg-white/10">
|
||||
<motion.span
|
||||
animate={{ x: [0, 2, 0] }}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Number.POSITIVE_INFINITY,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="inline-block text-xs rtl:rotate-180"
|
||||
>
|
||||
→
|
||||
</motion.span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 scale-105 rounded-2xl bg-white/5 blur-sm" />
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { Projects12 };
|
||||
Reference in New Issue
Block a user