feat: more home page redesigns

src/components/home/AppPreview.tsx

@@ -1,49 +0,0 @@
-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-[26rem] border border-zinc-700 ${
-				leaving ? "transition-transform duration-500 ease-in-out" : "duration-100 ease-out"
-			}`}
-			style={{ transform }}
-		/>
-	);
-}
-
-export default AppPreview;

src/components/home/ImageComparison.tsx

@@ -13,7 +13,7 @@ function ImageComparison() {
 	};
 
 	return (
-		<div onMouseMove={onMouseMove} className="relative select-none w-full h-[calc(40vw*217/270)] flex justify-center">
+		<div onMouseMove={onMouseMove} className="relative select-none w-[40vw] h-[calc(40vw*217/270)] flex justify-center">
 			<img
 				src="/bliss/bliss_original.png"
 				alt="original version of bliss"
@@ -42,24 +42,6 @@ function ImageComparison() {
 			</div>
 
 			<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 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 rounded-full"
-					style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }}
-				/>
-			</div>
 		</div>
 	);
 }

src/index.css

@@ -37,5 +37,5 @@ body {
 }
 
 .info-child {
-	@apply bg-white dark:bg-zinc-900 px-2 py-1 rounded shadow-xl w-fit border border-zinc-200 dark:border-zinc-800;
+	@apply bg-zinc-50 dark:bg-zinc-900 px-2 py-1 rounded shadow-xl w-fit border border-zinc-200 dark:border-zinc-800;
 }

src/pages/IndexPage.tsx

@@ -1,17 +1,22 @@
 /// <reference types="vite-plugin-svgr/client" />
+import { useContext } from "react";
 import { Link } from "react-router";
 
+import { ThemeContext } from "@/context/Theme";
+
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 
-import BlockmaticLogo from "@/assets/blockmatic.svg?react";
-import GithubIcon from "@/assets/github.svg?react";
-
 import ThemeIcon from "@/components/home/ThemeIcon";
-import AppPreview from "@/components/home/AppPreview";
 import ImageComparison from "@/components/home/ImageComparison";
 
+import BlockmaticLogo from "@/assets/blockmatic.svg?react";
+import GithubIcon from "@/assets/github.svg?react";
+import { ChevronRightIcon } from "lucide-react";
+
 function IndexPage() {
+	const { isDark } = useContext(ThemeContext);
+
 	return (
 		<main className="flex flex-col items-center">
 			<header className="w-full flex justify-evenly p-8 z-10">
@@ -19,7 +24,7 @@ function IndexPage() {
 
 				<div className="flex items-center gap-2">
 					<Button className="bg-white text-black hover:bg-zinc-50/90 mr-4" asChild>
-						<Link to={{ pathname: "/app" }}>Go to app</Link>
+						<Link to={{ pathname: "/app" }}>Editor</Link>
 					</Button>
 
 					<a href="https://github.com/trafficlunar/blockmatic" className="w-8">
@@ -32,37 +37,40 @@ function IndexPage() {
 			<img
 				src="/screenshot1.png"
 				alt="screenshot"
-				className="absolute w-full h-full object-cover -z-20"
+				className="absolute w-full object-cover -z-20"
 				style={{ maskImage: "linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(255,255,255,0) 100%)" }}
 			/>
 
-			<div className="absolute w-[30rem] -top-8 flex">
-				<img src="/oak_hanging_sign.png" alt="sign" className="absolute w-full -z-10" style={{ imageRendering: "pixelated" }} />
+			<section className="w-[40rem] mt-16 flex flex-col items-center gap-4">
+				<h1 className="text-6xl text-center font-inter font-bold">Create pixel art for Minecraft in minutes</h1>
+				<h5 className="text-xl font-inter">
+					Open images, draw, and export your art with{" "}
+					<span className="bg-white px-1 rounded">
+						<span className="text-blockmatic-green font-bold">block</span>
+						<span className="text-blockmatic-brown font-bold">matic</span>
+					</span>
+				</h5>
+				<Button className="w-min h-11 mt-4" asChild>
+					<Link to={{ pathname: "/app" }} className="!text-base">
+						Go to Editor
+						<ChevronRightIcon className="!h-6 !w-6" />
+					</Link>
+				</Button>
+			</section>
 
-				<Link to={{ pathname: "/app" }} className="text-6xl font-minecraft mt-[15.5rem] text-black text-center">
-					Create pixel art for Minecraft in minutes
-				</Link>
-			</div>
+			<section className="max-w-full px-20 mt-16">
+				<img
+					src={isDark ? "/blockmatic_screenshot_dark.png" : "/blockmatic_screenshot_light.png"}
+					alt="app preview"
+					className="max-w-[65rem] w-full rounded-xl border border-zinc-700"
+				/>
+			</section>
 
-			<AppPreview />
-
-			<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>
+			<section className="flex flex-col items-center mt-12">
+				<h1 className="text-5xl font-inter font-bold mb-2">See the difference</h1>
+				<p className="mb-8 text-lg">Blockmatic lets you transform images into pixel art schematics for Minecraft</p>
 				<ImageComparison />
-			</div>
+			</section>
 
 			<footer className="w-full h-16 mt-20 flex flex-col items-center">
 				<Separator className="w-2/5" />

tailwind.config.js

@@ -11,7 +11,10 @@ export default {
 				md: "calc(var(--radius) - 2px)",
 				sm: "calc(var(--radius) - 4px)",
 			},
-			colors: {},
+			colors: {
+				"blockmatic-green": "#adc178",
+				"blockmatic-brown": "#a98467",
+			},
 			fontFamily: {
 				minecraft: ["Minecraft", "sans-serif"],
 				inter: ["Inter", "sans-serif"],