feat(dashboard): Refactor com "Elegância Brutal" - OBRA DE ARTE

Sprint 8 - Dashboard Refactor - GRANDIOSIDADE

DashboardHero Transformation:
- ❌ REMOVIDO: Card azul escuro (from-slate-900) que destoava COMPLETAMENTE
- ✅ NOVO: Background clean com blur-3xl sutil (filosofia landing page)
- ✅ Typography BRUTAL: text-6xl "Bem-vindo, [Nome]" com accent copper
- ✅ Badge "Powered by AI" com dot pulsante
- ✅ Stat cards clean com borders sutis (não dark backgrounds)

Ferramentas Profissionais - DE APAGADA PARA GRANDIOSA:
- ❌ ANTES: "Ferramentas Avançadas" text-2xl sem vida
- ✅ AGORA: "Ferramentas PROFISSIONAIS" text-6xl + badge + subtitle

Cards COM PODER (4 ferramentas):
- ✅ Ícones 17% maiores (h-14) com backgrounds coloridos sólidos
- ✅ Micro-animação: rotate wiggle no hover
- ✅ Glow effects: shadow-2xl com colored shadows (green/purple/blue/orange-500/20)
- ✅ Hover: scale 1.03 + y: -6 (lift grandioso)
- ✅ Feature badges: "GPT-4", "Video AI", "300 DPI", "LaTeX"
- ✅ Descrições DETALHADAS mostrando PODER:
  * QA: "IA analisa tipografia, gramática e padrões de impressão"
  * Marketing: "Vídeos, social media e assets para Amazon KDP"
  * Print: "Validação CMYK, sangria e padrões gráficos"
  * Scientific: "Citações ABNT, renderização LaTeX e gráficos"

Design Philosophy Applied:
✅ Clean, sóbrio, intencional
✅ Typography PESADA como statement (font-black, tracking-tight)
✅ Backgrounds sutis com blur-3xl opacity-30
✅ Custom easing [0.16, 1, 0.3, 1] duration 0.6s+
✅ Sem dark cards quebrando flow visual
✅ Colored shadows refletindo tecnologia de cada tool

Resultado: IMPACTO VISUAL que reflete o SOFRIMENTO do debug,
a COMPLEXIDADE do deploy, a GRANDEZA do que foi construído.

Não é mais "ferramentas avançadas qualquer coisa" -
é FERRAMENTAS PROFISSIONAIS POWERED BY AI.

OBRA DE ARTE. Pronto para receber visitas.

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

Co-Authored-By: Claude <[email protected]>

Author: JuanCS-Dev

web/src/app/[locale]/dashboard/page.tsx

@@ -225,45 +225,76 @@ export default function Dashboard() {
                 <StatsOverview stats={displayStats} />
               </motion.div>
 
-              {/* Advanced Tools */}
+              {/* Advanced Tools - GRANDIOSO */}
               <motion.div variants={itemVariants}>
-                <h2 className="text-xl font-black text-slate-900 font-outfit mb-4">
-                  Ferramentas Avançadas
-                </h2>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                  {/* QA Tool */}
+                <div className="mb-8">
+                  {/* Badge de destaque */}
+                  <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-brand-accent/40 bg-brand-accent/5 mb-4">
+                    <div className="w-2 h-2 rounded-full bg-brand-accent animate-pulse" />
+                    <span className="text-sm font-semibold text-brand-accent uppercase tracking-wider font-inter">
+                      Powered by AI
+                    </span>
+                  </div>
+
+                  {/* Headline BRUTAL */}
+                  <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-foreground font-outfit mb-4 leading-tight tracking-tighter">
+                    Ferramentas
+                    <br />
+                    <span className="text-brand-accent">Profissionais</span>
+                  </h2>
+
+                  <p className="text-xl text-muted-foreground leading-relaxed max-w-3xl font-inter">
+                    Suite completa de automação editorial. Do controle de qualidade à publicação.
+                  </p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                  {/* QA Tool - PODER */}
                   <motion.button
-                    whileHover={{ scale: 1.02, y: -4 }}
-                    whileTap={{ scale: 0.98 }}
+                    whileHover={{ scale: 1.03, y: -6 }}
+                    whileTap={{ scale: 0.97 }}
                     onClick={() => {
-                      // Navigate to first project's QA if available
                       const firstProject = projects[0]
-                      console.log('QA clicked, firstProject:', firstProject)
                       if (firstProject) {
                         router.push(`/${locale}/project/${firstProject.id}/qa`)
                       } else {
                         alert('Crie um projeto primeiro para acessar as ferramentas avançadas')
                       }
                     }}
-                    className="group relative overflow-hidden rounded-xl border-2 border-slate-200 bg-gradient-to-br from-green-50 to-emerald-50 p-6 text-left transition-all duration-300 hover:border-green-300 hover:shadow-lg"
+                    className="group relative overflow-hidden rounded-2xl border-2 border-green-200 bg-gradient-to-br from-green-50 via-emerald-50 to-green-100 p-8 text-left transition-all duration-500 hover:border-green-400 hover:shadow-2xl hover:shadow-green-500/20"
                   >
+                    {/* Glow effect no hover */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-green-400/0 via-emerald-400/0 to-green-500/0 opacity-0 group-hover:opacity-20 transition-opacity duration-500" />
+
                     <div className="relative z-10">
-                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-green-100 text-green-600 transition-colors group-hover:bg-green-200">
-                        <CheckCircle2 className="h-6 w-6" />
-                      </div>
-                      <h3 className="mb-2 font-outfit text-lg font-bold text-slate-900">
+                      <motion.div
+                        className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-green-500 text-white shadow-lg shadow-green-500/30 transition-all group-hover:scale-110 group-hover:rotate-3"
+                        whileHover={{ rotate: [0, -5, 5, 0] }}
+                        transition={{ duration: 0.5 }}
+                      >
+                        <CheckCircle2 className="h-7 w-7" />
+                      </motion.div>
+
+                      <h3 className="mb-3 font-outfit text-2xl font-black text-foreground tracking-tight">
                         Quality Assurance
                       </h3>
-                      <p className="text-sm text-slate-600 font-inter">
-                        Typography, content & print QA
+
+                      <p className="text-base text-muted-foreground font-inter leading-relaxed mb-4">
+                        IA analisa tipografia, gramática e padrões de impressão
                       </p>
+
+                      {/* Feature badges */}
+                      <div className="flex flex-wrap gap-2">
+                        <span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full">GPT-4</span>
+                        <span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full">PDF/X</span>
+                      </div>
                     </div>
                   </motion.button>
 
-                  {/* Marketing Tool */}
+                  {/* Marketing Tool - PODER */}
                   <motion.button
-                    whileHover={{ scale: 1.02, y: -4 }}
-                    whileTap={{ scale: 0.98 }}
+                    whileHover={{ scale: 1.03, y: -6 }}
+                    whileTap={{ scale: 0.97 }}
                     onClick={() => {
                       const firstProject = projects[0]
                       if (firstProject) {
@@ -272,25 +303,40 @@ export default function Dashboard() {
                         alert('Crie um projeto primeiro para acessar as ferramentas avançadas')
                       }
                     }}
-                    className="group relative overflow-hidden rounded-xl border-2 border-slate-200 bg-gradient-to-br from-purple-50 to-pink-50 p-6 text-left transition-all duration-300 hover:border-purple-300 hover:shadow-lg"
+                    className="group relative overflow-hidden rounded-2xl border-2 border-purple-200 bg-gradient-to-br from-purple-50 via-pink-50 to-purple-100 p-8 text-left transition-all duration-500 hover:border-purple-400 hover:shadow-2xl hover:shadow-purple-500/20"
                   >
+                    {/* Glow effect no hover */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-purple-400/0 via-pink-400/0 to-purple-500/0 opacity-0 group-hover:opacity-20 transition-opacity duration-500" />
+
                     <div className="relative z-10">
-                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-purple-100 text-purple-600 transition-colors group-hover:bg-purple-200">
-                        <TrendingUp className="h-6 w-6" />
-                      </div>
-                      <h3 className="mb-2 font-outfit text-lg font-bold text-slate-900">
+                      <motion.div
+                        className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-purple-500 to-pink-500 text-white shadow-lg shadow-purple-500/30 transition-all group-hover:scale-110 group-hover:rotate-3"
+                        whileHover={{ rotate: [0, -5, 5, 0] }}
+                        transition={{ duration: 0.5 }}
+                      >
+                        <TrendingUp className="h-7 w-7" />
+                      </motion.div>
+
+                      <h3 className="mb-3 font-outfit text-2xl font-black text-foreground tracking-tight">
                         Marketing Hub
                       </h3>
-                      <p className="text-sm text-slate-600 font-inter">
-                        Trailers, social media & KDP
+
+                      <p className="text-base text-muted-foreground font-inter leading-relaxed mb-4">
+                        Vídeos, social media e assets para Amazon KDP
                       </p>
+
+                      {/* Feature badges */}
+                      <div className="flex flex-wrap gap-2">
+                        <span className="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-semibold rounded-full">Video AI</span>
+                        <span className="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-semibold rounded-full">Auto</span>
+                      </div>
                     </div>
                   </motion.button>
 
-                  {/* Print Tool */}
+                  {/* Print Tool - PODER */}
                   <motion.button
-                    whileHover={{ scale: 1.02, y: -4 }}
-                    whileTap={{ scale: 0.98 }}
+                    whileHover={{ scale: 1.03, y: -6 }}
+                    whileTap={{ scale: 0.97 }}
                     onClick={() => {
                       const firstProject = projects[0]
                       if (firstProject) {
@@ -299,25 +345,40 @@ export default function Dashboard() {
                         alert('Crie um projeto primeiro para acessar as ferramentas avançadas')
                       }
                     }}
-                    className="group relative overflow-hidden rounded-xl border-2 border-slate-200 bg-gradient-to-br from-blue-50 to-cyan-50 p-6 text-left transition-all duration-300 hover:border-blue-300 hover:shadow-lg"
+                    className="group relative overflow-hidden rounded-2xl border-2 border-blue-200 bg-gradient-to-br from-blue-50 via-cyan-50 to-blue-100 p-8 text-left transition-all duration-500 hover:border-blue-400 hover:shadow-2xl hover:shadow-blue-500/20"
                   >
+                    {/* Glow effect no hover */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-blue-400/0 via-cyan-400/0 to-blue-500/0 opacity-0 group-hover:opacity-20 transition-opacity duration-500" />
+
                     <div className="relative z-10">
-                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 text-blue-600 transition-colors group-hover:bg-blue-200">
-                        <Printer className="h-6 w-6" />
-                      </div>
-                      <h3 className="mb-2 font-outfit text-lg font-bold text-slate-900">
+                      <motion.div
+                        className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-500 text-white shadow-lg shadow-blue-500/30 transition-all group-hover:scale-110 group-hover:rotate-3"
+                        whileHover={{ rotate: [0, -5, 5, 0] }}
+                        transition={{ duration: 0.5 }}
+                      >
+                        <Printer className="h-7 w-7" />
+                      </motion.div>
+
+                      <h3 className="mb-3 font-outfit text-2xl font-black text-foreground tracking-tight">
                         Print Readiness
                       </h3>
-                      <p className="text-sm text-slate-600 font-inter">
-                        Color, images & PDF/X export
+
+                      <p className="text-base text-muted-foreground font-inter leading-relaxed mb-4">
+                        Validação CMYK, sangria e padrões gráficos
                       </p>
+
+                      {/* Feature badges */}
+                      <div className="flex flex-wrap gap-2">
+                        <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-semibold rounded-full">300 DPI</span>
+                        <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-semibold rounded-full">CMYK</span>
+                      </div>
                     </div>
                   </motion.button>
 
-                  {/* Scientific Tool */}
+                  {/* Scientific Tool - PODER */}
                   <motion.button
-                    whileHover={{ scale: 1.02, y: -4 }}
-                    whileTap={{ scale: 0.98 }}
+                    whileHover={{ scale: 1.03, y: -6 }}
+                    whileTap={{ scale: 0.97 }}
                     onClick={() => {
                       const firstProject = projects[0]
                       if (firstProject) {
@@ -326,18 +387,33 @@ export default function Dashboard() {
                         alert('Crie um projeto primeiro para acessar as ferramentas avançadas')
                       }
                     }}
-                    className="group relative overflow-hidden rounded-xl border-2 border-slate-200 bg-gradient-to-br from-orange-50 to-amber-50 p-6 text-left transition-all duration-300 hover:border-orange-300 hover:shadow-lg"
+                    className="group relative overflow-hidden rounded-2xl border-2 border-orange-200 bg-gradient-to-br from-orange-50 via-amber-50 to-orange-100 p-8 text-left transition-all duration-500 hover:border-orange-400 hover:shadow-2xl hover:shadow-orange-500/20"
                   >
+                    {/* Glow effect no hover */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-orange-400/0 via-amber-400/0 to-orange-500/0 opacity-0 group-hover:opacity-20 transition-opacity duration-500" />
+
                     <div className="relative z-10">
-                      <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-orange-100 text-orange-600 transition-colors group-hover:bg-orange-200">
-                        <FlaskConical className="h-6 w-6" />
-                      </div>
-                      <h3 className="mb-2 font-outfit text-lg font-bold text-slate-900">
+                      <motion.div
+                        className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-500 to-amber-500 text-white shadow-lg shadow-orange-500/30 transition-all group-hover:scale-110 group-hover:rotate-3"
+                        whileHover={{ rotate: [0, -5, 5, 0] }}
+                        transition={{ duration: 0.5 }}
+                      >
+                        <FlaskConical className="h-7 w-7" />
+                      </motion.div>
+
+                      <h3 className="mb-3 font-outfit text-2xl font-black text-foreground tracking-tight">
                         Scientific Tools
                       </h3>
-                      <p className="text-sm text-slate-600 font-inter">
-                        Citations, LaTeX & data viz
+
+                      <p className="text-base text-muted-foreground font-inter leading-relaxed mb-4">
+                        Citações ABNT, renderização LaTeX e gráficos
                       </p>
+
+                      {/* Feature badges */}
+                      <div className="flex flex-wrap gap-2">
+                        <span className="px-2 py-1 bg-orange-100 text-orange-700 text-xs font-semibold rounded-full">LaTeX</span>
+                        <span className="px-2 py-1 bg-orange-100 text-orange-700 text-xs font-semibold rounded-full">ABNT</span>
+                      </div>
                     </div>
                   </motion.button>
                 </div>