177 lines
7 KiB
TypeScript
177 lines
7 KiB
TypeScript
/// <reference types="vite-plugin-svgr/client" />
|
|
import { useContext } from "react";
|
|
import { Link } from "react-router";
|
|
import { ChevronRightIcon, LinkIcon } from "lucide-react";
|
|
|
|
import { ThemeContext } from "@/context/Theme";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
|
|
|
import ThemeIcon from "@/components/ThemeIcon";
|
|
import ImageComparison from "@/components/home/ImageComparison";
|
|
|
|
import BlockmaticIcon from "@/assets/blockmatic-icon.svg?react";
|
|
import BlockmaticText from "@/assets/blockmatic-text.svg?react";
|
|
import GithubIcon from "@/assets/github.svg?react";
|
|
|
|
function IndexPage() {
|
|
const { isDark } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<main className="flex flex-col items-center font-inter">
|
|
<header className="max-w-2xl w-full flex justify-between my-8 px-4 z-10 gap-8">
|
|
<div className="flex gap-2 items-center max-w-48">
|
|
<BlockmaticIcon className="w-14" fill={"white"} />
|
|
<BlockmaticText className="w-full" fill={"white"} />
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<Button className="bg-white text-black hover:bg-zinc-50/90 mr-4" asChild>
|
|
<Link to={{ pathname: "/app" }}>Editor</Link>
|
|
</Button>
|
|
|
|
<a href="https://github.com/trafficlunar/blockmatic" className="w-7">
|
|
<GithubIcon fill="white" />
|
|
</a>
|
|
<ThemeIcon />
|
|
</div>
|
|
</header>
|
|
|
|
<img
|
|
src="/background.png"
|
|
alt="background"
|
|
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%)" }}
|
|
/>
|
|
|
|
<section className="max-w-xl mt-16 mx-8 flex flex-col items-center gap-4">
|
|
<h1 className="text-6xl text-center font-bold">Create pixel art for Minecraft in minutes</h1>
|
|
<h5 className="text-xl text-center">
|
|
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>
|
|
|
|
<section className="max-w-full mx-8 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>
|
|
|
|
<section className="flex flex-col items-center mt-32 text-center mx-8">
|
|
<h1 className="text-5xl font-bold mb-2">Pixel art made easy</h1>
|
|
<p className="mb-8 text-lg">Blockmatic makes it easier to make changes and build by using schematics and the web editor.</p>
|
|
<div className="max-w-[56rem] grid grid-cols-3 max-md:grid-cols-2 gap-4 *:flex *:flex-col *:items-center *:gap-1 *:text-center *:p-4 *:border *:border-zinc-300 *:dark:border-zinc-800 *:rounded-lg *:bg-zinc-100 *:dark:bg-zinc-900 *:text-black *:dark:text-white">
|
|
<div>
|
|
<img
|
|
src="/shinji.png"
|
|
alt="shinji"
|
|
className="w-full rounded mb-4 border bg-zinc-300 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-800"
|
|
/>
|
|
<h2 className="font-bold text-xl">Open your image</h2>
|
|
<p>Open your image, or start drawing immediately with the editor.</p>
|
|
</div>
|
|
<div>
|
|
<img
|
|
src={isDark ? "/drawing_erasing.gif" : "/drawing_erasing_light.gif"}
|
|
alt="tool example gif"
|
|
className="w-full rounded mb-4 border border-zinc-300 dark:border-zinc-800"
|
|
/>
|
|
<h2 className="font-bold text-xl">Make changes</h2>
|
|
<p>Change blocks around with the replace, selection, shape, pencil, and eraser tools</p>
|
|
</div>
|
|
<div>
|
|
<img src="/shinji_minecraft.png" alt="shinji in minecraft" className="w-full rounded mb-4 border border-zinc-300 dark:border-zinc-800" />
|
|
<h2 className="font-bold text-xl">Export your art</h2>
|
|
<p>Once you're done, you can export your canvas as a .png, .litematic, or .schem.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mt-32 px-16 max-w-2xl">
|
|
<h1 className="text-5xl font-bold mb-2 text-center">Gallery</h1>
|
|
<p className="mb-8 text-lg text-center">See examples of opening and placing art within Minecraft!</p>
|
|
|
|
<Carousel className="w-full">
|
|
<CarouselContent>
|
|
<CarouselItem>
|
|
<img src="/miku.png" className="rounded-xl border border-zinc-300 dark:border-zinc-800"></img>
|
|
</CarouselItem>
|
|
<CarouselItem>
|
|
<img src="/nyan_cat.png" className="rounded-xl border border-zinc-300 dark:border-zinc-800"></img>
|
|
</CarouselItem>
|
|
<CarouselItem>
|
|
<img src="/pikachu.png" className="rounded-xl border border-zinc-300 dark:border-zinc-800"></img>
|
|
</CarouselItem>
|
|
<CarouselItem>
|
|
<img src="/portal.png" className="rounded-xl border border-zinc-300 dark:border-zinc-800"></img>
|
|
</CarouselItem>
|
|
<CarouselItem>
|
|
<img src="/windows.png" className="rounded-xl border border-zinc-300 dark:border-zinc-800"></img>
|
|
</CarouselItem>
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
</section>
|
|
|
|
<section className="flex flex-col items-center mt-32 mx-8 max-w-xl">
|
|
<h1 className="text-5xl font-bold mb-2 text-center">See the difference</h1>
|
|
<p className="mb-8 text-lg text-center">Blockmatic lets you pick what blocks you want for the image and change versions.</p>
|
|
<ImageComparison />
|
|
</section>
|
|
|
|
<section className="flex flex-col items-center mt-32 mx-8 max-w-xl">
|
|
<h1 className="text-5xl font-bold mb-2 text-center">Open source</h1>
|
|
<p className="mb-8 text-lg text-center">Blockmatic is free and open source. Host it yourself, modify it, or contribute to its development.</p>
|
|
|
|
<Button className="w-min h-11" variant="outline" asChild>
|
|
<a href="https://github.com/trafficlunar/blockmatic" className="!text-base">
|
|
<LinkIcon className="!h-5 !w-5" />
|
|
Source code
|
|
</a>
|
|
</Button>
|
|
</section>
|
|
|
|
<Separator className="max-w-xl mt-20 mb-8" />
|
|
|
|
<Button className="w-min h-11" asChild>
|
|
<Link to={{ pathname: "/app" }} className="!text-base">
|
|
Go to Editor
|
|
<ChevronRightIcon className="!h-6 !w-6" />
|
|
</Link>
|
|
</Button>
|
|
|
|
<footer className="w-full h-16 mt-8 flex flex-col items-center">
|
|
<Separator className="max-w-xl" />
|
|
|
|
<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>
|
|
);
|
|
}
|
|
|
|
export default IndexPage;
|