Sobre este template
Datacore Booking é uma referência prática para um produto de IA ou SaaS: hero com layout definido, medidas tiradas e tudo pronto para reconstruir. O título da própria página é “Book your perfect stay instantly and hassle-free”, e a composição é construída em volta exatamente dessas palavras. A cor se limita a preto #171717 por baixo, cinza #D4D4D4 para a tipografia e índigo vivo #7B39FC carregando os destaques, composta em Manrope. A entrega é React e Tailwind CSS, capturada em 800x553 para a moldura estar fixada antes de qualquer linha de código. Deixe aberto enquanto escreve: o briefing de 2.826 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Profissionais de marketing que herdam esta hero vão usar passos de espaçamento de 14px para conferir se uma reescrita manteve a escala.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Datacore Booking.
- Se o seu time de design já roda um design system, esta hero é o argumento para gastar a única cor saturada dele em #7B39FC.
O que está incluído
- Uma barra sem excesso. Os links ficam em uma linha só, em um único tamanho, e a ação #7B39FC fecha a fileira à direita, então o olho termina onde a navegação termina. Os links são compostos abaixo da marca em tamanho, e a ação #7B39FC é o único elemento da barra com peso.
- Os tamanhos estão no briefing, não em uma escala. O briefing declara os tamanhos na captura (passos de espaçamento de 14px), então dá para conferir uma reconstrução em vez de estimá-la. Cada valor corresponde a uma função: um passo de tipo, um espaço, um raio ou uma transição. Os números são o design; o resto é arranjo.
- A escala cai com força. Com Manrope fazendo o trabalho, os tamanhos caem com força do título para o texto de apoio e o letter-spacing aperta conforme o tamanho cresce, então a hierarquia é carregada pela tipografia e não pela cor. Os passos de tamanho são valores fixos, e é isso que permite trocar a família mantendo a mesma hierarquia.
- Links antes da ação. Marca, links e a ação #7B39FC compartilham uma linha de base, e é isso que impede uma fileira fina de parecer acidental.
Movimento e interação
Feedback nos controles
Só os controles respondem ao ponteiro (estados de hover nos botões e links, não em todos os cards), então a página parece responsiva sem transformar cada elemento em um alvo. Nada na página abre um modal ou sequestra o scroll; as interações ficam locais ao elemento.
Quase nenhum movimento
Não há biblioteca de scroll aqui: a composição em 800x553 fica parada e só se movem os elementos que respondem a você. Não há biblioteca de animação no briefing, o que mantém a reconstrução enxuta.
Por que esta composição funciona para SaaS
Datacore Booking é a referência de hero para um produto de IA ou SaaS e responde ao problema que esse público realmente tem. “Book your perfect stay instantly and hassle-free” já faz esse trabalho desde o primeiro frame. A paleta se mantém disciplinada (preto #171717 e índigo vivo #7B39FC) e a tipografia é Manrope, então nada na composição depende de uma tendência emprestada. Na hora de briefar uma construção, é esta a parte que vale copiar: uma promessa no tamanho de display, com o detalhe de apoio mantido abaixo dela. Datacore Booking enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Como a hero se reorganiza
Uma escala fixa de desktop teria sido mais fácil. O briefing acrescenta um clamp entre 96px e 14px, que é o que mantém a linha de display proporcional entre larguras. Os dois estados estão descritos no mesmo briefing.
Como Datacore Booking ordena a primeira leitura
O preço é a paciência: a página retém o detalhe que uma grade escaneável entregaria de imediato. O que ela compra é uma primeira tela em que a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo não podem ser mal interpretados. O leitor de SaaS recebe a oferta antes das opções.
Perguntas frequentes
O que o briefing por trás de Datacore Booking contém de fato?
O briefing capturado tem 2.826 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Preciso de React e Tailwind CSS para reconstruir Datacore Booking?
Datacore Booking foi construído em React e Tailwind CSS, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
Posso usar Datacore Booking em um projeto de cliente?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 800x553.
