add border beam to home image

apps/web/src/app/(landing)/page.tsx

@@ -48,9 +48,10 @@ function LandingPage() {
           </div>
         </div>
         <div className="flex items-center justify-center">
-          <div className="sm:block sm:w-3/4">
+          <div className="relative rounded-3xl sm:block sm:w-3/4">
+            <BorderBeam borderWidth={2} colorFrom={"#4be7ae"} colorTo="#ffffff" />
             <Image
-              className="mx-auto rounded-3xl border-4 border-neutral-700 shadow-md"
+              className="mx-auto rounded-3xl border-2 border-neutral-700 shadow-md"
               src={homepageImg}
               alt="homepage"
               priority={true}

apps/web/src/components/landing/border-beam.tsx

@@ -0,0 +1,49 @@
+import { cn } from "@/lib/utils";
+
+interface BorderBeamProps {
+  className?: string;
+  size?: number;
+  duration?: number;
+  borderWidth?: number;
+  anchor?: number;
+  colorFrom?: string;
+  colorTo?: string;
+  delay?: number;
+}
+
+export const BorderBeam = ({
+  className,
+  size = 200,
+  duration = 15,
+  anchor = 90,
+  borderWidth = 1.5,
+  colorFrom = "#ffaa40",
+  colorTo = "#9c40ff",
+  delay = 0,
+}: BorderBeamProps) => {
+  return (
+    <div
+      style={
+        {
+          "--size": size,
+          "--duration": duration,
+          "--anchor": anchor,
+          "--border-width": borderWidth,
+          "--color-from": colorFrom,
+          "--color-to": colorTo,
+          "--delay": `-${delay}s`,
+        } as React.CSSProperties
+      }
+      className={cn(
+        "absolute inset-[0] rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
+
+        // mask styles
+        "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
+
+        // pseudo styles
+        "after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
+        className,
+      )}
+    />
+  );
+};

apps/web/tailwind.config.ts

@@ -97,8 +97,14 @@ export default withUt({
             backgroundPosition: "-200% 0",
           },
         },
+        "border-beam": {
+          "100%": {
+            "offset-distance": "100%",
+          },
+        },
       },
       animation: {
+        "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
         "domain-link-in": "domain-link-in 0.8s ease-in-out forwards ",
         "domain-link-out": "domain-link-out 0.8s ease-in-out forwards",
         "domain-cursor-in": "domain-cursor-in 0.8s ease-in-out forwards",