From 6428906d94fc315a38d20753274d449feccab54d Mon Sep 17 00:00:00 2001
From: Daniel Barion <danielbarionn@gmail.com>
Date: Tue, 3 Dec 2024 16:34:41 -0300
Subject: [PATCH] docs: add extraLink param into featured items

---
 docs/src/components/HomepageSponsored/index.tsx | 17 +++++++++++++++--
 .../HomepageSponsored/styles.module.css         |  5 +++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/HomepageSponsored/index.tsx b/docs/src/components/HomepageSponsored/index.tsx
index 184acd6b..03b97880 100644
--- a/docs/src/components/HomepageSponsored/index.tsx
+++ b/docs/src/components/HomepageSponsored/index.tsx
@@ -15,6 +15,7 @@ type FeatureItem = {
   eventTitle?: string
   link: string
   allowsDarkMode?: boolean
+  extraLink?: string
 }
 
 type SponsorItem = FeatureItem & {
@@ -26,6 +27,7 @@ const FeatureList: FeatureItem[] = [
     title: 'Digital Ocean',
     Svg: require('@site/static/img/digital-ocean-powered-by.svg').default,
     link: 'https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge',
+    extraLink: '/blog/digital-ocean-app-platform',
   },
   {
     title: 'Algolia',
@@ -52,10 +54,10 @@ const SponsorList: SponsorItem[] = [
   // },
 ]
 
-function Feature({ title, Svg, link, allowsDarkMode }: FeatureItem) {
+function Feature({ title, Svg, link, allowsDarkMode, extraLink }: FeatureItem) {
   return (
     <div className={clsx('col col--6')}>
-      <div className="text--center">
+      <div className={clsx('text--center', styles['feature-item'])}>
         <a href={link} title={title} target="_blank" rel="noreferrer" aria-label={title}>
           <Svg
             className={clsx(styles.featureSvg, {
@@ -64,6 +66,17 @@ function Feature({ title, Svg, link, allowsDarkMode }: FeatureItem) {
             role="img"
           />
         </a>
+        {extraLink && (
+          <a
+            href={extraLink}
+            title={`Learn more about ${title}`}
+            target="_blank"
+            rel="noreferrer"
+            className={styles.featureLink}
+          >
+            Learn more about {title}
+          </a>
+        )}
       </div>
     </div>
   )
diff --git a/docs/src/components/HomepageSponsored/styles.module.css b/docs/src/components/HomepageSponsored/styles.module.css
index 512e506c..51e2dd39 100644
--- a/docs/src/components/HomepageSponsored/styles.module.css
+++ b/docs/src/components/HomepageSponsored/styles.module.css
@@ -20,6 +20,11 @@
   gap: 21px;
 }
 
+.feature-item {
+  display: flex;
+  flex-direction: column;
+}
+
 @media screen and (min-width: 1024px) {
   .features {
     display: flex;