- Home
+
+
+
)
}
diff --git a/apps/frontend/src/components/ui/3d-card.tsx b/apps/frontend/src/components/ui/3d-card.tsx
new file mode 100644
index 0000000..1b5dc5c
--- /dev/null
+++ b/apps/frontend/src/components/ui/3d-card.tsx
@@ -0,0 +1,154 @@
+
+import { cn } from "../../lib/utils";
+
+import React, {
+ createContext,
+ useState,
+ useContext,
+ useRef,
+ useEffect,
+} from "react";
+
+const MouseEnterContext = createContext<
+ [boolean, React.Dispatch
>] | undefined
+>(undefined);
+
+export const CardContainer = ({
+ children,
+ className,
+ containerClassName,
+}: {
+ children?: React.ReactNode;
+ className?: string;
+ containerClassName?: string;
+}) => {
+ const containerRef = useRef(null);
+ const [isMouseEntered, setIsMouseEntered] = useState(false);
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ if (!containerRef.current) return;
+ const { left, top, width, height } =
+ containerRef.current.getBoundingClientRect();
+ const x = (e.clientX - left - width / 2) / 25;
+ const y = (e.clientY - top - height / 2) / 25;
+ containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
+ };
+
+ const handleMouseEnter = (e: React.MouseEvent) => {
+ setIsMouseEntered(true);
+ if (!containerRef.current) return;
+ };
+
+ const handleMouseLeave = (e: React.MouseEvent) => {
+ if (!containerRef.current) return;
+ setIsMouseEntered(false);
+ containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;
+ };
+ return (
+
+
+
+ );
+};
+
+export const CardBody = ({
+ children,
+ className,
+}: {
+ children: React.ReactNode;
+ className?: string;
+}) => {
+ return (
+ *]:[transform-style:preserve-3d]",
+ className
+ )}
+ >
+ {children}
+
+ );
+};
+
+export const CardItem = ({
+ as: Tag = "div",
+ children,
+ className,
+ translateX = 0,
+ translateY = 0,
+ translateZ = 0,
+ rotateX = 0,
+ rotateY = 0,
+ rotateZ = 0,
+ ...rest
+}: {
+ as?: React.ElementType;
+ children: React.ReactNode;
+ className?: string;
+ translateX?: number | string;
+ translateY?: number | string;
+ translateZ?: number | string;
+ rotateX?: number | string;
+ rotateY?: number | string;
+ rotateZ?: number | string;
+ [key: string]: any;
+}) => {
+ const ref = useRef(null);
+ const [isMouseEntered] = useMouseEnter();
+
+ useEffect(() => {
+ handleAnimations();
+ }, [isMouseEntered]);
+
+ const handleAnimations = () => {
+ if (!ref.current) return;
+ if (isMouseEntered) {
+ ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+ } else {
+ ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+// Create a hook to use the context
+export const useMouseEnter = () => {
+ const context = useContext(MouseEnterContext);
+ if (context === undefined) {
+ throw new Error("useMouseEnter must be used within a MouseEnterProvider");
+ }
+ return context;
+};
\ No newline at end of file
diff --git a/apps/frontend/src/lib/utils.tsx b/apps/frontend/src/lib/utils.tsx
new file mode 100644
index 0000000..95b19a8
--- /dev/null
+++ b/apps/frontend/src/lib/utils.tsx
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
\ No newline at end of file