✨ Projeto Magick IA - E-commerce de Cartas Digitais ✨

Este projeto é uma aplicação prática dos conhecimentos adquiridos durante a "Semana do 0 ao Programador Contratado" do Dev em Dobro. Trata-se de um e-commerce responsivo para a venda de cartas digitais, desenvolvido para demonstrar habilidades em front-end.

🚀 Tecnologias e Ferramentas Aprendidas e Aplicadas

Durante o desenvolvimento deste projeto, tive a oportunidade de aprender e aplicar as seguintes tecnologias e ferramentas:

📋 Sumário

• Contexto do Projeto
• Funcionalidades
• Acesso e Demonstração
• Como Rodar o Projeto Localmente
• Pré-requisitos
• Instalação Local
• Créditos e Agradecimentos
• Contato

🌟 Contexto do Projeto

Este repositório apresenta o resultado do meu aprendizado durante a "Semana do 0 ao Programador Contratado", um evento incrível promovido pelo Dev em Dobro. O objetivo principal foi colocar em prática conceitos fundamentais do desenvolvimento web front-end, construindo um e-commerce funcional e responsivo.

O Magick IA simula uma plataforma de venda de cartas digitais, onde pude exercitar a criação de uma interface intuitiva, a manipulação do DOM com JavaScript para interatividade (como filtros de busca) e a garantia de uma boa experiência em diferentes dispositivos. É um exemplo concreto do meu desenvolvimento e capacidade de aplicar novos conhecimentos em um projeto prático.

💡 Funcionalidades

• Listagem de Cartas: Exibe todas as cartas disponíveis com suas respectivas informações (nome, categoria, preço).
• Filtragem Dinâmica: Permite aos usuários filtrar as cartas por categoria (Comum, Rara, Épica) e por preço máximo, utilizando lógica JavaScript para atualizar a exibição.
• Integração com WhatsApp: Cada carta possui um botão "Comprar" que direciona o usuário para uma conversa no WhatsApp, com a mensagem da carta pré-preenchida, agilizando o processo de compra e simulação de pedido.
• Design Responsivo: O layout foi desenvolvido para se ajustar automaticamente e proporcionar a melhor visualização e usabilidade em desktops, tablets e smartphones, utilizando técnicas de CSS responsivo.
• Estrutura Semântica: Utilização de tags HTML5 semânticas para melhor acessibilidade e SEO.

🖼️ Acesso e Demonstração

Explore o projeto online e veja as funcionalidades que desenvolvi!

Acesse o Projeto: https://adrianathomaz.github.io/projeto-magick-ia-devemdobro/

💻 Como Rodar o Projeto Localmente

Se você deseja explorar o código ou fazer suas próprias modificações, siga os passos abaixo.

Pré-requisitos

Certifique-se de ter:

• Um navegador web moderno (ex: Google Chrome, Mozilla Firefox, Microsoft Edge).
• Um editor de código de sua preferência (ex: VS Code). eu usei o Editor spck no celular Android
• Git instalado em sua máquina.

Instalação Local

1. Clone o repositório: Abra seu terminal ou prompt de comando e execute:

   git clone [https://github.com/AdrianaThomaz/projeto-magick-ia-devemdobro.git](https://github.com/AdrianaThomaz/projeto-magick-ia-devemdobro.git)

2. Navegue até o diretório do projeto:

   cd projeto-magick-ia-devemdobro

3. Abra o arquivo index.html: Você pode simplesmente arrastar e soltar o arquivo index.html para a janela do seu navegador, ou, se estiver usando VS Code com a extensão Live Server, pode clicar com o botão direito no index.html e selecionar "Open with Live Server" para ter um ambiente de desenvolvimento local.

🙏 Créditos e Agradecimentos

Este projeto foi desenvolvido com base nos ensinamentos da "Semana do 0 ao Programador Contratado" do Dev em Dobro. Gostaria de expressar meu sincero agradecimento a toda a equipe do Dev em Dobro pelo excelente conteúdo e pela oportunidade de aprender e criar este projeto.

• Dev em Dobro: https://devemdobro.com/
• **Semana do 0 ao Programador Contratado

✉️ Contato

Se você tiver alguma dúvida, sugestão ou quiser se conectar, pode me encontrar aqui:

• Seu Nome: Adriana Thomaz
• GitHub: https://github.com/AdrianaThomaz
• LinkedIn:(https://www.linkedin.com/in/adrianathomaz-melao)
• Email: [[email protected]]

Com ❤️ por Adriana Thomaz