Sobre este projeto
design-multimedia / web-design-1
Aberto
Escopo do Projeto para o Freelancer: Desenvolvimento de uma Página de Roteiros para a XDestino
Descrição do Projeto
A XDestinos, uma agência de viagens premium, busca um freelancer web designer especialista em design para desenvolver uma página web (roteiro.html) que exiba roteiros de viagem personalizados. A página deve ter seções dinâmicas, como Capa, Índice, Mensagem de Boas-Vindas, Dias do Roteiro, Pontos de Interesse, Hospedagens, entre outras, preenchidas automaticamente com base em uma planilha de dados. O design deve ser mobile-first, mas flexível para desktop, com um layout altamente profissional, visualmente envolvente e que reflita o tom acolhedor e exclusivo da marca. O objetivo é criar uma experiência premium no nicho de viagens, com elementos visuais cativantes e animações leves.
Objetivo
Criar uma página web (roteiro.html) com seções dinâmicas que se repetem conforme os dados da planilha, como uma seção para cada dia do roteiro, uma seção para cada ponto de interesse e uma seção para cada hospedagem.
Carregar os dados dinamicamente de uma planilha (via Google Sheets api ou json).
Garantir que o design seja mobile-first, com layout responsivo e adaptável para desktop, priorizando uma experiência visual premium.
Requisitos Técnicos
Experiência avançada em web design, com portfólio que demonstre layouts profissionais e envolventes no nicho de viagens ou lifestyle.
Domínio de html, css e javascript para criar um layout responsivo e dinâmico.
Conhecimento em integração com APIs (ex.: Google Sheets api) ou manipulação de dados json.
Habilidade em criar animações leves usando css ou bibliotecas como aos (animate on scroll).
Experiência em design mobile-first, com foco em usabilidade e estética em dispositivos móveis, mas flexível para desktop.
Capacidade de usar elementos visuais envolventes, como tipografia elegante, ícones estilizados, imagens de fundo impactantes e transições suaves.
Estrutura da Página
A página (roteiro.html) será composta por várias seções que se repetem dinamicamente com base nos dados da planilha. Cada seção terá um design consistente, com animações leves e layout otimizado para mobile e desktop.
Planilha de Dados
A planilha (hospedada no Google Sheets) terá colunas como:
Destino (ex.: "Trancoso - BA")
Legenda (ex.: "Ana, viva uma jornada única em 15/06/2025 com a XDestinos")
Imagem_Capa_URL (URL de uma imagem premium)
Perfil_Cliente (ex.: "Ana, um casal de São Paulo apaixonado por relaxamento")
Dia_1_Titulo, Dia_1_Atividades, Dia_1_Dica (ex.: "Chegada e Relaxamento", "• 10h: Check-in; • 14h: Passeio", "Leve chapéu")
Dia_2_Titulo, Dia_2_Atividades, Dia_2_Dica (e assim por diante até Dia_5)
Pontos_Interesse_1, Pontos_Interesse_2, ... (Ex.: "Passeio de barco: navegar ao pôr do sol...")
Pontos_Interesse_Dica (ex.: "Leve protetor solar e câmera")
Hospedagem_1, Hospedagem_2, ... (Ex.: "Pousada Mar, R$ 300/noite, vista mar")
(Outras colunas para as demais seções, como Restaurantes_Recomendados, Como_Chegar, etc.)
O freelancer deve usar a Google Sheets api (ou um json gerado a partir da planilha) para carregar os dados dinamicamente.
Seções da Página
Cada seção será uma parte distinta da página, com design adaptável. Algumas seções, como Dias, Pontos de Interesse e Hospedagens, devem se repetir dinamicamente com base nos dados.
Capa:
Exibir: Destino (ex.: "Trancoso - BA, um Paraíso Tropical!") e Legenda (ex.: "Ana, viva uma jornada única em 15/06/2025 com a XDestinos").
Design: Logotipo da XDestino no canto superior, imagem de fundo (Imagem_Capa_URL), título em fonte elegante (ex.: Playfair Display), legenda em fonte menor com fundo semitransparente.
Animação: Fade-in para o título e legenda.
ÍNdice:
Listar todas as seções disponíveis (ex.: "Dia 1", "Pontos de Interesse") com links clicáveis para navegar até elas.
Design: Layout limpo com numeração e ícones (ex.: íCone de marcador).
Dinâmico: Gere a lista com base nas seções preenchidas (ex.: Se "Dia 4" não existir, não aparece).
Mensagem de Boas-Vindas e Perfil do Cliente:
Exibir: Texto fixo "Bem-vindo(a) à sua jornada com a XDestinos!" e Perfil_Cliente (ex.: "Ana, um casal de São Paulo apaixonado por relaxamento").
Design: Borda decorativa (ex.: Linha dourada), fundo suave.
Animação: Slide-in para o texto.
Dias do Roteiro (Dia 1 a Dia 5):
Estrutura: Uma seção para cada dia (ex.: Dia 1, Dia 2, etc.).
Exibir: Dia_X_Titulo (ex.: "Chegada e Relaxamento"), Dia_X_Atividades (ex.: "• 10h: Check-in; • 14h: Passeio") em tópicos, e Dia_X_Dica (ex.: "Leve chapéu").
Design: Título destacado, tópicos com ícones de marcador, caixa de dica com fundo colorido (ex.: Azul claro).
Dinâmico: Repita a seção para cada dia preenchido na planilha (ex.: Se houver apenas Dia_1 e Dia_2, exiba apenas 2 seções).
Animação: Fade-in ao rolar a página.
Pontos de Interesse:
Estrutura: Uma seção para cada ponto de interesse.
Exibir: Pontos_Interesse_X (ex.: "Passeio de barco: navegar ao pôr do sol...") Com descrição de 20-30 palavras.
Botão "Saiba Mais" (URL externa ou modal).
Caixa para Pontos_Interesse_Dica (ex.: "Leve protetor solar e câmera").
Design: Cards com ícone e botão estilizado.
Dinâmico: Repita a seção para cada ponto de interesse na planilha (ex.: Pontos_Interesse_1, Pontos_Interesse_2, etc.).
Animação: Hover effect nos cards.
Hospedagens Recomendadas:
Estrutura: Uma seção para cada hospedagem.
Exibir: Hospedagem_X (ex.: "Pousada Mar, R$ 300/noite, vista mar").
Botão "Saiba Mais" (URL externa).
Design: Cards com título, preço e botão.
Dinâmico: Repita a seção para cada hospedagem na planilha (ex.: Hospedagem_1, Hospedagem_2, etc.).
Animação: Hover effect nos cards.
Restaurantes Recomendados:
Exibir: Categorias (Restaurantes_Recomendados_Almoco, Restaurantes_Recomendados_Jantar, etc.) Com descrições de 20-30 palavras.
Botão "Ver Local" (URL externa).
Caixa para Restaurantes_Dica (ex.: "Faça reserva para vista").
Design: Seções por categoria, com ícones (ex.: Garfo e faca).
Animação: Fade-in para cada categoria.
Passeios Recomendados:
Exibir: Lista de passeios (Passeios_Recomendados_X, ex.: "Trilha na mata...").
Botão "Saiba Mais" (URL externa).
Caixa para Passeios_Dica (ex.: "Leve câmera").
Design: Cards com imagens pequenas (se disponíveis).
Dinâmico: Repita a seção para cada passeio.
Animação: Hover effect nos cards.
Checklist Personalizado:
Exibir: Lista (Checklist_Personalizado, ex.: "Protetor solar, chapéu...").
Caixa para Checklist_Dica (ex.: "Leve livro").
Design: Lista com caixas de seleção estilizadas.
Animação: Fade-in.
Como Chegar:
Exibir: Detalhes (Como_Chegar, ex.: "Avião de São Paulo a Cabo Frio, traslado 30min").
Mapa (Mapa_URL).
Design: Texto com ícones (ex.: Avião), mapa como imagem.
Animação: Fade-in.
Passeio Imperdível:
Exibir: Destaque (Passeio_Imperdivel, ex.: "Massagem relaxante...").
Botão "Reservar Agora" (URL externa).
Design: Card destacado.
Animação: Pulsação no botão.
Curiosidades:
Exibir: 2-3 fatos (Curiosidades, ex.: "Trancoso tem 5 praias...").
Design: Lista com ícones (ex.: Lâmpada).
Animação: Fade-in.
Vantagens e Desvantagens:
Exibir: Comparação (Vantagens, Desvantagens).
Design: Cards lado a lado, com ícones (ex.: Check, x).
Animação: Slide-in.
Abas de Preços:
Exibir: Tabela (Abas_Precos, ex.: "Hospedagem: R$ 900").
Botão "Ver Custos" (URL externa).
Design: Tabela estilizada.
Animação: Fade-in.
Sugestões de Destinos:
Exibir: 3-5 destinos (Sugestoes_Destinos_X, ex.: "Arraial do Cabo").
Botão "Explorar" (URL externa).
Design: Cards com imagem (Sugestoes_Destinos_Imagem_URL).
Dinâmico: Repita a seção para cada sugestão.
Animação: Hover effect.
Plano de Pagamento:
Exibir: Opções (Plano_Pagamento, ex.: "À Vista com 10% desconto").
Botão "Simular" (URL externa).
Design: Lista com ícones.
Animação: Fade-in.
Contatos Locais:
Exibir: Lista (Contatos_Locais, ex.: "Táxi: (22) 9999-8888").
Design: Lista com ícones (ex.: Telefone).
Animação: Fade-in.
Feedback do Cliente:
Exibir: Formulário estático (Feedback_Cliente, ex.: "O que achou?").
Botão "Enviar" (URL externa).
Design: Formulário estilizado (visual).
Animação: Fade-in.
Upsell e Reserva:
Exibir: Texto (Upsell, ex.: "Solicite orçamento!").
Botão "Reservar Agora" (URL externa).
Design: Card destacado.
Animação: Pulsação no botão.
Guia de Segurança:
Exibir: Dicas (Guia_Seguranca, ex.: "Evite objetos importantes").
Design: Lista com ícones (ex.: Cadeado).
Animação: Fade-in.
Clima e Melhores Épocas:
Exibir: Informações (Clima, ex.: "Junho: 25°C").
Gráfico estilizado (ex.: SVG simples).
Design: Texto com ícone de sol/nuvem.
Animação: Fade-in.
Galeria de Fotos:
Exibir: 3-5 imagens (Galeria_Fotos_URL_X) com legendas (Galeria_Fotos_Legenda_X).
Design: Grid de imagens.
Dinâmico: Repita para cada imagem.
Animação: Fade-in.
Depoimentos:
Exibir: 2-3 depoimentos (Depoimentos_X, ex.: "Melhor viagem! - João").
Design: Cards com foto (Depoimentos_Foto_URL).
Dinâmico: Repita para cada depoimento.
Animação: Slide-in.
Políticas de Cancelamento:
Exibir: Regras (Politicas_Cancelamento, ex.: "Cancelamento gratuito até 7 dias").
Botão "Saiba Mais" (URL externa).
Design: Texto com ícone.
Animação: Fade-in.
Dúvidas Frequentes (FAQ):
Exibir: 3-5 perguntas e respostas (FAQ_X, ex.: "Posso alterar? Sim, até 48h antes").
Design: Lista expansível (accordion).
Dinâmico: Repita para cada pergunta.
Animação: Fade-in.
Mapa Interativo do Destino:
Exibir: Mapa (Mapa_Interativo_URL) com marcações.
Botões clicáveis (ex.: "Ver Local", URL externa).
Design: Imagem com botões sobrepostos.
Animação: Fade-in.
Benefícios Exclusivos da XDestinos:
Exibir: Diferenciais (Beneficios_XDestinos, ex.: "Personalização total").
Botão "Saiba Mais" (URL externa).
Design: Lista com ícones (ex.: Estrela).
Animação: Fade-in com pulsação no botão.
Escopo do Trabalho
Desenvolvimento do Template:
Crie a página roteiro.html com as seções listadas, usando html, css e javascript.
Implemente a repetição dinâmica para seções como Dias, Pontos de Interesse, Hospedagens, etc., Com base nos dados da planilha.
Adicione animações leves (ex.: Fade-in, hover effects).
Garanta que o design seja mobile-first, com layout responsivo e flexível para desktop.
Integração com Dados:
Configure a integração com a Google Sheets api (forneceremos a planilha e a chave api) ou use um arquivo json.
Garanta que apenas as seções preenchidas na planilha sejam exibidas.
Testes:
Teste com 3 destinos (ex.: "Trancoso - BA", "Búzios - RJ", "São Paulo - SP") para garantir que as seções sejam preenchidas corretamente.
Documentação:
Forneça um documento simples explicando como atualizar a planilha.
Requisitos de Design
O layout deve ser altamente profissional, com tipografia elegante (ex.: Playfair Display para títulos, Montserrat para textos), cores suaves e tropicais (ex.: Tons de azul, verde, dourado), e elementos visuais envolventes (ex.: íCones estilizados, imagens de fundo impactantes, transições suaves).
Use animações para criar uma experiência imersiva (ex.: Fade-in ao rolar, hover effects nos cards, pulsação em botões de ação).
Priorize a usabilidade em dispositivos móveis (ex.: Botões grandes, espaçamento adequado, imagens otimizadas).
Prazo
10 dias para design, desenvolvimento e testes.
Entregáveis
Arquivos da página (roteiro.html, css, js, imagens).
Documentação básica (ex.: Como atualizar a planilha).
Descrição do Projeto
A XDestinos, uma agência de viagens premium, busca um freelancer web designer especialista em design para desenvolver uma página web (roteiro.html) que exiba roteiros de viagem personalizados. A página deve ter seções dinâmicas, como Capa, Índice, Mensagem de Boas-Vindas, Dias do Roteiro, Pontos de Interesse, Hospedagens, entre outras, preenchidas automaticamente com base em uma planilha de dados. O design deve ser mobile-first, mas flexível para desktop, com um layout altamente profissional, visualmente envolvente e que reflita o tom acolhedor e exclusivo da marca. O objetivo é criar uma experiência premium no nicho de viagens, com elementos visuais cativantes e animações leves.
Objetivo
Criar uma página web (roteiro.html) com seções dinâmicas que se repetem conforme os dados da planilha, como uma seção para cada dia do roteiro, uma seção para cada ponto de interesse e uma seção para cada hospedagem.
Carregar os dados dinamicamente de uma planilha (via Google Sheets api ou json).
Garantir que o design seja mobile-first, com layout responsivo e adaptável para desktop, priorizando uma experiência visual premium.
Requisitos Técnicos
Experiência avançada em web design, com portfólio que demonstre layouts profissionais e envolventes no nicho de viagens ou lifestyle.
Domínio de html, css e javascript para criar um layout responsivo e dinâmico.
Conhecimento em integração com APIs (ex.: Google Sheets api) ou manipulação de dados json.
Habilidade em criar animações leves usando css ou bibliotecas como aos (animate on scroll).
Experiência em design mobile-first, com foco em usabilidade e estética em dispositivos móveis, mas flexível para desktop.
Capacidade de usar elementos visuais envolventes, como tipografia elegante, ícones estilizados, imagens de fundo impactantes e transições suaves.
Estrutura da Página
A página (roteiro.html) será composta por várias seções que se repetem dinamicamente com base nos dados da planilha. Cada seção terá um design consistente, com animações leves e layout otimizado para mobile e desktop.
Planilha de Dados
A planilha (hospedada no Google Sheets) terá colunas como:
Destino (ex.: "Trancoso - BA")
Legenda (ex.: "Ana, viva uma jornada única em 15/06/2025 com a XDestinos")
Imagem_Capa_URL (URL de uma imagem premium)
Perfil_Cliente (ex.: "Ana, um casal de São Paulo apaixonado por relaxamento")
Dia_1_Titulo, Dia_1_Atividades, Dia_1_Dica (ex.: "Chegada e Relaxamento", "• 10h: Check-in; • 14h: Passeio", "Leve chapéu")
Dia_2_Titulo, Dia_2_Atividades, Dia_2_Dica (e assim por diante até Dia_5)
Pontos_Interesse_1, Pontos_Interesse_2, ... (Ex.: "Passeio de barco: navegar ao pôr do sol...")
Pontos_Interesse_Dica (ex.: "Leve protetor solar e câmera")
Hospedagem_1, Hospedagem_2, ... (Ex.: "Pousada Mar, R$ 300/noite, vista mar")
(Outras colunas para as demais seções, como Restaurantes_Recomendados, Como_Chegar, etc.)
O freelancer deve usar a Google Sheets api (ou um json gerado a partir da planilha) para carregar os dados dinamicamente.
Seções da Página
Cada seção será uma parte distinta da página, com design adaptável. Algumas seções, como Dias, Pontos de Interesse e Hospedagens, devem se repetir dinamicamente com base nos dados.
Capa:
Exibir: Destino (ex.: "Trancoso - BA, um Paraíso Tropical!") e Legenda (ex.: "Ana, viva uma jornada única em 15/06/2025 com a XDestinos").
Design: Logotipo da XDestino no canto superior, imagem de fundo (Imagem_Capa_URL), título em fonte elegante (ex.: Playfair Display), legenda em fonte menor com fundo semitransparente.
Animação: Fade-in para o título e legenda.
ÍNdice:
Listar todas as seções disponíveis (ex.: "Dia 1", "Pontos de Interesse") com links clicáveis para navegar até elas.
Design: Layout limpo com numeração e ícones (ex.: íCone de marcador).
Dinâmico: Gere a lista com base nas seções preenchidas (ex.: Se "Dia 4" não existir, não aparece).
Mensagem de Boas-Vindas e Perfil do Cliente:
Exibir: Texto fixo "Bem-vindo(a) à sua jornada com a XDestinos!" e Perfil_Cliente (ex.: "Ana, um casal de São Paulo apaixonado por relaxamento").
Design: Borda decorativa (ex.: Linha dourada), fundo suave.
Animação: Slide-in para o texto.
Dias do Roteiro (Dia 1 a Dia 5):
Estrutura: Uma seção para cada dia (ex.: Dia 1, Dia 2, etc.).
Exibir: Dia_X_Titulo (ex.: "Chegada e Relaxamento"), Dia_X_Atividades (ex.: "• 10h: Check-in; • 14h: Passeio") em tópicos, e Dia_X_Dica (ex.: "Leve chapéu").
Design: Título destacado, tópicos com ícones de marcador, caixa de dica com fundo colorido (ex.: Azul claro).
Dinâmico: Repita a seção para cada dia preenchido na planilha (ex.: Se houver apenas Dia_1 e Dia_2, exiba apenas 2 seções).
Animação: Fade-in ao rolar a página.
Pontos de Interesse:
Estrutura: Uma seção para cada ponto de interesse.
Exibir: Pontos_Interesse_X (ex.: "Passeio de barco: navegar ao pôr do sol...") Com descrição de 20-30 palavras.
Botão "Saiba Mais" (URL externa ou modal).
Caixa para Pontos_Interesse_Dica (ex.: "Leve protetor solar e câmera").
Design: Cards com ícone e botão estilizado.
Dinâmico: Repita a seção para cada ponto de interesse na planilha (ex.: Pontos_Interesse_1, Pontos_Interesse_2, etc.).
Animação: Hover effect nos cards.
Hospedagens Recomendadas:
Estrutura: Uma seção para cada hospedagem.
Exibir: Hospedagem_X (ex.: "Pousada Mar, R$ 300/noite, vista mar").
Botão "Saiba Mais" (URL externa).
Design: Cards com título, preço e botão.
Dinâmico: Repita a seção para cada hospedagem na planilha (ex.: Hospedagem_1, Hospedagem_2, etc.).
Animação: Hover effect nos cards.
Restaurantes Recomendados:
Exibir: Categorias (Restaurantes_Recomendados_Almoco, Restaurantes_Recomendados_Jantar, etc.) Com descrições de 20-30 palavras.
Botão "Ver Local" (URL externa).
Caixa para Restaurantes_Dica (ex.: "Faça reserva para vista").
Design: Seções por categoria, com ícones (ex.: Garfo e faca).
Animação: Fade-in para cada categoria.
Passeios Recomendados:
Exibir: Lista de passeios (Passeios_Recomendados_X, ex.: "Trilha na mata...").
Botão "Saiba Mais" (URL externa).
Caixa para Passeios_Dica (ex.: "Leve câmera").
Design: Cards com imagens pequenas (se disponíveis).
Dinâmico: Repita a seção para cada passeio.
Animação: Hover effect nos cards.
Checklist Personalizado:
Exibir: Lista (Checklist_Personalizado, ex.: "Protetor solar, chapéu...").
Caixa para Checklist_Dica (ex.: "Leve livro").
Design: Lista com caixas de seleção estilizadas.
Animação: Fade-in.
Como Chegar:
Exibir: Detalhes (Como_Chegar, ex.: "Avião de São Paulo a Cabo Frio, traslado 30min").
Mapa (Mapa_URL).
Design: Texto com ícones (ex.: Avião), mapa como imagem.
Animação: Fade-in.
Passeio Imperdível:
Exibir: Destaque (Passeio_Imperdivel, ex.: "Massagem relaxante...").
Botão "Reservar Agora" (URL externa).
Design: Card destacado.
Animação: Pulsação no botão.
Curiosidades:
Exibir: 2-3 fatos (Curiosidades, ex.: "Trancoso tem 5 praias...").
Design: Lista com ícones (ex.: Lâmpada).
Animação: Fade-in.
Vantagens e Desvantagens:
Exibir: Comparação (Vantagens, Desvantagens).
Design: Cards lado a lado, com ícones (ex.: Check, x).
Animação: Slide-in.
Abas de Preços:
Exibir: Tabela (Abas_Precos, ex.: "Hospedagem: R$ 900").
Botão "Ver Custos" (URL externa).
Design: Tabela estilizada.
Animação: Fade-in.
Sugestões de Destinos:
Exibir: 3-5 destinos (Sugestoes_Destinos_X, ex.: "Arraial do Cabo").
Botão "Explorar" (URL externa).
Design: Cards com imagem (Sugestoes_Destinos_Imagem_URL).
Dinâmico: Repita a seção para cada sugestão.
Animação: Hover effect.
Plano de Pagamento:
Exibir: Opções (Plano_Pagamento, ex.: "À Vista com 10% desconto").
Botão "Simular" (URL externa).
Design: Lista com ícones.
Animação: Fade-in.
Contatos Locais:
Exibir: Lista (Contatos_Locais, ex.: "Táxi: (22) 9999-8888").
Design: Lista com ícones (ex.: Telefone).
Animação: Fade-in.
Feedback do Cliente:
Exibir: Formulário estático (Feedback_Cliente, ex.: "O que achou?").
Botão "Enviar" (URL externa).
Design: Formulário estilizado (visual).
Animação: Fade-in.
Upsell e Reserva:
Exibir: Texto (Upsell, ex.: "Solicite orçamento!").
Botão "Reservar Agora" (URL externa).
Design: Card destacado.
Animação: Pulsação no botão.
Guia de Segurança:
Exibir: Dicas (Guia_Seguranca, ex.: "Evite objetos importantes").
Design: Lista com ícones (ex.: Cadeado).
Animação: Fade-in.
Clima e Melhores Épocas:
Exibir: Informações (Clima, ex.: "Junho: 25°C").
Gráfico estilizado (ex.: SVG simples).
Design: Texto com ícone de sol/nuvem.
Animação: Fade-in.
Galeria de Fotos:
Exibir: 3-5 imagens (Galeria_Fotos_URL_X) com legendas (Galeria_Fotos_Legenda_X).
Design: Grid de imagens.
Dinâmico: Repita para cada imagem.
Animação: Fade-in.
Depoimentos:
Exibir: 2-3 depoimentos (Depoimentos_X, ex.: "Melhor viagem! - João").
Design: Cards com foto (Depoimentos_Foto_URL).
Dinâmico: Repita para cada depoimento.
Animação: Slide-in.
Políticas de Cancelamento:
Exibir: Regras (Politicas_Cancelamento, ex.: "Cancelamento gratuito até 7 dias").
Botão "Saiba Mais" (URL externa).
Design: Texto com ícone.
Animação: Fade-in.
Dúvidas Frequentes (FAQ):
Exibir: 3-5 perguntas e respostas (FAQ_X, ex.: "Posso alterar? Sim, até 48h antes").
Design: Lista expansível (accordion).
Dinâmico: Repita para cada pergunta.
Animação: Fade-in.
Mapa Interativo do Destino:
Exibir: Mapa (Mapa_Interativo_URL) com marcações.
Botões clicáveis (ex.: "Ver Local", URL externa).
Design: Imagem com botões sobrepostos.
Animação: Fade-in.
Benefícios Exclusivos da XDestinos:
Exibir: Diferenciais (Beneficios_XDestinos, ex.: "Personalização total").
Botão "Saiba Mais" (URL externa).
Design: Lista com ícones (ex.: Estrela).
Animação: Fade-in com pulsação no botão.
Escopo do Trabalho
Desenvolvimento do Template:
Crie a página roteiro.html com as seções listadas, usando html, css e javascript.
Implemente a repetição dinâmica para seções como Dias, Pontos de Interesse, Hospedagens, etc., Com base nos dados da planilha.
Adicione animações leves (ex.: Fade-in, hover effects).
Garanta que o design seja mobile-first, com layout responsivo e flexível para desktop.
Integração com Dados:
Configure a integração com a Google Sheets api (forneceremos a planilha e a chave api) ou use um arquivo json.
Garanta que apenas as seções preenchidas na planilha sejam exibidas.
Testes:
Teste com 3 destinos (ex.: "Trancoso - BA", "Búzios - RJ", "São Paulo - SP") para garantir que as seções sejam preenchidas corretamente.
Documentação:
Forneça um documento simples explicando como atualizar a planilha.
Requisitos de Design
O layout deve ser altamente profissional, com tipografia elegante (ex.: Playfair Display para títulos, Montserrat para textos), cores suaves e tropicais (ex.: Tons de azul, verde, dourado), e elementos visuais envolventes (ex.: íCones estilizados, imagens de fundo impactantes, transições suaves).
Use animações para criar uma experiência imersiva (ex.: Fade-in ao rolar, hover effects nos cards, pulsação em botões de ação).
Priorize a usabilidade em dispositivos móveis (ex.: Botões grandes, espaçamento adequado, imagens otimizadas).
Prazo
10 dias para design, desenvolvimento e testes.
Entregáveis
Arquivos da página (roteiro.html, css, js, imagens).
Documentação básica (ex.: Como atualizar a planilha).
Categoria Design e Multimedia
Subcategoria Web Design
Do que você precisa? Criar um novo design personalizado
Isso é um projeto ou uma posição de trabalho? Um projeto
Disponibilidade requerida Conforme necessário
Prazo de Entrega: Não estabelecido
Habilidades necessárias