Tela: Home

Tela principal do app. Composição de header, service selector, carrossel de cards e seções de conteúdo.

Header

Row com logo à esquerda e botão de notificação à direita. O dot azul indica notificações pendentes.

// screens/Home/styles.js
iconButton: {
  width: 40, height: 40,
  borderRadius: 20,
  backgroundColor: "rgba(255,255,255,0.10)",
  alignItems: 'center', justifyContent: 'center',
},
notificationDot: {
  position: 'absolute',
  top: -2, right: -2,
  width: 16, height: 16,
  borderRadius: 8,
  backgroundColor: colors.embarko_blue,
},

Service Selector

Row de 4 botões de ícone para selecionar o serviço ativo. Passagens, Passeios, Shows e eSIM.

// screens/Home/styles.js (excerpt)
serviceSelectorButton: {
  width: 48, height: 48, borderRadius: radius.md, // 12
  backgroundColor: "rgba(255,255,255,0.12)",
  borderWidth: 1, borderColor: colors.white08,
},
serviceSelectorButtonActive: {
  backgroundColor: colors.embarko_blue,
  borderColor: "transparent",
},
serviceSelectorButtonDisabled: {
  opacity: 0.45,
},
serviceSelectorLabel: {
  marginTop: 10, fontSize: 14,
  fontFamily: Medium, color: "rgba(255,255,255,0.80)",
},
serviceSelectorLabelActive: { fontFamily: Semibold, color: colors.white },
serviceSelectorLabelDisabled: { color: "rgba(255,255,255,0.40)" },

Seções de Conteúdo

Cada seção tem título, subtítulo opcional e um carrossel horizontal. Gap de 32px entre seções.

Carrossel Horizontal

O carrossel "sangra" para fora do padding da tela com marginHorizontal: -16, mantendo o padding interno via paddingHorizontal: 16.

sectionTitle: {
  fontSize: 24, lineHeight: 30,
  fontFamily: Semibold, color: colors.white,
},
carouselWrapper: { marginHorizontal: -spacing.md },
carouselContent: { paddingHorizontal: spacing.md, gap: spacing.md },

Skeleton Loading

Cards exibidos enquanto os dados carregam. Fundo escuro com áreas de conteúdo em branco 8%.

Tracker Banner

Card promocional do tracker de preços. Largura fixa 320px, ilustração transbordando à direita.

eSIM — Popular Cards

Cards horizontais para destinos eSIM populares. Flag circular + nome do país.