Retro1980s Aesthetic Revival

AFTERHOURS — MIAMI 1986

Estilo Retro inspirado em "AFTERHOURS — MIAMI 1986". Flexbox, Blend Modes, CSS Filters. Com animações.

vaporwavesunsetretroanimatedgradientblur

Uso: Apps retro, Landing pages criativas, Projetos experimentais

Contexto Histórico

Estilo contemporâneo (1980s Aesthetic Revival) que combina Flexbox e Blend Modes com Blur e Glow.

Quando Usar

Use para projetos retro que precisam de Blur e Glow efeitos.

Princípios de Design

Utilize Flexbox para estrutura de layout
Aplique Blur consistentemente nos componentes
Mantenha consistência visual

DESIGN.md

---
version: "alpha"
name: "AFTERHOURS — MIAMI 1986"
description: "Estilo Retro com Flexbox e Blend Modes."
colors:
  primary: "#FF2E88"
  secondary: "#FF8A3D"
  tertiary: "#6C2BD9"
typography:
  h1:
    fontFamily: system-ui
    fontSize: 2.5rem
    fontWeight: 700
  body-md:
    fontFamily: system-ui
    fontSize: 1rem
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
  lg: 16px
spacing:
  sm: 1rem
  md: 2rem
  lg: 4rem
---

## Overview

AFTERHOURS — MIAMI 1986 - Estilo Retro da era 1980s Aesthetic Revival.

- Density: 5/10
- Variance: 6/10
- Motion: 8/10 — Animated

- **Style:** Retro
- **Keywords:** vaporwave, sunset
- **Era:** 1980s Aesthetic Revival
- **Light/Dark:** ✓ Light / ○ Dark

## Colors

- **#FF2E88**
- **#FF8A3D**
- **#6C2BD9**
- **#19E3D2**
- **#1A0B34**

## Typography

- **system-ui**
- **Arial Narrow**
- **Courier New**
- **inherit**

## Layout

- **Features:** Flexbox, Blend Modes, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius, Aspect Ratio, CSS Masks

## Effects

- Blur
- Glow
- Gradients
- 3D/Parallax
- Hover Effects

## Use Case

Apps retro, Landing pages, Projetos experimentais.

Baixar DESIGN.md

Especificações Técnicas

CSS

Flexbox, Blend Modes, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius, Aspect Ratio, CSS Masks

Variáveis

--pink: #FF2E88, --tangerine: #FF8A3D, --violet: #6C2BD9, --teal: #19E3D2, --grade-a: #FF2E88

Checklist

☐ Flexbox ☐ Blend Modes ☐ CSS Filters ☐ Responsive ☐ Acessibilidade

Cores

Primárias

#FF2E88

#FF8A3D

#6C2BD9

Secundárias

#19E3D2

#1A0B34

#0B0618

Efeitos

Blur, Glow, Gradients, 3D/Parallax, Hover Effects

Light/Dark

✓ Light / ○ Dark

Prompt para AI

Atue como um Engenheiro Frontend Sênior e UI Designer Especialista.
Sua tarefa é codificar uma Landing Page completa na primeira tentativa.
- Tema da Landing Page: <INSIRA O TEMA>
- Seções a adicionar: <INSIRA AS SEÇÕES>

Gere o código final imediatamente seguindo estas definições:

## Estilo

- **Nome:** AFTERHOURS — MIAMI 1986
- **Tipo:** Retro
- **Keywords:** vaporwave, sunset, retro, animated, gradient, blur
- **Era:** 1980s Aesthetic Revival
- **Light/Dark:** ✓ Light / ○ Dark

## Paleta de Cores

- **Primárias:** #FF2E88, #FF8A3D, #6C2BD9
- **Secundárias:** #19E3D2, #1A0B34, #0B0618

## Efeitos Visuais

Blur, Glow, Gradients, 3D/Parallax, Hover Effects

## Direção Visual para IA

Design a retro landing page inspired by "AFTERHOURS — MIAMI 1986". Use: Flexbox, Blend Modes, CSS Filters, Keyframe Animations. Colors: #FF2E88, #FF8A3D, #6C2BD9. Effects: Blur, Glow, Gradients.

## CSS Technical

```css
Flexbox, Blend Modes, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius, Aspect Ratio, CSS Masks
```

## Design System Variables

```css
--pink: #FF2E88, --tangerine: #FF8A3D, --violet: #6C2BD9, --teal: #19E3D2, --grade-a: #FF2E88
```

## Checklist de Implementação

- ☐ Flexbox ☐ Blend Modes ☐ CSS Filters ☐ Responsive ☐ Acessibilidade

## Regras de Execução

1. Siga fielmente o estilo visual determinado.
2. Use ícones SVG inline de alta qualidade (estilo Heroicons ou Lucide) — PROIBIDO usar emojis como ícones.
3. Adicione `cursor-pointer` e estados de `hover` suaves (transition-all) em todos os elementos interativos.
4. Estrutura Obrigatória da Página:
   - Navbar (Logo + Links + CTA)
   - Hero Section (Headline impactante + Subtitle + 2 botões + Elemento visual 3D/Abstrato via CSS)
   - Features (3 cards com ícones)
   - Testimonials (3 cards)
   - Pricing (3 tiers, destaque no central)
   - CTA Final
   - Footer completo com redes sociais, política de privacidade, termos de uso, contato e links SEO.
5. Todo o conteúdo textual deve ser em Português Brasileiro (PT-BR).
6. O visual deve ser CLARAMENTE distinto — não crie um design "padrão Bootstrap". Force o uso das variáveis de design system fornecidas.
7. Use tags `<style>` no head para classes personalizadas (especialmente para os efeitos complexos de backdrop-filter e animações) que o Tailwind via CDN não cobrir.
8. Responsividade Total: O layout deve se adaptar perfeitamente a Mobile, Tablet e Desktop (Stack vertical no mobile).
9. Inclua meta tags básicas de SEO, Viewport e Open Graph no `<head>`.
10. Footer deve conter: Copyright 2026, Links de navegação secundária e Ícones de redes sociais.
11. Assuma as decisões criativas necessárias para entregar o resultado completo e funcional agora.

Última sincronização: 15/08/2026