NEOS-603: add banner to marketing site (#1043)

marketing/app/layout.tsx

@@ -1,4 +1,5 @@
 import Footer from '@/components/Footer';
+import GithubBanner from '@/components/banner/GithubBanner';
 import TopNav from '@/components/nav/TopNav';
 import Script from 'next/script';
 import '../styles/global.css';
@@ -47,6 +48,7 @@ __ls("newPageView");
 `}
         </Script>
         <div className="flex flex-col w-full relative">
+          <GithubBanner />
           <TopNav />
           <div>{children}</div>
           <Footer />

marketing/components/banner/GithubBanner.tsx

@@ -0,0 +1,37 @@
+'use client';
+import {
+  GitHubLogoIcon,
+  StarFilledIcon,
+  TwitterLogoIcon,
+} from '@radix-ui/react-icons';
+import { useRouter } from 'next/navigation';
+import { Button } from '../ui/button';
+
+export default function GithubBanner() {
+  const router = useRouter();
+  return (
+    <div className=" top-0 flex flex-row gap-3 justify-center w-full h-[35px]-400 items-center bg-[#D9E6ED]">
+      <div>
+        If you like Neosync, give it a{' '}
+        <StarFilledIcon className="text-yellow-500 inline h-[20px] w-[20px]" />{' '}
+        on GitHub and follow us on Twitter
+      </div>
+      <div className="flex flex-row gap-2">
+        <Button
+          onClick={() => router.push('https://github.com/nucleuscloud/neosync')}
+          variant="ghost"
+          className="hover:bg-gray-300"
+        >
+          <GitHubLogoIcon />
+        </Button>
+        <Button
+          onClick={() => router.push('https://twitter.com/neosynccloud')}
+          variant="ghost"
+          className="hover:bg-gray-300 "
+        >
+          <TwitterLogoIcon />
+        </Button>
+      </div>
+    </div>
+  );
+}

marketing/components/nav/TopNav.tsx

@@ -111,7 +111,7 @@ export default function TopNav(): ReactElement {
           <Dialog>
             <DialogTrigger asChild>
               <Button variant="default">
-                Private Beta <ArrowRightIcon className="ml-2 h-5 w-5" />
+                Neosync Cloud <ArrowRightIcon className="ml-2 h-5 w-5" />
               </Button>
             </DialogTrigger>
             <DialogContent className="sm:max-w-lg bg-black border border-gray-600 p-6">
@@ -204,7 +204,6 @@ function MobileMenu(): ReactElement {
               >
                 <Link href="https://github.com/nucleuscloud/neosync">
                   <div className="flex flex-row items-center">
-                    <p>Star us on</p>
                     <GitHubLogoIcon className="ml-2 h-4 w-4" />
                   </div>
                 </Link>
@@ -214,7 +213,7 @@ function MobileMenu(): ReactElement {
               <Dialog>
                 <DialogTrigger asChild>
                   <Button variant="default">
-                    Private Beta <ArrowRightIcon className="ml-2 h-5 w-5" />
+                    Neosync Cloud <ArrowRightIcon className="ml-2 h-5 w-5" />
                   </Button>
                 </DialogTrigger>
                 <DialogContent className="sm:max-w-lg bg-black border border-gray-600 p-6">