Pare de jogar dinheiro fora com cartões de visita de papel que vão para o lixo! Hoje eu vou te ensinar a criar um Cartão Digital Interativo de alto padrão (estilo Glassmorphism) totalmente GRÁTIS, usando Inteligência Artificial.
🚀 O que você vai aprender: Neste tutorial completo, vamos usar o Google AI Studio para gerar o código de um cartão de visita moderno para Corretores de Imóveis (ou qualquer nicho). Você vai aprender o segredo do botão “Salvar Contato” (vCard), que abre a agenda do cliente automaticamente, e como colocar esse site no ar em segundos usando a Netlify (sem pagar hospedagem).
Link: https://app.netlify.com/
É uma oportunidade de ouro para você fazer uma Renda Extra vendendo esse serviço por R$ 150 a R$ 200 para profissionais que precisam se modernizar.
PROMPT 1: Atue como um Especialista em UI/UX Mobile e Desenvolvedor Front-End.Sua tarefa é criar o código completo (HTML5 e CSS3 + JS Básico em um único arquivo) para um Cartão de Visita Digital Interativo (Bio Link) voltado para um Corretor de Imóveis de Alto Padrão.O design deve utilizar a tendência “Glassmorphism” (Efeito de Vidro Fosco), transmitindo luxo, modernidade e exclusividade.### 1. IDENTIDADE VISUAL- *Background:* Use uma imagem de fundo fixa cobrindo toda a tela (use um placeholder de uma mansão moderna ou arquitetura de luxo escurecida com overlay preto para dar leitura).- *Card Principal:* O conteúdo deve ficar dentro de um container central com fundo branco semitransparente (rgba), borda fina branca e efeito de desfoque (backdrop-filter: blur).- *Cores:* Dourado Premium (#D4AF37) para destaques e botões principais. Texto Branco ou Cinza Claro para contraste.- *Tipografia:* ‘Montserrat’ (Google Fonts) para transmitir modernidade e seriedade.### 2. ESTRUTURA DO CARTÃO (Mobile First)O layout deve ser estreito, focado na experiência mobile (como um app).1. *Topo (Perfil):* – Foto de Perfil redonda com borda dourada (use placeholder de um homem/mulher de terno). – Nome do Profissional (H1) e Cargo “Corretor de Imóveis de Luxo” (H2). – Pequeno texto de bio: “Transformando sonhos em endereços exclusivos.”2. *Botões de Ação Rápida (Grid de 2 colunas):* – Botão 1: WhatsApp (Ícone verde, chamando para API). – Botão 2: Localização/Waze (Ícone de mapa). – Botão 3: E-mail. – Botão 4: Site/Portfólio.3. *Botão de Destaque “Salvar Contato” (Largo):* – Um botão maior, com cor de fundo Dourada (#D4AF37) e texto preto, escrito “SALVAR NA AGENDA” (Simule a função vCard).4. *Destaque de Imóvel (Mini Carrossel ou Card):* – Um card menor abaixo escrito “Oportunidade do Mês”, com uma foto de imóvel e um botão “Ver Detalhes”.5. *Rodapé:* – Ícones de redes sociais (Instagram, LinkedIn, Facebook) minimalistas. – Copyright discreto.### 3. EFEITOS E ANIMAÇÕES (O “Fator Uau”)- Adicione uma animação suave de “Fade In” (entrada) quando a página carregar.- Os botões devem ter um efeito de escala (transform: scale) leve ao passar o mouse ou clicar.- O efeito de vidro (Glassmorphism) deve ser bem visível no container principal.### 4. INSTRUÇÕES TÉCNICAS- Gere TODO o código (HTML, CSS e o JS para animações) em um único arquivo HTML.- Use FontAwesome (CDN) para os ícones.- Use imagens via placeholder (ex: Unsplash Source) focadas em ‘architecture’ e ‘business man’.- Certifique-se de que o design seja 100% responsivo e perfeito em telas de celular.Gere o código agora.
PROMPT 2: Por favor, converta todo esse projeto em um ÚNICO arquivo index.html com todo o CSS e Scripts embutidos. Não use React, use apenas HTML e CSS puro. Me dê o código completo para eu copiar.
Etapas do vídeo:
1 – Como criar um cartão de visita virtual no Google AI Studio
2 – Google AI Studio
3 – crie cartão digital virtual
————————————————–
ESTE VÍDEO FALA SOBRE:
GOOGLE AI STUDIO
Como Criar um Site de vendas
Como Criar um Site na Internet
Como Criar um Site Profissional
criar site grátis
—————————————————–
Se ficou alguma dúvida é só seguir o passo a passo desse tutorial de como criar um cartão de visita digital grátis no Google AI studio e voce fará facilmente toda a criação desse cartão.