feat: add image comparison to index page

src/components/ImageComparison.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { ChevronsLeftRightIcon } from "lucide-react";
+
+function ImageComparison() {
+	const [sliderPosition, setSliderPosition] = useState(50);
+
+	const onMouseMove = (e: React.MouseEvent) => {
+		if (e.buttons !== 1) return;
+
+		const rect = e.currentTarget.getBoundingClientRect();
+		const newSliderPosition = ((e.clientX - rect.left) / rect.width) * 100;
+		setSliderPosition(Math.min(100, Math.max(0, newSliderPosition)));
+	};
+
+	return (
+		<div onMouseMove={onMouseMove} className="mt-10 relative select-none w-1/2 h-[calc(50vw*217/270)] flex justify-center">
+			<img
+				src="/bliss_original.png"
+				alt="original version of bliss"
+				draggable={false}
+				className="absolute w-full"
+				style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`, imageRendering: "pixelated" }}
+			/>
+
+			<img
+				src="/bliss.png"
+				alt="blockmatic version of bliss"
+				draggable={false}
+				className="absolute w-full"
+				style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }}
+			/>
+
+			<div
+				className="absolute top-0 w-0.5 h-full bg-zinc-200 -translate-x-1/2 flex items-center"
+				style={{
+					left: `${sliderPosition}%`,
+				}}
+			>
+				<div className="bg-zinc-200 rounded-full absolute w-12 h-12 -translate-x-1/2 flex justify-center items-center cursor-pointer">
+					<ChevronsLeftRightIcon color="black" size={30} />
+				</div>
+			</div>
+
+			<div className="absolute left-[105%] bottom-48 bg-zinc-200 w-48 h-48 flex justify-center items-center">
+				<div className="relative w-[11.5rem] h-[11.5rem]">
+					<img
+						src="/bliss_original_zoomed.png"
+						alt="zoomed in version of blockmatic version of bliss"
+						draggable={false}
+						className="absolute w-full"
+						style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`, imageRendering: "pixelated" }}
+					/>
+
+					<img
+						src="/bliss_zoomed.png"
+						alt="zoomed in version of blockmatic version of bliss"
+						draggable={false}
+						className="absolute w-full"
+						style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }}
+					/>
+
+					<span className="text-zinc-500 absolute -bottom-7 text-xs">Use the slider to see this</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default ImageComparison;

src/pages/IndexPage.tsx

@@ -6,6 +6,8 @@ import { Button } from "@/components/ui/button";
 import BlockmaticLogo from "@/assets/blockmatic.svg?react";
 import GithubIcon from "@/assets/github.svg?react";
 
+import ImageComparison from "@/components/ImageComparison";
+
 function IndexPage() {
 	return (
 		<main className="flex flex-col items-center">
@@ -27,9 +29,12 @@ function IndexPage() {
 				<img src="/screenshot1.png" alt="screenshot" className="w-full h-full object-cover" />
 			</div>
 
-			<h1 className="text-5xl font-[Inter] font-bold mt-32">Convert your images to schematics</h1>
+			<h1 className="text-6xl font-[Inter] font-extrabold mt-32">Convert your images to schematics</h1>
 
 			<img src="/screenshot2.png" alt="bliss" className="w-[90%] rounded-xl mt-32 border border-zinc-700 glow" />
+
+			<h1 className="text-5xl font-[Inter] font-bold mt-32">Original vs. blockmatic</h1>
+			<ImageComparison />
 		</main>
 	);
 }