Adding a banner about Pyrefly to the website's home page

Summary:
Importing pull request: #989
Dmitry: Adding a banner about using Pyrefly, Pyre v.2, to the home page

Reviewed By: stroxler

Differential Revision: D74661368

Pulled By: dluo

fbshipit-source-id: ae37e900bf54e7a61b4af20938ab708a6422934e

Author: dmitryvinn-fb

documentation/website/src/pages/index.js

@@ -69,6 +69,32 @@ const features = [
   },
 ];
 
+function TopBanner() {
+  return (
+    <div className={styles.topBannerContainer}>
+      <div className={styles.topBanner}>
+        <div className={styles.topBannerTitle}>
+          {'📣\xa0'}
+          <Link
+            to={`https://pyrefly.org/`}
+            className={styles.topBannerTitleText}>
+            {'Check out Pyrefly'}
+          </Link>
+          {'\xa0📣'}
+          <br />
+          <Link
+            to={`https://pyrefly.org/`}
+            className={styles.topBannerTitleText}>
+            <span style={{fontSize: '0.8em'}}>
+              The next iteration of Pyre!️
+            </span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function Feature({imageUrl, title, description}) {
   const imgUrl = useBaseUrl(imageUrl);
   return (
@@ -91,6 +117,7 @@ function Home() {
     <Layout
       title={`${siteConfig.title}`}
       description="A performant type-checker for Python 3.">
+      <TopBanner />
       <header className={classnames('hero hero--primary', styles.heroBanner)}>
         <div className="container">
           <img src="img/pyre.svg" alt="Pyre logo." width="100" />

documentation/website/src/pages/styles.module.css

@@ -108,3 +108,44 @@
     width: 98%;
   }
 }
+
+.topBannerContainer {
+  background-color: rgb(15, 15, 15);
+}
+
+.topBanner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.topBannerTitle {
+  font-size: 54px;
+  font-weight: bold;
+  margin-bottom: 0.4rem;
+  align-items: center;
+  text-align:center;
+
+}
+
+@media only screen and (max-width: 768px) {
+  .topBannerTitle {
+    font-size: 40px;
+  }
+}
+
+.topBannerTitleText {
+  background: linear-gradient(
+    90deg,
+    rgb(131 58 180 / 100%) 0%,
+    rgb(253 29 29 / 100%) 50%,
+    rgb(252 176 69 / 100%) 100%
+  );
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.topBannerTitleText:hover {
+  text-decoration: underline;
+  text-decoration-color: rgb(152 0 255);
+}