feat: enhance github stars button to be better looking and more compact (#7464)

* feat: enhance github stars button to be better looking and more compact to make mobile compatibility easier in the future

* feat: introduce a new Button component

frontend/src/hooks/use-is-in-view.tsx

@@ -0,0 +1,27 @@
+import type { UseInViewOptions } from "motion/react";
+
+import { useInView } from "motion/react";
+import * as React from "react";
+
+type UseIsInViewOptions = {
+  inView?: boolean;
+  inViewOnce?: boolean;
+  inViewMargin?: UseInViewOptions["margin"];
+};
+
+function useIsInView<T extends HTMLElement = HTMLElement>(
+  ref: React.Ref<T>,
+  options: UseIsInViewOptions = {},
+) {
+  const { inView, inViewOnce = false, inViewMargin = "0px" } = options;
+  const localRef = React.useRef<T>(null);
+  React.useImperativeHandle(ref, () => localRef.current as T);
+  const inViewResult = useInView(localRef, {
+    once: inViewOnce,
+    margin: inViewMargin,
+  });
+  const isInView = !inView || inViewResult;
+  return { ref: localRef, isInView };
+}
+
+export { useIsInView, type UseIsInViewOptions };