feat: add hover effect to image and change image based on theme

src/components/home/AppPreview.tsx

@@ -0,0 +1,49 @@
+import { useContext, useState } from "react";
+import { ThemeContext } from "@/context/Theme";
+
+function AppPreview() {
+	const { isDark } = useContext(ThemeContext);
+
+	const [leaving, setLeaving] = useState(true);
+	const [transform, setTransform] = useState("");
+
+	const onMouseEnter = () => {
+		setLeaving(false);
+	};
+
+	const onMouseLeave = () => {
+		setLeaving(true);
+		setTransform("rotateX(0deg) rotateY(0deg)");
+	};
+
+	const onMouseMove = (e: React.MouseEvent) => {
+		const rect = e.currentTarget.getBoundingClientRect();
+
+		const x = e.clientX - rect.left;
+		const y = e.clientY - rect.top;
+
+		const centerX = rect.width / 2;
+		const centerY = rect.height / 2;
+
+		const rotateX = ((y - centerY) / centerY) * 10;
+		const rotateY = ((centerX - x) / centerX) * 10;
+
+		setTransform(`rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
+	};
+
+	return (
+		<img
+			src={isDark ? "/blockmatic_screenshot_dark.png" : "/blockmatic_screenshot_light.png"}
+			alt="app preview"
+			onMouseEnter={onMouseEnter}
+			onMouseLeave={onMouseLeave}
+			onMouseMove={onMouseMove}
+			className={`w-[90%] rounded-xl mt-32 border border-zinc-700 ${
+				leaving ? "transition-transform duration-500 ease-in-out" : "duration-100 ease-out"
+			}`}
+			style={{ transform }}
+		/>
+	);
+}
+
+export default AppPreview;

src/pages/IndexPage.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import BlockmaticLogo from "@/assets/blockmatic.svg?react";
 import GithubIcon from "@/assets/github.svg?react";
 
+import AppPreview from "@/components/home/AppPreview";
 import ImageComparison from "@/components/home/ImageComparison";
 
 function IndexPage() {
@@ -24,16 +25,18 @@ function IndexPage() {
 				</div>
 			</header>
 
-			<div className="absolute w-full h-full -z-20">
+			<img
-				<div className="absolute inset-0 bg-gradient-to-t from-black/100 to-black/0 z-10"></div>
+				src="/screenshot1.png"
-				<img src="/screenshot1.png" alt="screenshot" className="w-full h-full object-cover" />
+				alt="screenshot"
-			</div>
+				className="absolute w-full h-full object-cover -z-20"
+				style={{ maskImage: "linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,0) 100%)" }}
+			/>
 
-			<h1 className="text-6xl font-[Inter] font-extrabold mt-32">Convert your images to schematics</h1>
+			<h1 className="text-6xl font-[Inter] font-extrabold mt-32 text-white text-center">Convert your images to schematics</h1>
 
-			<img src="/screenshot2.png" alt="bliss" className="w-[90%] rounded-xl mt-32 border border-zinc-700 glow" />
+			<AppPreview />
 
-			<h1 className="text-5xl font-[Inter] font-bold mt-32">Original vs. blockmatic</h1>
+			<h1 className="text-5xl font-[Inter] font-bold mt-32">See the difference</h1>
 			<ImageComparison />
 
 			<footer>