feat: add homepage

package.json

@@ -21,6 +21,7 @@
     "pixi.js": "7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router": "^7.0.2",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7"
   },
@@ -39,6 +40,7 @@
     "tailwindcss": "^3.4.16",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.15.0",
-    "vite": "^6.0.1"
+    "vite": "^6.0.1",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }

src/App.tsx

@@ -1,25 +0,0 @@
-import { SettingsProvider } from "./context/SettingsContext";
-import { TexturesProvider } from "./context/TexturesContext";
-import { ToolProvider } from "./context/ToolContext";
-
-import Menubar from "./components/menubar";
-import Toolbar from "./components/Toolbar";
-import Canvas from "./components/Canvas";
-
-function App() {
-	return (
-		<SettingsProvider>
-			<TexturesProvider>
-				<ToolProvider>
-					<main className="h-screen grid grid-rows-[2.5rem_1fr] grid-cols-[2.5rem_1fr]">
-						<Menubar />
-						<Toolbar />
-						<Canvas />
-					</main>
-				</ToolProvider>
-			</TexturesProvider>
-		</SettingsProvider>
-	);
-}
-
-export default App;

src/assets/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
+  {
+    variants: {
+      variant: {
+        default: "bg-zinc-900 text-zinc-50 hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90",
+        destructive:
+          "bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+        secondary:
+          "bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
+        ghost: "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+        link: "text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/main.tsx

@@ -1,13 +1,23 @@
-import { StrictMode } from 'react'
+import { StrictMode } from "react";
-import { createRoot } from 'react-dom/client'
+import { createRoot } from "react-dom/client";
-import './index.css'
+import { BrowserRouter, Route, Routes } from "react-router";
-import App from './App.tsx'
-import { ThemeProvider } from '@/context/ThemeContext.tsx';
 
-createRoot(document.getElementById('root')!).render(
+import { ThemeProvider } from "@/context/ThemeContext.tsx";
+
+import IndexPage from "./pages/IndexPage.tsx";
+import AppPage from "./pages/AppPage.tsx";
+
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
 	<StrictMode>
 		<ThemeProvider>
-      <App />
+			<BrowserRouter>
+				<Routes>
+					<Route path="/" element={<IndexPage />} />
+					<Route path="/app" element={<AppPage />} />
+				</Routes>
+			</BrowserRouter>
 		</ThemeProvider>
-  </StrictMode>,
+	</StrictMode>
-)
+);

src/pages/AppPage.tsx

@@ -0,0 +1,25 @@
+import { SettingsProvider } from "../context/SettingsContext";
+import { TexturesProvider } from "../context/TexturesContext";
+import { ToolProvider } from "../context/ToolContext";
+
+import Menubar from "../components/menubar";
+import Toolbar from "../components/Toolbar";
+import Canvas from "../components/Canvas";
+
+function AppPage() {
+	return (
+		<SettingsProvider>
+			<TexturesProvider>
+				<ToolProvider>
+					<main className="h-screen grid grid-rows-[2.5rem_1fr] grid-cols-[2.5rem_1fr]">
+						<Menubar />
+						<Toolbar />
+						<Canvas />
+					</main>
+				</ToolProvider>
+			</TexturesProvider>
+		</SettingsProvider>
+	);
+}
+
+export default AppPage;

src/pages/IndexPage.tsx

@@ -0,0 +1,28 @@
+/// <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";
+
+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" />
+
+				<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>
+		</main>
+	);
+}
+
+export default IndexPage;