From 41fa11e2565486a3a35a9f93ec39580326115c41 Mon Sep 17 00:00:00 2001
From: dobromirts <dobromir.ts@gmail.com>
Date: Mon, 22 Jun 2026 14:49:11 +0300
Subject: [PATCH] fix(ctaArea): resolve root relative hrefs

---
 .../xplat/src/content/en/components/grids/grids-header.mdx | 2 +-
 .../xplat/src/content/jp/components/grids/grids-header.mdx | 2 +-
 src/components/mdx/CtaArea/CtaArea.astro                   | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/docs/xplat/src/content/en/components/grids/grids-header.mdx b/docs/xplat/src/content/en/components/grids/grids-header.mdx
index e3c6b3296c..70406128f7 100644
--- a/docs/xplat/src/content/en/components/grids/grids-header.mdx
+++ b/docs/xplat/src/content/en/components/grids/grids-header.mdx
@@ -86,7 +86,7 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
     title="Quick and Easy to Customize, Build and Implement"
     description="The Ignite UI {Platform} Data Grid can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code."
     label="View Samples"
-    href="data-grid.md"
+    href="data-grid"
 />
 
 <Feature
diff --git a/docs/xplat/src/content/jp/components/grids/grids-header.mdx b/docs/xplat/src/content/jp/components/grids/grids-header.mdx
index 6a696d08a4..cf64474503 100644
--- a/docs/xplat/src/content/jp/components/grids/grids-header.mdx
+++ b/docs/xplat/src/content/jp/components/grids/grids-header.mdx
@@ -288,7 +288,7 @@ h3#excel-library-for-the-angular-grid ~ h3{
     title="Quick and Easy to Customize, Build and Implement"
     description="The Ignite UI {Platform} Data Grid can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code."
     label="View Samples"
-    href="data-grid.md"
+    href="data-grid"
 />
 <hr style="border: .5px solid #ccc;" />
 <igc-divider></igc-divider>
diff --git a/src/components/mdx/CtaArea/CtaArea.astro b/src/components/mdx/CtaArea/CtaArea.astro
index 1c3a77d9a3..58192e158d 100644
--- a/src/components/mdx/CtaArea/CtaArea.astro
+++ b/src/components/mdx/CtaArea/CtaArea.astro
@@ -32,6 +32,11 @@ interface Props {
 
 const { title, description, label, href, note, logo = true, variant = 'default', backgroundImage, overlay } = Astro.props;
 
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+const resolvedHref = href.startsWith('/') && !href.startsWith('//')
+    ? `${base}${href}`
+    : href;
+
 const resolvedLogo = logo === true ? logoUrl : (typeof logo === 'string' ? logo : null);
 const isHorizontal = variant === 'horizontal';
 
@@ -60,7 +65,7 @@ const overlayColor = typeof overlay === 'string' ? overlay : undefined;
             {description && <p class="cta-area__description">{description}</p>}
         </div>
         <div class="cta-area__action">
-            <a class="cta-area__btn no-external-icon" href={href}>{label}</a>
+            <a class="cta-area__btn no-external-icon" href={resolvedHref}>{label}</a>
             {note && <p class="cta-area__note">{note}</p>}
         </div>
     </div>