styling

web/src/components/magicui/animated-shiny-text.tsx

@@ -0,0 +1,39 @@
+import { ComponentPropsWithoutRef, CSSProperties, FC } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface AnimatedShinyTextProps
+  extends ComponentPropsWithoutRef<"span"> {
+  shimmerWidth?: number;
+}
+
+export const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
+  children,
+  className,
+  shimmerWidth = 100,
+  ...props
+}) => {
+  return (
+    <span
+      style={
+        {
+          "--shiny-width": `${shimmerWidth}px`,
+        } as CSSProperties
+      }
+      className={cn(
+        "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
+
+        // Shine effect
+        "animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
+
+        // Shine gradient
+        "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
+
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};

web/src/components/magicui/aurora-text.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import React, { memo } from "react";
+
+interface AuroraTextProps {
+  children: React.ReactNode;
+  className?: string;
+  colors?: string[];
+  speed?: number;
+}
+
+export const AuroraText = memo(
+  ({
+    children,
+    className = "",
+    colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"],
+    speed = 1,
+  }: AuroraTextProps) => {
+    const gradientStyle = {
+      backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${
+        colors[0]
+      })`,
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      animationDuration: `${10 / speed}s`,
+    };
+
+    return (
+      <span className={`relative inline-block ${className}`}>
+        <span className="sr-only">{children}</span>
+        <span
+          className="relative animate-aurora bg-[length:200%_auto] bg-clip-text text-transparent"
+          style={gradientStyle}
+          aria-hidden="true"
+        >
+          {children}
+        </span>
+      </span>
+    );
+  },
+);
+
+AuroraText.displayName = "AuroraText";

web/src/components/magicui/interactive-hover-button.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface InteractiveHoverButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const InteractiveHoverButton = React.forwardRef<
+	HTMLButtonElement,
+	InteractiveHoverButtonProps
+>(({ children, className, ...props }, ref) => {
+	return (
+		<button
+			ref={ref}
+			className={cn(
+				"group relative w-auto cursor-pointer overflow-hidden rounded-full border bg-background p-2 px-6 text-center font-semibold",
+				className,
+			)}
+			{...props}
+		>
+			<div className="flex items-center gap-2">
+				<div className="h-2 w-2 rounded-full bg-primary transition-all duration-300 group-hover:scale-[100.8]"></div>
+				<span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
+					{children}
+				</span>
+			</div>
+			<div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
+				<span>{children}</span>
+				<ArrowRight />
+			</div>
+		</button>
+	);
+});
+
+InteractiveHoverButton.displayName = "InteractiveHoverButton";