Crie Sua Imagem Personalizada com Next.js e Tailwind CSS

Crie-uma-página-responsiva-para-geração-de-imagens-usando-Next.js-v14,-Tailwind-CSS-e-Shadcn-UI.-A-página-deve-permitir-que-o-usuário:-Insira-um-texto-como-prompt-para-geração-de-imagem.-Escolha-um-dos-5-estilos-de-imagem-pré-definidos.-Selecione-a-orientação/tamanho-da-imagem-(retratos,-paisagens-ou-quadrado).-Clique-em-um-botão-para-gerar-a-imagem.-Os-dados-do-formulário-devem-ser-enviados-para-o-webhook-https://api.hostbrev.online/webhook/imagens,-e-a-resposta-será-uma-imagem-em-formato-binário-que-deverá-ser-exibida-na-página.-Detalhes-da-página:-Design-sem-barra-lateral-Adicione-exemplos-de-imagens-geradas-abaixo-do-formulário,-para-inspirar-os-usuários.-Paleta-de-cores:-Fundo-principal:-#ffffff-(branco).-Botões-e-destaques:-#2563eb-(azul).-Textos:-tons-de-cinza-escuro.-A-página-deve-ser-responsiva,-com-uma-excelente-experiência-em-dispositivos-móveis-e-desktop.-Inclua-animações-ou-transições-suaves-para-tornar-a-interação-mais-agradável.-Exiba-mensagens-de-erro-para-falhas-na-geração-e-um-indicador-de-carregamento-enquanto-a-imagem-está-sendo-gerada.-Componentes-necessários:-Área-Principal:-Campo-de-texto-para-o-prompt.-Seleção-de-estilo-(usando-botões-ou-dropdown).-Seleção-de-orientação/tamanho-(retratos,-paisagens,-quadrado).-Botão-de-"Gerar-Imagem".-Pré-visualização-dinâmica-da-imagem-gerada.-Seção-com-exemplos-de-imagens-geradas-para-inspiração."