add shadcn navigation-menu

2026-08-30 00:32:47 +09:00 · 2026-08-30 00:32:47 +09:00 · e9b4c98bd7
commit e9b4c98bd7
parent b6fe93998a
13 changed files with 2403 additions and 94 deletions
--- a/.continue/mcpServers/chrome-devtools-mcp.yaml
+++ b/.continue/mcpServers/chrome-devtools-mcp.yaml
@ -0,0 +1,12 @@
+name: Chrome DevTools MCP
+version: 0.0.1
+schema: v1
+mcpServers:
+  - name: "Chrome DevTools (MCP) "
+    command: npx
+    args:
+      - -y
+      - chrome-devtools-mcp@latest
+      - --no-usage-statistics
+    env: 
+      CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS: "1"
--- a/.continue/mcpServers/playwright-mcp.yaml
+++ b/.continue/mcpServers/playwright-mcp.yaml
@ -0,0 +1,8 @@
+name: Playwright mcpServer
+version: 0.0.1
+schema: v1
+mcpServers:
+  - name: Browser search
+    command: npx
+    args:
+      - "@playwright/mcp@latest"
--- a/app/globals.css
+++ b/app/globals.css
@ -1,26 +1,130 @@
@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-sans);
  --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
  }
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,20 +1,23 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';

 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
 });

 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    template: '%s | bitdori',
+    default: 'bitdori',
+  },
+  applicationName: 'bitdori',
 };

 export default function RootLayout({
@ -27,7 +30,7 @@ export default function RootLayout({
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="flex min-h-full flex-col">{children}</body>
    </html>
  );
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,65 +1,142 @@
-import Image from "next/image";
+import { NavigationMenuDemo } from '@/components/Header';
+import { Metadata } from 'next';
+import Image from 'next/image';
+
+export const metadata: Metadata = {
+  title: 'bitdori',
+};

 export default function Home() {
  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
+    <div className="flex flex-1 flex-col items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <NavigationMenuDemo />
+
+      <main className="flex w-full max-w-3xl flex-1 flex-col items-center justify-between bg-white px-16 py-32 sm:items-start dark:bg-black">
+        [Bro Code](https://www.youtube.com/channel/UC4SVo0Ue36XCfOyb5Lh1viQ) - 프로그래밍 언어
+        문법부터 AI & ML 입문까지 <br />
+        [anthonywritescode](https://www.youtube.com/channel/UC46xhU1EH7aywEgvA9syS3w) - 파이썬
+        설명 <br />
+        [Tech With Tim](https://www.youtube.com/channel/UC4JX40jDee_tINbkjycV4Sg) <br />
+        [Corey Schafer](https://www.youtube.com/channel/UCCezIgC97PvUuR4_gbFUs5g) <br />
+        <p>
+          [cs50](https://cs50.harvard.edu/x/weeks/6/) <br />-
+          http://www.youtube.com/watch?v=gmuTjeQUbTM&t=47955
+        </p>
+        [Kevin Wood | Robotics & AI](https://www.youtube.com/channel/UC0jeEKE9IzfYKDuIbQLJIog) -
+        로보틱스 및 AI 학습 로드맵 <br />
+        <p>
+          [Road Balance Robotics](https://www.youtube.com/channel/UCVKuw1vInuLc2MaTRj3TZMA) -
+          모두의 로보틱스 <br />- https://kimsooyoung.github.io/ 제공
+        </p>
+        [Modern Robotics](https://hades.mech.northwestern.edu/index.php/Modern_Robotics) -
+        [Northwestern
+        Robotics](https://youtube.com/playlist?list=PLggLP4f-rq02vX0OQQ5vrCxbJrzamYDfx) <br />
+        https://www.youngju.dev/tags/robotics - 학습 가이드 <br />
+        [3Blue1Brown 한국어](https://www.youtube.com/channel/UCJK07Uk2KY9r78ksPoXg-3g) - 개념,
+        이론 <br />
+        [The Zephyr Project](https://www.youtube.com/channel/UCohVfwDfzCZ_gh3DvIZ4fJA) <br />
+        [DigiKey](https://www.youtube.com/channel/UCclJCqMDAkyVGsm5oFOTXIQ) - 임베디드, rip,
+        arduino, RL/MuJoCo, ROS/Zephyr, RTOS, FPGA <br />
+        <p>
+          [sentdex](https://www.youtube.com/channel/UCfzlCWGWYyIQ0aLC5w48gBQ) <br />-
+          https://pythonprogramming.net/robotics-tutorials/ - rpi, 쿼드콥터
+        </p>
+        [Machine Learning TV](https://www.youtube.com/channel/UChIaUcs3tho6XhyU6K6KMrw) <br />
+        [Rob Mulla](https://youtube.com/playlist?list=PL7RwtdVQXQ8o6CYe1Teo7FzkrQQoT0c9i) <br />
+        [Paul McWhorter](https://www.youtube.com/channel/UCfYfK0tzHZTpNFrc_NDKfTA) - rpi,
+        arduino <br />
+        <p>
+          [Dr. Shane Ross](http://www.youtube.com/user/RossDynamicsLab) - 칼만 필터, 라그랑주 및
+          3차원 강체 역학, 해밀턴 방정식 및 웨상 공간, 궤적 설계 등 <br />-
+          https://ross.aoe.vt.edu/talks/
+        </p>
+        [3차원 회전
+        공식](https://en.wikipedia.org/wiki/Rotation_formulations_in_three_dimensions) <br />
+        [비유클리드 기하학](https://ko.wikipedia.org/wiki/비유클리드_기하학) <br />
+        https://anomalib.readthedocs.io/en/latest/index.html <br />
+        <h3> ROS 관련 </h3>
+        <p>
+          [무작정 따라하는 ROS2 -
+          입문과정](https://youtube.com/playlist?list=PL0xYz_4oqpvhj4JaPSTeGI2k5GQEE36oi) <br />
+          - [PinkLAB](https://pinklab.art/) 핑크랩 제공
+        </p>
+        [Articulated Robotics](https://articulatedrobotics.xyz/) <br />
+        <h3> SLAM 관련 </h3>
+        [Spatial AI KR](https://www.youtube.com/channel/UCXvT7auo7xUd7v0B2pmvwIA) <br />
+        https://www.cv-learn.com/ <br />
+        <p>https://riibotics.github.io/ - 리보틱스 제공</p>
+        <p>
+          [Complex Urban Dataset](https://sites.google.com/view/complex-urban-dataset) <br />-
+          https://jinyongjeong.github.io/ 제공
+        </p>
+        [How To Process LiDAR Data (5 Step Process)](https://youtu.be/bdl0oAwiHjw) <br />
+        <p>
+          [Michigan Robotics: Dynamic Legged Locomotion
+          Lab](http://www.youtube.com/user/DynamicLegLocomotion) - 선형대수학 <br />-
+          https://grizzle.robotics.umich.edu/education/rob101 -
+          https://www.youtube.com/playlist?list=PLdPQZLMHRjDJ5d_dE4FeOviv0gRe4UYsB -
+          https://www.youtube.com/channel/UC-WH2n-SkB166pUq5o5ULUg
+        </p>
+        <h3> 도립진자 </h3>
+        [World&apos;s first reinforcement learning-based transition control of a triple inverted
+        pendulum](https://youtu.be/vVx3ffGo2mk) <br />
+        <h3> Input Shaping </h3>
+        https://youtu.be/5fOhi-LL9dU <br />
+        https://youtu.be/1hiGDwqnorc <br />
+        https://youtu.be/sf1fAn4ezYk <br />
+        <h3> 업체 및 출시품 </h3>
+        <p>
+          https://en.wikipedia.org/wiki/Optimus_(robot) <br />- https://youtu.be/DrNcXgoFv20
+        </p>
+        <p>
+          https://en.wikipedia.org/wiki/Figure_AI <br />-
+          https://www.youtube.com/channel/UCYlq-KmwPjc1DtsGmthFqSQ
+        </p>
+        https://en.wikipedia.org/wiki/Unitree_Robotics <br />
+        [Generalist](https://www.youtube.com/channel/UCwV9z8IGmbUQUb5D8KSv3mQ) <br />
+        [Boston Dynamics](https://www.youtube.com/channel/UC7vVhkEfw4nOGp8TyDk7RcQ) <br />
+        [HD현대로보틱스](https://ko.wikipedia.org/wiki/HD현대로보틱스) <br />
+        [레인보우로보틱스](https://ko.wikipedia.org/wiki/레인보우로보틱스) <br />
+        [로보티즈](https://ko.wikipedia.org/wiki/로보티즈) <br />
+        [한화로보틱스](https://ko.wikipedia.org/wiki/한화로보틱스) <br />
+        [씨메스로보틱스(주)](https://www.cmesrobotics.ai/) <br />
+        [(주)로브로스](https://www.youtube.com/channel/UCtEl9YsvT_FFYjOshfNob4w) <br />
+        [Foundation Robotics](https://www.youtube.com/channel/UCp-QkkuLX29f2ppcVx-_cBg) <br />
+        [(주)위로보틱스](https://rih.wirobotics.com/allex) <br />
+        [ファナック(FANUC)](https://en.wikipedia.org/wiki/FANUC) <br />
+        <h3> 그리퍼, 로봇 핸드 </h3>
+        [Gesture Platforms](https://www.youtube.com/channel/UCZchHR_EA-1ALq4CE5qZlaQ) <br />
+        <h3> VLA </h3>
+        <p>
+          [OpenVLA](https://openvla.github.io/) <br />- https://huggingface.co/openvla
+          <Image
+            className="dark:invert"
+            src="/OpenVLA_model_architecture.jpg"
+            alt="OpenVLA model architecture"
+            width={1520}
+            height={463}
+            priority
+          />
+        </p>
+        [Physical Intelligence (π)](https://www.pi.website/) <br />
+        [GR00T](https://github.com/NVIDIA/Isaac-GR00T) <br />
+        <h3> 로봇 학습 툴체인 </h3>
+        <p>
+          [LeRobot](https://github.com/huggingface/lerobot) - https://pypi.org/project/lerobot/
+        </p>
+        <h3> 월드 파운데이션 모델 </h3>
+        [Genie 3: Creating dynamic worlds that you can navigate in
+        real-time](https://youtu.be/PDKhUknuQDg) <br />
+        [NVIDIA Cosmos: A World Foundation Model Platform for Physical
+        AI](https://youtu.be/9Uch931cDx8) <br />
+        [Olmo 3 | A family of leading fully open LMs and complete model
+        flow](https://youtu.be/7A2_YPtN1Eo) <br />
+        <h3>현황</h3>
+        [100m 달리기 8.86초에 주파한 中 휴머노이드 &lsquo;톈궁
+        울트라&rsquo;](https://m2.dongascience.com/ko/news/79606)
      </main>
+
+      <footer>Copyright &copy; bitdori.org</footer>
    </div>
  );
 }
--- a/components.json
+++ b/components.json
@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}
--- a/components/Header.tsx
+++ b/components/Header.tsx
@ -0,0 +1,25 @@
+'use client';
+
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu';
+import Link from 'next/link';
+
+export function NavigationMenuDemo() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink
+            className={navigationMenuTriggerStyle()}
+            render={<Link href="https://docs.bitdori.org/">Docs</Link>}
+          />
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+}
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@ -0,0 +1,168 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+function NavigationMenu({
+  align = "start",
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Root.Props &
+  Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <NavigationMenuPositioner align={align} />
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Content.Props) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuPositioner({
+  className,
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+          className
+        )}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+          <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+        </NavigationMenuPrimitive.Popup>
+      </NavigationMenuPrimitive.Positioner>
+    </NavigationMenuPrimitive.Portal>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Link.Props) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
+  return (
+    <NavigationMenuPrimitive.Icon
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Icon>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuPositioner,
+}
--- a/lib/utils.ts
+++ b/lib/utils.ts
@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/package.json
+++ b/package.json
@ -3,16 +3,23 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "check": "pnpm i && pnpx next telemetry disable && pnpm i baseline-browser-mapping@latest -D && pnpx browserslist && git remote -v && node --version && pnpx npm-check-updates",
+    "check": "pnpm i && pnpm exec next telemetry disable && pnpm i baseline-browser-mapping@latest -D && pnpm dlx browserslist && git remote -v && node --version && pnpm dlx npm-check-updates",
    "dev": "pnpm run check && next dev",
    "build": "next build",
    "start": "next start --port 7007",
    "lint": "eslint"
  },
  "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.37.0",
    "next": "16.3.3",
    "react": "19.2.8",
-    "react-dom": "19.2.8"
+    "react-dom": "19.2.8",
+    "shadcn": "^4.19.0",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
@ -20,7 +27,7 @@
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
-    "baseline-browser-mapping": "^2.11.19",
+    "baseline-browser-mapping": "^2.11.20",
    "eslint": "^9",
    "eslint-config-next": "16.3.3",
    "prettier-plugin-css-order": "^2.2.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -17,3 +17,4 @@ minimumReleaseAgeExclude:
  - '@next/swc-win32-x64-msvc@16.3.3'
  - eslint-config-next@16.3.3
  - next@16.3.3
+  - lucide-react@1.37.0
--- a/public/OpenVLA_model_architecture.jpg
+++ b/public/OpenVLA_model_architecture.jpg