From 4bbd3fda244bf54a8fde91b6f44b09e82a747a05 Mon Sep 17 00:00:00 2001
From: rever-tecnologia <revertecnologia@gmail.com>
Date: Mon, 15 Dec 2025 11:14:45 -0300
Subject: [PATCH] feat(settings): adiciona shader animado no header do perfil
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Substitui o degradê estático pelo shader animado usado nas páginas de login.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/settings/settings-content.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/settings-content.tsx b/src/components/settings/settings-content.tsx
index 51beb5c..8540abd 100644
--- a/src/components/settings/settings-content.tsx
+++ b/src/components/settings/settings-content.tsx
@@ -3,6 +3,7 @@
 import { FormEvent, useMemo, useRef, useState } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
+import dynamic from "next/dynamic"
 import { toast } from "sonner"
 import {
   Share2,
@@ -32,6 +33,11 @@ import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 import { useAuth, signOut } from "@/lib/auth-client"
 
+const ShaderBackground = dynamic(
+  () => import("@/components/background-paper-shaders-wrapper"),
+  { ssr: false }
+)
+
 import type { LucideIcon } from "lucide-react"
 
 type RoleRequirement = "admin" | "staff"
@@ -439,8 +445,10 @@ function ProfileEditCard({
 
   return (
     <Card className="rounded-2xl border border-border/60 bg-white shadow-sm overflow-hidden">
-      {/* Header com degradê */}
-      <div className="h-20 bg-gradient-to-r from-neutral-800 via-neutral-700 to-neutral-600" />
+      {/* Header com shader animado */}
+      <div className="relative h-20 overflow-hidden">
+        <ShaderBackground className="absolute inset-0 h-full w-full" />
+      </div>
       <CardHeader className="pb-4 -mt-10">
         <div className="flex items-end gap-4">
           <div className="relative group">