PROMPT: CLAUDE DESIGN - LANDING PAGE
⚙️ Como usar este Prompt
- Abra o Claude Design
- Defina um nome para o seu projeto.
- Selecione: High Fidelity e clique em Create
- Copie e cole o prompt completo que está abaixo
Nota: Você pode alterar o link e os detalhes como fonte, nome, etc... Mas mantenha o restante da estrutura do prompt.
⬇️ Copie o prompt completo abaixo ⬇️
Crie uma landing page de página única para um estúdio de fotografia premium com estética cinematográfica escura, utilizando vídeo de fundo em tela cheia, elementos de UI com efeito liquid glass e foco em conversão de clientes. Use React, TypeScript, Tailwind CSS e ícones do Lucide React.
🎬 Background Video:
* Vídeo em tela cheia, sem som, autoplay e em loop, cobrindo todo o viewport (object-cover, posição absoluta)
* URL do vídeo:
https://d8j0ntlcm91z4.cloudfront.net/user_36vaiQ6XHoGm1OjQEk5NGn4BLtD/hf_20260426_184351_8967e7a4-f01b-4fda-a4d1-bf0439745435.mp4
* Aplicar deslocamento vertical de 17% (translate-y-[17%]) para cortar a parte superior e destacar o conteúdo visual mais interessante
* Implementar sistema de fade com JavaScript (não usar CSS transitions):
* Fade-in de 500ms usando requestAnimationFrame ao carregar ou reiniciar o vídeo
* Fade-out de 500ms quando faltar 0.55 segundos para o fim
* Usar uma flag (fadingOutRef) para evitar múltiplos triggers no evento timeUpdate
* Ao terminar: opacidade vai para 0, espera 100ms, reseta currentTime para 0, dá play e faz fade-in novamente
* Cancelar animações anteriores antes de iniciar novas
* Fades devem continuar a partir da opacidade atual, sem “pulos”
* Container externo: min-h-screen bg-black overflow-hidden
✍️ Tipografia:
* Importar a fonte Google "Instrument Serif" (regular e itálico)
* Usar no heading principal com:
fontFamily: "'Instrument Serif', serif"
🧊 Estilo Liquid Glass (.liquid-glass):
* Fundo: rgba(255,255,255,0.01) com background-blend-mode: luminosity
* backdrop-filter: blur(4px)
* border: none
* box-shadow interno leve
* pseudo-elemento ::before criando borda com gradiente
* usar mask para mostrar apenas a borda
* pointer-events: none
📐 Layout:
🔝 Navbar (z-20, pl-6 pr-6 py-6):
* Container central: rounded-full px-6 py-3 flex justify-between max-w-5xl mx-auto
* Esquerda:
* Ícone Camera (lucide-react, size 24)
* Nome do estúdio: "Luz & Sombra"
* Estilo: text-white font-semibold text-lg gap-2
* Links (hidden mobile, md:flex):
* "Portfólio"
* "Serviços"
* "Sobre"
* Direita:
* "Agendar Ensaio" (texto simples branco)
* "Contato" (botão liquid glass)
🎯 Hero (centro da tela, -translate-y-[20%]):
Título principal:
"Fotografia que captura o que você sente"
* text-5xl md:text-6xl lg:text-7xl
* branco, tracking-tight, sem quebra de linha
* fonte Instrument Serif
Sub-container abaixo do título (max-w-xl):
1. Barra de contato (estilo input):
* placeholder: "Seu melhor e-mail"
* botão circular branco com ícone ArrowRight
* ação: simular captação de leads
2. Texto de apoio:
"Ensaios únicos, luz natural e direção profissional para transformar momentos em memórias que permanecem."
* text-sm, branco com leve transparência
1. Botão secundário:
"Ver Portfólio Completo"
* liquid-glass, rounded-full, hover sutil
📸 Seção opcional dentro do hero (overlay leve):
Adicionar pequeno texto abaixo ou flutuante:
"Casamentos • Ensaios • Retratos • Comercial"
🌐 Footer social (centralizado):
* Ícones circulares:
* Instagram
* Globe (site)
* Mail
* Estilo liquid-glass
* hover suave
⚙️ Stack técnica:
* Vite
* React 18
* TypeScript
* Tailwind CSS 3 (config padrão)
* lucide-react (ícones)
🎯 Intenção do design:
* Sensação premium e emocional
* Foco em conversão (lead ou agendamento)
* Visual cinematográfico, elegante e minimalista
* Priorizar impacto visual imediato (primeiros 3 segundos)