diff --git a/docs/intro/next.md b/docs/intro/next.md index e63809f7654..cb145eac51b 100644 --- a/docs/intro/next.md +++ b/docs/intro/next.md @@ -13,6 +13,8 @@ title: Next Steps import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; +import DeveloperExperts from '@components/page/intro/next/DeveloperExperts'; + ## Build Your First App Pick the JavaScript framework you plan to use while building your Ionic app: @@ -30,3 +32,5 @@ Pick the JavaScript framework you plan to use while building your Ionic app:

A complete guide to get you up to speed with the basics of building Ionic apps with Vue.

+ + diff --git a/src/components/page/intro/next/DeveloperExperts/index.module.scss b/src/components/page/intro/next/DeveloperExperts/index.module.scss new file mode 100644 index 00000000000..f61f1bc4b7d --- /dev/null +++ b/src/components/page/intro/next/DeveloperExperts/index.module.scss @@ -0,0 +1,39 @@ +.developerExperts { + background-color: var(--c-indigo-10); + + padding: 2.5rem; + + border-radius: 16px; + + margin-block-start: 1.35rem; + + header { + max-width: 29rem; + } + + &Title { + margin-block-end: 0.5rem; + } + + &Description { + margin-block-end: 2.5rem; + + line-height: 1.6 !important; + + color: var(--c-indigo-90); + } + + &Links { + max-width: 38.313rem; + + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 1rem; + + a { + font-weight: 600; + } + } +} diff --git a/src/components/page/intro/next/DeveloperExperts/index.tsx b/src/components/page/intro/next/DeveloperExperts/index.tsx new file mode 100644 index 00000000000..c55c2462127 --- /dev/null +++ b/src/components/page/intro/next/DeveloperExperts/index.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import styles from './index.module.scss'; + +export default function DeveloperExperts() { + return ( +
+
+

Featured Ionic Developer Expert Projects

+

+ Extend your knowledge of Ionic from premium educational materials made by community members. +

+
+
+ + Ionic Academy → + + + Elite Ionic → + + + Ionic Themes → + + + Ionic React Hub → + +
+
+ ); +} diff --git a/versioned_docs/version-v5/intro/next.md b/versioned_docs/version-v5/intro/next.md index d442c3c56f6..c284f5260e6 100644 --- a/versioned_docs/version-v5/intro/next.md +++ b/versioned_docs/version-v5/intro/next.md @@ -1,6 +1,8 @@ import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; +import DeveloperExperts from '@components/page/intro/next/DeveloperExperts'; + # Next Steps ## Build Your First App @@ -20,3 +22,5 @@ Pick the JavaScript framework you plan to use while building your Ionic app:

A complete guide to get you up to speed with the basics of building Ionic apps with Vue.

+ + diff --git a/versioned_docs/version-v6/intro/next.md b/versioned_docs/version-v6/intro/next.md index e63809f7654..cb145eac51b 100644 --- a/versioned_docs/version-v6/intro/next.md +++ b/versioned_docs/version-v6/intro/next.md @@ -13,6 +13,8 @@ title: Next Steps import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; +import DeveloperExperts from '@components/page/intro/next/DeveloperExperts'; + ## Build Your First App Pick the JavaScript framework you plan to use while building your Ionic app: @@ -30,3 +32,5 @@ Pick the JavaScript framework you plan to use while building your Ionic app:

A complete guide to get you up to speed with the basics of building Ionic apps with Vue.

+ +