SIN FINES DE LUCRO · Tailwind CSS · Vanilla JS · HTML5

JurisNova – Servicios legales claros y consulta gratuita

★★★★★4,8 2.762 descargas

Tema web para JurisNova, despacho jurídico que brinda consultoría clara y gratuita. Incluye navbar fija, hero impactante, áreas de práctica, testimonios y CTA de agenda, todo responsive y accesible. Construido con HTML, Tailwind CDN y JavaScript puro.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia **JurisNova** (jurisnova.com), sector legal, usando **HTML**, **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. Replicar el diseño visual y la estructura del sitio original sin copiar texto ni imágenes literales. Utiliza los siguientes componentes y patrones:

- **Paleta de colores**: #0A0A0A (fondo negro), #FFFFFF (texto blanco), #1E3A8A (azul profundo para botones y enlaces), #F3F4F6 (gris claro para fondos de secciones). 
- **Tipografía**: Fuente principal "Inter" (Google Fonts), peso 400‑600, tamaños H1 48px, H2 36px, H3 28px, texto regular 16px.

**Header** (navbar fija): logo placeholder (SVG), enlaces Home, Sobre nosotros, Áreas de práctica, Blog, Casos de éxito, Contacto; botón destacado "Consulta gratuita" con fondo azul y texto blanco. Menú colapsable en móvil.

**Sección Hero**: fondo negro con texto H1 "Protegiendo tus derechos, resolviendo tus retos" en blanco, párrafo corto, dos botones ("Contratar experto" y "Llamar ahora" con ícono teléfono), tarjeta pequeña con número "20+" y texto "Abogados" y contador animado simple, imagen a la derecha (placeholder). Animaciones de entrada suaves (fade‑in, slide‑in) usando CSS.

**Sección Marcas**: carrusel horizontal automático de 9 logos (SVG placeholders) con efecto de desplazamiento continuo.

**Sección Áreas de práctica**: título "Navegando la complejidad legal con precisión" (H2), grid 3 columnas en desktop, 1‑2 columnas en tablet, tarjetas con borde redondeado, ícono SVG, título de práctica, breve descripción y enlace "Leer más".

**Sección Testimonios**: tarjetas con foto circular de cliente (placeholder), cita en texto cursiva, nombre y cargo.

**Sección CTA final**: fondo azul profundo, texto centrado "¿Listo para tu consulta?", botón grande "Agenda tu consulta".

**Footer**: fondo gris claro, 4 columnas – Enlaces institucionales, Áreas de práctica, Contacto (dirección ficticia, teléfono, email), suscripción (campo email + botón). Íconos de redes sociales (SVG).

**Páginas adicionales**: About, Practice‑Area, Blog, Case‑Result, Contact – cada una con la misma cabecera y pie de página, siguiendo la tabla de bloques proporcionada.

**Requisitos técnicos**:
- Código totalmente autocontenido, sin dependencias externas excepto Tailwind CDN y Google Fonts.
- Utiliza `data-` atributos para animaciones y control de menú mobile.
- Implementa scroll‑smooth y toggle de menú con vanilla JS.
- Asegura accesibilidad (aria‑labels, contraste). 
- Responsive: mobile‑first, breakpoints Tailwind (sm, md, lg, xl).
- Comentarios claros en HTML para cada bloque enumerado.

Genera el archivo `index.html` con todo el markup y scripts incluidos.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

3.038 caracteres · 47 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación con logo, enlaces y botón
1.2 Hero con título, CTA, contacto rápido, estadística y imagen
1.3 Carrusel de logos de marcas asociadas
1.4 Área de práctica: tarjetas con iconos y textos
1.5 Testimonios de clientes
1.6 Llamada a la acción final
1.7 Footer con información institucional y contacto

ABOUT

1.1 Header interno con título "Sobre nosotros"
1.2 Texto descriptivo de la firma y misión
1.3 Equipo: tarjetas de abogados con foto, nombre y especialidad
1.4 Valores y certificaciones en iconos
1.5 CTA para descargar presentación
1.6 Footer reutilizado

PRACTICE-AREA

1.1 Header con título "Áreas de práctica"
1.2 Grid de tarjetas de práctica (icono, nombre, breve descripción)
1.3 Filtro por categoría
1.4 CTA a contacto especializado
1.5 Footer reutilizado

BLOG

1.1 Header con título "Blog"
1.2 Lista de artículos en tarjetas (imagen, título, excerpt, fecha)
1.3 Paginación
1.4 Sidebar con categorías y últimos posts
1.5 Footer reutilizado

CASE-RESULT

1.1 Header con título "Casos de éxito"
1.2 Grid de resultados con número y breve descripción
1.3 Testimonios destacados
1.4 CTA para solicitar caso similar
1.5 Footer reutilizado

CONTACT

1.1 Header con título "Contacto"
1.2 Formulario de solicitud de consulta (nombre, email, teléfono, mensaje)
1.3 Mapa incrustado
1.4 Información de contacto directo
1.5 Footer reutilizado

PROMPTS RELACIONADOS · SIN FINES DE LUCRO

Otros prompts de la misma categoría

Ficha de marca

Nombre: JurisNova
Sector: Servicios legales y consultoría jurídica
Claim: Resolviendo retos legales con claridad

Bloques de la home

1.1 Barra de navegación con logo, enlaces principales y botón de consulta gratuita
1.2 Hero: título destacado, botones de contratación y contacto rápido, tarjeta de estadística y contadores, imagen lateral
1.3 Sección de marcas/colaboradores con carrusel de logos
1.4 Área de práctica: encabezado, lista de tarjetas con icono, título y breve descripción
1.5 Testimonios de clientes con citas y foto
1.6 Llamada a la acción final para agendar consulta
1.7 Footer con enlaces institucionales, datos de contacto, redes sociales y suscripción a newsletter

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada