Add Diagram to Voice About Page

site/docs/voice/about.mdx

@@ -14,7 +14,10 @@ image: '@site/static/img/bw-icon.svg'
 import DocsGetStarted from '@site/src/components/DocsGetStarted.js';
 import DocsSdks from '@site/src/components/DocsSdks.js';
 import DocsFeatures from '@site/src/components/DocsFeatures.js';
-import VoiceSvg from '@site/static/img/product-icons/voice.svg'
+import DocsDiagram from '@site/src/components/DocsDiagram.js';
+import VoiceSvg from '@site/static/img/product-icons/voice.svg';
+import DesktopDiagram from '@site/static/img/docs-diagrams/voice/about-desktop.svg';
+import MobileDiagram from '@site/static/img/docs-diagrams/voice/about-mobile.svg';
 
 export const getStarted = {
   getStartedText: <p>With Bandwidth's Voice API, you can build a custom voice calling application that accesses our voice network using a HTTPS-based interface.
@@ -34,6 +37,17 @@ export const sdks = {
   postmanLink: 'https://www.postman.com/bandwidth/workspace/bandwidth-public-workspace/documentation/13566438-444b67ab-72a9-42dd-bac4-ac9a9d092b13'
 };
 
+export const diagram = {
+  description: 
+    <ol>
+      <li>Initiate the call by using our REST API</li>
+      <li>Bandwidth makes a HTTP GET or POST request to your application</li>
+      <li>Use BXML verbs to leverage Voice API features for the call</li>
+    </ol>,
+  Desktop: DesktopDiagram,
+  Mobile: MobileDiagram
+}
+
 export const features = {
   featuresText: `Our simple, flexible and full-featured Voice API gives you access to all the tools you need with Bandwidth.
     We use Bandwidth XML (BXML) so your application handles incoming call events using standard 
@@ -84,6 +98,10 @@ export const features = {
 
 <DocsSdks {...sdks}/>
 
+## How it Works
+
+<DocsDiagram {...diagram}/>
+
 ## Features
 
-<DocsFeatures {...features}/>
+<DocsFeatures {...features}/>

site/src/components/DocsDiagram.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+import docsAboutStyles from '@site/src/components/css/DocsAbout.module.css';
+
+export default function DocsDiagram({description, Desktop, Mobile}) {
+
+    const [isDesktop, setIsDesktop] = useState(true);
+
+    useEffect(() => {   // carousel dynamic resizing based on screen width
+        const windowSize = () => {
+            if (window.innerWidth > 996) {
+                setIsDesktop(true);
+            }
+            if (window.innerWidth <= 996) {
+                setIsDesktop(false);
+            }
+        }
+
+        window.addEventListener('resize', windowSize);
+
+        return () => window.removeEventListener('resize', windowSize);
+    }, [])
+
+    return (
+        <div className={docsAboutStyles.diagram}>
+            {description && <div className={docsAboutStyles.description}>{description}</div>}
+            {isDesktop ? <Desktop/> : <Mobile/>}
+        </div>
+    )
+}

site/src/components/css/FeaturePanel.module.css

@@ -4,7 +4,7 @@
     width: 100%;
     display: flex;
     flex-wrap: wrap;
-    justify-content: flex-start;
+    justify-content: center;
 }
 
 .panel {