docs: creating a getting started page document (#57)

Author: saseungmin

docs/docs/en/_nav.json

@@ -1,7 +1,7 @@
 [
   {
     "text": "Guide",
-    "link": "/guide/",
-    "activeMatch": "/guide/"
+    "link": "/guide/getting-started/overview/",
+    "activeMatch": "/guide/getting-started/"
   }
 ]

docs/docs/en/guide/_meta.json

@@ -1 +1,7 @@
-["index"]
+[
+  {
+    "type": "dir",
+    "name": "getting-started",
+    "label": "Getting Started"
+  }
+]

docs/docs/en/guide/getting-started/_meta.json

@@ -0,0 +1,4 @@
+[
+  "overview",
+  "installation"
+]

docs/docs/en/guide/getting-started/installation.mdx

@@ -0,0 +1,71 @@
+import { Steps, PackageManagerTabs } from '@theme';
+
+# Installation
+
+:::info Important
+`react-native-gesture-image-viewer` is a high-performance viewer library built on [`react-native-reanimated`](https://www.npmjs.com/package/react-native-reanimated) and [`react-native-gesture-handler`](https://www.npmjs.com/package/react-native-gesture-handler).   
+Therefore, you **must install** React Native Reanimated and Gesture Handler before using this library. Please refer to the official documentation of these libraries for detailed setup guides.
+:::
+
+#### Minimum Requirements
+
+|Library|Minimum Version|
+|:--|:--:|
+|`react`|`>=18.0.0`|
+|`react-native`|`>=0.75.0`|
+|`react-native-gesture-handler`|`>=2.24.0`|
+|`react-native-reanimated`|`>=3.0.0`|
+
+## [React Native Reanimated Setup](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/)
+
+<PackageManagerTabs command="install react-native-reanimated" />
+
+<Steps>
+
+### Add the plugin to your `babel.config.js`:
+
+```js title="babel.config.js"
+module.exports = {
+  presets: [
+    ... // don't add it here :)
+  ],
+  plugins: [
+    ...
+    // for web
+    '@babel/plugin-proposal-export-namespace-from', // [!code highlight]
+    // react-native-reanimated/plugin has to be listed last.
+    'react-native-reanimated/plugin', // [!code highlight]
+  ],
+};
+```
+
+### Wrap your Metro config with `wrapWithReanimatedMetroConfig` in `metro.config.js`:
+
+```js title="metro.config.js"
+// [!code highlight:3]
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
+
+const config = {
+  // Your existing Metro configuration options
+};
+
+module.exports = wrapWithReanimatedMetroConfig(config); // [!code highlight]
+```
+
+</Steps>
+
+## [React Native Gesture Handler Setup](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation)
+
+<PackageManagerTabs command="install react-native-gesture-handler" />
+
+- `react-native-gesture-handler` generally doesn't require additional setup, but please refer to the official documentation for your specific environment.
+- For [using gestures in Android modals](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation#android), you would normally need to wrap modal content with `GestureHandlerRootView`. However, **this library already includes `GestureHandlerRootView` internally, so no additional wrapping is needed when using modals.**
+
+## Install React Native Gesture Image Viewer
+
+You’re all set! 🎉   
+Start by installing `react-native-gesture-image-viewer`
+
+<PackageManagerTabs command="install react-native-gesture-image-viewer" />

docs/docs/en/guide/getting-started/overview.mdx

@@ -0,0 +1,21 @@
+# Overview
+
+<div style={{ width: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+  <img src="https://raw.githubusercontent.com/saseungmin/react-native-gesture-image-viewer/main/assets/example.gif" width="600" alt="Demo of react-native-gesture-image-viewer gestures" />
+</div>
+
+Have you ever struggled with implementing complex gesture handling and animations when building image galleries or content viewers in React Native?
+
+Existing libraries often have limited customization options or performance issues. `react-native-gesture-image-viewer` is a high-performance **universal gesture viewer** library built on [**React Native Reanimated**](https://docs.swmansion.com/react-native-reanimated/) and [**Gesture Handler**](https://docs.swmansion.com/react-native-gesture-handler/docs/), providing complete customization and intuitive gesture support for not only images but also videos, custom components, and any other content.
+
+## Key Features
+
+- 🤌 **Complete Gesture Support** - Pinch zoom, double-tap zoom, swipe navigation, pan when zoomed-in, and vertical drag to dismiss
+- 🏎️ **High-Performance Animations** - Smooth and responsive animations at 60fps and beyond, powered by React Native Reanimated
+- 🎨 **Full Customization** - Total control over components, styles, and gesture behavior
+- 🎛️ **External Control API** - Trigger actions programmatically from buttons or other UI components
+- 🧩 **Multi-Instance Management** - Manage multiple viewers independently using unique IDs
+- 🧬 **Flexible Integration** - Use with Modal, [React Native Modal](https://www.npmjs.com/package/react-native-modal), ScrollView, FlatList, [FlashList](https://www.npmjs.com/package/@shopify/flash-list), [Expo Image](https://www.npmjs.com/package/expo-image), [FastImage](https://github.com/DylanVann/react-native-fast-image), and more
+- 🧠 **Full TypeScript Support** - Great developer experience with type inference and safety
+- 🌐 **Cross-Platform Support** - Runs on iOS, Android, and Web with Expo Go and New Architecture compatibility
+- 🪄 **Easy-to-Use API** - Simple and intuitive API that requires minimal setup

docs/docs/en/guide/index.mdx

@@ -8,7 +8,7 @@ hero:
   actions:
     - theme: brand
       text: Quick Start
-      link: /guide/
+      link: /guide/getting-started/overview/
     - theme: alt
       text: GitHub
       link: https://github.com/saseungmin/react-native-gesture-image-viewer

docs/docs/en/index.md

@@ -1,7 +1,7 @@
 [
   {
     "text": "가이드",
-    "link": "/guide/",
-    "activeMatch": "/guide/"
+    "link": "/guide/getting-started/overview/",
+    "activeMatch": "/guide/getting-started/"
   }
 ]

docs/docs/ko/_nav.json

@@ -1 +1,7 @@
-["index"]
+[
+  {
+    "type": "dir",
+    "name": "getting-started",
+    "label": "시작하기"
+  }
+]

docs/docs/ko/guide/_meta.json

@@ -0,0 +1,4 @@
+[
+  "overview",
+  "installation"
+]