Skip to content

Commit

Permalink
Update homepage cards (#459)
Browse files Browse the repository at this point in the history 
* update ui cards

* Makes dark mode default

Co-authored-by: Kush Vora <[email protected]>
  • Loading branch information
@pema-s @kushv16
pema-s and kushv16 authored Mar 29, 2022
1 parent 88decef commit be56cca
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 66 deletions.
46 changes: 25 additions & 21 deletions docs/introduction.md
View file
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
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
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
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
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;
}

0 comments on commit be56cca

Please sign in to comment.