feat:new section

README.md

@@ -3,6 +3,7 @@ This is a Next.js project running multiple events for a YouTuber, Buzz. It have
 - Artifact: Versionly watcher-submitted ID review.
 - Rubgram: A paid event that basically lets Buzz play endgame content for you.
 - Tierlist: Versionly tierlist rating characters for Spiral Abyss & Stygian Onslaught.
+- Guide: Character build guide that will link you to Google Sheets.
 - `WIP` Admin: Admin panel where you can manage versions, characters, tierlists, external services, etc.
 
 ## Architecture

app/(ui)/artifact/page.tsx

@@ -69,9 +69,11 @@ export default async function ArtifactFormPage({
 
   return (
     <div className="flex justify-around items-center h-svh">
+      {/*
       <div className="hidden md:block p-5">
         <div className="aspect-video w-110"></div>
       </div>
+      */}
       <Card className="w-full max-w-md">
         {editing ? (
           ""
@@ -270,6 +272,7 @@ export default async function ArtifactFormPage({
           </div>
         </CardFooter>
       </Card>
+      {/*
       <div className="hidden md:block bg-card p-5 rounded border border-border relative">
         <span className="absolute font-semibold text-7xl -translate-y-3/4 w-110 text-center text-shadow-lg/80">
           Guide
@@ -301,6 +304,7 @@ export default async function ArtifactFormPage({
           </video>
         </DialogContent>
       </Dialog>
+      */}
       {sid && !q && <ClearCookie />}
     </div>
   );

app/(ui)/navbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Feather, Home, LoaderPinwheel, Table } from "lucide-react";
+import { Feather, Home, LoaderPinwheel, StickyNote, Table } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import type { ReactNode } from "react";
@@ -24,7 +24,13 @@ export function Navbar() {
         name="รับกรรมแทนทางบ้าน"
         href="/rubgram"
       />
-      <Item icon={<Table size={16} />} name="จัดเทียร์ลิสต์" href="/tl" last />
+      <Item icon={<Table size={16} />} name="จัดเทียร์ลิสต์" href="/tl" />
+      <Item
+        icon={<StickyNote size={16} />}
+        name="ไกด์ตัวละคร"
+        href="/guide"
+        last
+      />
     </div>
   );
 }

app/(ui)/page.tsx

@@ -12,7 +12,7 @@ import { cn } from "@/lib/utils";
 export default function Home() {
   return (
     <div className="flex w-full justify-center">
-      <div className="max-w-4xl w-full mx-auto flex flex-col min-h-dvh">
+      <div className="max-w-6xl w-full mx-auto flex flex-col min-h-dvh">
         <section>
           <center>
             <Link href="https://www.youtube.com/@Genshinmaichaigamemurtur">
@@ -52,6 +52,12 @@ export default function Home() {
             href="/tl"
             logo={TierlistLogo}
           />
+          <HomeLink
+            name="Guide"
+            desc="ไกด์ตัวละคร"
+            href="/guide"
+            logo={ArtifactLogo}
+          />
         </div>
         <footer className="text-muted-foreground h-full flex flex-col justify-end pb-3 md:justify-center">
           <div className="flex justify-between flex-col text-center gap-2 sm:flex-row sm:text-left">