Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update homepage cards #459

Merged
merged 2 commits into from
Mar 29, 2022
Merged

Update homepage cards #459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef01527
update ui cards
kushv16 Mar 28, 2022
04ff41d
Makes dark mode default
pema-s Mar 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 25 additions & 21 deletions docs/introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,23 @@ slug: /
Whether you're looking to understand Symbl's capabilities or get started with
our APIs or SDKs, we've got you covered!

<div class="row">
<div class="column">
<div class="card"><a href="/docs/api-reference/getting-started"><h4>API Reference</h4>Browse through our APIs, learn how they work and get detailed descriptions and sample codes for each endpoint.</a></div>
</div>
<div class="column">
<div class="card"><a href="/docs/sdk-intro"><h4>SDK</h4>Add Symbl capabilities directly to your web and mobile applications with our robust SDKs available in popular languages. </a>
</div>
</div>
<div class="column">
<div class="card"><a href="/docs/tutorials"><h4>Tutorials</h4>Find step-by-step instructions on how to implement Symbl with your native video, audio and text conversation tools and applications. </a></div>
</div>
<div class="column">
<div class="card"><a href="/guides"><h4>Guides</h4>Learn about Symbl's capabilities, understand business use-cases and discover Conversation Intelligence applications across industries.</a></div>
</div>
<div class="card-container">
<a href="/docs/api-reference/getting-started" class="intro-card">
<h3>API Reference</h3>
<p>Browse through our APIs, learn how they work and get detailed descriptions and sample codes for each endpoint.</p>
</a>
<a href="/docs/sdk-intro" class="intro-card">
<h3>SDK</h3>
<p>Add Symbl capabilities directly to your web and mobile applications with our robust SDKs available in popular languages.</p>
</a>
<a href="/docs/tutorials" class="intro-card">
<h3>Tutorials</h3>
<p>Find step-by-step instructions on how to implement Symbl with your native video, audio and text conversation tools and applications.</p>
</a>
<a href="/guides" class="intro-card">
<h3>Guides</h3>
<p>Learn about Symbl's capabilities, understand business use-cases and discover Conversation Intelligence applications across industries.</p>
</a>
</div>

## Getting Started with Symbl
Expand Down Expand Up @@ -66,14 +69,15 @@ Also, check out our features in the [Labs section](/docs/labs) that are currentl

<div class="row">
<div class="column">
<div class="card2"> <h3><br/>Try it in Postman</h3> Our public collection in Postman has pre-configured API requests that gets you up-and-running in a jiffy. Try it now!<br/>
<br/>

[![Run in Postman](https://run.pstmn.io/button.svg)](https://god.gw.postman.com/run-collection/13497402-108cafc3-da45-4b00-97fe-4819894f58bb?action=collection%2Ffork&collection-url=entityId%3D13497402-108cafc3-da45-4b00-97fe-4819894f58bb%26entityType%3Dcollection%26workspaceId%3D5f563cfe-42ef-4344-a98a-eae13183fb7c)
<div class="card2">
<h3>Try it in Postman</h3>
<p>Our public collection in Postman has pre-configured API requests that gets you up-and-running in a jiffy. Try it now!</p>

***If you're new to Postman, watch this [video tutorial](/docs/developer-tools/postman#how-to-use-symbl-postman-collection) to learn how***.
[![Run in Postman](https://run.pstmn.io/button.svg)](https://god.gw.postman.com/run-collection/13497402-108cafc3-da45-4b00-97fe-4819894f58bb?action=collection%2Ffork&collection-url=entityId%3D13497402-108cafc3-da45-4b00-97fe-4819894f58bb%26entityType%3Dcollection%26workspaceId%3D5f563cfe-42ef-4344-a98a-eae13183fb7c)

</div>
</div>
<b><i>If you're new to Postman, watch this <a href="/docs/developer-tools/postman#how-to-use-symbl-postman-collection"> video tutorial </a> to learn how</i></b>
</div>
</div>
</div>


65 changes: 25 additions & 40 deletions docs/tutorials.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,52 +9,37 @@ slug: /tutorials/
Find detailed tutorials on how to implement Conversation Intelligence on your conversation application or platform.


<div class="row">
<div class="column">
<div class="card3"><a href="/docs/streamingapi/introduction"><h4>Streaming API</h4></a>

* [Get Real-time Speech-To-Text Transcriptions Using Streaming API](/docs/streamingapi/tutorials/receive-ai-insights-from-your-web-browser)
* [Gain Real-time AI Insights From Your Device's Mic Using Symbl's Javascript SDK](/docs/javascript-sdk/tutorials/receive-ai-insights-from-your-computer)
* [Start and Stop Streaming API Connection](/docs/streamingapi/code-snippets/start-and-stop-connection)
* [Receive Live Captioning](/docs/streamingapi/code-snippets/receive-live-captioning)

<button class="button button1"><a href="/docs/streamingapi/code-snippets/start-and-stop-connection">View all Tutorials</a></button><br/></div>
<div class="card-container">
<div class="intro-card">
<h3>Streaming API</h3>
<p> <span> > </span> <a href="/docs/streamingapi/tutorials/receive-ai-insights-from-your-web-browser">Get Real-time Speech-To-Text Transcriptions Using Streaming API</a></p>
<p> <span> > </span> <a href="/docs/javascript-sdk/tutorials/receive-ai-insights-from-your-computer">Gain Real-time AI Insights From Your Device's Mic Using Symbl's Javascript SDK</a></p>
<p> <span> > </span> <a href="/docs/streamingapi/code-snippets/start-and-stop-connection">Start and Stop Streaming API Connection</a></p>
<p> <span> > </span> <a href="/docs/streamingapi/code-snippets/receive-live-captioning">Receive Live Captioning</a></p>
<a class="button button1 tutorial-button" href="/docs/streamingapi/code-snippets/start-and-stop-connection">View all Tutorials</a>
</div>
<div class="column">
<div class="card3"><a href="//docs/async-api/introduction"><h4>Async APIs</h4></a>


* [How To Use Sentiment Analysis](/docs/async-api/code-snippets/how-to-use-sentiment-analysis)
* [Track Phrases In A Conversation](/docs/async-api/code-snippets/track-phrases-in-a-conversation)
* [Speaker Separation with Async API](/async-api/tutorials/get-speaker-separation-audio-video)
* [Receive Speech-to-Text and AI Insights](/docs/async-api/code-snippets/receive-speech-to-text-and-ai-insights)
* [Generate a Pre-built UI From Video Recordings](/docs/async-api/code-snippets/generate-pre-built-ui-from-video-recordings)


<button class="button button2"><a href="/docs/async-api/code-snippets/how-to-use-sentiment-analysis">View all Tutorials</a></button>
</div>
<div class="intro-card">
<h3>Async APIs</h3>
<p> <span> > </span><a href="/docs/async-api/code-snippets/how-to-use-sentiment-analysis">How To Use Sentiment Analysis</a></p>
<p> <span> > </span><a href="/docs/async-api/code-snippets/track-phrases-in-a-conversation">Track Phrases In A Conversation</a></p>
<p> <span> > </span><a href="/async-api/tutorials/get-speaker-separation-audio-video">Speaker Separation with Async API</a></p>
<p> <span> > </span><a href="/docs/async-api/code-snippets/receive-speech-to-text-and-ai-insights">Receive Speech-to-Text and AI Insights</a></p>
<p> <span> > </span><a href="/docs/async-api/code-snippets/generate-pre-built-ui-from-video-recordings">Generate a Pre-built UI From Video Recordings</a></p>
<a class="button button2 tutorial-button" href="/docs/async-api/code-snippets/how-to-use-sentiment-analysis">View all Tutorials</a>
</div>
<div class="column">
<div class="card3"><a href="/docs/telephony/introduction"><h4>Telephony API</h4></a>


* [Gain AI Insights On Your Zoom Call](/docs/telephony/tutorials/connect-to-zoom)
* [Get A Live Transcription From A Phone Call](/docs/telephony/tutorials/connect-to-phone-call)
* [Connect to a PSTN connection to get Speech to Text and AI Insights](/docs/telephony/code-snippets/connect-to-pstn)
* [Connect to a SIP connection to get Speech to Text and AI Insights](/docs/telephony/code-snippets/connect-to-sip)
* [Receive Speech to Text for a different language in a conversation](/docs/telephony/code-snippets/receive-speech-to-text-for-a-different-language)


<button class="button button2"><a href="/docs/telephony/tutorials/connect-to-zoom">View all Tutorials</a></button>
<div class="intro-card">
<h3>Telephony API</h3>
<p> <span> > </span><a href="/docs/telephony/tutorials/connect-to-zoom">Gain AI Insights On Your Zoom Call</a></p>
<p> <span> > </span><a href="/docs/telephony/tutorials/connect-to-phone-call">Get A Live Transcription From A Phone Call</a></p>
<p> <span> > </span><a href="/docs/telephony/code-snippets/connect-to-pstn">Connect to a PSTN connection to get Speech to Text and AI Insights</a></p>
<p> <span> > </span><a href="/docs/telephony/code-snippets/connect-to-sip">Connect to a SIP connection to get Speech to Text and AI Insights</a></p>
<p> <span> > </span><a href="/docs/telephony/code-snippets/receive-speech-to-text-for-a-different-language">Receive Speech to Text for a different language in a conversation</a></p>
<a class="button button3 tutorial-button" href="/docs/telephony/tutorials/connect-to-zoom">View all Tutorials</a>
</div>
</div>

<br/>
<br/>
<br/>

</div>
<br/>




2 changes: 1 addition & 1 deletion docusaurus-staging.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ module.exports = {

colorMode:
{
defaultMode: 'light',
defaultMode: 'dark',
disableSwitch: false,
respectPrefersColorScheme: true
},
Expand Down
2 changes: 1 addition & 1 deletion docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ module.exports = {

colorMode:
{
defaultMode: 'light',
defaultMode: 'dark',
disableSwitch: false,
respectPrefersColorScheme: true
},
Expand Down
64 changes: 61 additions & 3 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,13 +389,26 @@ th:empty {
width: 200%;
background-color: #c7ebc0;
}

.card2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
padding: 16px;
padding: 26px;
text-align: left;
width: 200%;
background-color: #FFA500
background-color: #FFA500;
border-radius: 30px;
transition:0.3s;
}

html[data-theme='dark'] .card2 {
color:black;
}

.card2:hover{
box-shadow: 5px 10px 8px #888888;
}



.card1:hover {
box-shadow: 0 8px 16px 0 rgba(214, 215, 221, 0.2);
Expand Down Expand Up @@ -488,4 +501,49 @@ html[data-theme='dark'] .sdk-card:hover {
.sdk-card-header{
margin-left:25px;
margin-bottom: 0px;
}
}

.card-container {
display: flex;
flex-wrap: wrap;
margin: -1.25rem;
margin-top: 0;
}

.intro-card {
width:360px;
margin: 1.25rem;
padding: 1.5rem;
display:flex;
flex-direction: column;
text-decoration: none;
font-size: var(--font-size-normal);
color:black;
background-color: #F0F1F5;
transition:0.3s;
border-radius: 10px;
}

.intro-card:hover{
box-shadow: 5px 10px 8px #888888;
text-decoration: none;
color:black;
}

html[data-theme="dark"] .intro-card{
color:white;
background-color: #262833;
}

.intro-card > ul {
list-style-type: none;
}

.tutorial-button {
color:black;
}

.tutorial-button:hover {
color:black;
}