Uma loja virtual protótipo inspirada no universo encantado da Sanrio®.
Feita com HTML, CSS e muito carinho, a Magic Shop é um projeto visual e conceitual, pensado para transmitir fofura, nostalgia e uma experiência mágica para quem ama personagens como Hello Kitty™, Kuromi™, My Melody™ e Cinnamoroll™.
A Magic Shop é um projeto conceitual de loja virtual, voltado para um público majoritariamente feminino, entre 13 e 30 anos, que se identifica com a estética kawaii e a cultura pop japonesa. Inspirada no universo encantado da Sanrio®, a proposta atende especialmente fãs de personagens como Hello Kitty™, Kuromi™, My Melody™ e Cinnamoroll™.
Este protótipo foi desenvolvido com foco em apresentação visual, navegação intuitiva e organização de conteúdo, simulando a experiência de uma loja online real. Ainda não conta com funcionalidades dinâmicas ou integração com backend, sendo uma base estática construída em HTML e CSS.
O projeto é estático, feito com HTML e CSS puros, sem lógica de programação ou banco de dados.
Mesmo assim, apresenta uma estrutura pensada com muito cuidado:
- Navegação por personagens: menu com categorias como Kuromi, Hello Kitty, My Melody, etc.
- Cards de produto: imagem, nome e preço, dispostos de forma organizada e responsiva
- Página de produto: com descrição, tamanho, materiais e botão fictício de "Adicionar ao carrinho"
- Carrinho visual: layout que simula a seleção de itens, aplicação de cupom e cálculo de frete
- Checkout estilizado: ilustração de tela de pagamento com opções como Pix, Cartão e Boleto
- Confirmação do pedido: página final com resumo fictício da compra
- Painel lateral fictício: com visual inspirado em um dashboard administrativo
- Simulação de cadastro de produtos e categorias: formulários estilizados, sem lógica de envio
- Sistema de ordenação drag & drop (em conceito visual): estrutura pensada para no futuro aplicar JS ou framework
A estética do projeto foi guiada por três palavras: doçura, magia e acolhimento.
A ideia era fazer o usuário se sentir entrando num universo de pelúcias vivas e carinho digital.
| Elemento | Cor | Descrição |
|---|---|---|
| Botões padrão | #BC255C |
Rosa vibrante (My Melody) |
| Botões secundários | #BC4069 |
Rosa escuro elegante |
| Fundo geral | #FFFFFF |
Leveza e contraste |
| Blocos de conteúdo | #FFC0CB |
Rosa claro acolhedor |
| Etiquetas e rótulos | #FEE9E7 |
Suave e destacada |
| Kuromi | #46295A |
Lilás misterioso |
| Cinnamoroll | #120A8F |
Azul céu profundo |
- Títulos:
Alex BrushouGreat Vibes— toque romântico e delicado - Texto geral:
Montserrat— moderna, clara e acessível
MAGIC-SHOP-LIMA-MAIN/
├── banco de imagens - Magic Shop/
│ ├── Cinnamoroll/
│ ├── Elementos - Site/
│ ├── Hello Kitty/
│ ├── icones/
│ ├── Kuromi/
│ ├── My Melody/
│ ├── personagens/
│ └── Pompompurin/
│
├── Certificações/
│ ├── server.crt
│ ├── server.key
│ └── server.py # (simula servidor local com HTTPS)
│
├── HTML/
│ ├── cadastro.html
│ ├── carrinho.html
│ ├── compra-concluida.html
│ ├── contate-nos.html
│ ├── desc-*.html # páginas individuais de descrição por personagem
│ ├── editar-perfil.html
│ ├── endereco.html
│ ├── finalizar-compra.html
│ ├── home.html
│ ├── index.html
│ ├── produtos.html
│ ├── profile.html
│ └── sobre-nos.html
│
├── Telas ADM/
│ ├── dashboard.html
│ ├── editar-categorias.html
│ ├── gerenciar-produtos.html
│ └── index.html
│
├── style/
│ └── style.css
│
└── README.md # você está aqui!Esse projeto é um protótipo de front-end, mas pode futuramente evoluir para um sistema completo.
Possibilidades de melhorias:
- 💻 Responsividade total (mobile first)
- ⚙️ Inclusão de interações com JavaScript (como carrinho dinâmico)
- 🛠️ Conexão com backend e banco de dados
- 🎁 Página de favoritos
- 🌙 Modo escuro
Ketlyn Lorrayne Niza de Araújo
Apaixonada por transformar ideias fofas em interfaces encantadoras.
Esse projeto é fruto de estudos, criatividade e muita vontade de criar algo que abrace quem visita.
"A tecnologia também pode ser delicada. A Magic Shop é a prova disso." 🌸✨