From 58af792cdc91904e5618641b1f138b71345964f2 Mon Sep 17 00:00:00 2001 From: olivierapivideo Date: Wed, 6 Sep 2023 08:22:13 +0000 Subject: [PATCH] Add content cards --- README.md | 57 ++-- _assets/css/components/content-card.css | 60 ++++ _assets/css/components/hero.css | 22 ++ _assets/css/components/product-card.css | 112 +++++++ _assets/css/components/quick-link.css | 67 ++++ _assets/css/components/support-card.css | 39 +++ _assets/css/landing.css | 6 + _assets/{ => css}/style.css | 8 +- _assets/icons/analytics.svg | 11 + _assets/icons/annotations.svg | 11 + _assets/icons/custom-domains.svg | 4 + _assets/icons/github.svg | 11 + _assets/icons/html5-player-fragments.svg | 11 + _assets/icons/livestream-management.svg | 17 + _assets/icons/livestream-quickstart.svg | 17 + _assets/icons/livestream-sdks.svg | 17 + _assets/icons/no-code.svg | 15 + _assets/icons/player-customization.svg | 13 + _assets/icons/player-sdks.svg | 4 + _assets/icons/setup-checklist.svg | 15 + _assets/icons/solutions-demos.svg | 11 + _assets/icons/tokens.svg | 11 + _assets/icons/video-ingestion.svg | 11 + _assets/icons/video-object-management.svg | 20 ++ _assets/icons/video-object.svg | 13 + _assets/icons/videos-sdks.svg | 13 + _assets/icons/vod-quickstart.svg | 13 + _assets/icons/webhooks.svg | 11 + _assets/landing.css | 293 ------------------ _partials/content-card.md | 12 + _partials/help-center-link.md | 5 - _partials/need-help-button.md | 8 - .../{product-grid-item.md => product-card.md} | 0 _partials/quick-link.md | 5 + ...-grid-item.md => quick-links-container.md} | 2 +- _partials/quick-links-grid-item-line.md | 5 - _partials/support-card.md | 10 + doctave.yaml | 9 +- 38 files changed, 628 insertions(+), 341 deletions(-) create mode 100644 _assets/css/components/content-card.css create mode 100644 _assets/css/components/hero.css create mode 100644 _assets/css/components/product-card.css create mode 100644 _assets/css/components/quick-link.css create mode 100644 _assets/css/components/support-card.css create mode 100644 _assets/css/landing.css rename _assets/{ => css}/style.css (98%) create mode 100644 _assets/icons/analytics.svg create mode 100644 _assets/icons/annotations.svg create mode 100644 _assets/icons/custom-domains.svg create mode 100644 _assets/icons/github.svg create mode 100644 _assets/icons/html5-player-fragments.svg create mode 100644 _assets/icons/livestream-management.svg create mode 100644 _assets/icons/livestream-quickstart.svg create mode 100644 _assets/icons/livestream-sdks.svg create mode 100644 _assets/icons/no-code.svg create mode 100644 _assets/icons/player-customization.svg create mode 100644 _assets/icons/player-sdks.svg create mode 100644 _assets/icons/setup-checklist.svg create mode 100644 _assets/icons/solutions-demos.svg create mode 100644 _assets/icons/tokens.svg create mode 100644 _assets/icons/video-ingestion.svg create mode 100644 _assets/icons/video-object-management.svg create mode 100644 _assets/icons/video-object.svg create mode 100644 _assets/icons/videos-sdks.svg create mode 100644 _assets/icons/vod-quickstart.svg create mode 100644 _assets/icons/webhooks.svg delete mode 100644 _assets/landing.css create mode 100644 _partials/content-card.md delete mode 100644 _partials/help-center-link.md delete mode 100644 _partials/need-help-button.md rename _partials/{product-grid-item.md => product-card.md} (100%) create mode 100644 _partials/quick-link.md rename _partials/{quick-links-grid-item.md => quick-links-container.md} (62%) delete mode 100644 _partials/quick-links-grid-item-line.md create mode 100644 _partials/support-card.md diff --git a/README.md b/README.md index 00f2b188..3eb70a31 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Welcome to the developer documentation of api.video! Our platform empowers devel Check out the products: -
+
{% capture vod-description %} @@ -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" %}
@@ -62,29 +62,29 @@ api.video lets you customize a large part of the delivery, whether it's the play -
+
{% 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 %}
@@ -97,7 +97,24 @@ api.video lets you customize a large part of the delivery, whether it's the play
-
-{% 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: "/" %} +
+{% 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: "/" %} +
+ + +
+
+ + ### Section header + ## 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: "/" %}
\ No newline at end of file diff --git a/_assets/css/components/content-card.css b/_assets/css/components/content-card.css new file mode 100644 index 00000000..edeedf08 --- /dev/null +++ b/_assets/css/components/content-card.css @@ -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; +} diff --git a/_assets/css/components/hero.css b/_assets/css/components/hero.css new file mode 100644 index 00000000..3f2f7120 --- /dev/null +++ b/_assets/css/components/hero.css @@ -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; +} diff --git a/_assets/css/components/product-card.css b/_assets/css/components/product-card.css new file mode 100644 index 00000000..93464fac --- /dev/null +++ b/_assets/css/components/product-card.css @@ -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); +} diff --git a/_assets/css/components/quick-link.css b/_assets/css/components/quick-link.css new file mode 100644 index 00000000..d31b63f2 --- /dev/null +++ b/_assets/css/components/quick-link.css @@ -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; +} diff --git a/_assets/css/components/support-card.css b/_assets/css/components/support-card.css new file mode 100644 index 00000000..2b3abeba --- /dev/null +++ b/_assets/css/components/support-card.css @@ -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; +} diff --git a/_assets/css/landing.css b/_assets/css/landing.css new file mode 100644 index 00000000..fa577dd0 --- /dev/null +++ b/_assets/css/landing.css @@ -0,0 +1,6 @@ +:root { + --AV_Primary_Blue_06: #414F6E99 + --AV_Primary_Blue: #414F6E + --AV_BG_Gradient: #46396C + --AV_Primary_Blue_Dark: #FF2D47 +} diff --git a/_assets/style.css b/_assets/css/style.css similarity index 98% rename from _assets/style.css rename to _assets/css/style.css index 1a9c2597..35a69723 100644 --- a/_assets/style.css +++ b/_assets/css/style.css @@ -8,6 +8,7 @@ src: url("/_assets/fonts/JetBrainsMono[wght].ttf"); } + .callout { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -322,13 +323,6 @@ color: #202d47; } -.help-center { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - grid-gap: 2rem; -} - - .content-markdown { padding-left: 0 !important; padding-right: 0 !important; diff --git a/_assets/icons/analytics.svg b/_assets/icons/analytics.svg new file mode 100644 index 00000000..3fb4d837 --- /dev/null +++ b/_assets/icons/analytics.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/_assets/icons/annotations.svg b/_assets/icons/annotations.svg new file mode 100644 index 00000000..8ba6b95a --- /dev/null +++ b/_assets/icons/annotations.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/_assets/icons/custom-domains.svg b/_assets/icons/custom-domains.svg new file mode 100644 index 00000000..a39ba9bc --- /dev/null +++ b/_assets/icons/custom-domains.svg @@ -0,0 +1,4 @@ + + + + diff --git a/_assets/icons/github.svg b/_assets/icons/github.svg new file mode 100644 index 00000000..80c944cb --- /dev/null +++ b/_assets/icons/github.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/_assets/icons/html5-player-fragments.svg b/_assets/icons/html5-player-fragments.svg new file mode 100644 index 00000000..a823da51 --- /dev/null +++ b/_assets/icons/html5-player-fragments.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/_assets/icons/livestream-management.svg b/_assets/icons/livestream-management.svg new file mode 100644 index 00000000..c9f09bdd --- /dev/null +++ b/_assets/icons/livestream-management.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/_assets/icons/livestream-quickstart.svg b/_assets/icons/livestream-quickstart.svg new file mode 100644 index 00000000..e6b84434 --- /dev/null +++ b/_assets/icons/livestream-quickstart.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/_assets/icons/livestream-sdks.svg b/_assets/icons/livestream-sdks.svg new file mode 100644 index 00000000..4af91e5e --- /dev/null +++ b/_assets/icons/livestream-sdks.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/_assets/icons/no-code.svg b/_assets/icons/no-code.svg new file mode 100644 index 00000000..f3c3ab0e --- /dev/null +++ b/_assets/icons/no-code.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/_assets/icons/player-customization.svg b/_assets/icons/player-customization.svg new file mode 100644 index 00000000..4fcdc77e --- /dev/null +++ b/_assets/icons/player-customization.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/_assets/icons/player-sdks.svg b/_assets/icons/player-sdks.svg new file mode 100644 index 00000000..2568b885 --- /dev/null +++ b/_assets/icons/player-sdks.svg @@ -0,0 +1,4 @@ + + + + diff --git a/_assets/icons/setup-checklist.svg b/_assets/icons/setup-checklist.svg new file mode 100644 index 00000000..c99a94b9 --- /dev/null +++ b/_assets/icons/setup-checklist.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/_assets/icons/solutions-demos.svg b/_assets/icons/solutions-demos.svg new file mode 100644 index 00000000..40c7400d --- /dev/null +++ b/_assets/icons/solutions-demos.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/_assets/icons/tokens.svg b/_assets/icons/tokens.svg new file mode 100644 index 00000000..2e908d46 --- /dev/null +++ b/_assets/icons/tokens.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/_assets/icons/video-ingestion.svg b/_assets/icons/video-ingestion.svg new file mode 100644 index 00000000..a25769d0 --- /dev/null +++ b/_assets/icons/video-ingestion.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/_assets/icons/video-object-management.svg b/_assets/icons/video-object-management.svg new file mode 100644 index 00000000..57b73e7e --- /dev/null +++ b/_assets/icons/video-object-management.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/_assets/icons/video-object.svg b/_assets/icons/video-object.svg new file mode 100644 index 00000000..a614981c --- /dev/null +++ b/_assets/icons/video-object.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/_assets/icons/videos-sdks.svg b/_assets/icons/videos-sdks.svg new file mode 100644 index 00000000..8d38c982 --- /dev/null +++ b/_assets/icons/videos-sdks.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/_assets/icons/vod-quickstart.svg b/_assets/icons/vod-quickstart.svg new file mode 100644 index 00000000..86035a41 --- /dev/null +++ b/_assets/icons/vod-quickstart.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/_assets/icons/webhooks.svg b/_assets/icons/webhooks.svg new file mode 100644 index 00000000..162b96e2 --- /dev/null +++ b/_assets/icons/webhooks.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/_assets/landing.css b/_assets/landing.css deleted file mode 100644 index 3734f179..00000000 --- a/_assets/landing.css +++ /dev/null @@ -1,293 +0,0 @@ -:root { - --AV_Primary_Blue_06: #414F6E99 - --AV_Primary_Blue: #414F6E - --AV_BG_Gradient: #46396C - --AV_Primary_Blue_Dark: #FF2D47 -} - -.hero h1 { - - text-align: left; - max-width: 100%; - margin-left: auto; - margin-right: auto; -} - -.hero h1 { - 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.60)); - font-size: 34px; - font-style: normal; - font-weight: 300; - line-height: normal; - letter-spacing: -0.68px; -} - -.starter-guides { - padding-top: 4rem; -} - -.starter-guides h2 { - margin-top: 0px !important; - font-size: 14px !important; - text-transform: uppercase; -} - -.starter-guides p { - margin-top: 0px !important; -} - -.starter-guides .starter-guide-link a { - display: block; - text-align: center; - color: #fff !important; - text-decoration: none !important; - width: 100%; - border-radius: 4px; - background: red; - padding: 0.7rem; - background: rgb(211, 188, 74); - background: linear-gradient( - 108deg, - rgb(78, 179, 223) 0%, - rgb(140, 117, 201) 100% - ); -} - -.starter-guides .starter-guide-link a:hover { - text-decoration: underline !important; - text-decoration-color: #fff; -} - -.help-center { - padding-top: 4rem; -} - -.help-center h2 { - margin-top: 0px !important; - font-size: 14px !important; -} - -.help-center p { - margin-top: 0px !important; -} - -.help-center .help-center-link a { - display: block; - text-align: center; - color: #fff !important; - text-decoration: none !important; - width: 100%; - border-radius: 4px; - background: red; - padding: 0.7rem; - background: rgb(211, 188, 74); - background: linear-gradient( - 108deg, - rgb(78, 179, 223) 0%, - rgb(140, 117, 201) 100% - ); -} - -.help-center .help-center-link a:hover { - text-decoration: underline !important; - text-decoration-color: #fff; -} - -.product-grid { - 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.10), 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.00) 100%), linear-gradient(0deg, rgba(109, 27, 132, 0.40) -16.17%, rgba(109, 27, 132, 0.00) 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); -} - -.quick-links-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - grid-gap: 2rem; - margin-bottom: 2em; -} - -.quick-links-grid-item { - border-radius: 4px; - background: #FFF; - box-shadow: 0px 20px 50px 0px rgba(59, 43, 92, 0.10), 0px 34px 24px -20px rgba(65, 79, 110, 0.04); - padding: 0 24px; -} - -.quick-links-grid-item h4 { - color: var(--AV_Primary_Blue_Dark, #202D47) !important; - font-size: 18px !important; - font-weight: 700 !important; - line-height: 18px !important; -} - -.quick-links-grid-item .color-rectancle { - width: 24px; - height: 4px; - flex-shrink: 0; - margin: 20px 0; -} - -.quick-links-grid-item.getting-started .color-rectancle { - background: var(--AV_urp_icon, linear-gradient(76deg, #642180 -24.15%, #AF2A72 93.03%)); -} - -.quick-links-grid-item.sdks .color-rectancle { - background: var(--AV_CTA, linear-gradient(92deg, #FA5B30 5.21%, #F7B500 186.04%)); -} - -.quick-links-grid-item.understand .color-rectancle { - background: linear-gradient(90deg, #414F6E 0%, #2773AA 100%); -} - -.quick-links-grid-item > p { - border-top: 1px solid #EFEFEF !important; - padding-top: 18px !important; -} - -.quick-links-grid-item > p > a.quick-links-grid-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-grid-item a.quick-links-grid-item-line img { - width: 24px !important; - height: 24px !important; - margin: 0 !important; - padding: 0 !important; -} - - -.need-help-buttons { - display: flex; - gap: 56px; -} - -a.need-help-button { - 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.10); - 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; -} - -a.need-help-button img { - width: 56px !important; - height: 56px !important; - padding: 0 !important; - margin: 0 !important; -} \ No newline at end of file diff --git a/_partials/content-card.md b/_partials/content-card.md new file mode 100644 index 00000000..f5c1a9c1 --- /dev/null +++ b/_partials/content-card.md @@ -0,0 +1,12 @@ + +
+ +![]({{icon}}) + +

{{label}}

+ +

{{description}}

+ +Learn mode + +
\ No newline at end of file diff --git a/_partials/help-center-link.md b/_partials/help-center-link.md deleted file mode 100644 index d910f9c5..00000000 --- a/_partials/help-center-link.md +++ /dev/null @@ -1,5 +0,0 @@ -
- -[{{ label }}]({{ link }}) - -
\ No newline at end of file diff --git a/_partials/need-help-button.md b/_partials/need-help-button.md deleted file mode 100644 index ac081300..00000000 --- a/_partials/need-help-button.md +++ /dev/null @@ -1,8 +0,0 @@ - - - -![]({{icon}}) - -{{label}} - - \ No newline at end of file diff --git a/_partials/product-grid-item.md b/_partials/product-card.md similarity index 100% rename from _partials/product-grid-item.md rename to _partials/product-card.md diff --git a/_partials/quick-link.md b/_partials/quick-link.md new file mode 100644 index 00000000..b2b4227b --- /dev/null +++ b/_partials/quick-link.md @@ -0,0 +1,5 @@ + + +![]({{icon}}) +{{label}} + \ No newline at end of file diff --git a/_partials/quick-links-grid-item.md b/_partials/quick-links-container.md similarity index 62% rename from _partials/quick-links-grid-item.md rename to _partials/quick-links-container.md index 4a2d9c2f..44cbd4e0 100644 --- a/_partials/quick-links-grid-item.md +++ b/_partials/quick-links-container.md @@ -1,4 +1,4 @@ -
+
#### {{ title }} diff --git a/_partials/quick-links-grid-item-line.md b/_partials/quick-links-grid-item-line.md deleted file mode 100644 index d6275558..00000000 --- a/_partials/quick-links-grid-item-line.md +++ /dev/null @@ -1,5 +0,0 @@ - - -![]({{icon}}) -{{label}} - \ No newline at end of file diff --git a/_partials/support-card.md b/_partials/support-card.md new file mode 100644 index 00000000..7ab3f1c8 --- /dev/null +++ b/_partials/support-card.md @@ -0,0 +1,10 @@ + + + +![]({{icon}}) + +

{{label}}

+ +![](https://img.api.video/arrow_forward_ios_6206f171e8.svg) + + \ No newline at end of file diff --git a/doctave.yaml b/doctave.yaml index 7963e4e4..a20f32b1 100644 --- a/doctave.yaml +++ b/doctave.yaml @@ -25,8 +25,13 @@ logo: src_dark: _assets/logo-dark.svg styles: - - _assets/style.css - - _assets/landing.css + - _assets/css/style.css + - _assets/css/landing.css + - _assets/css/components/support-card.css + - _assets/css/components/quick-link.css + - _assets/css/components/product-card.css + - _assets/css/components/hero.css + - _assets/css/components/content-card.css open_api: - spec_file: openapi.yaml