[RMQ-2107] Add support timelines to the commercial features page

Author: Bowen7

src/pages/commercial-features.js

@@ -2,6 +2,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import Heading from '@theme/Heading';
+import { CommercialSupportTimelines } from '@site/src/components/CommercialSupportTimelines';
 
 import styles from './index.module.css';
 
@@ -28,7 +29,7 @@ export default function CommercialFeatures() {
             </div>
           </div>
         </div>
-        <div className={styles.services}>
+        <div className={styles.section}>
           <div className={styles.container}>
             <Heading as="h1">VMware Tanzu RabbitMQ</Heading>
             <p>
@@ -109,6 +110,12 @@ export default function CommercialFeatures() {
             </div>
           </div>
         </div>
+        <div className={styles.section}>
+          <div className={styles.container}>
+            <Heading as="h1">Support Timelines</Heading>
+            <CommercialSupportTimelines />
+          </div>
+        </div>
       </main>
     </Layout>
   );

src/pages/index.module.css

@@ -119,7 +119,7 @@ html[data-theme='dark'] .heroCta .release_notes_link {
   }
 }
 
-.why, .license, .tanzu_license, .usecases_heading, .usecases, .testimonies, .supporttypes, .partners, .featured_partner, .services {
+.why, .license, .tanzu_license, .usecases_heading, .usecases, .testimonies, .supporttypes, .partners, .featured_partner, .section {
   padding: 2em 0px;
   scroll-margin-top: 60px;
 }
@@ -246,10 +246,6 @@ html[data-theme='dark'] .commercial_features_cta a {
   background-color: var(--ifm-font-color-base);
 }
 
-.services h1 {
-  text-align: center;
-}
-
 .services_row {
   display: flex;
   flex-wrap: wrap;