fix: ui inconsistencies

Author: iamjr15

frontend/src/components/home/sections/navbar.tsx

@@ -342,7 +342,6 @@ export function Navbar({ sidebarOpen = false }: { sidebarOpen?: boolean }) {
                       <HoverBorderGradient
                         containerClassName=""
                         className="h-8 flex items-center justify-center text-sm font-normal tracking-wide text-white w-fit px-3"
-                        duration={2}
                       >
                         <Zap className="w-3 h-3 mr-1.5" />
                         Integrations

frontend/src/components/ui/hover-border-gradient.tsx

@@ -1,66 +1,32 @@
 "use client";
-import React, { useState, useEffect, useRef } from "react";
+import React from "react";
 
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 
-type Direction = "TOP" | "LEFT" | "BOTTOM" | "RIGHT";
+// Removed Direction type as it's no longer needed
 
 export function HoverBorderGradient({
   children,
   containerClassName,
   className,
   as: Tag = "button",
-  duration = 1,
-  clockwise = true,
   ...props
 }: React.PropsWithChildren<
   {
     as?: React.ElementType;
     containerClassName?: string;
     className?: string;
-    duration?: number;
-    clockwise?: boolean;
   } & React.HTMLAttributes<HTMLElement>
 >) {
-  const [hovered, setHovered] = useState<boolean>(false);
-  const [direction, setDirection] = useState<Direction>("TOP");
-
-  const rotateDirection = (currentDirection: Direction): Direction => {
-    const directions: Direction[] = ["TOP", "LEFT", "BOTTOM", "RIGHT"];
-    const currentIndex = directions.indexOf(currentDirection);
-    const nextIndex = clockwise
-      ? (currentIndex - 1 + directions.length) % directions.length
-      : (currentIndex + 1) % directions.length;
-    return directions[nextIndex];
-  };
-
-  const movingMap: Record<Direction, string> = {
-    TOP: "radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
-    LEFT: "radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
-    BOTTOM:
-      "radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
-    RIGHT:
-      "radial-gradient(16.2% 41.199999999999996% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
-  };
+  // Simplified component - using red glow as permanent state
 
   const highlight =
     "radial-gradient(75% 181.15942028985506% at 50% 50%, #EF4444 0%, rgba(255, 255, 255, 0) 100%)";
 
-  useEffect(() => {
-    if (!hovered) {
-      const interval = setInterval(() => {
-        setDirection((prevState) => rotateDirection(prevState));
-      }, duration * 1000);
-      return () => clearInterval(interval);
-    }
-  }, [hovered, duration, rotateDirection]);
+  // Removed the moving gradient animation - using red glow as default state
   return (
     <Tag
-      onMouseEnter={(event: React.MouseEvent<HTMLDivElement>) => {
-        setHovered(true);
-      }}
-      onMouseLeave={() => setHovered(false)}
       className={cn(
         "relative flex rounded-full border  content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit",
         containerClassName
@@ -85,13 +51,11 @@ export function HoverBorderGradient({
           width: "100%",
           height: "100%",
         }}
-        initial={{ background: movingMap[direction] }}
+        initial={{ background: highlight }}
         animate={{
-          background: hovered
-            ? [movingMap[direction], highlight]
-            : movingMap[direction],
+          background: highlight,
         }}
-        transition={{ ease: "linear", duration: duration ?? 1 }}
+        transition={{ ease: "linear", duration: 1 }}
       />
       <div className="bg-black absolute z-1 flex-none inset-[2px] rounded-[100px]" />
     </Tag>