42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
/// <reference types="vite-plugin-svgr/client" />
|
|
import { Link } from "react-router";
|
|
|
|
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">
|
|
<header className="w-full flex justify-evenly p-8">
|
|
<BlockmaticLogo className="h-16 w-max" fill={"white"} />
|
|
|
|
<div className="flex items-center gap-8">
|
|
<Button variant="link" asChild>
|
|
<Link to={{ pathname: "/app" }}>Go to app</Link>
|
|
</Button>
|
|
<a href="https://github.com/trafficlunar/blockmatic" className="w-6">
|
|
<GithubIcon fill="white" />
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="absolute w-full h-full -z-20">
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/100 to-black/0 z-10"></div>
|
|
<img src="/screenshot1.png" alt="screenshot" className="w-full h-full object-cover" />
|
|
</div>
|
|
|
|
<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>
|
|
);
|
|
}
|
|
|
|
export default IndexPage;
|