DX-2775 Update Voice About Page (#682)

* DX-2775 Update Voice About Page

* finish Voice about page

* DX-2790

* newline at eof

* newlines at eof

* remove duplicate voice quick start from sidebar

* remove startStream for now

* change get started button to stay on same tab

* alignment of panels

* shadows

* prep for splash page changes

* DX-2816 Updates to Voice About Page (#706)

* e911, edgemanagement, sipauthentication settings api spec (#701)

Co-authored-by: ichesnov <[email protected]>

* DX-2816 Updates to Voice About Page

* workflow

* branch

* remove workflow change

* Update hangup.mdx (#707)

Fix a broken hyperlink

* add stream panel

* workflow

* remove branch

Co-authored-by: Ivan Chesnov <[email protected]>
Co-authored-by: ichesnov <[email protected]>
Co-authored-by: AJ Rice <[email protected]>

* revert landing page changes

* update to docusaurus 2.1

Co-authored-by: Ivan Chesnov <[email protected]>
Co-authored-by: ichesnov <[email protected]>
Co-authored-by: AJ Rice <[email protected]>

Author: 4 people

site/docs/voice/about.mdx

@@ -1,6 +1,6 @@
 ---
 id: about
-title: Voice
+title: Voice API
 sidebar_label: About
 slug: /voice
 description: A general overview of Bandwidth's Voice API
@@ -11,98 +11,79 @@ hide_title: false
 image: '@site/static/img/bw-icon.svg'
 ---
 
-export const Highlight = ({children, color}) => (
-    <span
-      style={{
-        backgroundColor: color,
-        borderRadius: '2px',
-        color: '#fff',
-        padding: '0.2rem',
-      }}>
-      {children}
-    </span>
-  );
-
-export const Svg = require('@site/static/img/product-icons/voice.svg').default;
-
-<Svg className='about-image'/> <br/>
-
-The Bandwidth Voice API allows you to handle incoming and outgoing PSTN phone calls using HTTP and JSON webhooks, giving you complete control over any call flow.
-
-## Base URL
-
-`https://voice.bandwidth.com/api/v2/accounts/{accountId}`
-
-**Note** HTTP requests to our API use HTTP Basic authentication, which refers to your account's username and password.
-
-## Calls
-
-For help on how to make the proper requests to the API, check out the [API Reference](/apis/voice#operation/createCall) section of the docs. To quickly start making and receiving calls, check out the [guide](/docs/voice/quickStart).
-
-### Creation/Acceptance
-
-A <Highlight color="#079CEE">POST</Highlight> to [`/calls`](/apis/voice#operation/createCall) creates a call object in Bandwidth's network and returns a unique `callId` corresponding to the new call. When creating a call you provide an `answerUrl` in the request body, and upon the call being answered, Bandwidth will send a webhook to the provided URL to inform your application and retrieve BXML from it in order to continue with the call.
-
-To handle inbound calls to your Bandwidth numbers - you associate a [voice application](/docs/account/dashboard-setup#create-a-voice-application) to a group of numbers, known as a Location or Sip-Peer. When incoming calls are received to any of those numbers, Bandwidth sends an [`initiate`](/docs/voice/webhooks/initiate) event webhook to the URL defined in your application and expects BXML in the HTTP response to continue with the call.
-
-### Call Directions
-
-The direction of which the call is coming from may determine how/where callbacks are sent and whether they may submit more BXML. The direction of a call is either inbound or outbound. Inbound calls refer to calls received by your application, and outbound calls are calls that originate from your application (via API requests or BXML verbs).
-
-### BXML
-
-Bandwidth XML allows you to create a voice application as easily as you create a web application. Using Bandwidth XML (or BXML) your application handles incoming call events using standard action verbs that are described in XML.
-
-When calls or call events occur - Bandwidth will send a request (webhook) to your service, expecting BXML in the HTTP response body to continue the call.
-
-### Webhooks
-
-The Voice API uses a number of different [webhooks](/docs/voice/webhooks) to facilitate call control. Certain webhooks expect BXML in the HTTP response to keep the call alive, while others are simply informative. These are also referred to as "callbacks".
-
-### STIR/SHAKEN
-
-The Bandwidth API uses STIR/SHAKEN to help combat fraudulent calls and phone number spoofing. This info can be seen in the [`initiate`](/docs/voice/webhooks/initiate) webhook. For more information, look [here](https://www.bandwidth.com/regulations/stir-shaken/) for Bandwidth's explanation of what it is and why it's important.
-
-## Features and Services of Note
-
-### Text-to-Speech
-
-Use our [SpeakSentence](/docs/voice/bxml/speakSentence) verb to convert typed words to audible speech on the call. Powered by Amazon Polly, which allows us to support seventeen voices and twenty-six languages. Use [SSML](https://www.w3.org/TR/2010/REC-speech-synthesis11-20100907/) to customize your audio to include pauses, emphasis, and much more.
-
-### Recording
-
-With the [Record](/docs/voice/bxml/record) verb, you can save calls to play back or analyze later.
-
-### Transcription
-
-Convert your calls to text using the [Record](/docs/voice/bxml/record) verb's `transcribe` function.
-
-### Conferencing
-
-The [Conference](/docs/voice/bxml/conference) BXML Verb allows you to create conference calls—including with the [coach](/docs/voice/bxml/conference#join-a-conference-as-a-coach) feature that allows for a call to be selectively bridged with certain calls within a conference.
-
-### Answering Machine Detection
-
-[Answering Machine Detection](/docs/voice/guides/machineDetection) allows you to determine whether a human or a machine has answered a call.
-
-### Caller Name Service (CNAM)
-
-Bandwidth's [Caller Name service](/docs/voice/guides/cnamPerDip) provides the business name on VoIP calls in the US and Canada using our CNAM database. This feature is not enabled by default.
-
-## Storage
-
-### Media
-
-The Voice API allows you to playback audio files to end users on phone calls. Only `.wav` and `.mp3` files are supported at this time and  Bandwidth recommends limiting audio files to less than 1 hour in length or 250 MB in size.
-
-### Recordings
-
-Bandwidth will keep recordings for up to 30 days. After 30 days, recordings will be deleted from Bandwidth controlled servers.
-
-### Transcriptions
-
-Bandwidth will keep transcriptions for up to 30 days. After 30 days, transcriptions will be deleted from Bandwidth controlled servers.
-
-## Supported Languages and Environments
-
-SDKs are provided for Java, C#, Ruby, NodeJs, Python, and PHP. Examples of the Bandwidth library in these languages are provided throughout the docs.
+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'
+
+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.
+    Embed inbound and outbound voice capabilities via a set of well defined APIs - without the hassle of handling telecom infrastructure.
+    <br/><br/>
+    Rapidly develop voice-enabled applications by simply sending and receiving HTTPS requests.
+    When an incoming call comes into a phone number associated with our Voice API platform, we will notify your application via a webhook event.
+    Your application can then respond to our platform using Bandwidth XML (BXML) to launch any of our features.</p>,
+  Svg: VoiceSvg,
+  getStartedButton: {
+    link: '/docs/voice/quickStart',
+    text: 'Get Started'
+  }
+};
+
+export const sdks = {
+  postmanLink: 'https://www.postman.com/bandwidth/workspace/bandwidth-public-workspace/documentation/13566438-444b67ab-72a9-42dd-bac4-ac9a9d092b13'
+};
+
+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 
+    action verbs that are described in XML allowing you to create custom experiences.`,
+  panels: [
+    {
+      Svg: require('@site/static/img/docs-icons/group-circle.svg').default,
+      title: 'Conferencing',
+      text: `2-person call with agent 'whisper' supervision or create up to 20 person conferences.`,
+      link: '/docs/voice/guides/conference/'
+    },
+    {
+      Svg: require('@site/static/img/docs-icons/phone-message.svg').default,
+      title: 'Text to Speech',
+      text: `Multiple languages, voices and SSML markup support including WAV and MP3 audio playback.`,
+      link: '/docs/voice/guides/mediaAndTTS/'
+    },
+    {
+      Svg: require('@site/static/img/docs-icons/gears.svg').default,
+      title: 'Interactive Voice Control',
+      text: `DTMF detection and media capabilities like Text-to-Speech and audio file playback.`,
+      link: '/docs/voice/guides/interactiveVoiceResponse/'
+    },
+    {
+      Svg: require('@site/static/img/docs-icons/code-video-phone.svg').default,
+      title: 'Recording & Transcription',
+      text: `Start and stop recording during a call in both dual-channel and mono recording format with transcription.`,
+      link: '/docs/voice/guides/recording/'
+    },
+    {
+      Svg: require('@site/static/img/docs-icons/siren.svg').default,
+      title: 'Answering Machine Detection',
+      text: `Accurately detect and build flexibility to play TTS or connect a call depending on what or who has answered.`,
+      link: '/docs/voice/guides/machineDetection'
+    },
+    {
+      Svg: require('@site/static/img/docs-icons/controls.svg').default,
+      title: 'Media Streaming',
+      text: `Stream media in real-time over WebSockets to your preferred third-party tools.`,
+      link: '/docs/voice/bxml/startStream'
+    },
+  ]
+};
+
+<DocsGetStarted {...getStarted}/>
+
+## SDKs
+
+<DocsSdks {...sdks}/>
+
+## Features
+
+<DocsFeatures {...features}/>

site/package.json

@@ -14,21 +14,20 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.1",
-    "@docusaurus/preset-classic": "^2.0.1",
+    "@algolia/client-search": "^4.9.1",
+    "@docusaurus/core": "^2.1.0",
+    "@docusaurus/preset-classic": "^2.1.0",
+    "@types/react": "^17.0.0",
     "buffer": "^6.0.3",
+    "core-js": "^3.1.4",
     "js-yaml": "^4.1.0",
     "mobx": "^6.3.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-is": "^18.1.0",
+    "react-loadable": "*",
     "redoc": "^2.0.0-rc.77",
     "styled-components": "^5.2.3",
-    "//": "dependencies below are not 'required' but are included to remove unmet peer dependency warnings",
-    "@algolia/client-search": "^4.9.1",
-    "@types/react": "^17.0.0",
-    "core-js": "^3.1.4",
-    "react-loadable": "*",
-    "react-is": "^18.1.0",
     "typescript": "^2.7",
     "webpack": "^5.0.0"
   },

site/sidebar.js

@@ -153,7 +153,6 @@ module.exports = {
                     type: "category",
                     label: "Guides and Tutorials",
                     items: [
-                        "voice/quickStart",
                         "voice/outboundCallGuide",
                         "voice/mediaAndTTSGuide",
                         "voice/recordingGuide",

site/src/components/BlueButton.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import blueButtonStyles from '@site/src/components/css/BlueButton.module.css';
+
+export default function BlueButton({link, text}) {
+    return (
+        <div className={blueButtonStyles.blueButton}>
+            <a href={link} target="_blank" rel="noopener">{text}</a>
+        </div>
+    )
+}

site/src/components/DocsFeatures.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import docsAboutStyles from '@site/src/components/css/DocsAbout.module.css';
+import FeaturePanels from '@site/src/components/FeaturePanels.js';
+
+export default function DocsFeatures({featuresText, panels}) {
+    return (
+        <div className={docsAboutStyles.features}>
+            <div className={docsAboutStyles.featuresText}>{featuresText}</div>
+            <FeaturePanels panels={panels}/>
+        </div>
+    );
+}

site/src/components/DocsGetStarted.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import docsAboutStyles from '@site/src/components/css/DocsAbout.module.css';
+import blueButtonStyles from '@site/src/components/css/BlueButton.module.css';
+
+export default function DocsGetStarted({getStartedText, Svg, getStartedButton}) {
+    return (
+        <div className={docsAboutStyles.getStarted}>
+            <div className={docsAboutStyles.getStartedText}>{getStartedText}</div>
+            <div className={docsAboutStyles.getStartedImage}><Svg/></div>
+            <div className={blueButtonStyles.blueButton}>
+                <a href={getStartedButton.link} rel="noopener">{getStartedButton.text}</a>
+            </div>
+        </div>
+    );
+}

site/src/components/DocsSdks.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import docsAboutStyles from '@site/src/components/css/DocsAbout.module.css';
+
+
+const sdks = [
+    {
+        link: '/sdks/node',
+        Svg: require('@site/static/img/sdk-icons/node.svg').default
+    },
+    {
+        link: '/sdks/python',
+        Svg: require('@site/static/img/sdk-icons/python.svg').default
+    },
+    {
+        link: '/sdks/java',
+        Svg: require('@site/static/img/sdk-icons/java.svg').default
+    },
+    {
+        link: '/sdks/php',
+        Svg: require('@site/static/img/sdk-icons/php.svg').default
+    },
+    {
+        link: '/sdks/ruby',
+        Svg: require('@site/static/img/sdk-icons/ruby.svg').default
+    },
+    {
+        link: '/sdks/csharp',
+        Svg: require('@site/static/img/sdk-icons/csharp.svg').default
+    }
+]
+
+export default function DocsSdks({postmanLink}) {
+    return (
+        <div className={docsAboutStyles.sdks}>
+            <div className={docsAboutStyles.sdksText}>
+                With a few lines of code we will show you how to use our REST APIs and webhooks through our docs, 
+                code samples and SDKs to build your application.
+                Select the SDK of your choice or start testing with our <a className={docsAboutStyles.postmanLink} href={postmanLink} target="_blank" rel="noopener">Postman Collection</a> straight away.
+            </div>
+            <div className={docsAboutStyles.sdksImages}>
+                <div className={docsAboutStyles.sdkImageContainer}>
+                    {sdks.map(({link, Svg}, idx) => (
+                        <a key={idx} href={link}><Svg/></a>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

site/src/components/FeaturePanels.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import featurePanelStyles from '@site/src/components/css/FeaturePanel.module.css';
+
+function FeaturePanel({Svg, title, text, link}) {
+    return (
+        <a className={featurePanelStyles.panel} href={link}>
+            <div className={featurePanelStyles.header}>
+                <Svg className={featurePanelStyles.icon}/>
+                <div className={featurePanelStyles.title}>{title}</div>
+            </div>
+            <div className={featurePanelStyles.content}>
+                <div className={featurePanelStyles.panelText}>{text}</div>
+            </div>
+        </a>
+    );
+}
+
+export default function FeaturePanels({panels}) {
+    return (
+        <div className={featurePanelStyles.panelsContainer}>
+            {panels.map((props, idx) => (
+                <FeaturePanel key={idx} {...props}/>
+            ))}
+        </div>
+    );
+}

site/src/components/css/BlueButton.module.css

@@ -0,0 +1,21 @@
+/* Blue Button CSS */
+
+.blueButton {
+    width: 100%;
+    height: auto;
+    display: flex;
+    
+}
+
+.blueButton a {
+    background-color: var(--bwBlue);
+    border-radius: 20px;
+    color: #FFFFF2;
+    font-size: 12px;
+    font-family: 'Overpass Bold';
+    text-transform: uppercase;
+    line-height: 18px;
+    letter-spacing: .1em;
+    text-decoration: none;
+    padding: 12px 30px;
+}