fix: Add api button

apps/web/package.json

@@ -28,7 +28,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
-    "framer-motion": "^11.13.1",
+    "framer-motion": "^11.15.0",
     "lucide-react": "^0.460.0",
     "motion": "^11.12.0",
     "next-themes": "^0.4.4",

apps/web/src/components/ui/shiny-button.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import React from "react";
+import {
+  motion,
+  type AnimationProps,
+  type HTMLMotionProps,
+} from "framer-motion";
+import { cn } from "@/utilities/shadcn-utils";
+
+const animationProps = {
+  initial: { "--x": "100%", scale: 0.8 },
+  animate: { "--x": "-100%", scale: 1 },
+  whileTap: { scale: 0.95 },
+  transition: {
+    repeat: Infinity,
+    repeatType: "loop",
+    repeatDelay: 1,
+    type: "spring",
+    stiffness: 20,
+    damping: 15,
+    mass: 2,
+    scale: {
+      type: "spring",
+      stiffness: 200,
+      damping: 5,
+      mass: 0.5,
+    },
+  },
+} as AnimationProps;
+
+interface ShinyButtonProps extends HTMLMotionProps<"button"> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const ShinyButton = React.forwardRef<HTMLButtonElement, ShinyButtonProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <motion.button
+        ref={ref}
+        {...animationProps}
+        {...props}
+        className={cn(
+          "relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]",
+          className,
+        )}
+      >
+        <span
+          className="relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]"
+          style={{
+            maskImage:
+              "linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))",
+          }}
+        >
+          {children}
+        </span>
+        <span
+          style={{
+            mask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
+            maskComposite: "exclude",
+          }}
+          className="absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px"
+        ></span>
+      </motion.button>
+    );
+  },
+);
+
+ShinyButton.displayName = "ShinyButton";
+
+export default ShinyButton;

apps/web/src/routes/index.tsx

@@ -1,4 +1,5 @@
 import Particles from "@/components/ui/particles";
+import ShinyButton from "@/components/ui/shiny-button";
 import { SearchBox } from "@/routes/-components/search-box";
 import { createFileRoute } from "@tanstack/react-router";
 import { z } from "zod";
@@ -25,6 +26,13 @@ function RouteComponent() {
         color={"red"}
         refresh
       />
+      <a href="https://kthcdb-api.hallkvi.st" className="hidden md:block">
+        <ShinyButton className="absolute left-0 z-50 flex md:m-4">
+          <p>
+            <span className="mr-1 text-xs">🎉 </span>Visit our api
+          </p>
+        </ShinyButton>
+      </a>
       <LoginAvatar className="absolute right-0 z-50 m-2 flex md:p-4" />
       <div className={"shrink md:h-[15dvh]"} />
       <div className="flex w-full flex-col gap-14">
@@ -35,7 +43,7 @@ function RouteComponent() {
           <SearchBox />
         </div>
         <div className="absolute bottom-0 left-0 mb-10 flex">
-          {<ReviewMarquee />}
+          <ReviewMarquee />
         </div>
       </div>
       <div className="flex-[2] shrink" />