add shadcn navigation-menu

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 {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

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>
   );
 }

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>
   );
 }