styles(): Add developer experts cta section to intro/next page (#2908)

Author: jaredcbaum

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:
     <p>A complete guide to get you up to speed with the basics of building Ionic apps with Vue.</p>
   </DocsCard>
 </DocsCards>
+
+<DeveloperExperts />

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;
+    }
+  }
+}

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 (
+    <div className={styles.developerExperts}>
+      <header>
+        <h3 className={styles.developerExpertsTitle}>Featured Ionic Developer Expert Projects</h3>
+        <p className={styles.developerExpertsDescription}>
+          Extend your knowledge of Ionic from premium educational materials made by community members.
+        </p>
+      </header>
+      <div className={styles.developerExpertsLinks}>
+        <a href="https://ionicacademy.com" target="_blank" rel="noopener noreferrer">
+          Ionic Academy →
+        </a>
+        <a href="https://www.joshmorony.com/elite" target="_blank" rel="noopener noreferrer">
+          Elite Ionic →
+        </a>
+        <a href="https://ionicthemes.com" target="_blank" rel="noopener noreferrer">
+          Ionic Themes →
+        </a>
+        <a href="https://ionicreacthub.com" target="_blank" rel="noopener noreferrer">
+          Ionic React Hub →
+        </a>
+      </div>
+    </div>
+  );
+}

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:
     <p>A complete guide to get you up to speed with the basics of building Ionic apps with Vue.</p>
   </DocsCard>
 </DocsCards>
+
+<DeveloperExperts />

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:
     <p>A complete guide to get you up to speed with the basics of building Ionic apps with Vue.</p>
   </DocsCard>
 </DocsCards>
+
+<DeveloperExperts />