docs: add presentation types section

website/docs/for-super-capacitor/overview.md

@@ -18,12 +18,12 @@ The options for configuring your portal when using [`presentPortal`](#presentpor
 ```typescript
 interface PortalOptions {
   name: string;
+  presentationType: 'push' | 'modal';
   startDir?: string;
   initialContext?: InitialContext;
   plugins?: CapacitorPlugin[];
   liveUpdateConfig?: LiveUpdateConfig;
-  type: 'push' | 'modal';
-  modalStyle?: 'fullscreen' | 'sheet';
+  modalStyle?: 'fullScreen' | 'pageSheet';
 }
 ```
 
@@ -64,8 +64,8 @@ presentPortal({ name: 'checkoutApp', startDir: 'portals/checkout', type: 'push'
 
 #### Parameters
 
-| Name      | Type                            | Description                                                         |
-| --------- | ------------------------------- | ------------------------------------------------------------------- |
+| Name      | Type                              | Description                                                           |
+| --------- | --------------------------------- | --------------------------------------------------------------------- |
 | `options` | [`PortalOptions`](#portaloptions) | The [`PortalOptions`](#portaloptions) object to configure the portal. |
 
 ### dismissPortal

website/docs/for-super-capacitor/presentation-types.md

@@ -0,0 +1,63 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# Presentation Types
+
+The `presentationType` option within the `PortalOptions` interface allows you to specify how the microapp will be presented to users. This section of the documentation provides an example of the available presentation types.
+
+## Push
+
+```typescript
+const portalOptions: PortalOptions = {
+  name: 'Portal Name';
+  presentationType: 'push';
+}
+```
+
+<em
+  style={{
+    textAlign: 'center',
+    display: 'block',
+  }}
+>
+  <img src={useBaseUrl('/img/super-capacitor/presentation-types/push.gif')} width="300px" />
+</em>
+
+## Modal
+
+### FullScreen
+
+```typescript
+const portalOptions: PortalOptions = {
+  name: 'Portal Name';
+  presentationType: 'modal';
+  modalStyle: 'fullScreen';
+}
+```
+
+<em
+  style={{
+    textAlign: 'center',
+    display: 'block',
+  }}
+>
+  <img src={useBaseUrl('/img/super-capacitor/presentation-types/fullscreen.gif')} width="300px" />
+</em>
+
+### PageSheet
+
+```typescript
+const portalOptions: PortalOptions = {
+  name: 'Portal Name';
+  presentationType: 'modal';
+  modalStyle: 'pageSheet';
+}
+```
+
+<em
+  style={{
+    textAlign: 'center',
+    display: 'block',
+  }}
+>
+  <img src={useBaseUrl('/img/super-capacitor/presentation-types/pagesheet.gif')} width="300px" />
+</em>

website/sidebars.js

@@ -225,6 +225,7 @@ module.exports = {
       collapsed: true,
       items: [
         'for-super-capacitor/overview',
+        'for-super-capacitor/presentation-types',
         {
           type: 'category',
           label: 'Tutorials',