activityCard
Todos os tokens do card de passeio/atividade (ViatorHighlightCard). Zero hardcodes — cada valor vive aqui.
Mais vendido
Luck Receptivo
Passeio de helicóptero em NYC
ActivityCard
Favorite
Review
Time
Moléculas
Molecule/ActivityCard/TagBadge de destaque
Mais vendido
Molecule/ActivityCard/FavoriteVariants: State=Off, On
♡
Off♥
OnMolecule/ActivityCard/ProviderVariants: Luck, Viator, GetYourGuide, Tiqets
Luck Receptivo
Viator
GetYourGuide
Tiqets
Molecule/ActivityCard/RatingVariants: Rated, Unrated
★★★★★4,8 (2.143)
2h 30m
RatedSem avaliações
Duração não informada
UnratedMolecule/ActivityCard/PricePreço + texto auxiliar
R$ 299
por pessoa
Dimensões
| Token | Valor | Descrição |
|---|---|---|
cardWidth | 310 | Largura do card no carrossel da Home |
cardPadding | 16 | Padding interno do card |
imageHeight | 180 | Altura da foto do passeio |
imageBorderRadius | 12 | Border radius da foto |
imageInnerPadding | 8 | Distância da tag e coração às bordas da imagem |
pressedOpacity | 0.80 | Opacidade ao pressionar o card |
Tag / Badge
| Token | Valor | Descrição |
|---|---|---|
tagGap | 4 | Gap entre múltiplas tags |
tagPaddingH | 8 | Padding horizontal da tag |
tagPaddingV | 6 | Padding vertical da tag |
tagBorderRadius | 8 | Border radius da tag |
tagFontSize | 12 | Font size do texto da tag |
tagZIndex | 2 | Z-index da tag sobre a imagem |
Botão Coração
| Token | Valor | Descrição |
|---|---|---|
favSize | 40 | Width e height do botão (circular) |
favRadius | 20 | Border radius — circular = favSize / 2 |
favIconSize | 20 | Tamanho do ícone coração |
favZIndex | 2 | Z-index sobre a imagem |
Badge Provider
| Token | Valor | Descrição |
|---|---|---|
providerInnerPadding | 8 | Distância do badge às bordas da imagem (bottom/left) |
providerGap | 6 | Gap entre logo e nome |
providerPaddingLeft | 4 | Padding esquerdo do pill |
providerPaddingRight | 12 | Padding direito do pill |
providerPaddingV | 4 | Padding vertical do pill |
providerRadius | 999 | Border radius pill |
providerLogoSize | 24 | Width e height do logo |
providerLogoRadius | 100 | Border radius do logo |
providerLabelFontSize | 14 | Font size do nome do provider |
providerZIndex | 2 | Z-index sobre a imagem |
Body
| Token | Valor | Descrição |
|---|---|---|
bodyPaddingTop | 16 | Espaço entre imagem e título |
footerMarginTop | 16 | Espaço entre título e linha rating/preço |
footerGap | 16 | Gap horizontal entre metaColumn e priceColumn |
titleFontSize | 16 | Font size do título do passeio |
Rating
| Token | Valor | Descrição |
|---|---|---|
ratingGap | 6 | Gap entre estrelas e texto de contagem |
ratingStarFontSize | 16 | Font size das estrelas ★ |
ratingCountFontSize | 16 | Font size do texto "5,0 (94)" |
ratingLetterSpacing | 1 | Letter spacing das estrelas |
Duração
| Token | Valor | Descrição |
|---|---|---|
durationFontSize | 14 | Font size do texto de duração |
durationMarginTop | 4 | Margin top entre rating e duração |
metaFontSize | 14 | Font size do fallback "Sem avaliações" |
Preço
| Token | Valor | Descrição |
|---|---|---|
priceFontSize | 16 | Font size do valor (ex: R$ 295) |
priceFromFontSize | 14 | Font size do "por pessoa" |
priceFromMarginTop | 2 | Margin top entre preço e "por pessoa" |
Cores do card
white08rgba(255,255,255,0.08)Fundo do card e placeholder da foto
dark60rgba(0,0,0,0.60)Overlay do coração e badge provider
embarko_blue#4494FCEstrelas e coração ativo
white60rgba(255,255,255,0.60)Duração, fallback e "por pessoa"
cardTagText#09121fTexto sobre badge colorido
black#000000Ícone coração quando favoritado
Endpoint
tsx
copy
// api/viator.js → Firebase Cloud Function
POST /viatorProductsSearch
getViatorProductsSearch({
filtering: { destination: destinationId },
sorting: { sort: 'TRAVELER_RATING' },
pagination: { start: 1, count: 10 }
})
// Response → products[].pricing.summary.fromPrice
// Response → products[].reviews.combinedAverageRating
// Response → products[].images[0].variants[].url