Quero que você crie um site institucional completo para a Ótica Império Glasses, uma ótica premium com duas lojas físicas em Sumaré e Hortolândia (interior de São Paulo). O site NÃO é um e-commerce. Ele é uma vitrine digital premium cujo objetivo final é levar o visitante até a loja física — não fechar a venda online.
Nota: a antiga Unidade 3 (Paulínia/Flamboyant) foi encerrada e não deve aparecer em nenhum lugar do site — nem em endereços, nem em textos que mencionem “três cidades” ou “três lojas”.
Posicionamento e tom de voz Pilares da marca: premium, confiança, atendimento humanizado, personalização. Proposta de valor: “Na Ótica Império, o cliente não compra um óculos — recebe uma orientação individual sobre o formato, a cor e a lente certas para o seu rosto, sua rotina e seu estilo de vida, com uma equipe que continua presente depois da compra.” Tom de voz: próximo mas nunca informal demais, direto, sem jargão técnico, seguro e afirmativo — nunca apelativo ou promocional agressivo. Frase de referência da marca (usar como inspiração, não copiar literalmente): a ideia de que óculos é uma decisão de saúde e estilo, então vale escolher com quem realmente orienta o cliente, e não apenas vende. Diferenciais (nessa ordem de prioridade) Atendimento humanizado — a equipe entende a rotina, profissão, estilo de vida e necessidade visual de cada cliente antes de indicar qualquer produto. Visagismo / consultoria de imagem — orientação sobre o melhor formato de armação para o rosto, cores que combinam com o tom de pele e modelos adequados ao estilo pessoal e à rotina. Manutenção de armações — a loja resolve reparos em armações (“Precisou reparar sua armação? Podemos ajudar.”). Não detalhar tipos específicos de reparo. Responsabilidade ambiental — a marca está substituindo suas sacolas por versões recicláveis e estuda uma iniciativa de descarte consciente de óculos antigos. Apresentar como iniciativa em desenvolvimento, nunca como processo já consolidado ou como reciclagem confirmada. Estrutura do site (arquitetura de páginas)
Menu principal, nesta ordem:
Home A Ótica / Sobre Experiência / Atendimento (inclui visagismo) Marcas Serviços (inclui manutenção de armações) Teste de visão Lojas Contato
“Orçamento” deve aparecer como CTA recorrente ao longo do site, não como item fixo de menu. Não criar uma seção “Coleções” — decisão explícita do cliente.
Estrutura da Home (seção por seção) Hero — chamada de “ótica premium com atendimento personalizado em Sumaré, Hortolândia e Paulínia”. CTA: falar no WhatsApp. Proposta de valor — por que a Ótica Império é diferente, em uma frase forte. Atendimento personalizado — destaque visual forte, é o pilar mais importante da marca. Visagismo — explicar o conceito de forma simples e despertar curiosidade (é um termo que muita gente não conhece). Marcas — espaço para logos de marcas trabalhadas [A VALIDAR — lista oficial de marcas ainda não recebida, usar placeholder]. Serviços — com destaque para manutenção de armações. Sustentabilidade — sacolas recicláveis e descarte consciente (como iniciativa em desenvolvimento). Depoimentos — usar depoimentos reais (parafraseados abaixo). Lojas — as três unidades, com endereço e WhatsApp de cada uma. Teste de visão — chamada para a ferramenta interativa. CTA final — reforço de contato e visita às lojas. Conteúdo real a utilizar
Unidades (dados confirmados no site oficial):
Unidade 1 — Sumaré / Matão: Av. Emili Bosco, 586, bairro Matão. Estacionamento em frente à loja. Ambiente amplo e familiar, seguro para todos os gêneros. WhatsApp: https://wa.me/5519984475265 Unidade 2 — Hortolândia / Centro: dentro do Supermercado São Vicente, centro de Hortolândia, ao lado da lotérica. Loja ampla e climatizada. WhatsApp: https://wa.me/5519981131761 Unidade 3 — Paulínia / Flamboyant: Av. Antônio Batista Piva, 1582, bairro Monte Alegre 5. Estacionamento em frente. Loja aconchegante e climatizada. WhatsApp: https://wa.me/5519988512138
Depoimentos reais (reescrever com linguagem própria do site, não copiar literalmente):
Cliente elogiando atendimento diferenciado, variedade de modelos e entrega mais rápida que o previsto — já é o segundo óculos comprado na loja. Cliente destacando o acompanhamento pós-venda (a equipe entra em contato depois da compra para saber da adaptação) e a disponibilidade da equipe tanto por WhatsApp quanto presencialmente para eventuais ajustes. Cliente relatando atendimento de urgência: exame no mesmo dia e óculos pronto em dois dias, com preço justo.
FAQ (usar como base, adaptar redação):
É necessário agendar, para garantir atendimento rápido e sem espera. O exame é confiável — feito com equipamentos modernos e profissionais capacitados. Existe garantia de adaptação: se o cliente não se adaptar ao óculos, a loja resolve. Formas de pagamento: cartão de crédito em até 10x sem juros, débito, Pix, parcelamento em até 24x pela conta de luz, Financiamento Brasil Card. Cidades atendidas: Sumaré, Hortolândia e Paulínia.
Contato e redes sociais:
Facebook: facebook.com/oticaimperiopaulinia Instagram: @oticaimperiopaulinia
Teste de visão online: Ferramenta interativa e educativa, pensada para gerar interesse e leads — nunca apresentar como substituto de exame ou diagnóstico profissional. Incluir aviso claro sobre isso na própria ferramenta.
Orçamento: Criar um formulário simples de solicitação de orçamento, com opção de continuar a conversa no WhatsApp da unidade mais próxima.
O que NÃO fazer Não inventar preços, marcas específicas, endereços adicionais, números de resultados ou depoimentos que não foram fornecidos. Não afirmar que a ótica já recicla óculos — a iniciativa de descarte consciente ainda está em desenvolvimento. Não tratar o teste de visão como diagnóstico médico. Não criar seção “Coleções”. Não estruturar o site como e-commerce (sem carrinho, checkout ou compra online). Direção visual [A VALIDAR COM O MANUAL DA MARCA]
A identidade oficial (cores, tipografia, logotipo em alta resolução) ainda não foi recebida do cliente. Até lá, use esta direção de trabalho, pensada para traduzir “Império” com sofisticação:
Fundo / base: tom ivory claro ( #F7F4EC) combinado com um ink quase preto ( #14171F) para contraste em seções de destaque. Acento: dourado champanhe ( #B8935B), usado com moderação — títulos, ícones, linhas divisórias, nunca como cor dominante. Tom complementar (seção sustentabilidade): verde escuro acinzentado ( #3E4A3B). Tipografia: uma serifada com personalidade (estilo Fraunces) para títulos, combinada com uma sans-serif limpa (estilo Inter) para textos e uma monoespaçada discreta para pequenos rótulos/dados. Fotografia: priorizar imagens reais de loja e produto com iluminação natural — evitar bancos de imagem genéricos sempre que houver material oficial disponível. Design premium, elegante, com bastante espaço em branco — evitar gradientes excessivos, sombras pesadas ou aparência de template genérico. Funcionalidade e UX Site 100% responsivo, com prioridade mobile (grande parte do público local acessa por celular). Botão de WhatsApp sempre visível/acessível, com número correto de cada unidade quando o contexto for uma loja específica. Um CTA principal por seção — sempre ligado a contato, orçamento ou teste de visão. Navegação simples, sem submenus profundos. Cada página deve terminar com um convite claro para conhecer a loja física.
Quero muitas animações Quero que o site tenha um sistema Teste de visão online
Ele falou literalmente:
“O orçamento e um teste de visão. Eu acho que você consegue até me ajudar, cara, a criar esse teste de visão online aí.”
Então, não foi pedido por ele um sistema de medição facial, recomendação automática de óculos ou IA para descobrir o óculos ideal.
O que ele pediu foi:
Teste de visão online
Orçamento
E, separadamente, ele explicou que a loja oferece visagismo, onde o atendimento ajuda o cliente a descobrir:
melhor formato de óculos para o rosto;
melhor cor conforme o tom de pele;
melhor óculos para a rotina;
melhor opção conforme trabalho e lifestyle.
Ou seja, eu misturei o serviço de visagismo que ele oferece presencialmente com a funcionalidade do site que ele efetivamente pediu.
O sistema que devemos criar
Seria algo mais próximo de:
TESTE DE VISÃO ONLINE
Entrada: → usuário inicia o teste → recebe instruções → realiza os testes visuais → responde/seleciona o que consegue enxergar → recebe um resultado orientativo → CTA para falar com a Ótica Império / fazer avaliação presencial / solicitar orçamento
E precisamos deixar claro no sistema que o teste online não substitui uma avaliação profissional.
Em uma seção separada claro
e na home tenha animações fluidas com as principais tendencias de 2026
This project was built with Lovable.
Continue developing this project in the Lovable editor.
main on GitHub and your changes sync back into Lovable, ready for your next prompt.Prefer working locally? You need Node.js and npm — install with nvm.
git clone <this-repository-url>
cd <repository-name>
npm i
npm run dev