feat: add sign, footer to index page and refactor

src/components/home/AppPreview.tsx

@@ -38,7 +38,7 @@ function AppPreview() {
 			onMouseEnter={onMouseEnter}
 			onMouseLeave={onMouseLeave}
 			onMouseMove={onMouseMove}
-			className={`w-[90%] rounded-xl mt-32 border border-zinc-700 ${
+			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 }}

src/components/home/ImageComparison.tsx

@@ -15,7 +15,7 @@ function ImageComparison() {
 	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"
+				src="/bliss/bliss_original.png"
 				alt="original version of bliss"
 				draggable={false}
 				className="absolute w-full"
@@ -23,7 +23,7 @@ function ImageComparison() {
 			/>
 
 			<img
-				src="/bliss.png"
+				src="/bliss/bliss.png"
 				alt="blockmatic version of bliss"
 				draggable={false}
 				className="absolute w-full"
@@ -46,7 +46,7 @@ function ImageComparison() {
 			<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"
+						src="/bliss/bliss_original_zoomed.png"
 						alt="zoomed in version of blockmatic version of bliss"
 						draggable={false}
 						className="absolute w-full"
@@ -54,7 +54,7 @@ function ImageComparison() {
 					/>
 
 					<img
-						src="/bliss_zoomed.png"
+						src="/bliss/bliss_zoomed.png"
 						alt="zoomed in version of blockmatic version of bliss"
 						draggable={false}
 						className="absolute w-full"

src/index.css

@@ -1,6 +1,24 @@
 @import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 
+@font-face {
+	font-family: "Minecraft";
+	src: url("fonts/minecraft-font.woff2") format("woff2"), url("fonts/minecraft-font.woff") format("woff"),
+		url("fonts/minecraft-font.woff2") format("otf");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "MinecraftBold";
+	src: url("fonts/minecraft-font-bold.woff2") format("woff2"), url("fonts/minecraft-font-bold.woff") format("woff"),
+		url("fonts/minecraft-font-bold.otf") format("otf");
+	font-weight: bold;
+	font-style: normal;
+	font-display: swap;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/pages/IndexPage.tsx

@@ -2,6 +2,7 @@
 import { Link } from "react-router";
 
 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";
@@ -32,18 +33,36 @@ function IndexPage() {
 				src="/screenshot1.png"
 				alt="screenshot"
 				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%)" }}
+				style={{ maskImage: "linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(255,255,255,0) 100%)" }}
 			/>
 
-			<h1 className="text-6xl font-[Inter] font-extrabold mt-32 text-white text-center">Convert your images to schematics</h1>
+			<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" }} />
+
+				<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>
 
 			<AppPreview />
 
-			<h1 className="text-5xl font-[Inter] font-bold mt-32">See the difference</h1>
+			<h1 className="text-5xl font-pixel font-bold mt-32">See the difference</h1>
 			<ImageComparison />
 
-			<footer>
-				<Link to={{ pathname: "/privacy-policy" }}>Privacy Policy</Link>
+			<footer className="w-full h-16 mt-20 flex flex-col items-center">
+				<Separator className="w-2/5" />
+
+				<div className="mt-8 flex justify-center items-center gap-16 text-zinc-500">
+					<Link to={{ pathname: "/privacy-policy" }}>Privacy</Link>
+
+					<a href="mailto:hello@trafficlunar.net">hello@trafficlunar.net</a>
+				</div>
+				<span className="text-zinc-400 mt-2 pb-8">
+					made by{" "}
+					<span className="text-orange-400 opacity-75">
+						<a href="https://trafficlunar.net">trafficlunar</a>
+					</span>
+				</span>
 			</footer>
 		</main>
 	);

tailwind.config.js

@@ -1,4 +1,4 @@
-import tailwindcssAnimate from 'tailwindcss-animate';
+import tailwindcssAnimate from "tailwindcss-animate";
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -12,6 +12,9 @@ export default {
 				sm: "calc(var(--radius) - 4px)",
 			},
 			colors: {},
+			fontFamily: {
+				minecraft: ["Minecraft", "sans-serif"],
+			},
 		},
 	},
 	plugins: [tailwindcssAnimate],