Added hellobar

docusaurus.config.js

@@ -183,14 +183,6 @@ const config = {
     ({
       // Replace with your project's social card
       image: 'img/social-card.png',
-      announcementBar: {
-        id: 'support_us',
-        content:
-          'Get the help you need with our <a target="_blank" rel="noopener noreferrer" href="https://avaloniaui.net/support?utm_source=docs&utm_medium=referral&utm_content=header_link">Enhanced Support!</a>',
-        backgroundColor: '#0d6efd',
-        textColor: '#ffffff',
-        isCloseable: false,
-      },
       colorMode: {
         defaultMode: 'light',
         disableSwitch: false,

src/components/homepage/HelloBar.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import { ChevronRight, GitHub } from 'react-feather';
+import clsx from 'clsx';
+
+function HelloBar() {
+    return (
+      <a
+        href="https://avaloniaui.net/xpf?utm_source=docs&utm_medium=referral&utm_content=hellobar"
+        target="_blank"
+        className="hello-bar u-hflex-center-center w-inline-block"
+      >
+        <div className="hello_bar_contents u-hflex-center-center u-gap-10">
+          <div className="ph_cat_nd_txt-wrapper u-hflex-left-center u-gap-10">
+            <div className="ph_banner_txt">
+              Introducing Avalonia XPF: A cross-platform fork of WPF 
+            </div>
+          </div>
+          <div className="banner_separator"></div>
+          <div className="hello_bar_cta u-hflex-left-center u-gap-8">
+            <div className="text-block-98">Try it today</div>
+          </div>
+        </div>
+      </a>
+    );
+  }
+
+  export default HelloBar;

src/css/custom.css

@@ -1359,3 +1359,86 @@ img.center {
   }
 }
 
+.hello-bar {
+  background-color: #1b2a4e;
+  background-image: linear-gradient(#0003, #0003);
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.hello-bar:hover {
+  text-decoration: underline;
+  text-decoration-color: #1b2a4e; /* Red underline */
+}
+
+.u-hflex-center-center {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.u-gap-10 {
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  display: flex;
+}
+
+.u-hflex-center-center {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.u-hflex-left-center {
+  flex-flow: wrap;
+  align-items: center;
+  display: flex;
+}
+
+.ph_cat {
+  width: 28px;
+  height: auto;
+}
+.ph_banner_txt {
+  color: #fff;
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.banner_separator {
+  background-color: #fff;
+  width: 1px;
+  height: 20px;
+}
+
+.hello_bar_cta {
+  background-color: #fff;
+  border-radius: 6px;
+  padding: 6px 12px 6px 14px;
+}
+
+.u-gap-8 {
+  grid-column-gap: 8px;
+  grid-row-gap: 8px;
+}
+
+.u-hflex-left-center {
+  flex-flow: wrap;
+  align-items: center;
+  display: flex;
+}
+
+.text-block-98 {
+  color: #1a1c21;
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.image-213 {
+  width: 16px;
+  height: 16px;
+}

src/pages/index.tsx

@@ -11,7 +11,7 @@ import HelpSection from '../components/homepage/HelpSection';
 import HomeFooter from '../components/homepage/HomeFooter';
 import ResourcesSection from '../components/homepage/ResourcesSection';
 import CTASection from '../components/homepage/CallToActionSection';
-
+import HelloBar from '../components/homepage/HelloBar';
 
 
 export default function Home(): JSX.Element {
@@ -21,12 +21,10 @@ export default function Home(): JSX.Element {
       title={`${siteConfig.title}`}
       description="Learn to build with Avalonia"
       noFooter>
-
+      <HelloBar/>
       <HeroSection/>
       <GuidesAndSamplesSection/>
 
-      <CTASection/>
-
       <div className="z-0">
         <HelpSection className="-mb-48" />
       </div>