Update landing

apps/landing/package.json

@@ -10,6 +10,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "body-scroll-lock": "3.1.5",
     "@devup-ui/react": "workspace:*",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
@@ -22,6 +23,7 @@
     "sanitize.css": "^13.0.0"
   },
   "devDependencies": {
+    "@types/body-scroll-lock": "^3.1.2",
     "@devup-ui/next-plugin": "workspace:*",
     "@types/node": "^22",
     "@types/react": "^19",

apps/landing/src/app/(detail)/docs/LeftMenu.tsx

@@ -5,7 +5,7 @@ import { MenuItem } from './MenuItem'
 
 export function LeftMenu() {
   return (
-    <VStack gap="6px" h="1008px" p="20px 16px" w="220px">
+    <VStack gap="6px">
       <MenuItem to={URL_PREFIX + '/docs/overview'}>Overview</MenuItem>
       <MenuItem to={URL_PREFIX + '/docs/installation'}>Installation</MenuItem>
       <MenuItem to={URL_PREFIX + '/docs/features'}>Features</MenuItem>

apps/landing/src/app/(detail)/docs/MenuItem.tsx

@@ -24,6 +24,13 @@ export function MenuItem(props: MenuItemProps) {
   if (subMenu) return <OpenMenuItem {...props} subMenu={subMenu} />
   const inner = (
     <Flex
+      _hover={
+        selected
+          ? undefined
+          : {
+              bg: '$menuHover',
+            }
+      }
       alignItems="center"
       bg={selected ? '$menuActive' : undefined}
       borderRadius="6px"

apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx

@@ -20,6 +20,9 @@ export function OpenMenuItem({
   return (
     <>
       <Flex
+        _hover={{
+          bg: '$menuHover',
+        }}
         alignItems="center"
         bg={selected ? '$menuActive' : undefined}
         borderRadius="6px"
@@ -54,6 +57,9 @@ export function OpenMenuItem({
               const selected = to ? path.startsWith(to) : false
               const inner = (
                 <Flex
+                  _hover={{
+                    bg: '$menuHover',
+                  }}
                   alignItems="center"
                   bg={selected ? '$menuActive' : undefined}
                   borderRadius="6px"

apps/landing/src/app/(detail)/docs/api/box/page.mdx

@@ -1 +1,26 @@
 # Box
+
+The `Box` component is a layout primitive that can be used to create any kind of layout.
+
+It is just a `div` with some styles.
+
+
+## How to use
+
+```jsx
+// Before
+<Box bg={"red"}/>
+
+// After
+<div className="d0"/>
+```
+
+You can use the as prop to change the element type.
+
+```jsx
+// Before
+<Box as="span"/>
+
+// After
+<span class="d0"/>
+```

apps/landing/src/app/(detail)/docs/api/button/page.mdx

@@ -1 +1,12 @@
 # Button
+
+The Button component is a simple button component that can be used to trigger actions.
+
+
+```jsx
+// Before
+<Button bg={"red"}/>
+
+// After
+<button className="d0"/>
+```

apps/landing/src/app/(detail)/docs/api/center/page.mdx

@@ -1 +1,15 @@
 # Center
+
+The `Center` component is a layout component that centers its children both vertically and horizontally.
+
+It has a `display: flex` style with `justify-content: center` and `align-items: center`.
+
+## How to use
+
+```jsx
+// Before
+<Center/>
+
+// After, It has 3 classes on default
+<div className="d0 d1 d2"/>
+```

apps/landing/src/app/(detail)/docs/api/css/page.mdx

@@ -1 +1,36 @@
 # css
+
+css function is a function that returns a string.
+
+## Usage
+
+### CSS Literal
+You can use the css function to create a css string.
+```jsx
+<any css={css`
+    color: red;
+`}/>
+
+<any className={"d0"}/>
+```
+
+### CSS Object
+You can use the css function to create a css object.
+```jsx
+<any className={css({
+    color: "red"
+})}/>
+
+<any className={"d0"}/>
+```
+
+Also, css function can be used in the style prop. (responsive, pseudo-class, etc.)
+```jsx
+// It works like this
+<any style={css({
+    color: ["red", "blue"],
+    _hover: {
+        color: "green"
+    }
+})}/>
+```

apps/landing/src/app/(detail)/docs/api/flex/page.mdx

@@ -1 +1,16 @@
 # Flex
+
+The `Flex` component is a layout component that uses flexbox to layout its children.
+
+It has a `display: flex` style by default.
+
+## How to use
+
+```jsx
+// Before
+<Flex/>
+
+// After, It has a class on default
+<div className="d0"/>
+```
+

apps/landing/src/app/(detail)/docs/api/grid/page.mdx

@@ -1 +1,15 @@
 # Grid
+
+The grid component is a layout component that arranges its children in a grid layout. It supports both fixed and fluid layouts.
+
+It has a `display: grid` style by default.
+
+## How to use
+
+```jsx
+// Before
+<Grid/>
+
+// After, It has a class on default
+<div className="d0"/>
+```

apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx

@@ -1 +1,11 @@
 # Group Selector
+
+AThe `group` selector is used to apply styles to a group of elements. It is used to apply styles to a group of elements that are siblings of each other.
+
+## Usage
+
+```jsx
+<div role="group">
+    <Box _groupHover={{bg: "red"}}/>
+</div>
+```

apps/landing/src/app/(detail)/docs/api/image/page.mdx

@@ -1 +1,16 @@
 # Image
+
+The `Image` component is a layout primitive that can be used to create any kind of layout.
+
+It is just a `img` with some styles.
+
+## How to use
+
+```jsx
+// Before
+<Image src={"https://via.placeholder.com/150"}/>
+
+// After
+<img src={"https://via.placeholder.com/150"}/>
+```
+

apps/landing/src/app/(detail)/docs/api/input/page.mdx

@@ -1 +1,16 @@
 # Input
+
+The input component is a layout primitive that can be used to create any kind of layout.
+
+It is just a `input` with some styles.
+
+## How to use
+
+```jsx
+// Before
+<Input/>
+
+// After
+<input/>
+```
+

apps/landing/src/app/(detail)/docs/api/selector/page.mdx

@@ -1 +1,71 @@
 # Selector
+
+<table>
+    <thead>
+    <tr>
+        <th>Selector</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>_active?</code></td>
+    </tr>
+    <tr>
+        <td><code>_checked?</code></td>
+    </tr>
+    <tr>
+        <td><code>_default?</code></td>
+    </tr>
+    <tr>
+        <td><code>_disabled?</code></td>
+    </tr>
+    <tr>
+        <td><code>_empty?</code></td>
+    </tr>
+    <tr>
+        <td><code>_enabled?</code></td>
+    </tr>
+    <tr>
+        <td><code>_first?</code></td>
+    </tr>
+    <tr>
+        <td><code>_firstChild?</code></td>
+    </tr>
+    <tr>
+        <td><code>_firstOfType?</code></td>
+    </tr>
+    <tr>
+        <td><code>_focus?</code></td>
+    </tr>
+    <tr>
+        <td><code>_focusVisible?</code></td>
+    </tr>
+    <tr>
+        <td><code>_focusWithin?</code></td>
+    </tr>
+    <tr>
+        <td><code>_hover?</code></td>
+    </tr>
+    <tr>
+        <td><code>_invalid?</code></td>
+    </tr>
+    <tr>
+        <td><code>_lastChild?</code></td>
+    </tr>
+    <tr>
+        <td><code>_lastOfType?</code></td>
+    </tr>
+    <tr>
+        <td><code>_link?</code></td>
+    </tr>
+    <tr>
+        <td><code>_onlyChild?</code></td>
+    </tr>
+    <tr>
+        <td><code>_optional?</code></td>
+    </tr>
+    <tr>
+        <td><code>_readOnly?</code></td>
+    </tr>
+    </tbody>
+</table>