Skip to content

Commit

Permalink
Add content cards
Browse files Browse the repository at this point in the history
  • Loading branch information
olivierapivideo authored Sep 6, 2023
1 parent 1fa3557 commit 58af792
Show file tree
Hide file tree
Showing 38 changed files with 628 additions and 341 deletions.
57 changes: 37 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Welcome to the developer documentation of api.video! Our platform empowers devel

Check out the products:

<div class="product-grid">
<div class="product-cards">

{% capture vod-description %}

Expand All @@ -46,9 +46,9 @@ api.video lets you customize a large part of the delivery, whether it's the play

{% endcapture %}

{% include "_partials/product-grid-item.md" product: "Video", subheading: "on demand", description: vod-description, link: "/vod/README.md" %}
{% include "_partials/product-grid-item.md" product: "Live", subheading: "streaming", description: live-stream-description, link: "/live-streaming/README.md" %}
{% include "_partials/product-grid-item.md" product: "Player", subheading: "& analytics", description: player-analytics-description, link: "/delivery-analytics/README.md" %}
{% include "_partials/product-card.md" product: "Video", subheading: "on demand", description: vod-description, link: "/vod/README.md" %}
{% include "_partials/product-card.md" product: "Live", subheading: "streaming", description: live-stream-description, link: "/live-streaming/README.md" %}
{% include "_partials/product-card.md" product: "Player", subheading: "& analytics", description: player-analytics-description, link: "/delivery-analytics/README.md" %}

</div>

Expand All @@ -62,29 +62,29 @@ api.video lets you customize a large part of the delivery, whether it's the play



<div class="quick-links-grid">
<div class="quick-links">
{% capture get-started-links %}
{% include "_partials/quick-links-grid-item-line.md" icon: "/_assets/icons/js.svg", label: "Start working with api.video", link: "/" %}
{% include "_partials/quick-links-grid-item-line.md" icon: "/_assets/icons/js.svg", label: "Video quickstart", link: "/" %}
{% include "_partials/quick-links-grid-item-line.md" icon: "/_assets/icons/js.svg", label: "Live streaming quickstart", link: "/" %}
{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "Start working with api.video", link: "/" %}
{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "Video quickstart", link: "/" %}
{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "Live streaming quickstart", link: "/" %}
{% endcapture %}

{% capture sdks-and-plugins %}
{% include "_partials/quick-links-grid-item-line.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% include "_partials/quick-links-grid-item-line.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% include "_partials/quick-links-grid-item-line.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% include "_partials/quick-link.md" icon: "/_assets/icons/github.svg", label: "SDK", link: "/" %}
{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% endcapture %}

{% capture understand-api-video %}
{% include "_partials/quick-links-grid-item-line.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% include "_partials/quick-links-grid-item-line.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% include "_partials/quick-links-grid-item-line.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "SDK", link: "/" %}
{% endcapture %}


{% include "_partials/quick-links-grid-item.md" name: "getting-started", title: "Get Started", content: get-started-links %}
{% include "_partials/quick-links-grid-item.md" name: "sdks", title: "SDKs and plugins", content: sdks-and-plugins %}
{% include "_partials/quick-links-grid-item.md" name: "understand", title: "Understand api.video", content: understand-api-video %}
{% include "_partials/quick-links-container.md" name: "getting-started", title: "Get Started", content: get-started-links %}
{% include "_partials/quick-links-container.md" name: "sdks", title: "SDKs and plugins", content: sdks-and-plugins %}
{% include "_partials/quick-links-container.md" name: "understand", title: "Understand api.video", content: understand-api-video %}

</div>

Expand All @@ -97,7 +97,24 @@ api.video lets you customize a large part of the delivery, whether it's the play
</div>


<div class="need-help-buttons">
{% include "_partials/need-help-button.md" label: "Browse help center", icon: "/_assets/icons/js.svg", link: "/" %}
{% include "_partials/need-help-button.md" label: "Talk to Customer Care team", icon: "/_assets/icons/js.svg", link: "/" %}
<div class="support-cards">
{% include "_partials/support-card.md" label: "Browse help center", icon: "/_assets/icons/videos-sdks.svg", link: "/" %}
{% include "_partials/support-card.md" label: "Talk to Customer Care team", icon: "/_assets/icons/vod-quickstart.svg", link: "/" %}
</div>


<div class="section-header">
<hr/>

### Section header
## Content cards
</div>



<div class="content-cards">
{% include "_partials/content-card.md" label: "Browse help center", icon: "/_assets/icons/solutions-demos.svg", description: "This is a placeholder for a paragraph that guides users to our solutions & demos", link: "/" %}
{% include "_partials/content-card.md" label: "Browse help center", icon: "/_assets/icons/annotations.svg", description: "This is a placeholder for a paragraph that guides users to our solutions & demos. This is a placeholder for a paragraph that guides users to our solutions & demos", link: "/" %}
{% include "_partials/content-card.md" label: "Browse help center", icon: "/_assets/icons/no-code.svg", description: "This is a placeholder for a paragraph that guides users to our solutions & demos", link: "/" %}
{% include "_partials/content-card.md" label: "Browse help center", icon: "/_assets/icons/github.svg", description: "This is a placeholder for a paragraph that guides users to our solutions & demos", link: "/" %}
</div>
60 changes: 60 additions & 0 deletions _assets/css/components/content-card.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
.content-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 2rem;
}

.content-card {
padding: 24px !important;
display: flex;
flex-direction: column;
border-radius: 4px;
background: #fff;
box-shadow: 0px 34px 24px -20px rgba(65, 79, 110, 0.04),
0px 20px 50px 0 rgba(59, 43, 92, 0.1);
}

.content-card p {
padding: 0 !important;
margin: 0 !important;
}

.content-card > p > img {
padding: 0 !important;
margin: 0 !important;
background-color: #e9dded;
width: 40px;
height: 40px;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px !important;
}

.content-card p.content-card-label {
font-size: 18px;
font-weight: 600;
text-align: left;
color: #202d47;
margin-bottom: 16px !important;
}

.content-card p.content-card-description {
padding-bottom: 32px !important;
opacity: 0.6;
font-size: 14px;
text-align: left;
color: #414f6e;
flex: 1;
}

.content-card-link {
font-size: 12px !important;
font-weight: 700 !important;
text-align: left;
color: #642180 !important;
margin-bottom: 0px;
text-transform: uppercase;
text-decoration: none !important;
}
22 changes: 22 additions & 0 deletions _assets/css/components/hero.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.hero h1 {
text-align: left;
max-width: 100%;
margin-left: auto;
margin-right: auto;
color: var(--AV_Primary_Blue_Dark, #202d47) !important;
font-size: 34px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.68px;
}

.hero h1 em {
display: block;
color: var(--AV_Primary_Blue_06, rgba(65, 79, 110, 0.6));
font-size: 34px;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: -0.68px;
}
112 changes: 112 additions & 0 deletions _assets/css/components/product-card.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
.product-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-gap: 2rem;
}

.product-grid-item {
box-shadow: 0px 20px 50px 0px rgba(59, 43, 92, 0.1),
0px 34px 24px -20px rgba(65, 79, 110, 0.04);
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
}

.product-grid-item-header * {
margin: 0 !important;
color: #fff !important;
}

.product-grid-item-header p {
font-weight: 200 !important;
}

.product-grid-item-header h3 {
color: #fff;
font-size: 30px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: normal !important;
letter-spacing: -0.6px !important;
}

.product-grid-item-header {
padding-left: 2rem;
padding-right: 2rem;
padding-top: 5.5rem;
padding-bottom: 2rem;
}

.product-grid-item-header.Video {
background: linear-gradient(215deg, #fa5b30 -5.18%, #f7b500 179.35%);
}

.product-grid-item-header.Live {
background: var(
--AV_urp_icon,
linear-gradient(76deg, #642180 -24.15%, #af2a72 93.03%)
);
}

.product-grid-item-header.Player {
background: var(
--AV_BG_Gradient,
radial-gradient(
204.77% 98.38% at 87.15% 25.85%,
rgba(78, 178, 221, 0.18) 0%,
rgba(42, 124, 159, 0) 100%
),
linear-gradient(
0deg,
rgba(109, 27, 132, 0.4) -16.17%,
rgba(109, 27, 132, 0) 84.97%
),
#46396c
);
}

.product-grid-item-body {
padding: 2rem;
padding-bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}

.product-grid-item-body-description p {
flex: 1;
opacity: 0.6;
color: var(--AV_Primary_Blue, #414f6e);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 19.6px */
}

.product-grid-item-body p a {
color: var(--AV_Primary_Orange, #fa5b30);
text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700 !important;
line-height: 14px; /* 100% */
letter-spacing: -0.28px;

display: inline-block;
border-radius: 4px;

background: rgb(250, 91, 48, 0.2);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-decoration: none !important;
}

.product-grid-item-body a:hover {
background: rgb(250, 91, 48, 0.3);
}
67 changes: 67 additions & 0 deletions _assets/css/components/quick-link.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
.quick-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-gap: 2rem;
margin-bottom: 2em;
}

.quick-links-item {
border-radius: 4px;
background: #fff;
box-shadow: 0px 20px 50px 0px rgba(59, 43, 92, 0.1),
0px 34px 24px -20px rgba(65, 79, 110, 0.04);
padding: 0 24px;
}

.quick-links-item h4 {
color: var(--AV_Primary_Blue_Dark, #202d47) !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 18px !important;
}

.quick-links-item .color-rectancle {
width: 24px;
height: 4px;
flex-shrink: 0;
margin: 20px 0;
}

.quick-links-item.getting-started .color-rectancle {
background: var(
--AV_urp_icon,
linear-gradient(76deg, #642180 -24.15%, #af2a72 93.03%)
);
}

.quick-links-item.sdks .color-rectancle {
background: var(
--AV_CTA,
linear-gradient(92deg, #fa5b30 5.21%, #f7b500 186.04%)
);
}

.quick-links-item.understand .color-rectancle {
background: linear-gradient(90deg, #414f6e 0%, #2773aa 100%);
}

.quick-links-item > p {
border-top: 1px solid #efefef !important;
padding-top: 18px !important;
}

.quick-links-item > p > a.quick-links-item-line {
display: flex !important;
gap: 16px !important;
align-items: center !important;

text-decoration: none !important;
color: var(--AV_Primary_Blue, #414f6e) !important;
}

.quick-links-item a.quick-links-item-line img {
width: 24px !important;
height: 24px !important;
margin: 0 !important;
padding: 0 !important;
}
39 changes: 39 additions & 0 deletions _assets/css/components/support-card.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.support-cards {
display: flex;
gap: 56px;
}

.support-cards .support-card {
flex: 1;
display: flex;
gap: 22px;
align-items: center;
flex-direction: row;
border-radius: 4px;
background: #fff;
box-shadow: 0px 20px 50px 0px rgba(59, 43, 92, 0.1);
padding: 0 24px;
color: var(--AV_Primary_Blue, #414f6e) !important;
font-size: 18px !important;
font-style: normal !important;
text-decoration: none !important;
font-weight: 600 !important;
line-height: 18px !important; /* 100% */
letter-spacing: -0.36px !important;
}

.support-card p.support-card-label {
flex: 1;
}

.support-card img {
width: 56px !important;
height: 56px !important;
padding: 0 !important;
margin: 0 !important;
}

.support-card .arrow img {
width: 26px !important;
height: 26px !important;
}
Loading

0 comments on commit 58af792

Please sign in to comment.