fix: shadow on navigation

app/components/background-gradient.tsx

@@ -0,0 +1,14 @@
+import { cn } from "~/utils/cn";
+
+export default function BackgroundGradient() {
+  return (
+    <div
+      className={cn(
+        "absolute left-0 right-0 -z-10 block h-96 w-full",
+        "bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))]",
+        "from-x-blue-700 via-x-black-700/15 to-x-black-900/20",
+        "dark:from-x-blue-700 dark:via-x-black-700/15 dark:to-x-black-900/20",
+      )}
+    />
+  );
+}

app/components/shared/site-navigation.tsx

@@ -3,10 +3,12 @@ import { AlignRight } from "lucide-react";
 
 import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet";
 import { Navigation, navigationItems } from "./navigation";
+import BackgroundGradient from "../background-gradient";
 
 export function SiteNavigation() {
   return (
     <div className="flex justify-center items-center">
+      <BackgroundGradient />
       <nav className="container !p-4 !lg:p-8 items-center">
         <Link to="/" className="text-xl font-bold">
           ReactJS ID

tailwind.config.ts

@@ -15,6 +15,12 @@ export default {
     extend: {
       colors: {
         lightGray: "#C7CBD1",
+        "x-blue-700": "#3E4F6B",
+        "x-blue-300": "#B1C8E7",
+        "x-blue-200": "#8E96A5",
+        "x-black-900": "#15181D",
+        "x-black-700": "#1B212A",
+        "x-black-500": "#2E3137",
         darkJoinButton: "#20242B",
         darkBorderJoinButton: "#2E3137",
         border: "hsl(var(--border))",