docs: added adding shadow guide

Author: gorhom

website/docs/guides/adding-shadow.mdx

@@ -0,0 +1,30 @@
+---
+id: adding-shadow
+title: Adding Shadow
+description: Adding shadow to the Bottom Sheet.
+keywords:
+  - bottomsheet
+  - bottom-sheet
+  - bottom sheet
+  - react-native
+  - react native
+  - ios
+  - android
+  - sheet
+  - modal
+  - presentation modal
+  - reanimated
+image: /img/bottom-sheet-preview.gif
+slug: /adding-shadow
+---
+
+![React Native Bottom Sheet Shadow](/img/bottom-sheet-shadow.jpg)
+
+To add shadow to the bottom sheet, you will need to pass the `style` prop with shadow styling config, I recommend checking out [React Native Shadow Generator](https://ethercreative.github.io/react-native-shadow-generator/) by [@ethercreative](https://github.com/ethercreative).
+
+:::note NOTICE
+
+You may notice that shadow looks different between **iOS** and **Android**, that's because each platform handle drawing shadows differently, read more about [Android Shadows](https://developer.android.com/training/material/shadows-clipping).
+
+:::
+

website/docs/custom-backdrop.mdx renamed to website/docs/guides/custom-backdrop.mdx

@@ -30,7 +30,7 @@ You can extend your custom backdrop props interface with the provided `BottomShe
 ### Example
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { Video } from '../components/video';
+import { Video } from '../../components/video';
 
 <Video
   title="React Native Bottom Sheet Custom Backdrop"

website/docs/custom-background.mdx renamed to website/docs/guides/custom-background.mdx

@@ -30,7 +30,7 @@ You can extend your custom background props interface with the provided `BottomS
 ### Example
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { Video } from '../components/video';
+import { Video } from '../../components/video';
 
 <Video
   title="React Native Bottom Sheet Custom Background"

website/docs/custom-handle.mdx renamed to website/docs/guides/custom-handle.mdx

@@ -30,7 +30,7 @@ You can extend your custom handle props interface with the provided `BottomSheet
 ### Example
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { Video } from '../components/video';
+import { Video } from '../../components/video';
 
 <Video
   title="React Native Bottom Sheet Custom Handle"

website/docs/react-naigation.md renamed to website/docs/guides/react-naigation.md

@@ -14,10 +14,11 @@ module.exports = {
           type: 'category',
           label: 'Guides',
           items: [
-            'custom-handle',
-            'custom-backdrop',
-            'custom-background',
-            'react-navigation-integration',
+            'guides/custom-handle',
+            'guides/custom-backdrop',
+            'guides/custom-background',
+            'guides/adding-shadow',
+            'guides/react-navigation-integration',
           ],
         },
         'troubleshooting',