fix(website): fix broken homepage links

packages/website/src/components/homepage/header/index.tsx

@@ -8,7 +8,6 @@ import {
   EuiDescriptionList,
   EuiDescriptionListDescription,
   EuiDescriptionListTitle,
-  EuiIcon,
   EuiLink,
   useEuiMemoizedStyles,
   UseEuiTheme,
@@ -131,12 +130,12 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
         block-size: ${form.controlHeight};
       }
 
-      // overwrride original header use case behavior
+      // override original header use case behavior
       .ds-dropdown-menu {
         position: absolute !important;
 
         &:before {
-          left: ${euiTheme.size.xl}; // align carret with search input
+          left: ${euiTheme.size.xl}; // align caret with search input
         }
       }
     `,
@@ -184,11 +183,11 @@ const getStyles = (euiThemeContext: UseEuiTheme) => {
         right: 0;
         bottom: 0;
         overflow: hidden;
+        z-index: -1;
       `,
       decor: css`
         position: absolute;
         top: 0;
-        z-index: -1;
         block-size: 100%;
         inline-size: 15%;
 
@@ -246,13 +245,23 @@ export function HomepageHeader() {
             </NavbarSearch>
           </div>
           <div css={styles.actions}>
-            <EuiButton href="/docs" fill css={styles.button}>
+            <EuiButton
+              href="./docs/guidelines/getting-started"
+              fill
+              css={styles.button}
+            >
               Get started
             </EuiButton>
-            <EuiLink href="https://github.com/elastic/eui/tree/main/packages/eui/changelogs">
+            <EuiLink
+              href="https://github.com/elastic/eui/tree/main/packages/eui/changelogs"
+              target="_blank"
+            >
               What's new?
             </EuiLink>
-            <EuiLink href="https://github.com/elastic/eui/tree/main/wiki/contributing-to-eui">
+            <EuiLink
+              href="https://github.com/elastic/eui/tree/main/wiki/contributing-to-eui"
+              target="_blank"
+            >
               Contribute
             </EuiLink>
           </div>

packages/website/src/components/homepage/highlights/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Heading from '@theme/Heading';
 import {
   EuiButtonEmpty,
@@ -28,80 +29,80 @@ import SvgTable from './svg/table.svg';
 const CONTENT_DATA = [
   {
     title: 'Flexible layout',
-    href: '/docs/layout/flex',
+    href: './docs/layout/flex',
     svg: SvgFlex,
     description:
       'Flex groups, grids, panels and items to build responsive page layout',
   },
   {
     title: 'Spacer',
-    href: '/docs/layout/spacer/',
+    href: './docs/layout/spacer/',
     svg: SvgSpacer,
     description:
       'Component with strictly defined height to organise content blocks',
   },
   {
     title: 'Text',
-    href: '/docs/display/text',
+    href: './docs/display/text',
     svg: SvgText,
     description:
       'Simple HTML text like paragraphs or lists, wrapped in a single component',
   },
   {
     title: 'Title',
-    href: '/docs/display/title',
+    href: './docs/display/title',
     svg: SvgTitle,
     description:
       'Component for styling the page, section, and content headings',
   },
   {
     title: 'Forms',
-    href: '/docs/components/form-controls',
+    href: './docs/forms/text/',
     svg: SvgForm,
     description: 'Inputs with validation, grouped into a flexible form layout',
   },
   {
     title: 'Button',
-    href: '/docs/navigation/button',
+    href: './docs/navigation/button',
     svg: SvgButton,
     description:
       'Variety of buttons and button groups with different styles and colours',
   },
   {
     title: 'Link',
-    href: '/docs/navigation/link',
+    href: './docs/navigation/link',
     svg: SvgLink,
     description: 'Component designed to display nicely within a block of text',
   },
   {
     title: 'Tooltip',
-    href: '/docs/display/tooltip',
+    href: './docs/display/tooltip',
     svg: SvgTooltip,
     description:
       'Contextual information hint with flexible positioning and behavior',
   },
   {
     title: 'Panel',
-    href: '/docs/layout/panel',
+    href: './docs/layout/panel',
     svg: SvgPanel,
     description: 'Layout helper, commonly used as a base for other components',
   },
   {
     title: 'Callout',
-    href: '/docs/display/callout',
+    href: './docs/display/callout',
     svg: SvgCallout,
     description: 'Important message directly related to content on the page',
   },
   {
     title: 'Card',
-    href: '/docs/display/card',
+    href: './docs/display/card',
     svg: SvgCard,
     description:
       'Vertical or horizontal cards, containing any custom components needed',
   },
   {
     title: 'Table',
-    href: '/docs/components/table',
+    href: './docs/tabular-content/tables',
     svg: SvgTable,
     description:
       'Flexible tables with sorting, pagination, selection and actions',
@@ -263,7 +264,7 @@ export const HomepageHighlights = () => {
         </ul>
 
         <div css={styles.actions}>
-          <EuiButtonEmpty href="/docs/components/" css={styles.button}>
+          <EuiButtonEmpty href="./docs/guidelines/getting-started/" css={styles.button}>
             All components
             <EuiIcon type="sortRight" size="s" css={styles.icon} />
           </EuiButtonEmpty>

packages/website/src/components/homepage/users/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { css } from '@emotion/react';
 import Heading from '@theme/Heading';
 import {
@@ -17,39 +18,40 @@ const CONTENT_DATA = {
     {
       title: 'Getting started',
       description: 'Install framework and make initial adjustments',
-      href: '/docs/guidelines/getting-started/',
+      href: './docs/guidelines/getting-started/',
       icon: 'keyboard',
     },
     {
       title: 'Contributing',
       description: 'Help EUI improve even faster',
       href: 'https://github.com/elastic/eui/tree/main/wiki/contributing-to-eui',
       icon: 'plusInCircle',
+      target: '_blank',
     },
     {
       title: 'Tokens',
       description: 'Speed up your work by using and customizing tokens',
-      href: '/docs/',
+      href: './docs/theming/colors/',
       icon: 'brush',
     },
   ],
   designer: [
     {
       title: 'Patterns',
       description: 'Preferred solutions to specific user needs',
-      href: '/docs/patterns/confirmation-prompts/',
+      href: './docs/patterns/confirmation-prompts/',
       icon: 'logPatternAnalysis',
     },
     {
       title: 'Content',
       description: 'Write thoughtful and consistent in-product copy',
-      href: '/docs/content',
+      href: './docs/content',
       icon: 'pencil',
     },
     {
       title: 'Icons',
       description: 'A wide variety of icons to enhance your designs',
-      href: '/docs/components/icons',
+      href: './docs/display/icons',
       icon: 'package',
     },
   ],