diff --git a/website/app/docs/layout.tsx b/website/app/docs/layout.tsx
new file mode 100644
index 0000000..4031a52
--- /dev/null
+++ b/website/app/docs/layout.tsx
@@ -0,0 +1,24 @@
+import { Sidebar } from "@/components/docs/sidebar"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface DocsLayoutProps {
+ children: React.ReactNode
+}
+
+export default function DocsLayout({ children }: DocsLayoutProps) {
+ return (
+
+ )
+}
+
diff --git a/website/app/docs/page.tsx b/website/app/docs/page.tsx
new file mode 100644
index 0000000..7a50370
--- /dev/null
+++ b/website/app/docs/page.tsx
@@ -0,0 +1,20 @@
+import { Metadata } from "next"
+import { DocsHeader } from "@/components/docs/docs-header"
+import { Features } from "@/components/docs/features"
+import { Core } from "@/components/docs/core"
+
+export const metadata: Metadata = {
+ title: "Documentation - VintLang",
+ description: "Documentation for VintLang - A modern programming language built with Go",
+}
+
+export default function DocsPage() {
+ return (
+
+
+ )
+}
+
diff --git a/website/components/docs/MarkdownRender.tsx b/website/components/docs/MarkdownRender.tsx
new file mode 100644
index 0000000..9256e56
--- /dev/null
+++ b/website/components/docs/MarkdownRender.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+
+interface MarkdownRendererProps{
+ markdown:string
+}
+
+export default function MarkdownRenderer({ markdown }:MarkdownRendererProps) {
+ return (
+
+ {markdown}
+
+ );
+}
diff --git a/website/components/docs/core.tsx b/website/components/docs/core.tsx
new file mode 100644
index 0000000..0c6df8b
--- /dev/null
+++ b/website/components/docs/core.tsx
@@ -0,0 +1,16 @@
+export function Core() {
+ return (
+
+
Core
+
+ VintLang has a very minimal API, exposing only a few exports from the main{" "}
+
+ vintlang
+ {" "}
+ bundle. They are split into four categories below.
+
+
+
Documentation
+
+ Welcome to the VintLang v2 documentation! VintLang's atomic approach to programming
+ scales from a simple useState replacement
+ to an enterprise application with complex requirements.
+
+
+
Features
+
+ {features.map((feature) => (
+
+ {feature}
+
+ ))}
+
+
+ VintLang
+
+
+
+
+ )
+}
+
diff --git a/website/components/docs/mobile-nav.tsx b/website/components/docs/mobile-nav.tsx
new file mode 100644
index 0000000..fd7f6f9
--- /dev/null
+++ b/website/components/docs/mobile-nav.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Menu } from 'lucide-react'
+import { Button } from "@/components/ui/button"
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Sidebar } from "@/components/docs/sidebar"
+
+export function MobileNav() {
+ const [open, setOpen] = useState(false)
+
+ return (
+
+
+
+ Toggle Menu
+
+
+
+
+ Navigation
+
+
+
+
+
+ )
+}
+
diff --git a/website/components/docs/mode-toggle.tsx b/website/components/docs/mode-toggle.tsx
new file mode 100644
index 0000000..a129139
--- /dev/null
+++ b/website/components/docs/mode-toggle.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button"
+
+export function ModeToggle() {
+ const { theme, setTheme } = useTheme()
+
+ return (
+ setTheme(theme === "light" ? "dark" : "light")}
+ >
+ Toggle theme
+
+ )
+}
+
diff --git a/website/components/docs/search.tsx b/website/components/docs/search.tsx
new file mode 100644
index 0000000..a440335
--- /dev/null
+++ b/website/components/docs/search.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import { SearchIcon } from 'lucide-react'
+import { Input } from "@/components/ui/input"
+
+export function Search() {
+ return (
+
+
+ )
+}
+
diff --git a/website/components/docs/sidebar.tsx b/website/components/docs/sidebar.tsx
new file mode 100644
index 0000000..dbcabb2
--- /dev/null
+++ b/website/components/docs/sidebar.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Search } from "@/components/docs/search"
+import { FileText, BookOpen, HelpCircle, Github } from 'lucide-react'
+
+const navigation = [
+ {
+ name: "Documentation",
+ href: "/docs",
+ icon: FileText,
+ },
+ {
+ name: "Tutorial",
+ href: "/docs/tutorial",
+ icon: BookOpen,
+ },
+ {
+ name: "Support",
+ href: "/docs/support",
+ icon: HelpCircle,
+ },
+ {
+ name: "Repository",
+ href: "https://github.com/yourusername/vintlang",
+ icon: Github,
+ },
+]
+
+export function Sidebar() {
+ const pathname = usePathname()
+
+ return (
+
+
+
+
Jōtai
+
状態
+
+
+ Primitive and flexible state management for React
+
+
+
+
+ {navigation.map((item) => {
+ const isActive = pathname === item.href
+ return (
+
+
+ )
+ })}
+
+
+
library by Daishi Kato
+
art by Jessie Waters
+
+ site by{" "}
+
+ c
+ o
+ d
+ y
+ code
+
+
+
+
+
+
+
+
+
+ VintLang
+
+
+
+
+
+
+ )
+}
+
diff --git a/website/components/ui/input.tsx b/website/components/ui/input.tsx
new file mode 100644
index 0000000..69b64fb
--- /dev/null
+++ b/website/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef>(
+ ({ className, type, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = "vertical", ...props }, ref) => (
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/website/components/ui/sheet.tsx b/website/components/ui/sheet.tsx
new file mode 100644
index 0000000..272cb72
--- /dev/null
+++ b/website/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {}
+
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+
+
+
+ Close
+
+ {children}
+
+
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+