Create a premium, high-converting mobile-first landing page for an AI-powered personal photo upgrade service called "melhor.IA".
BRAND POSITIONING:
This is not just a photo service. It is a personal image upgrade.
Focus on perception, confidence, and how the user is seen by others.
STYLE:
- Dark premium UI
- Subtle neon gradients (blue, purple, pink)
- Clean, modern, minimal
- Luxury feel (similar to high-end SaaS or Apple-like simplicity)
- Smooth spacing, strong typography, soft glow borders
COPY TONE:
- Simple, confident, premium
- No hype words like “amazing” or “ultra-realistic”
- Focus on real-world benefits: confidence, credibility, presence
STRUCTURE:
- HERO SECTION
Headline:
"Your image, at the level it should be"
Subheadline:
"Turn everyday selfies into natural, professional photos — ready for LinkedIn, social media, or personal branding."
Short bullets:
- No studio needed
- Simple and fast
- Delivered in 48h
Primary CTA:
"Create my photos"
Trust indicators:
- Secure payment
- 48h delivery
- Satisfaction guarantee
- BEFORE vs AFTER (CORE SECTION)
Title:
"See the difference"
Subtitle:
"Same person. Elevated presence."
- Use side-by-side comparisons (realistic transformations only)
- Maintain identity consistency
- Avoid overly artificial or exaggerated edits
- Add small label: "Real results"
- PERCEPTION / USE CASE
Title:
"Where your image makes an impact"
Items:
- LinkedIn → stronger professional presence
- Instagram → cleaner, more intentional profile
- WhatsApp → better first impression
- HOW IT WORKS
Title:
"Simple by design"
Steps:
- Upload your photos
- Choose your style
- Receive your photos in up to 48h
- Minimal icons
- Clean layout
- STYLE OPTIONS
Title:
"Adapt your image to your moment"
Cards:
-
Professional → for work and credibility
-
Lifestyle → natural and modern
-
Creator → expressive and personal
-
Keep same person across styles
- SOCIAL PROOF
Title:
"Trusted by hundreds"
- Short testimonials (realistic tone)
- Stats (e.g. 500+ clients)
- Keep it subtle and clean
- PRICING (PREMIUM PERCEPTION)
Title:
"Start your image upgrade"
Highlight:
"5 professional photos — R$34,90"
Support text:
"Studio-quality results, without the studio"
- Show crossed higher price anchor
- Reinforce value, not cheapness
CTA:
"Get started"
- GUARANTEE
Title:
"No risk"
Text:
"We refine your photos until you're satisfied."
- FINAL CTA
Reinforce:
- Confidence
- Ease
- Fast delivery
CTA:
"Upgrade my image"
UX DETAILS:
- Sticky CTA button on mobile
- Smooth scrolling
- Rounded cards with soft glow
- Strong hierarchy and spacing
IMAGE GUIDELINES:
- Use provided before/after images
- Ensure realism and trust
- Avoid over-editing
- Maintain identity consistency
KEY BRAND WORDS TO REPEAT:
- your image
- your presence
- how you are seen
Vou criar uma landing page completamente nova com a estética premium e minimalista que você descreveu. Primeiro, deixe-me verificar a estrutura atual e então reconstruir tudo.
Vou atualizar o CSS para uma estética mais premium e minimalista, e depois reconstruir a página completa com os novos componentes:
Agora vou criar a nova landing page premium completa com todos os componentes em um arquivo estruturado:
A nova landing page premium da melhor.IA foi criada com sucesso. O design agora segue uma estetica minimalista e luxuosa com fundo escuro sutil, gradientes neon discretos (azul, roxo, rosa), tipografia forte com Playfair Display nos titulos e DM Sans no corpo, cards com brilho suave nas bordas, e espacamento generoso. A copy foi reformulada para um tom confiante e premium, focando em percepcao, presenca e credibilidade — sem palavras exageradas. Todas as imagens antes/depois fornecidas estao integradas na secao de resultados, e a imagem de estilos (Corporativo, Lifestyle, Criador) aparece na secao correspondente.
Vou atualizar o globals.css para adicionar as cores da marca (roxo e amarelo), as animacoes originais (shimmer, wiggle, float, bounce, pulse), e corrigir as etiquetas das fotos com fonte amarela. Tambem preciso ler o restante do page.tsx:
Agora vou fazer as alteracoes necessarias:
- Atualizar globals.css com cores da marca (roxo e amarelo) e animacoes originais
- Corrigir as etiquetas das fotos de resultado (mover para o lado direito, fonte amarela)
Agora vou corrigir as etiquetas das fotos de resultado (mover para direita e usar fonte amarela):
Agora vou adicionar os blobs animados no hero e atualizar algumas cores/animacoes para usar as cores da marca:
Agora vou atualizar o headline para usar o gradiente animado da marca e melhorar algumas animacoes:
Vou atualizar o preco para usar a cor amarela da marca:
Vou atualizar as estatisticas para usar o gradiente da marca:
Vou atualizar o CTA final para usar a animacao wiggle e melhorar o gradiente:
Vou atualizar o botao flutuante para usar a animacao bounce:
Pronto. As alteracoes foram aplicadas:
- Cores da marca restauradas no globals.css: roxo (
#7b2fff), amarelo (#ffe94d), pink (#ff3cac), cyan (#00f5ff) e orange (#ff7a1a) - Animacoes originais restauradas: shimmer, float, wiggle, bounce, pulse-glow, pulse-dot
- Blobs animados adicionados no hero (roxo, rosa e azul com animacao float)
- Etiquetas "Resultado real" corrigidas: movidas para o canto direito inferior com fonte amarela (estilo igual ao banner de estilos), fundo escuro com blur e texto em uppercase
- Gradientes animados no headline e estatisticas usando o shimmer cyan-pink-yellow
- Preco em amarelo na secao de pricing
- CTAs com animacao wiggle e botao flutuante com bounce