style(website): redesenho editorial com paleta nordic indigo e vanilla cream

website/sidebars.ts

@@ -4,19 +4,19 @@ const sidebars: SidebarsConfig = {
   docsSidebar: [
     {
       type: 'category',
-      label: '🚀 Primeiros Passos',
+      label: 'Primeiros Passos',
       collapsed: false,
       items: ['intro', 'installation', 'quickstart'],
     },
     {
       type: 'category',
-      label: '🛡️ Conceitos & Segurança',
+      label: 'Conceitos & Segurança',
       collapsed: false,
       items: ['severity-levels'],
     },
     {
       type: 'category',
-      label: '💻 Comandos da CLI',
+      label: 'Comandos da CLI',
       collapsed: false,
       items: [
         'commands/scan',
@@ -29,19 +29,19 @@ const sidebars: SidebarsConfig = {
     },
     {
       type: 'category',
-      label: '⚙️ Configuração',
+      label: 'Configuração',
       collapsed: false,
       items: ['configuration'],
     },
     {
       type: 'category',
-      label: '🔄 Automação & CI/CD',
+      label: 'Automação & CI/CD',
       collapsed: false,
       items: ['cicd-integration'],
     },
     {
       type: 'category',
-      label: '🤝 Comunidade',
+      label: 'Comunidade',
       collapsed: true,
       items: ['contributing'],
     },

website/src/components/HomepageFeatures/index.tsx

@@ -3,96 +3,57 @@ import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
-type FeatureItem = {
-  icon: string;
-  badge?: string;
+type PillarItem = {
+  tag: string;
   title: string;
   description: ReactNode;
 };
 
-const FeatureList: FeatureItem[] = [
+const PillarList: PillarItem[] = [
   {
-    icon: '🛡️',
-    badge: 'Detecção Ativa',
-    title: 'Git-Aware & Inteligente',
+    tag: 'Detecção Git-Native',
+    title: 'Consciência da Árvore Git',
     description: (
       <>
-        O <code>envguard</code> analisa a árvore de trabalho do Git e diferencia se arquivos{' '}
-        <code>.env</code> estão comitados (<em>tracked</em>), preparados (<em>staged</em>) ou
-        desprotegidos pelo <code>.gitignore</code>.
+        Diferencia com precisão se arquivos de ambiente estão comitados no histórico (
+        <em>tracked</em>), preparados para o próximo commit (<em>staged</em>) ou desprotegidos
+        contra regras do <code>.gitignore</code>.
       </>
     ),
   },
   {
-    icon: '⚡',
-    badge: 'Zero Telemetria',
-    title: 'Ultrarrápido & 100% Local',
+    tag: 'Segurança & Velocidade',
+    title: '100% Local & Determinístico',
     description: (
       <>
-        Construído em Go nativo, executa instantaneamente e 100% offline. Nunca envia dados para
-        servidores remotos e jamais expõe o conteúdo dos seus segredos.
+        Desenvolvido em Go nativo, executa instantaneamente em pipelines e máquinas locais sem
+        qualquer telemetria. Valores de variáveis e credenciais nunca são impressos em terminal ou
+        logs.
       </>
     ),
   },
   {
-    icon: '🤖',
-    badge: 'Pre-Commit & CI',
-    title: 'Pronto para CI/CD & Hooks',
+    tag: 'Automação Contínua',
+    title: 'Pre-Commit & Autocorreção',
     description: (
       <>
-        Instale pre-commit hooks nativos com <code>envguard hook install</code> e utilize saídas
-        JSON determinísticas para automação no GitHub Actions e pipelines.
-      </>
-    ),
-  },
-  {
-    icon: '🛠️',
-    badge: 'Autocorreção',
-    title: 'Remediação com 1 Comando',
-    description: (
-      <>
-        Com o comando <code>envguard fix</code>, você remove arquivos sensíveis do cache do Git e
-        adiciona as regras necessárias no <code>.gitignore</code> automaticamente.
-      </>
-    ),
-  },
-  {
-    icon: '📊',
-    badge: 'Diagnóstico Claro',
-    title: 'Níveis de Severidade',
-    description: (
-      <>
-        Classificação precisa dos alertas em <strong>CRITICAL</strong>, <strong>WARNING</strong> e{' '}
-        <strong>INFO</strong>, com suporte a flags como <code>--fail-on</code> para bloquear builds
-        arriscados.
-      </>
-    ),
-  },
-  {
-    icon: '⚙️',
-    badge: 'Flexível',
-    title: 'Configuração Simplificada',
-    description: (
-      <>
-        Personalize padrões de busca, exceções de templates e regras customizadas através do arquivo
-        central <code>.envguard.yaml</code> gerado via <code>envguard init</code>.
+        Instale pre-commit hooks nativos com <code>envguard hook install</code> e execute correções
+        automáticas no
+        <code>.gitignore</code> e no cache do Git através de <code>envguard fix</code>.
       </>
     ),
   },
 ];
 
-function Feature({ icon, badge, title, description }: FeatureItem) {
+function PillarCard({ tag, title, description }: PillarItem) {
   return (
-    <div className={clsx('col col--4', styles.featureCol)}>
-      <div className={styles.featureCard}>
-        <div className={styles.featureHeader}>
-          <span className={styles.featureIcon}>{icon}</span>
-          {badge && <span className={styles.featureBadge}>{badge}</span>}
-        </div>
-        <Heading as="h3" className={styles.featureTitle}>
+    <div className={clsx('col col--4', styles.pillarCol)}>
+      <div className={styles.pillarCard}>
+        <span className={styles.pillarTag}>{tag}</span>
+        <Heading as="h3" className={styles.pillarTitle}>
           {title}
         </Heading>
-        <p className={styles.featureDescription}>{description}</p>
+        <p className={styles.pillarDescription}>{description}</p>
       </div>
     </div>
   );
@@ -104,16 +65,16 @@ export default function HomepageFeatures(): ReactNode {
       <div className="container">
         <div className={styles.sectionHeader}>
           <Heading as="h2" className={styles.sectionTitle}>
-            Recursos projetados para proteger seu fluxo de trabalho
+            Construído para engenharia e segurança
           </Heading>
           <p className={styles.sectionSubtitle}>
-            Simplicidade, velocidade e segurança máxima sem atrapalhar a produtividade do time de
-            engenharia.
+            Prevenção ativa contra vazamento de segredos sem adicionar atrito ou dependências
+            lentas.
           </p>
         </div>
         <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
+          {PillarList.map((props, idx) => (
+            <PillarCard key={idx} {...props} />
           ))}
         </div>
       </div>

website/src/components/HomepageFeatures/styles.module.css

@@ -1,94 +1,98 @@
 .featuresSection {
-  padding: 5rem 0;
+  padding: 4.5rem 0;
   width: 100%;
-  position: relative;
+  background-color: var(--ifm-background-color);
+  border-top: 1px solid var(--border-subtle);
 }
 
 .sectionHeader {
   text-align: center;
-  margin-bottom: 3.5rem;
+  margin-bottom: 3rem;
 }
 
 .sectionTitle {
-  font-size: 2.25rem;
+  font-size: 2rem;
   font-weight: 800;
-  letter-spacing: -0.5px;
-  margin-bottom: 0.75rem;
+  letter-spacing: -0.03em;
+  margin-bottom: 0.5rem;
+  color: var(--nordic-indigo);
+}
+
+[data-theme='dark'] .sectionTitle {
+  color: #f8fafc;
 }
 
 .sectionSubtitle {
-  font-size: 1.15rem;
-  color: var(--ifm-color-emphasis-700);
-  max-width: 680px;
+  font-size: 1.05rem;
+  color: #64748b;
+  max-width: 580px;
   margin: 0 auto;
 }
 
-.featureCol {
-  margin-bottom: 2rem;
+[data-theme='dark'] .sectionSubtitle {
+  color: #94a3b8;
+}
+
+.pillarCol {
+  margin-bottom: 1.5rem;
   display: flex;
 }
 
-.featureCard {
+.pillarCard {
   width: 100%;
-  padding: 2rem;
-  border-radius: 16px;
-  background: var(--brand-card-bg);
-  border: 1px solid var(--brand-card-border);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+  padding: 1.75rem;
+  border-radius: 8px;
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-subtle);
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease;
   display: flex;
   flex-direction: column;
 }
 
-.featureCard:hover {
-  transform: translateY(-5px);
-  border-color: var(--brand-purple-neon);
-  box-shadow: var(--brand-glow);
+.pillarCard:hover {
+  border-color: var(--nordic-indigo);
+  transform: translateY(-2px);
 }
 
-.featureHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1.25rem;
+.pillarTag {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--nordic-indigo);
+  background-color: var(--vanilla-cream);
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  align-self: flex-start;
+  margin-bottom: 1rem;
 }
 
-.featureIcon {
-  font-size: 2rem;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  background: rgba(139, 93, 255, 0.12);
-  border: 1px solid rgba(139, 93, 255, 0.2);
+[data-theme='dark'] .pillarTag {
+  background-color: rgba(255, 244, 212, 0.12);
+  color: var(--vanilla-cream);
 }
 
-.featureBadge {
-  font-size: 0.75rem;
+.pillarTitle {
+  font-size: 1.18rem;
   font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  padding: 0.25rem 0.65rem;
-  border-radius: 999px;
-  background: rgba(139, 93, 255, 0.15);
-  color: var(--brand-purple-neon);
-  border: 1px solid rgba(139, 93, 255, 0.25);
+  letter-spacing: -0.02em;
+  margin-bottom: 0.6rem;
+  color: #0f172a;
 }
 
-.featureTitle {
-  font-size: 1.25rem;
-  font-weight: 700;
-  margin-bottom: 0.75rem;
+[data-theme='dark'] .pillarTitle {
+  color: #f1f5f9;
 }
 
-.featureDescription {
-  font-size: 0.95rem;
+.pillarDescription {
+  font-size: 0.9rem;
   line-height: 1.6;
-  color: var(--ifm-color-emphasis-700);
+  color: #64748b;
   margin-bottom: 0;
 }
+
+[data-theme='dark'] .pillarDescription {
+  color: #94a3b8;
+}