fix(docs): add split Get Started button to main docs page with audience links (#39467)

docs/src/components/GetStartedSplitButton.tsx

@@ -0,0 +1,155 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { DownOutlined } from '@ant-design/icons';
+import Link from '@docusaurus/Link';
+import { Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
+import styled from '@emotion/styled';
+import { mq } from '../utils.js';
+
+const getStartedMenuItems: MenuProps['items'] = [
+  { key: 'users', label: <Link to="/user-docs/">Users</Link> },
+  { key: 'admins', label: <Link to="/admin-docs/">Admins</Link> },
+  { key: 'developers', label: <Link to="/developer-docs/">Developers</Link> },
+];
+
+const Root = styled.div<{ $variant: 'hero' | 'navbar' }>`
+  display: flex;
+  align-items: stretch;
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
+  font-weight: bold;
+
+  ${({ $variant }) =>
+    $variant === 'hero'
+      ? `
+    width: 208px;
+    margin: 15px auto 0;
+    font-size: 20px;
+    ${mq[1]} {
+      font-size: 19px;
+      width: 214px;
+    }
+  `
+      : `
+    width: 176px;
+    margin-right: 20px;
+    font-size: 18px;
+  `}
+
+  .split-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    text-decoration: none;
+    min-width: 0;
+    ${({ $variant }) =>
+      $variant === 'hero'
+        ? `padding: 10px 10px;`
+        : `padding: 7px 8px;`}
+  }
+
+  .split-main:hover {
+    color: #ffffff;
+  }
+
+  .split-divider {
+    width: 1px;
+    flex-shrink: 0;
+    align-self: stretch;
+    background: rgba(255, 255, 255, 0.38);
+    ${({ $variant }) =>
+      $variant === 'hero'
+        ? `margin: 8px 0;`
+        : `margin: 6px 0;`}
+  }
+
+  .split-dropdown-trigger {
+    flex-shrink: 0;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: #ffffff;
+    ${({ $variant }) =>
+      $variant === 'hero'
+        ? `
+      width: 44px;
+      font-size: 11px;
+      ${mq[1]} {
+        width: 46px;
+      }
+    `
+        : `
+      width: 38px;
+      font-size: 10px;
+    `}
+  }
+
+  .split-dropdown-trigger:hover {
+    color: #ffffff;
+  }
+`;
+
+export type GetStartedSplitButtonProps = {
+  variant: 'hero' | 'navbar';
+  /** Classes for the outer control (include default-button-theme get-started-split) */
+  rootClassName: string;
+};
+
+export default function GetStartedSplitButton({
+  variant,
+  rootClassName,
+}: GetStartedSplitButtonProps) {
+  const menuClassName = `get-started-split-dropdown-menu get-started-split-dropdown-menu--${variant}`;
+
+  return (
+    <Root $variant={variant} className={rootClassName}>
+      <Link to="/user-docs/" className="split-main">
+        Get Started
+      </Link>
+      <span className="split-divider" aria-hidden />
+      <Dropdown
+        menu={{
+          items: getStartedMenuItems,
+          className: menuClassName,
+        }}
+        trigger={['click']}
+        placement="bottomRight"
+      >
+        <button
+          type="button"
+          className="split-dropdown-trigger"
+          aria-haspopup="menu"
+          aria-label="Choose documentation: Users, Admins, or Developers"
+        >
+          <DownOutlined />
+        </button>
+      </Dropdown>
+    </Root>
+  );
+}