From c0e0bcc137b3293a48b7f57e18c500536893169b Mon Sep 17 00:00:00 2001
From: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
Date: Fri, 3 Feb 2023 22:02:42 -0500
Subject: [PATCH] feat: Add home page with first banner

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
---
 microsite-next/src/pages/home/_home.tsx       | 82 +++++++++++++++++++
 .../src/pages/home/home.module.scss           | 44 ++++++++++
 microsite-next/src/pages/index.tsx            | 12 +--
 3 files changed, 128 insertions(+), 10 deletions(-)
 create mode 100644 microsite-next/src/pages/home/_home.tsx
 create mode 100644 microsite-next/src/pages/home/home.module.scss

diff --git a/microsite-next/src/pages/home/_home.tsx b/microsite-next/src/pages/home/_home.tsx
new file mode 100644
index 0000000000..f7ad7f6bf9
--- /dev/null
+++ b/microsite-next/src/pages/home/_home.tsx
@@ -0,0 +1,82 @@
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import { clsx } from 'clsx';
+import React from 'react';
+
+import homeStyles from './home.module.scss';
+
+export function Home() {
+  const { siteConfig } = useDocusaurusContext();
+
+  return (
+    <Layout>
+      <section className={homeStyles.homePage}>
+        <div className="container">
+          <div className="row padding-vert--lg">
+            <div className="col">
+              <div
+                className={clsx(
+                  'card',
+                  'padding--md',
+                  homeStyles.newsletterBanner,
+                )}
+              >
+                <div className="text--left bannerContent">
+                  🗞️ Want to stay up to date with Backstage? Sign up for our{' '}
+                  <Link
+                    to="https://info.backstage.spotify.com/newsletter_subscribe"
+                    className="text--secondary"
+                  >
+                    Newsletter
+                  </Link>
+                  !
+                </div>
+
+                <div className="bannerCloseButton">X</div>
+              </div>
+            </div>
+          </div>
+
+          <div className={clsx('row', homeStyles.openPlatformBanner)}>
+            <div className="col padding-bottom--lg">
+              <h1>An open platform for building developer portals</h1>
+
+              <p>
+                Powered by a centralized software catalog, Backstage restores
+                order to your infrastructure and enables your product teams to
+                ship high-quality code quickly — without compromising autonomy.
+              </p>
+
+              <div className="buttonsContainer">
+                <Link
+                  to="https://github.com/backstage/backstage#getting-started"
+                  className="button button--primary"
+                >
+                  GITHUB
+                </Link>
+                <Link
+                  to="https://info.backstage.spotify.com/office-hours"
+                  className="button button--primary"
+                >
+                  OFFICE HOURS
+                </Link>
+              </div>
+            </div>
+
+            <div className="col padding-bottom--lg svgContainer">
+              <img
+                className="laptopSvg"
+                src={`${siteConfig.baseUrl}img/laptop.svg`}
+              />
+              <img
+                className="laptopScreenGif"
+                src={`${siteConfig.baseUrl}animations/backstage-logos-hero-8.gif`}
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+    </Layout>
+  );
+}
diff --git a/microsite-next/src/pages/home/home.module.scss b/microsite-next/src/pages/home/home.module.scss
new file mode 100644
index 0000000000..ae804e344d
--- /dev/null
+++ b/microsite-next/src/pages/home/home.module.scss
@@ -0,0 +1,44 @@
+.homePage {
+  font-size: 1.25rem;
+
+  h1 {
+    font-size: 54px;
+    line-height: 56px;
+    word-break: break-word;
+  }
+
+  :global(.buttonsContainer) {
+    gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+  }
+}
+
+.newsletterBanner {
+  --ifm-link-hover-color: var(--ifm-color-info);
+
+  flex-direction: row;
+  color: var(--ifm-button-color);
+  background-color: var(--ifm-color-primary);
+
+  :global(.bannerContent) {
+    flex: 1;
+  }
+}
+
+.openPlatformBanner {
+  :global(.svgContainer) {
+    position: relative;
+
+    :global(img.laptopSvg) {
+      width: 100%;
+    }
+
+    :global(img.laptopScreenGif) {
+      position: absolute;
+      top: 3%;
+      left: 17%;
+      width: 70%;
+    }
+  }
+}
diff --git a/microsite-next/src/pages/index.tsx b/microsite-next/src/pages/index.tsx
index 3bbf03b0e2..853a4b2c82 100644
--- a/microsite-next/src/pages/index.tsx
+++ b/microsite-next/src/pages/index.tsx
@@ -1,11 +1,3 @@
-import Layout from '@theme/Layout';
-import React from 'react';
+import { Home } from './home/_home';
 
-function Index() {
-  return (
-    <Layout>
-      <h1>HELLO</h1>
-    </Layout>
-  );
-}
-export default Index;
+export default Home;