Skip to content

gui-bus/Haven

Repository files navigation

HAVEN

Thumbnail Haven

React NextJS Typescript Tailwind Framer Motion Phosphor Icons Husky Conventional Commits Biome Cursor Gemini Windsurf

📖 Panorama Geral

O HAVEN é uma landing page de altíssimo padrão para uma barbearia boutique enraizada em técnicas clássicas. O projeto foi concebido para elevar a experiência de autocuidado masculino através de uma estética de Magazine Editorial, priorizando a tipografia serifada monumental, composições assimétricas e uma narrativa visual imersiva.

🎯 Diferenciais Estratégicos

  • Estética de Santuário: Design inspirado em publicações de luxo, utilizando uma paleta sóbria, texturas orgânicas e um sistema de grid que valoriza o "espaço em branco".
  • Ritual Digital: Transições suaves e orquestração de animações que replicam a calma e a precisão de um atendimento premium.
  • Arquitetura Global: Sistema de internacionalização (PT/EN) robusto, permitindo uma navegação fluida sem poluição de URLs, focado em SEO e performance.

✨ Ecossistema de Funcionalidades

🎞️ Narrativa Visual (Hero & Heritage)

  • The Gentleman's Sanctuary: Um cabeçalho monumental que estabelece a atmosfera de exclusividade e o patrimônio da marca desde o primeiro segundo.
  • Scroll-Spy Rituals: Sistema de navegação inteligente que guia o usuário através dos pilares da marca: Ofício, Honra e Maestria.

✂️ O Livro de Serviços & Artesãos

  • Interactive Ledger: Showcase de serviços (Corte Assinatura, Protocolo Haven, Escultura de Barba) com micro-interações de hover e foco em detalhes técnicos.
  • The Collective (Team): Carrossel interativo de portraits dos mestres barbeiros, destacando a biografia e especialidade de cada artesão.
  • The Path of Perfection: Seção explicativa "How It Works" que detalha as etapas do ritual, da consulta master ao pós-trato.

🏛️ Círculo de Membros

  • Membership Protocols: Sistema de planos de assinatura (Aprendiz, Mestre e Lenda) apresentado com design de cartões de luxo e diferenciação de benefícios.

🛠️ Deep Dive Tecnológico

Arquitetura de Internacionalização

O projeto utiliza o next-intl com detecção inteligente:

  • Cookie-Based Locale: O idioma é gerenciado via NEXT_LOCALE, mantendo a URL limpa (haven.guibus.dev/) e garantindo persistência na preferência do usuário.
  • Server-Side Rendering: Todas as mensagens são processadas no servidor, garantindo tempos de carregamento instantâneos e indexação perfeita.

Performance e Estilização

  • Tailwind CSS v4: Aproveita o compilador de nova geração para um CSS ultra-otimizado e gerenciamento de variáveis de design complexas.
  • Framer Motion 12: Implementação de useScroll e useTransform para efeitos de paralaxe sofisticados e revelação de seções baseada em viewport.
  • Biome Toolchain: Garantia de código limpo, rápido e padronizado com um dos ecossistemas de linting mais performáticos da atualidade.

About

O HAVEN é uma landing page de altíssimo padrão para uma barbearia boutique enraizada em técnicas clássicas. O projeto foi concebido para elevar a experiência de autocuidado masculino através de uma estética de Magazine Editorial, priorizando a tipografia serifada monumental, composições assimétricas e uma narrativa visual imersiva.

Topics

Resources

Stars

Watchers

Forks

Contributors