🎨 Catálogo de Diseños AntropoBlue

Componentes y diseños reutilizables para el sitio web de AntropoBlue. Todos utilizan variables CSS del design system.

🎭 Hero Sections

Hero Primary Dark Fondo oscuro + Trust indicators

Herramienta profesional de análisis
para investigación académica

Título Principal del Hero

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos quibusdam vel natus.

✓
Académico
🔒
Privado
⚡
Rápido
Hero Gradient Primary Gradient + Badges
💰 Precios Transparentes🎓 Para Académicos

Título con Gradient

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodo veniam temporibus.

30 días
Prueba gratuita
50%
Descuento estudiante
0€
Setup inicial
Hero Light Fondo blanco + Accent azul

Hero Con Fondo Claro

Perfecto para secciones internas o cuando quieres un aspecto más limpio y profesional.

Hero Split 50% Texto + 50% Visual

Hero con Layout Split

Ideal para mostrar productos, aplicaciones o servicios con una imagen o demo visual prominente.

  • ✓ Característica importante 1
  • ✓ Característica importante 2
  • ✓ Característica importante 3
📱

Placeholder para Imagen/Demo

Hero Minimal Limpio y simple

Hero Minimalista

Para cuando quieres elegancia y simplicidad. Perfecto para páginas de landing o secciones que necesitan enfoque.

Hero CTA Focus Optimizado conversión
🚀 Oferta Limitada - 50% OFF

Comienza Tu Investigación Hoy

Únete a más de 500 investigadores que ya utilizan AntropoBlue

No necesitas tarjeta de crédito • Cancela cuando quieras

✓ Setup en 2 minutos✓ Soporte 24/7✓ Datos privados

🎴 Cards

Card Basic Estándar

Título de la Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.

Card Professional Gradient + Shadow

Muestra Estadísticamente Significativa

Más de 38M de usuarios activos: muestra amplia y diversa para investigación social rigurosa.

Por qué los Académicos Abandonan Twitter
→
El Auge de Bluesky
→
Card Service Icono + Features
📊
Tiempo Real

Monitorización en Tiempo Real

Sigue menciones, hashtags y conversaciones sobre tu marca con actualizaciones automáticas.

🔍Detección automática de menciones
🎯Keywords personalizables
⚡Alertas instantáneas
Card Pricing Precio destacado
MÁS POPULAR

Profesional

12€
por mes
  • ✓ 6-20 proyectos simultáneos
  • ✓ Keywords ilimitadas
  • ✓ Soporte prioritario

🔲 Grids y Layouts

Grid 2 Columnas 50/50 responsive

Columna 1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Columna 2

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Grid 3 Columnas Equilibrado
📊

Análisis

Herramientas de análisis avanzadas

🔍

Búsqueda

Sistema de búsqueda inteligente

📈

Reportes

Informes personalizados

Grid 4 Columnas Features/servicios

Muestra Estadística

38M usuarios activos

Migración Digital

Twitter → Bluesky

API Cerrada

vs. Ciencia Abierta

Sesgo Algorítmico

Documentado

Grid Timeline Línea central + pasos

Crear Proyecto

Setup en 2 minutos

1
📝
📊
2

Análisis Automático

Dashboard 24/7

Tablas

Tabla Básica

fondo-blancobordes-sutilesresponsive
FuncionalidadDescripciónEstado
Análisis AutomáticoRecolección de datos cada 30 minutosActivo
Dashboard VisualGráficos interactivos y métricasDesarrollo
Alertas InteligentesNotificaciones automáticas personalizadasPlanificado

Tabla Comparativa

3-columnasdestacar-columnagradientes

Básico

0€

para siempre

  • ✓ 1 usuario BlueSky
  • ✓ Análisis básico
  • ✗ Dashboard avanzado
MÁS POPULAR

Profesional

29€

por mes

  • ✓ 10 usuarios BlueSky
  • ✓ Análisis avanzado
  • ✓ Dashboard premium

Empresa

99€

por mes

  • ✓ Usuarios ilimitados
  • ✓ API personalizada
  • ✓ Soporte prioritario

Tabla de Datos

stripediconosstats
MétricaValor ActualTendenciaEstado
👥 Seguidores2,847+12.5%✓ Óptimo
📝 Posts145-2.1%⚠ Atención
👍 Likes8,923+34.7%✓ Excelente
🔄 Reposts1,249-8.3%✗ Revisar

Botones

Botones Primarios

gradientefecto-hoverCTA

Botones Secundarios

bordesfondo-transparenteoutline

Botones con Icono

iconosflexinteractivos

Componentes Auxiliares

Badges y Etiquetas

colores-semánticosroundedstatus
ActivoPendienteDesactivadoNuevoPremiumDestacadoGeneral

Alertas y Notificaciones

iconoscolores-semánticosdismissible
✓
Proyecto creado correctamente
Tu nuevo proyecto de análisis BlueSky está listo para usar.
⚠️
Cuota casi agotada
Has utilizado el 85% de tu límite mensual de análisis.
✗
Error de conexión
No se ha podido conectar con la API de BlueSky. Inténtalo más tarde.
ℹ️
Actualización disponible
Nueva versión con mejoras de rendimiento y nuevas funcionalidades.

Breadcrumbs

navegaciónjerarquíaenlaces

Barras de Progreso

animadasporcentajescolores
Configuración del proyecto75%
Recolección de datos92%
70%
Análisis completado
2,347 usuarios procesados