Componente de Tarjetas FAQ Neumórficas

Un componente FAQ moderno con diseño neumórfico, sombras suaves e interactivas tarjetas que crean una apariencia táctil y extruida.

Características

• Diseño Neumórfico: Diseño UI suave con sombras sutiles que crean un efecto extruido
• Diseño de Tarjetas: Diseño de cuadrícula con tarjetas individuales para cada elemento del FAQ
• Animaciones Suaves: Transiciones elegantes al expandir/contraer respuestas
• Cuadrícula Responsive: Se ajusta automáticamente a diferentes tamaños de pantalla
• Elementos Interactivos: Las tarjetas responden a la interacción del usuario con efectos hover
• Personalizable: Fácil de personalizar con variables CSS

Estructura HTML

<div class="neumorphic-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Preguntas Frecuentes</h2>
    <p class="faq-subtitle">Explora nuestra base de conocimiento</p>
  </div>
  
  <div class="faq-grid">
    <div class="faq-card">
      <div class="card-question">
        <h3>¿Qué es el diseño neumórfico?</h3>
        <div class="card-icon">+</div>
      </div>
      <div class="card-answer">
        <p>El neumorfismo es una tendencia de diseño UI que crea elementos que parecen extruirse del fondo, usando sombras sutiles.</p>
      </div>
    </div>
    
    <div class="faq-card">
      <div class="card-question">
        <h3>¿Cómo funciona este FAQ?</h3>
        <div class="card-icon">+</div>
      </div>
      <div class="card-answer">
        <p>Simplemente haz clic en cualquier pregunta para expandir y ver la respuesta detallada. Las tarjetas tienen transiciones suaves.</p>
      </div>
    </div>
    
    <div class="faq-card">
      <div class="card-question">
        <h3>¿Es amigable para móviles?</h3>
        <div class="card-icon">+</div>
      </div>
      <div class="card-answer">
        <p>¡Absolutamente! Este diseño es completamente responsive y funciona bellamente en todos los tamaños de dispositivo.</p>
      </div>
    </div>
    
    <div class="faq-card">
      <div class="card-question">
        <h3>¿Puedo personalizarlo?</h3>
        <div class="card-icon">+</div>
      </div>
      <div class="card-answer">
        <p>¡Sí! El diseño es fácilmente personalizable con variables CSS para colores, sombras y espaciado.</p>
      </div>
    </div>
  </div>
</div>

Estilos CSS

.neumorphic-faq-container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #e0e5ec;
  min-height: 100vh;
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem;
}

.faq-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.faq-subtitle {
  color: #6b7280;
  font-size: 1.1rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.faq-card {
  background: #e0e5ec;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 8px 8px 16px #b8bec6, -8px -8px 16px #ffffff;
  transition: all 0.3s ease;
  cursor: pointer;
}

.faq-card:hover {
  box-shadow: 6px 6px 12px #b8bec6, -6px -6px 12px #ffffff;
  transform: translateY(-5px);
}

.faq-card.active {
  box-shadow: inset 6px 6px 12px #b8bec6, inset -6px -6px 12px #ffffff;
}

.card-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.card-question h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
  font-weight: 600;
}

.card-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e0e5ec;
  box-shadow: inset 2px 2px 4px #b8bec6, inset -2px -2px 4px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.3s ease;
}

.faq-card.active .card-icon {
  transform: rotate(45deg);
  background: #d1d8e0;
}

.card-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-card.active .card-answer {
  max-height: 200px;
  padding-top: 1rem;
}

.card-answer p {
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .neumorphic-faq-container {
    padding: 1rem;
  }
  
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .faq-title {
    font-size: 2rem;
  }
}

Funcionalidad JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const faqCards = document.querySelectorAll('.faq-card');
  
  faqCards.forEach(card => {
    const question = card.querySelector('.card-question');
    
    question.addEventListener('click', () => {
      const isActive = card.classList.contains('active');
      
      // Close all other cards
      faqCards.forEach(otherCard => {
        if (otherCard !== card) {
          otherCard.classList.remove('active');
        }
      });
      
      // Toggle current card
      if (isActive) {
        card.classList.remove('active');
      } else {
        card.classList.add('active');
      }
    });
  });
});

Guía de Implementación

1. Copia la estructura HTML en tu proyecto
2. Agrega los estilos CSS a tu hoja de estilos
3. Incluye el código JavaScript en tu archivo de script
4. Personaliza los colores y sombras para que coincidan con tu sistema de diseño
5. Agrega tu propio contenido del FAQ

Las tarjetas FAQ neumórficas presentan un diseño UI suave con sombras sutiles que crean un efecto extruido, dando a la interfaz una apariencia táctil y tridimensional. El diseño de cuadrícula se ajusta automáticamente a diferentes tamaños de pantalla, asegurando una gran experiencia tanto en escritorio como en dispositivos móviles.