Added a landing page to demonstrate the concept

Signed-off-by: Gunasekhar Matamalam <gunasekhar.matamalam@suse.com>

src/components/CardComponents.tsx

@@ -0,0 +1,64 @@
+import React, { ReactNode } from 'react';
+import { paramCase } from 'param-case';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+
+export function CardSection({
+  id,
+  title,
+  icon,
+  children,
+  description,
+  className,
+  hasSubSections = false,
+  HeadingTag = 'h1',
+}: {
+  id?: string;
+  title?: string;
+  icon?: JSX.Element;
+  children: ReactNode;
+  description?: ReactNode;
+  hasSubSections?: boolean;
+  HeadingTag?: any;
+  className?: string;
+}) {
+  return (
+    <div
+      className={clsx(
+        'homepage-section',
+        hasSubSections && 'has-sub-sections',
+        className
+      )}
+    >
+      {title && <span><HeadingTag id={id ?? paramCase(title)}>{title}</HeadingTag></span>}
+      {description && <p className="section-description">{description}</p>}
+      <div className="section-content">{children}</div>
+    </div>
+  );
+}
+
+export function Card({
+  id,
+  icon,
+  title,
+  description,
+  to,
+}: {
+  id?: string;
+  icon?: JSX.Element;
+  title?: string;
+  description?: string;
+  to: string;
+}) {
+  return (
+    <Link to={to} className="homepage-card">
+      {icon && <div className="icon">{icon}</div>}
+      <div className="card-content">
+        <div className="title" id={id && paramCase(title)}>
+          {title}
+        </div>
+        {description && <div className="description">{description}</div>}
+      </div>
+    </Link>
+  );
+}

src/components/HomepageFeatures/poc-index.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import {Card, CardSection} from '../CardComponents';
+import {
+  ReadingModeMobileRegular, 
+  QuestionRegular, 
+  ArrowUpRegular,
+  PlayRegular,
+  FlowchartRegular,
+  RocketRegular
+} from '@fluentui/react-icons';
+import { FaAws, FaGoogle, FaCloud } from "react-icons/fa";
+
+export default function HomepageFeatures(): JSX.Element {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <br></br>
+        <CardSection
+          id="Gettingstarted"
+          icon={<RocketRegular />}
+          title="Getting Started"
+        >
+          <Card
+            title="What is Rancher?"
+            icon={<QuestionRegular />}
+            to="/intro"
+            description="Understand what Rancher is and is not"
+          />
+          <Card
+            title="Overview"
+            icon={<ReadingModeMobileRegular />}
+            to="/getting-started/overview"
+            description="Learn about the core capabilities"
+          />
+          <Card
+            title="Rancher Concepts"
+            icon={<FlowchartRegular />}
+            to="/pages-for-subheaders/rancher-manager-architecture"
+            description="Learn about high level concepts, architectural elements of Rancher"
+          />
+          <Card
+            title="Install Rancher"
+            icon={<ArrowUpRegular />}
+            to="/getting-started/quick-start-guides/deploy-rancher-manager/helm-cli"
+            description="Quick way to helm install Rancher in a Kubernetes cluster"
+          />
+          <Card
+            title="Deploy Workloads"
+            icon={<PlayRegular />}
+            to="/pages-for-subheaders/deploy-rancher-workloads"
+            description="Deploy a sample workload"
+          />
+        </CardSection>
+        <CardSection
+          id="CloudDeployments"
+          title="Cloud Deployment"
+        >
+          <Card
+            icon={<FaAws />}
+            to="/getting-started/installation-and-upgrade/install-upgrade-on-a-kubernetes-cluster/rancher-on-amazon-eks"
+            description="Deploy Rancher on an Amazon EKS cluster"
+          />
+          <Card
+            icon={<FaCloud />}
+            to="/getting-started/installation-and-upgrade/install-upgrade-on-a-kubernetes-cluster/rancher-on-aks"
+            description="Deploy Rancher on Microsoft's Azure Kubernetes Service (AKS)"
+          />
+          <Card
+            icon={<FaGoogle />}
+            to="/getting-started/installation-and-upgrade/install-upgrade-on-a-kubernetes-cluster/rancher-on-gke"
+            description="Deploy Rancher on Google Kubernetes Engine"
+          />
+        </CardSection>
+      </div>
+    </section>
+  );
+}

src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

src/css/custom.css

@@ -37,14 +37,13 @@
 }
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary-lightest: #80bbe2;
-  --ifm-color-primary-lighter: #5eaadb;
-  --ifm-color-primary-light: #53a4d8;
-  --ifm-color-primary: #3d98d3;
-  --ifm-color-primary-dark: #2d8bc8;
-  --ifm-color-primary-darker: #2b83bc;
-  --ifm-color-primary-darkest: #236c9b;
-  --ifm-code-font-size: 95%;
+  --ifm-color-primary: #2453ff;
+  --ifm-color-primary-dark: #073cff;
+  --ifm-color-primary-darker: #0035f7;
+  --ifm-color-primary-darkest: #002ccc;
+  --ifm-color-primary-light: #416aff;
+  --ifm-color-primary-lighter: #5075ff;
+  --ifm-color-primary-lightest: #7b98ff;
 }
 @media (max-width: 768px) {
   #theme-main h1 {
@@ -160,4 +159,120 @@ a.btn.navbar__github::before {
   height: 100%;
   width: 100%;
   position: absolute;
-}
+}
+
+.section-content {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.two-cols .section-content {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.has-sub-sections > h3 {
+  margin-bottom: 1.5rem;
+}
+
+.has-sub-sections > .section-content {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.has-sub-sections > .section-content > .homepage-section {
+  margin-bottom: 1rem;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.homepage-section {
+  margin-bottom: 3rem;
+}
+
+.homepage-section h3 {
+  font-weight: 600;
+}
+
+.section-description {
+  color: var(--docs-color-text-100);
+  margin: 0rem 0 1.25rem 0;
+  margin-top: -0.5rem;
+}
+
+.google-link {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+
+.has-sub-sections > .section-content .section-description {
+  font-size: 14px;
+}
+
+.homepage-card {
+  align-items: flex-start;
+  gap: 10px;
+  padding: 0.75rem;
+  text-decoration: none;
+  color: var(--docs-color-text);
+
+  --ifm-link-hover-decoration: none;
+  --ifm-link-hover-color: inherit;
+  cursor: pointer;
+  @apply flex flex-row items-center;
+  @apply border-secondary-800 bg-secondary-900 hover:bg-secondary-800;
+  border-width: 1px;
+  transition-property: background-color, color;
+
+  border-radius: 8px;
+}
+
+.homepage-card.row {
+  flex-direction: row;
+}
+
+.icon svg {
+  width: auto;
+  height: 100%;
+}
+
+.homepage-card .icon {
+  width: 48px;
+  height: 48px;
+  @apply mx-1;
+  /* background-color: #262626;
+  border-radius: 8px; */
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.card-content .title {
+  font-size: 16px;
+  letter-spacing: -0.5px;
+  font-weight: 600;
+}
+
+.card-content .description {
+  font-size: 14px;
+  color: var(--docs-color-text-100);
+  line-height: 1.5;
+}
+
+.homepage-card details {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--docs-color-text-100) !important;
+  background: var(--docs-color-background-100) !important;
+  border: solid 2px var(--docs-color-code-background) !important;
+}
+
+details code {
+  background-color: var(--docs-color-background);
+}
+
+details p {
+  font-weight: 300;
+}

src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/pages/poc-index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+// import HomepageFeatures from '@site/src/components/HomepageFeatures';
+
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/intro">
+            Full Documentation 📖
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home(): JSX.Element {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`Rancher Docs`}
+      description="Guides, Tutorials, References about Rancher Kubernetes Management Platform">
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}

src/theme/MDXComponents/MDXComponents.js

@@ -0,0 +1,18 @@
+// Import the original mapper
+import MDXComponents from '@theme-original/MDXComponents';
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import { CardSection, Card } from '../components/CardComponents';
+
+export default {
+  // Re-use the default mapping
+  ...MDXComponents,
+
+  Tabs,
+  TabItem,
+
+  CardSection,
+  Card,
+};