Componentes
Wavy Divider
Divider decorativo SVG ondulado em secondary-300. Marca transições suaves entre seções de landing pages e documentos longos.
Default
Sem props. Usa cor text-secondary-300 e margens verticais my-16.
Decorativo — aria-hidden="true" por padrão.
<WavyDivider />
<WavyDivider /><template>
<svg viewBox="0 0 1200 60" aria-hidden="true" class="my-16 w-full text-secondary-300">
<path fill="currentColor" d="M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0 Z"/>
</svg>
</template>
<template>
<svg viewBox="0 0 1200 60" aria-hidden="true" class="my-16 w-full text-secondary-300">
<path fill="currentColor" d="M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0 Z"/>
</svg>
</template><svg viewBox="0 0 1200 60" aria-hidden="true" className="my-16 w-full text-secondary-300">
<path fill="currentColor" d="M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0 Z"/>
</svg>
<svg viewBox="0 0 1200 60" aria-hidden="true" className="my-16 w-full text-secondary-300">
<path fill="currentColor" d="M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0 Z"/>
</svg><svg viewBox="0 0 1200 60" aria-hidden="true" class="my-16 w-full text-secondary-300">
<path fill="currentColor" d="M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0 Z"/>
</svg>
<svg viewBox="0 0 1200 60" aria-hidden="true" class="my-16 w-full text-secondary-300">
<path fill="currentColor" d="M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0 Z"/>
</svg>Uso
Coloque entre seções principais de uma página. Já consumido em landing
(/), termo de uso e contato.
<section>...conteúdo seção 1...</section>
<WavyDivider />
<section>...conteúdo seção 2...</section>