docs(website): advertise the new guide on the home page

Author: jan-molak

docusaurus.config.ts

@@ -71,6 +71,10 @@ const config: Config = {
             high-quality, business-focused test scenarios that interact with any interface of your system
             and produce comprehensive test reports that build trust between delivery teams and the business.
             `,
+        banner: {
+            text: 'New Playwright Test guide is out!',
+            link: '/handbook/test-runners/playwright-test',
+        }
     },
 
     url: 'https://serenity-js.org',

src/components/Home/TopBanner/index.tsx

@@ -0,0 +1,23 @@
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+import styles from './styles.module.css';
+import React from 'react';
+
+export default function TopBanner(): React.JSX.Element {
+    const banner = useDocusaurusContext().siteConfig.customFields?.banner as { text: string, link: string };
+
+    return banner && (
+        <div className={styles.topBanner}>
+            <div className={styles.topBannerTitle}>
+                {'🎉\xa0'}
+                <Link
+                    to={ banner.link }
+                    className={styles.topBannerTitleText}>
+                    { banner.text }
+                </Link>
+                {'\xa0🥳'}
+            </div>
+        </div>
+    );
+}

src/components/Home/TopBanner/styles.module.css

@@ -0,0 +1,38 @@
+.topBanner {
+    font-size: 20px;
+    padding: 30px 20px;
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.topBannerTitle {
+    font-size: 42px;
+    font-weight: bold;
+    margin-bottom: 0.4rem;
+}
+
+@media only screen and (max-width: 768px) {
+    .topBannerTitle {
+        font-size: 32px;
+    }
+}
+
+.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 {
+    border-bottom: solid 2px;
+    border-color: rgb(152 0 255);
+}

src/components/Home/index.tsx

@@ -8,10 +8,12 @@ import Recommendations from './Recommendations';
 import Welcome  from './Welcome';
 
 import styles from './index.module.css';
+import TopBanner from './TopBanner';
 
 export default function Home(): React.JSX.Element {
     return (
         <>
+            <TopBanner />
             <Hero />
             <main>
                 <Features className={clsx(styles.section)} />

src/docs/handbook/test-runners/playwright-test.mdx

@@ -40,6 +40,11 @@ To start testing immediately, consider using:
 - [**Serenity/JS GitPods**](/handbook/project-templates/#serenityjs-gitpods) - Ready-to-use cloud-based development environments.
 - [**Serenity/JS reference implementations**](https://github.com/serenity-js/serenity-js/tree/main/examples) on GitHub.
 
+:::info New to Serenity/JS? ⏱️ Check out the tutorials!
+See what Serenity/JS is capable of without installing anything on your machine - start
+with our [15-minute web testing tutorial](/handbook/tutorials/your-first-web-scenario/)!
+:::
+
 To see Serenity/JS reporting in action, explore the live reports generated by the [Serenity/JS Playwright Test Template](https://github.com/serenity-js/serenity-js-playwright-test-template):
 - [Live Serenity BDD report](https://serenity-js.github.io/serenity-js-playwright-test-template/serenity/)
 - [Live Playwright Test report](https://serenity-js.github.io/serenity-js-playwright-test-template/playwright/)