feat: add text to index page under "See the difference" heading and other changes

src/components/home/ImageComparison.tsx

@@ -13,12 +13,12 @@ function ImageComparison() {
 	};
 
 	return (
-		<div onMouseMove={onMouseMove} className="mt-10 relative select-none w-1/2 h-[calc(50vw*217/270)] flex justify-center">
+		<div onMouseMove={onMouseMove} className="relative select-none w-full h-[calc(40vw*217/270)] flex justify-center">
 			<img
 				src="/bliss/bliss_original.png"
 				alt="original version of bliss"
 				draggable={false}
-				className="absolute w-full"
+				className="absolute w-full -z-20"
 				style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`, imageRendering: "pixelated" }}
 			/>
 
@@ -26,7 +26,7 @@ function ImageComparison() {
 				src="/bliss/bliss.png"
 				alt="blockmatic version of bliss"
 				draggable={false}
-				className="absolute w-full"
+				className="absolute w-full -z-20"
 				style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }}
 			/>
 
@@ -41,28 +41,24 @@ function ImageComparison() {
 				</div>
 			</div>
 
-			<span className="absolute -bottom-6 left-1 text-zinc-500 text-xs">Windows XP Background 'Bliss' image owned by Microsoft Corporation</span>
+			<span className="absolute top-[101.5%] left-1 text-zinc-500 text-xs">Windows XP Background 'Bliss' image owned by Microsoft Corporation</span>
 
-			<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/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" }}
-					/>
+			<div className="absolute right-2 top-1/2 w-1/5 h-1/5 flex justify-center items-center -z-10">
+				<img
+					src="/bliss/bliss_original_zoomed.png"
+					alt="zoomed in version of blockmatic version of bliss"
+					draggable={false}
+					className="absolute w-full rounded-full"
+					style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`, imageRendering: "pixelated" }}
+				/>
 
-					<img
-						src="/bliss/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>
+				<img
+					src="/bliss/bliss_zoomed.png"
+					alt="zoomed in version of blockmatic version of bliss"
+					draggable={false}
+					className="absolute w-full rounded-full"
+					style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }}
+				/>
 			</div>
 		</div>
 	);

src/pages/IndexPage.tsx

@@ -46,8 +46,23 @@ function IndexPage() {
 
 			<AppPreview />
 
-			<h1 className="text-5xl font-pixel font-bold mt-32">See the difference</h1>
-			<ImageComparison />
+			<div className="grid grid-cols-2 w-4/5 mt-8">
+				<div className="pr-32 py-32">
+					<h1 className="text-5xl font-minecraft font-bold mb-2">See the difference</h1>
+					<p>
+						Blockmatic lets you transform images into pixel art schematics for Minecraft. Easily adjust the width and height, and select the blocks
+						you want to use with the dialog.
+						<br />
+						<br />
+						Use the comparsion slider adjacent featuring the Windows XP background (also known as Bliss) to see the feature in action. Move it to the
+						left to see the blockmatic version and move it to the right to see the original version.
+						<br />
+						<br />
+						Try it out in the editor by opening the File menu at the top then clicking the Open Image button.
+					</p>
+				</div>
+				<ImageComparison />
+			</div>
 
 			<footer className="w-full h-16 mt-20 flex flex-col items-center">
 				<Separator className="w-2/5" />