ZERADO

src/layout/ConfiguracoesPage.vue

@@ -1,15 +1,17 @@
 <!-- src/layout/ConfiguracoesPage.vue -->
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import Card from 'primevue/card'
-import Button from 'primevue/button'
-import Divider from 'primevue/divider'
-
 const route = useRoute()
 const router = useRouter()
 
+// ── Hero sticky ────────────────────────────────────────────
+const headerEl = ref(null)
+const headerSentinelRef = ref(null)
+const headerStuck = ref(false)
+let _observer = null
+
 const secoes = [
   {
     key: 'agenda',
@@ -57,41 +59,51 @@ function ir(to) {
   if (!to) return
   if (route.path !== to) router.push(to)
 }
+
+onMounted(() => {
+  const rootMargin = `${document.querySelector('.l2-main') ? '0px' : '-56px'} 0px 0px 0px`
+  _observer = new IntersectionObserver(
+    ([entry]) => { headerStuck.value = !entry.isIntersecting },
+    { threshold: 0, rootMargin }
+  )
+  if (headerSentinelRef.value) _observer.observe(headerSentinelRef.value)
+})
+
+onBeforeUnmount(() => { _observer?.disconnect() })
 </script>
 
 <template>
-  <div class="p-4">
-    <!-- HEADER CONCEITUAL -->
-    <div class="mb-4 overflow-hidden rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-card)]">
-      <div class="relative p-5">
-        <!-- blobs sutis -->
-        <div class="pointer-events-none absolute inset-0 opacity-80">
-          <div class="absolute -top-16 -right-16 h-52 w-52 rounded-full bg-emerald-400/10 blur-3xl" />
-          <div class="absolute top-10 -left-24 h-60 w-60 rounded-full bg-indigo-400/10 blur-3xl" />
-          <div class="absolute bottom-0 right-24 h-44 w-44 rounded-full bg-fuchsia-400/10 blur-3xl" />
-        </div>
+  <!-- Sentinel -->
+  <div ref="headerSentinelRef" class="cfg-sentinel" />
 
-        <div class="relative">
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <div class="text-900 text-2xl font-semibold leading-none">Configurações</div>
-              <div class="text-600 mt-2 max-w-2xl">
-                Defina como sua clínica funciona: agenda, cadastros e preferências. Tudo no mesmo lugar — sem espalhar opções pelo sistema.
-              </div>
-            </div>
+  <!-- Hero sticky -->
+  <div ref="headerEl" class="cfg-hero mb-4" :class="{ 'cfg-hero--stuck': headerStuck }">
+    <div class="cfg-hero__blobs" aria-hidden="true">
+      <div class="cfg-hero__blob cfg-hero__blob--1" />
+      <div class="cfg-hero__blob cfg-hero__blob--2" />
+      <div class="cfg-hero__blob cfg-hero__blob--3" />
+    </div>
 
-            <Button
-              label="Voltar"
-              icon="pi pi-arrow-left"
-              severity="secondary"
-              outlined
-              class="hidden md:inline-flex"
-              @click="router.back()"
-            />
-          </div>
+    <div class="cfg-hero__row1">
+      <div class="cfg-hero__brand">
+        <div class="cfg-hero__icon"><i class="pi pi-cog text-lg" /></div>
+        <div class="min-w-0">
+          <div class="cfg-hero__title">Configurações</div>
+          <div class="cfg-hero__sub">Defina como sua agenda e clínica funcionam</div>
         </div>
       </div>
+
+      <div class="hidden xl:flex items-center gap-2 shrink-0">
+        <Button label="Voltar" icon="pi pi-arrow-left" severity="secondary" outlined class="rounded-full" @click="router.back()" />
+      </div>
+
+      <div class="flex xl:hidden items-center shrink-0">
+        <Button icon="pi pi-arrow-left" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="router.back()" />
+      </div>
     </div>
+  </div>
+
+  <div class="pt-0">
 
     <div class="grid grid-cols-12 gap-4">
       <!-- SIDEBAR (seções) -->
@@ -151,18 +163,6 @@ function ir(to) {
             </div>
           </template>
         </Card>
-
-        <!-- Card pequeno “atalhos” opcional -->
-        <div class="mt-4 hidden lg:block">
-          <Card>
-            <template #content>
-              <div class="text-900 font-medium">Dica</div>
-              <div class="text-600 text-sm mt-2 leading-relaxed">
-                Comece pela <b>Agenda</b>. É ela que dá “tempo” ao prontuário: sessão marcada → sessão realizada → evolução.
-              </div>
-            </template>
-          </Card>
-        </div>
       </div>
 
       <!-- CONTEÚDO (seção selecionada) -->
@@ -173,3 +173,45 @@ function ir(to) {
     </div>
   </div>
 </template>
+
+<style scoped>
+.cfg-sentinel { height: 1px; }
+
+.cfg-hero {
+  position: sticky;
+  top: var(--layout-sticky-top, 56px);
+  z-index: 20;
+  overflow: hidden;
+  border-radius: 1.75rem;
+  border: 1px solid var(--surface-border);
+  background: var(--surface-card);
+  padding: 1.25rem 1.5rem;
+}
+.cfg-hero--stuck {
+  margin-left: 0; margin-right: 0;
+  border-top-left-radius: 0; border-top-right-radius: 0;
+}
+
+.cfg-hero__blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
+.cfg-hero__blob  { position: absolute; border-radius: 50%; filter: blur(70px); }
+.cfg-hero__blob--1 { width: 18rem; height: 18rem; top: -4rem; right: -3rem;  background: rgba(52,211,153,0.10); }
+.cfg-hero__blob--2 { width: 20rem; height: 20rem; top: 0.5rem; left: -5rem; background: rgba(99,102,241,0.09); }
+.cfg-hero__blob--3 { width: 14rem; height: 14rem; bottom: -2rem; right: 8rem; background: rgba(217,70,239,0.07); }
+
+.cfg-hero__row1 {
+  position: relative; z-index: 1;
+  display: flex; align-items: center; gap: 1rem;
+}
+.cfg-hero__brand {
+  display: flex; align-items: center; gap: 0.75rem;
+  flex: 1; min-width: 0;
+}
+.cfg-hero__icon {
+  display: grid; place-items: center;
+  width: 2.5rem; height: 2.5rem; border-radius: 0.875rem; flex-shrink: 0;
+  background: color-mix(in srgb, var(--p-primary-500, #6366f1) 12%, transparent);
+  color: var(--p-primary-500, #6366f1);
+}
+.cfg-hero__title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-color); }
+.cfg-hero__sub   { font-size: 0.78rem; color: var(--text-color-secondary); margin-top: 2px; }
+</style>