Merge pull request #34 from apivideo/update-landing-page-content-cards

Update landing pages

README.md

@@ -5,17 +5,14 @@ meta:
     description: Cloud-based video hosting and live streaming platform with analytics. Mobile and web SDKs for VOD, live streaming, and player for NodeJS, Javascript, Typescript, Python, Go, PHP, C#, iOS Swift, Android Kotlin.
 ---
 
-<div class="hero">
+<div class="section-header">
 
-# api.video *documentation*
-</div>
+### New to api.video?
 
+## Get started [here](/get-started/start-building.md)!
 
-<div class="section-header">
-  <hr/>
+<hr>
 
-  ### New to api.video?
-  ## Get started [here](/get-started/start-building.md)!
 </div>
 
 Welcome to the developer documentation of api.video! Our platform empowers developers and businesses to seamlessly integrate video functionality into their applications and services. Whether you're looking to offer video on demand, live streaming, or leverage our player and analytics features, the api.video API is designed to simplify the process.
@@ -38,7 +35,7 @@ api.video provides you with the possibility to embed live streaming into your ap
 
 {% endcapture %}
 
-{% capture player-analytics-description %}
+{% capture delivery-analytics-description %}
 
 api.video lets you customize a large part of the delivery, whether it's the player's branding or adding captions, chapters, and watermarks.
 
@@ -48,73 +45,63 @@ api.video lets you customize a large part of the delivery, whether it's the play
 
 {% 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" %}
+{% include "_partials/product-card.md" product: "Delivery", subheading: "& analytics", description: delivery-analytics-description, link: "/delivery-analytics/README.md" %}
 
 </div>
 
 
 <div class="section-header">
-  <hr/>
 
-  ### Section header
-  ## Quick links
-</div>
+<hr/>
 
+### Section header
+
+## Quick links
 
+</div>
 
 <div class="quick-links">
 {% capture get-started-links %}
-{% 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: "/" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/setup-checklist.svg", label: "Start building with api.video", link: "/get-started/start-building" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/vod-quickstart.svg", label: "VOD quickstart", link: "/vod/get-started-in-5-minutes" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/livestream-quickstart.svg", label: "Live streaming quickstart", link: "/live-streaming/create-a-live-stream" %}
 {% endcapture %}
 
-{% capture sdks-and-plugins %}
-{% 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: "/" %}
+{% capture libraries-sdks %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/github.svg", label: "API clients", link: "/sdks/api-clients" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/videos-sdks.svg", label: "Video libraries & SDKs", link: "/sdks/vod" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/livestream-sdks.svg", label: "Live streaming libraries & SDKs", link: "/sdks/livestream" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/player-sdks.svg", label: "Delivery & analytics SDKs", link: "/sdks/player" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/no-code.svg", label: "No-code solutions", link: "/sdks/nocode" %}
 {% endcapture %}
 
 {% capture understand-api-video %}
-{% 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: "/" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/setup-checklist.svg", label: "Help Center and FAQs", link: "https://help.api.video/en/" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "API reference", link: "/reference" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "Blog", link: "https://api.video/blog/" %}
+{% include "_partials/quick-link.md" icon: "/_assets/icons/js.svg", label: "Changelog", link: "https://api.video/changelog/" %}
 {% endcapture %}
 
 
 {% 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: "sdks", title: "Libraries & SDKs", content: libraries-sdks %}
 {% include "_partials/quick-links-container.md" name: "understand", title: "Understand api.video", content: understand-api-video %}
 
 </div>
 
 
 <div class="section-header"> 
-  <hr/>
-
-  ### Section header
-  ## Need help?
-</div>
-
 
-<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> 
+<hr/>
 
+### Section header
 
-<div class="section-header"> 
-  <hr/>
+## Need help?
 
-  ### 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 class="support-cards">
+{% include "_partials/support-card.md" label: "Browse Help Center", icon: "/_assets/icons/js.svg", link: "https://help.api.video/en/" %}
+{% include "_partials/support-card.md" label: "Ask the Community", icon: "/_assets/icons/js.svg", link: "https://community.api.video/" %}
 </div>

_assets/css/components/product-card.css

@@ -49,7 +49,7 @@
   );
 }
 
-.product-grid-item-header.Player {
+.product-grid-item-header.Delivery {
   background: var(
     --AV_BG_Gradient,
     radial-gradient(

_partials/content-card.md

@@ -7,6 +7,6 @@
 
 <p class="content-card-description">{{description}}</p>
 
-<a class="content-card-link" href="{{link}}">Learn mode</a>
+<a class="content-card-link" href="{{link}}">Learn more</a>
 
 </div>

delivery-analytics/README.md

@@ -26,31 +26,22 @@ meta:
   <br />
 </p>
 
+<div class="section-header"> 
 
+<hr/>
 
-### (TODO: quick link cards should list the nav elements of the Player & analytics section)
+## Start delivering with api.video
 
-## Start working with api.video
+</div>
 
+<div class="content-cards">
+{% include "_partials/content-card.md" label: "Best practices for delivery", icon: "/_assets/icons/js.svg", description: "Learn how to make the most of your delivery.", link: "/delivery-analytics/player-best-practices" %}
+{% include "_partials/content-card.md" label: "Analytics", icon: "/_assets/icons/analytics.svg", description: "Start collecting delivery event data about your videos and live streams.", link: "/delivery-analytics/analytics" %}
+{% include "_partials/content-card.md" label: "Using custom domains", icon: "/_assets/icons/custom-domains.svg", description: "Maintain your company branding by delivering through custom domains", link: "/delivery-analytics/using-custom-domains" %}
+{% include "_partials/content-card.md" label: "Domain referrer restrictions", icon: "/_assets/icons/js.svg", description: "Make sure that your videos and live streams are delivered securely, and only through your domains", link: "/delivery-analytics/domain-referrer" %}
+{% include "_partials/content-card.md" label: "In-stream ads", icon: "/_assets/icons/js.svg", description: "Implement in-stream ads to monetize your videos and live streams conveniently.", link: "/delivery-analytics/ads" %}
+{% include "_partials/content-card.md" label: "Private videos", icon: "/_assets/icons/js.svg", description: "Learn how you can secure and manage access to your videos.", link: "/delivery-analytics/private-video-get-started" %}
+{% include "_partials/content-card.md" label: "Player SDKs", icon: "/_assets/icons/player-sdks.svg", description: "Check out api.video's dedicated video player libraries and SDKs.", link: "/sdks/player#player-sdks" %}
+{% include "_partials/content-card.md" label: "Analytics SDKs", icon: "/_assets/icons/analytics.svg", description: "Check out api.video's dedicated libraries and SDKs for delivery analytics.", link: "/sdks/player#player-analytics-sdks" %}
+</div>
 
-<div class="link-cards">
-{% capture vod-quickstart-description %}
-
-Enable your users to upload and store videos, which can be easily delivered and shared across various platforms.
-
-<br>
-
-{% endcapture %}
-
-{% capture live-stream-quickstart-description %}
-
-api.video provides you with the possibility to embed live streaming into your application or project seamlessly.
-
-<br>
-
-{% endcapture %}
-
-{% include "_partials/vod-quickstart-link-card.md" product: "VOD quickstart", description: vod-quickstart-description, link: "/vod/get-started-in-5-minutes.md" %}
-{% include "_partials/live-stream-quickstart-link-card.md" product: "Live stream quickstart", description: live-stream-quickstart-description, link: "/live-streaming/create-a-live-stream.md" %}
-
-</div>

delivery-analytics/navigation.yaml

@@ -18,6 +18,8 @@
     href: /delivery-analytics/video-privacy-access-management.md
     collapsed: true
     items:
+    - label: Get started with private videos
+      href: /delivery-analytics/private-video-get-started.md
     - label: Delivery with api.video players
       href: /delivery-analytics/private-video-delivery-web-browser.md
     - label: Delivery with hls or external players
@@ -51,6 +53,4 @@
     collapsed: true
     items:
     - label: How to - analytics with api.video Player SDK
-      href: /delivery-analytics/how-to-player-sdk-analytics.md
-    - label: Using video metadata for analytics
-      href: /delivery-analytics/using-video-metadata.md
+      href: /delivery-analytics/how-to-player-sdk-analytics.md