From ed297eead273b5860b14eaf62dd4c1b77815f1e7 Mon Sep 17 00:00:00 2001
From: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
Date: Tue, 7 Feb 2023 21:13:35 -0500
Subject: [PATCH] feat: Add all Call to Action banners in 1 go, CSS grid media
 query

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
---
 .../banner-section/banner-section.module.scss |  6 ++
 .../banner-section/banner-section.tsx         |  5 +-
 microsite-next/src/pages/home/_home.tsx       | 83 ++++++++++++++++++-
 .../src/pages/home/home.module.scss           | 23 +++--
 4 files changed, 105 insertions(+), 12 deletions(-)

diff --git a/microsite-next/src/components/banner-section/banner-section.module.scss b/microsite-next/src/components/banner-section/banner-section.module.scss
index 478790877c..2beabf9738 100644
--- a/microsite-next/src/components/banner-section/banner-section.module.scss
+++ b/microsite-next/src/components/banner-section/banner-section.module.scss
@@ -26,4 +26,10 @@
         rgba(155, 240, 225, 0.67) 137.34%
       );
   }
+
+  &:global(.greenCallToActionGradientBackground) {
+    background: linear-gradient(87.29deg, #9bf0e1 17.71%, #36baa2 80.85%);
+
+    color: var(--ifm-color-gray-900);
+  }
 }
diff --git a/microsite-next/src/components/banner-section/banner-section.tsx b/microsite-next/src/components/banner-section/banner-section.tsx
index d3530d7e49..dbab99200e 100644
--- a/microsite-next/src/components/banner-section/banner-section.tsx
+++ b/microsite-next/src/components/banner-section/banner-section.tsx
@@ -7,6 +7,7 @@ export type IBannerSectionProps = PropsWithChildren<{
   greyBackground?: boolean;
   greenGradientBackground?: boolean;
   greenBottomGradientBackground?: boolean;
+  greenCallToActionGradientBackground?: boolean;
 }>;
 
 export const BannerSection = ({
@@ -14,14 +15,16 @@ export const BannerSection = ({
   greyBackground = false,
   greenGradientBackground = false,
   greenBottomGradientBackground = false,
+  greenCallToActionGradientBackground = false,
 }: IBannerSectionProps) => (
   <section
     className={clsx(bannerStyles.bannerSection, {
       greyBackground,
       greenGradientBackground,
       greenBottomGradientBackground,
+      greenCallToActionGradientBackground,
     })}
   >
-    <div className="container">{children}</div>
+    <div className="container padding-vert--lg">{children}</div>
   </section>
 );
diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx
index da99da6f1a..a715ee93a9 100644
--- a/microsite-next/src/pages/home/_home.tsx
+++ b/microsite-next/src/pages/home/_home.tsx
@@ -130,10 +130,7 @@ export function Home() {
               makes it possible for your company to manage thousands of them
             </ContentBlock>
 
-            <ContentBlock
-              title="Backstage makes it easy for one team to manage 10 services — and makes it possible for your company to manage thousands of them"
-              hasBulletLine
-            >
+            <ContentBlock title="A uniform overview" hasBulletLine>
               Every team can see all the services they own and related resources
               (deployments, data pipelines, pull request status, etc.)
             </ContentBlock>
@@ -158,6 +155,84 @@ export function Home() {
             </ContentBlock>
           </div>
         </BannerSection>
+
+        <BannerSection greenCallToActionGradientBackground>
+          <div className="padding--lg text--center">
+            <h1>Learn more about the software catalog</h1>
+
+            <Link
+              to="https://backstage.io/docs/features/software-catalog/software-catalog-overview"
+              className="button button--secondary"
+            >
+              READ
+            </Link>
+          </div>
+        </BannerSection>
+
+        <BannerSection greenCallToActionGradientBackground>
+          <div className="padding--lg text--center">
+            <h1>Build your own software templates</h1>
+
+            <Link
+              to="https://backstage.io/docs/features/software-templates"
+              className="button button--secondary"
+            >
+              CONTRIBUTE
+            </Link>
+          </div>
+        </BannerSection>
+
+        <BannerSection greenCallToActionGradientBackground>
+          <div className="padding--lg text--center">
+            <h1>Learn more about TechDocs</h1>
+
+            <Link
+              to="https://backstage.io/docs/features/techdocs/techdocs-overview"
+              className="button button--secondary"
+            >
+              DOCS
+            </Link>
+          </div>
+        </BannerSection>
+
+        <BannerSection greenCallToActionGradientBackground>
+          <div className="padding--lg text--center">
+            <h1>Learn more about Backstage Search</h1>
+
+            <Link
+              to="https://backstage.io/docs/features/search/search-overview"
+              className="button button--secondary"
+            >
+              READ
+            </Link>
+          </div>
+        </BannerSection>
+
+        <BannerSection greenCallToActionGradientBackground>
+          <div className="padding--lg text--center">
+            <h1>Learn more about the K8s plugin</h1>
+
+            <Link
+              to="https://backstage.io/blog/2021/01/12/new-backstage-feature-kubernetes-for-service-owners"
+              className="button button--secondary"
+            >
+              READ
+            </Link>
+          </div>
+        </BannerSection>
+
+        <BannerSection greenCallToActionGradientBackground>
+          <div className="padding--lg text--center">
+            <h1>Build a plugin</h1>
+
+            <Link
+              to="/docs/plugins/create-a-plugin"
+              className="button button--secondary"
+            >
+              CONTRIBUTE
+            </Link>
+          </div>
+        </BannerSection>
       </div>
     </Layout>
   );
diff --git a/microsite-next/src/pages/home/home.module.scss b/microsite-next/src/pages/home/home.module.scss
index aa442a0c7b..de15e49140 100644
--- a/microsite-next/src/pages/home/home.module.scss
+++ b/microsite-next/src/pages/home/home.module.scss
@@ -1,3 +1,5 @@
+$desktopUpBreakpoint: 997px;
+
 .homePage {
   font-size: 1.25rem;
 
@@ -46,21 +48,28 @@
   display: grid;
   align-items: center;
 
-  grid-template-columns: repeat(4, 1fr);
-
   picture {
     display: block;
-
-    grid-row: 1/3;
-    grid-column: 3/-1;
+    text-align: center;
   }
 
   :global(.catalogTitle) {
-    grid-column: 1/3;
-
     img {
       max-width: 190px;
       max-height: 190px;
     }
   }
+
+  @media (min-width: $desktopUpBreakpoint) {
+    grid-template-columns: repeat(4, 1fr);
+
+    picture {
+      grid-row: 1/3;
+      grid-column: 3/-1;
+    }
+
+    :global(.catalogTitle) {
+      grid-column: 1/3;
+    }
+  }
 }