diff --git a/pages/learning-center/cards.ts b/pages/learning-center/cards.ts
new file mode 100644
index 00000000..3d7f1242
--- /dev/null
+++ b/pages/learning-center/cards.ts
@@ -0,0 +1,136 @@
+import openApiThumbnail from './images/open-api-thumbnail.svg';
+import markdocThumbnail from './images/markdoc-thumbnail.svg';
+import yamlThumbnail from './images/yaml-thumbnail.svg';
+import apiGovernanceThumbnail from './images/api-governance-thumbnail.svg';
+import apiTestingThumbnail from './images/api-testing-thumbnail.svg';
+import apiSecurityThumbnail from './images/api-security-thumbnail.svg';
+import graphqlThumbnail from './images/graphql-thumbnail.svg';
+import arazzoThumbnail from './images/arazzo-thumbnail.svg';
+
+export const cards = [
+ {
+ id: 1,
+ key: 'open-api',
+ title: 'OpenAPI',
+ description: 'Resources for learning more about OpenAPI and how to use it.',
+ thumbnail: openApiThumbnail,
+ moreItems: '40 more topics',
+ landingPage: '/learn/openapi/learning-openapi',
+ items: [
+ { title: 'What is OpenAPI?', link: '/learn/openapi/learning-openapi' },
+ { title: 'OpenAPI best practices', link: '/learn/openapi/openapi-decisions' },
+ { title: '$ref guide', link: '/learn/openapi/ref-guide' },
+ { title: 'Discriminator', link: '/learn/openapi/discriminator' },
+ ],
+ },
+ {
+ id: 2,
+ key: 'arazzo',
+ title: 'Arazzo',
+ description:
+ 'Learn how to use Arazzo to describe practical API workflows.',
+ thumbnail: arazzoThumbnail,
+ moreItems: '4 more topics',
+ landingPage: '/learn/arazzo/what-is-arazzo',
+ items: [
+ { title: 'What is Arazzo?', link: '/learn/arazzo/what-is-arazzo' },
+ { title: 'Getting Started with Arazzo', link: '/learn/arazzo/why-arazzo-matters' },
+ { title: 'Arazzo walkthrough', link: '/learn/arazzo/arazzo-walkthrough' },
+ { title: 'Best Practices for Arazzo Integration', link: '/learn/arazzo/arazzo-basics' },
+ ],
+ },
+ {
+ id: 3,
+ key: 'markdoc',
+ title: 'Markdoc',
+ description: 'Next-generation markup resources and detailed tag library.',
+ thumbnail: markdocThumbnail,
+ moreItems: '11 more topics',
+ landingPage: '/learn/markdoc',
+ items: [
+ { title: 'What is Markdoc?', link: '/learn/markdoc' },
+ { title: 'Getting started with Markdoc', link: '/learn/markdoc/write-with-markdoc' },
+ { title: 'Markdoc benefits', link: '/learn/markdoc/evaluating-markdoc' },
+ { title: 'Table tag', link: '/learn/markdoc/tags/table' },
+ ],
+ },
+ {
+ id: 4,
+ key: 'yaml',
+ title: 'YAML',
+ description: 'Learn how to use YAML in your API documentation and configuration.',
+ thumbnail: yamlThumbnail,
+ moreItems: '4 more topics',
+ landingPage: '/learn/yaml',
+ items: [
+ { title: 'What is YAML?', link: '/learn/yaml' },
+ { title: 'The basics of YAML', link: '/learn/yaml/scalars' },
+ { title: 'YAML or JSON', link: '/learn/yaml/yaml-or-json' },
+ { title: 'Troubleshooting YAML', link: '/learn/yaml/troubleshooting' },
+ ],
+ },
+ // {
+ // id: 5,
+ // key: 'api-governance',
+ // title: 'API governance',
+ // description: 'Use our interactive tool to build linting rules for your API.',
+ // thumbnail: apiGovernanceThumbnail,
+ // moreItems: ' more topics',
+ // landingPage: '/',
+ // items: [
+ // { title: 'What is API governance?', link: '' },
+ // { title: 'Setting Up Linting Rules', link: '' },
+ // { title: 'Customizing API Guidelines ', link: '' },
+ // { title: 'Best Practices for API Standards', link: '' },
+ // ],
+ // },
+ // {
+ // id: 6,
+ // key: 'api-testing',
+ // title: 'API Testing',
+ // description:
+ // 'Discover essential resources for mastering API testing, including tools, techniques, and best practices for reliable integrations.',
+ // thumbnail: apiTestingThumbnail,
+ // moreItems: ' more topics',
+ // landingPage: '/',
+ // items: [
+ // { title: 'Introduction to API Testing', link: '' },
+ // { title: 'Tools for API Testing', link: '' },
+ // { title: 'Creating Effective Test Cases', link: '' },
+ // { title: 'API Testing Best Practices ', link: '' },
+ // ],
+ // },
+ // {
+ // id: 7,
+ // key: 'api-security',
+ // title: 'API Security',
+ // description:
+ // 'Gain insights into securing your APIs with essential resources, tools, and best practices to protect your applications.',
+ // thumbnail: apiSecurityThumbnail,
+ // moreItems: ' more topics',
+ // landingPage: '/',
+ // items: [
+ // { title: 'Introduction to API Security', link: '' },
+ // { title: 'Common API Vulnerabilities', link: '' },
+ // { title: 'Implementing Authentication and Authorization examples', link: '' },
+ // { title: 'Best Practices for Securing APIs', link: '' },
+ // ],
+ // },
+ // {
+ // id: 8,
+ // key: 'graphql',
+ // title: 'GraphQL',
+ // description:
+ // 'Explore resources to deepen your understanding of GraphQL, from the basics to advanced queries and best practices.',
+ // thumbnail: graphqlThumbnail,
+ // moreItems: ' more topics',
+ // landingPage: '/',
+ // items: [
+ // { title: 'What is GraphQL?', link: '' },
+ // { title: 'Getting Started with GraphQL', link: '' },
+ // { title: 'Advanced GraphQL Queries', link: '' },
+ // { title: 'Best Practices for API Integration', link: '' },
+ // ],
+ // },
+
+];
\ No newline at end of file
diff --git a/pages/learning-center/images/api-governance-thumbnail.svg b/pages/learning-center/images/api-governance-thumbnail.svg
new file mode 100644
index 00000000..a37e8996
--- /dev/null
+++ b/pages/learning-center/images/api-governance-thumbnail.svg
@@ -0,0 +1,9 @@
+
diff --git a/pages/learning-center/images/api-security-thumbnail.svg b/pages/learning-center/images/api-security-thumbnail.svg
new file mode 100644
index 00000000..40b68b36
--- /dev/null
+++ b/pages/learning-center/images/api-security-thumbnail.svg
@@ -0,0 +1,9 @@
+
diff --git a/pages/learning-center/images/api-testing-thumbnail.svg b/pages/learning-center/images/api-testing-thumbnail.svg
new file mode 100644
index 00000000..89f4fe6d
--- /dev/null
+++ b/pages/learning-center/images/api-testing-thumbnail.svg
@@ -0,0 +1,9 @@
+
diff --git a/pages/learning-center/images/arazzo-thumbnail.svg b/pages/learning-center/images/arazzo-thumbnail.svg
new file mode 100644
index 00000000..8d46e2f8
--- /dev/null
+++ b/pages/learning-center/images/arazzo-thumbnail.svg
@@ -0,0 +1,14 @@
+
diff --git a/pages/learning-center/images/graphql-thumbnail.svg b/pages/learning-center/images/graphql-thumbnail.svg
new file mode 100644
index 00000000..a0bd86de
--- /dev/null
+++ b/pages/learning-center/images/graphql-thumbnail.svg
@@ -0,0 +1,9 @@
+
diff --git a/pages/learning-center/images/markdoc-thumbnail.svg b/pages/learning-center/images/markdoc-thumbnail.svg
new file mode 100644
index 00000000..87e0f11b
--- /dev/null
+++ b/pages/learning-center/images/markdoc-thumbnail.svg
@@ -0,0 +1,9 @@
+
diff --git a/pages/learning-center/images/open-api-thumbnail.svg b/pages/learning-center/images/open-api-thumbnail.svg
new file mode 100644
index 00000000..2911c8ba
--- /dev/null
+++ b/pages/learning-center/images/open-api-thumbnail.svg
@@ -0,0 +1,9 @@
+
diff --git a/pages/learning-center/images/yaml-thumbnail.svg b/pages/learning-center/images/yaml-thumbnail.svg
new file mode 100644
index 00000000..cde2164a
--- /dev/null
+++ b/pages/learning-center/images/yaml-thumbnail.svg
@@ -0,0 +1,9 @@
+
diff --git a/pages/learning-center/learn.page.tsx b/pages/learning-center/learn.page.tsx
index 9dda5281..8b28bd3b 100644
--- a/pages/learning-center/learn.page.tsx
+++ b/pages/learning-center/learn.page.tsx
@@ -1,4 +1,7 @@
+import * as React from 'react';
+
import Page from '@redocly/marketing-pages/pages/learning-center/learn.page.js';
+import { cards } from './cards';
export const frontmatter = {
seo: {
@@ -7,4 +10,6 @@ export const frontmatter = {
slug: '/learn',
};
-export default Page;
\ No newline at end of file
+export default function() {
+ return
+}
\ No newline at end of file
diff --git a/types/custom.d.ts b/types/custom.d.ts
new file mode 100644
index 00000000..8af1fb2e
--- /dev/null
+++ b/types/custom.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+ const content: string;
+ export default content;
+}
\ No newline at end of file