magicui

1
import { ChevronRight } from "lucide-react";
2
import Link from "next/link";
3
import posthog from "posthog-js";
4

5
export function SiteBanner() {
6
  return (
7
    <div className="relative top-0 bg-indigo-600 py-3 text-white md:py-0">
8
      <div className="container flex flex-col items-center justify-center gap-4 md:h-12 md:flex-row">
9
        <Link
10
          href="https://pro.magicui.design"
11
          onClick={() => posthog.capture("banner_cta_clicked")}
12
          target="_blank"
13
          className="group inline-flex items-center justify-center text-center text-sm leading-loose"
14
        >
15
          ✨
16
          <span className="font-bold">
17
            {" "}
18
            Introducing Magic UI Pro - 50+ blocks and templates to build
19
            beautiful landing pages in minutes.
20
          </span>{" "}
21
          <ChevronRight className="ml-1 size-4 transition-all duration-300 ease-out group-hover:translate-x-1" />
22
        </Link>
23
      </div>
24
      <hr className="absolute bottom-0 m-0 h-px w-full bg-neutral-200/30" />
25
    </div>
26
  );
27
}
28