Add install buttons with links to selector tool

Author: yatarkan

site/src/components/Installation/installation.tsx

@@ -1,51 +1,63 @@
+import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
-import Link from '@docusaurus/Link';
+import Button from '@site/src/components/Button';
 import LinuxLogo from '@site/static/img/linux-logo.svg';
 import MacOSLogo from '@site/static/img/mac-os-logo.svg';
 import WindowsLogo from '@site/static/img/windows-logo.svg';
 import Heading from '@theme/Heading';
 
+const getInstallLink = (os: 'WINDOWS' | 'MACOS' | 'LINUX') =>
+  `https://docs.openvino.ai/2025/get-started/install-openvino.html?PACKAGE=OPENVINO_GENAI&VERSION=v_2025_0_0&OP_SYSTEM=${os}&DISTRIBUTION=PIP`;
+
 const INSTALLATION_ITEMS = [
   {
-    title: 'Linux install',
+    title: 'Linux',
     Icon: LinuxLogo,
+    link: getInstallLink('LINUX'),
   },
   {
-    title: 'Windows install',
+    title: 'Windows',
     Icon: WindowsLogo,
+    link: getInstallLink('WINDOWS'),
   },
   {
-    title: 'MacOS install',
+    title: 'MacOS',
     Icon: MacOSLogo,
+    link: getInstallLink('MACOS'),
   },
 ];
 
-const InstallationItems = () => {
+const InstallationOptions = () => {
   return (
-    <ul className={styles.installationOptions}>
-      {INSTALLATION_ITEMS.map(({ title, Icon }) => (
-        <li key={title} className={styles.installationOptionsItem}>
-          <Icon role="img" aria-label={title} />
-          <span>{title}</span>
-        </li>
+    <div className={styles.installationOptions}>
+      {INSTALLATION_ITEMS.map(({ title, Icon, link }) => (
+        <Button
+          key={title}
+          label={title}
+          Icon={Icon}
+          link={link}
+          size="lg"
+          outline
+          variant="secondary"
+        />
       ))}
-    </ul>
+    </div>
   );
 };
 
 export const Installation = () => {
   return (
     <section className={styles.installation}>
-      <Heading as="h4" className={styles.installationTitle}>
+      <Heading as="h2" className={styles.installationTitle}>
         Install OpenVINO™ GenAI
       </Heading>
       <p className={styles.installationDescription}>
         Unlock the power of OpenVINO GenAI™ for your projects. <br />
         Get started with seamless installation now!
       </p>
 
-      <InstallationItems />
+      <InstallationOptions />
 
       <p>
         Full list of installation options <Link href="docs/overview/installation">here</Link>

site/src/components/Installation/styles.module.css

@@ -1,28 +1,9 @@
 .installation {
-  background: none;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 24px;
-}
-
-.installationOptions {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 24px;
-}
-
-.installationOptionsItem {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #e9e9e9;
-  font-weight: 500;
-  height: 64px;
-  width: 280px;
-  gap: 16px;
+  gap: 1.5rem;
 }
 
 .installationTitle {
@@ -34,5 +15,19 @@
 
 .installationDescription {
   margin: 0 auto;
-  text-align: center;
+}
+
+.installationOptions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+
+  button {
+    --button-icon-size: 2.25rem;
+
+    width: 14rem;
+    height: 4rem;
+    font-size: 1rem;
+  }
 }