MedPrompt
Voltar ao catálogo
Ferramentas de IA

Landing Page Dark Minimalista (estilo Asme)

Prompt extremamente detalhado para gerar landing page dark minimalista com efeito liquid glass, vídeos em background, tipografia Instrument Serif e animações Framer Motion

#codigo#landing-page#react#tailwind#framer-motion#dark-mode#liquid-glass#design-minimalista

Prompt

Crie uma landing page escura e minimalista para uma marca chamada "Asme" usando React, TypeScript, Tailwind CSS, Framer Motion e ícones Lucide React. A página inteira tem fundo bg-black. A página é composta por 5 seções nesta ordem: Hero, About, Featured Video, Philosophy, Services.

FONTE

Importe a Google Font "Instrument Serif" (itálica e regular) em index.css:

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

A fonte padrão do body é a sans-serif padrão do sistema/Tailwind. "Instrument Serif" itálico é usado apenas em palavras de destaque específicas ao longo da página, aplicado via inline style: fontFamily: "'Instrument Serif', serif", fontStyle: "italic".

LIQUID GLASS CSS (definido em index.css dentro de @layer components)

.liquid-glass {
 background: rgba(255, 255, 255, 0.01);
 background-blend-mode: luminosity;
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 border: none;
 box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
 position: relative;
 overflow: hidden;
}

.liquid-glass::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 padding: 1.4px;
 background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.45) 0%,
  rgba(255, 255, 255, 0.15) 20%,
  rgba(255, 255, 255, 0) 40%,
  rgba(255, 255, 255, 0) 60%,
  rgba(255, 255, 255, 0.15) 80%,
  rgba(255, 255, 255, 0.45) 100%
 );
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
 pointer-events: none;
}

Isso cria um efeito de vidro fosco com borda em gradiente sutil. É usado na pílula do navbar, no input de email, nos botões e nos cards de overlay ao longo da página.

SEÇÃO 1: HERO (inline em Index.tsx)

Altura total da viewport (min-h-screen), fundo preto, layout flex coluna.

Vídeo de fundo: posicionado absolute, cobre a seção inteira, deslocado para baixo com translate-y-[calc(17%+100px)], object-cover. Começa com opacity 0 e faz fade-in ao longo de 500ms quando o evento canplay dispara. Faz fade-out ao longo de 500ms quando faltam 0,55s para o fim, depois reseta para 0 e reinicia com fade-in (loop customizado com crossfade, NÃO usa o atributo loop, usa event listener ended para resetar currentTime para 0 e reiniciar). A animação de fade usa requestAnimationFrame para transições suaves de opacidade.

Navbar (z-20): pílula liquid-glass rounded-full, max-w-5xl centralizado, px-6 py-3. Contém:

  • Esquerda: ícone Lucide Globe (24px, branco) + texto "Asme" (branco, font-semibold, text-lg). Em md+, três links ("Features", "Pricing", "About") em white/80, text-sm, font-medium com transição hover:text-white.
  • Direita: botão "Sign Up" em texto simples (branco, text-sm, font-medium) + botão "Login" em pílula liquid-glass rounded-full (px-6 py-2).

Conteúdo Hero (z-10): centralizado verticalmente com flex-1, deslocado para cima com -translate-y-[20%], text-center.

  • Heading: "Built for the curious" em Instrument Serif (fontFamily: "'Instrument Serif', serif"), text-5xl/md:text-6xl/lg:text-7xl, branco, tracking-tight, whitespace-nowrap, mb-8.
  • Input de email: pílula liquid-glass rounded-full com pl-6 pr-2 py-2, flex row. Contém um input de texto transparente (placeholder "Enter your email", texto branco, placeholder white/40) e um botão circular branco com ícone Lucide ArrowRight (20px, preto).
  • Parágrafo abaixo do input: texto branco text-sm, leading-relaxed, px-4. Texto: "Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates."
  • Botão "Manifesto": liquid-glass rounded-full px-8 py-3, texto branco text-sm font-medium, transição hover:bg-white/5.

Linha de ícones sociais (z-10, inferior): três botões liquid-glass rounded-full p-4 com ícones Lucide: Instagram, Twitter, Globe. White/80 com transições hover:text-white hover:bg-white/5.

SEÇÃO 2: ABOUT SECTION (AboutSection.tsx)

Fundo preto, pt-32 md:pt-44 pb-10 md:pb-14 px-6. Tem um overlay sutil de gradiente radial: bg-[radial-gradient(ellipse_at_top,_rgba(255,255,255,0.03)_0%,_transparent_70%)].

Usa useInView do framer-motion com once: true, margin: "-100px".

  • Label "ABOUT US": white/40, text-sm, tracking-widest, uppercase. Anima de opacity 0, y:20 ao longo de 0,6s.
  • Heading principal (wrapper mb-16 acima): texto grande, text-4xl/md:text-6xl/lg:text-7xl, branco, leading-[1.1], tracking-tight. Lê-se: "Pioneering ideas for minds that create, build, and inspire." onde as palavras em itálico (ideas, create,, build,, inspire.) estão em Instrument Serif itálico, cor white/60. Usa tags <span> com className="not-italic text-white/60" e inline style Instrument Serif itálico. "for" e "minds that" quebram para nova linha em md+ via <br>. Anima de opacity 0, y:40 ao longo de 0,8s com delay de 0,1s.

SEÇÃO 3: FEATURED VIDEO SECTION (FeaturedVideoSection.tsx)

Fundo preto, pt-6 md:pt-10 pb-20 md:pb-32 px-6. Max-w-6xl centralizado.

Usa useInView do framer-motion com once: true, margin: "-100px".

Conteúdo de overlay inferior (absolute, bottom-0, p-6 md:p-10): flex col em mobile, flex row em md+ (items-end, justify-between).

  • Esquerda: card liquid-glass rounded-2xl (p-6 md:p-8, max-w-md). Contém label "OUR APPROACH" (white/50, text-xs, tracking-widest, uppercase, mb-3) e parágrafo (branco, text-sm/md:text-base, leading-relaxed): "We believe in the power of curiosity-driven exploration. Every project starts with a question, and every answer opens a new door to innovation."
  • Direita: botão "Explore more", liquid-glass rounded-full px-8 py-3, texto branco text-sm font-medium. Tem framer-motion whileHover scale 1.05, whileTap scale 0.95.

SEÇÃO 4: PHILOSOPHY SECTION (PhilosophySection.tsx)

Fundo preto, py-28 md:py-40 px-6. Max-w-6xl centralizado.

Usa useInView do framer-motion com once: true, margin: "-100px".

Heading: "Innovation x Vision" onde x está em Instrument Serif itálico, white/40. Geral: text-5xl/md:text-7xl/lg:text-8xl, branco, tracking-tight, mb-16 md:mb-24. Anima de opacity 0, y:40 ao longo de 0,8s.

Grid de duas colunas (md:grid-cols-2, gap-8 md:gap-12):

  • Esquerda: vídeo em rounded-3xl, aspect-[4/3]. Anima de opacity 0, x:-40 ao longo de 0,8s com delay de 0,2s.
  • Direita: flex column, justify-center, gap-8. Anima de opacity 0, x:40 ao longo de 0,8s com delay de 0,3s.
    • Bloco 1: label "CHOOSE YOUR SPACE" (white/40, text-xs, tracking-widest, uppercase, mb-4) + parágrafo (white/70, text-base/md:text-lg, leading-relaxed): "Every meaningful breakthrough begins at the intersection of disciplined strategy and remarkable creative vision. We operate at that crossroads, turning bold thinking into tangible outcomes that move people and reshape industries."
    • Divisor horizontal: w-full h-px bg-white/10
    • Bloco 2: label "SHAPE THE FUTURE" (mesmo estilo) + parágrafo: "We believe that the best work emerges when curiosity meets conviction. Our process is designed to uncover hidden opportunities and translate them into experiences that resonate long after the first impression."

SEÇÃO 5: SERVICES SECTION (ServicesSection.tsx)

Fundo preto, py-28 md:py-40 px-6. Tem gradiente radial sutil: bg-[radial-gradient(ellipse_at_center,_rgba(255,255,255,0.02)_0%,_transparent_60%)]. Max-w-6xl centralizado.

Usa useInView do framer-motion com once: true, margin: "-100px".

Linha de header: "What we do" (text-3xl/md:text-5xl, branco, tracking-tight) à esquerda, "Our services" (white/40, text-sm, hidden md:block) à direita. Flex items-baseline justify-between, mb-16. Anima de opacity 0, y:30 ao longo de 0,7s.

Grid de cards em duas colunas (gap-6 md:gap-8). Cada card anima de opacity 0, y:50 ao longo de 0,8s, com stagger de 0,15s.

Card 1:

Card 2:

Cada card: group liquid-glass rounded-3xl overflow-hidden. Contém:

  • Área de vídeo: aspect-video, object-cover, w-full h-full. Vídeo escala para 1.05 em group-hover ao longo de transição de 700ms. Overlay de gradiente: bg-gradient-to-t from-black/40 to-transparent.
  • Área de conteúdo (p-6 md:p-8):
    • Linha superior: label de tag (white/40, text-xs, tracking-widest, uppercase) + ícone Lucide ArrowUpRight (16px) em um círculo liquid-glass rounded-full p-2, white/60 transicionando para branco em group-hover.
    • Título: branco, text-xl/md:text-2xl, mb-3, tracking-tight.
    • Descrição: white/50, text-sm, leading-relaxed.

TECH STACK

React 18, TypeScript, Vite, Tailwind CSS 3 com plugin tailwindcss-animate, Framer Motion, Lucide React, React Router DOM. A página usa design tokens do shadcn/ui na configuração do Tailwind mas nenhum componente shadcn é usado na landing page em si.

PALETA DE CORES

Exclusivamente preto/branco com variações de opacidade. Sem cores de destaque. Branco em várias opacidades (white, white/80, white/70, white/60, white/50, white/40) para hierarquia. Fundos pretos com gradientes radiais ultra-sutis ocasionais (opacity 0.02-0.03 de branco).

PADRÃO DE ANIMAÇÃO

Todas as seções usam o hook useInView do Framer Motion com once: true, margin: "-100px" para disparar animações de entrada baseadas em scroll. Elementos deslizam para cima (eixo y) ou horizontalmente (eixo x) enquanto fazem fade-in, com delays escalonados para revelações sequenciais.

Input necessário

Antes de executar, conduza breve entrevista. Faça até 8 perguntas por rodada, aguarde respostas. Se precisar de mais, nova rodada com no máximo 8.

Informações mínimas a coletar:

  • Nome da marca (substitui "Asme")
  • Copy principal (heading, manifesto, serviços)
  • URLs dos vídeos ou imagens de substituição (próprios ou banco)
  • Ferramenta de destino (Lovable, v0, Bolt, Claude Code, Cursor)
  • Ajustes de idioma (manter inglês ou traduzir para PT-BR)
  • Público e intenção principal da página
  • Integrações (newsletter, agenda, checkout)
  • Mudanças no layout desejadas (acrescentar/remover seções)

Como usar

  1. Substitua "Asme" pelo nome da sua marca e ajuste textos/URLs de vídeo.
  2. Cole o prompt inteiro em uma ferramenta de geração de código (Lovable, v0, Bolt, Claude Code, etc.).
  3. Substitua as URLs dos vídeos do CloudFront por seus próprios vídeos (ou use placeholders como Pexels/Coverr).
  4. Ajuste copy em inglês para português se necessário, mantendo a estrutura e classes Tailwind intactas.

Variações

  • Adaptação saúde: troque "Asme" por clínica/consultório, substitua copy por manifesto de cuidado e vídeos por imagens institucionais (equipe, espaço, procedimentos).
  • Sem vídeos: substitua tags <video> por imagens estáticas com efeito Ken Burns via Framer Motion (scale 1.0 para 1.1 ao longo de 20s).
  • Light mode: inverta para bg-white e ajuste as opacidades brancas para pretas (black/40, black/60, etc.).