Skip to content

Commit

Permalink
✨feat: converte páginas em views do SPA | Parte 03
Browse files Browse the repository at this point in the history 
- Cria a "HomeView" a Partir de Trechos do HTML da Página "Index"
- Prepara a Página "Index" para Ser o Ponto de Carregamento Único do SPA
- Configura a "HomeView" nas Rotas e Na Barra de Navegação
- Converte a Página "Contato" em "ContatoView"
- Configura a "ContatoView" nas Rotas e Na Barra de Navegação
- Convertendo a Página "Sobre" em "SobreView"
- Configura a "SobreView" nas Rotas e Na Barra de Navegação
- Implementa a "NotFoundView" e Configura nas Rotas
  • Loading branch information
@diegoarmandoo
diegoarmandoo committed Jan 14, 2024
1 parent e695b03 commit 3f66da4
Show file tree
Hide file tree
Showing 13 changed files with 325 additions and 286 deletions.
5 changes: 5 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"liveServer.settings.port": 5400,
"liveServer.settings.file": "index.html",
"liveServer.settings.root":"/",
}
91 changes: 0 additions & 91 deletions contato.html
View file

This file was deleted.

106 changes: 8 additions & 98 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,17 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link page" href="/">
<a class="nav-link page" href="/" data-link>
<i class="bi bi-house"> Home</i>
</a>
</li>
<li class="nav-item">
<a class="nav-link page" href="/contato.html">
<a class="nav-link page" href="/contato" data-link>
<i class="bi bi-telephone"> Contato</i>
</a>
</li>
<li class="nav-item">
<a class="nav-link page" href="/sobre.html">
<a class="nav-link page" href="/sobre" data-link>
<i class="bi bi-patch-question"> Sobre</i>
</a>
</li>
Expand All @@ -43,103 +43,13 @@
</div>
</nav>

<!-- Introdução -->
<header class="py-4" style="background-color:#f4dfc8;">
<div class="container px-4 px-lg-5">
<div class="row align-items-center justify-content-center">
<div class="col-lg-8 col-xl-7 col-xxl-6">
<div class="my-5 text-center text-xl-start">
<h1 class="display-5 fw-bolder mb-2" style="color: #425862;">
🛒 E-Commerce ABC
</h1>
<p class="lead fw-medium mb-4 mt-4 text-break" style="color: #425862;">
A Fábrica ABC, especializada em produtos de <b>cama, mesa e banho</b>, ingressou no comércio eletrônico para expandir seu alcance no Brasil.
Adotando o modelo B2C, a empresa oferece uma <b>experiência de compra online personalizada e eficiente</b>.
A ABC é conhecida pela <b>qualidade de seus produtos</b>, agora <b>combina tradição com inovação</b>, adaptando-se às novas demandas do mercado.</p>
</p>
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start">
<a class="btn btn-lg px-4 me-sm-3" style="background-color: #7d7062; color: #f8e9d8" href="#">
Inicie Sua Experiência
</a>
<a class="btn btn-outline-dark btn-lg px-4 fw-bolder" href="#">
Sobre
</a>
</div>
</div>
</div>
<div class="col-xl-5 col-xxl-6 d-none d-xl-block text-center">
<img class="img-fluid rounded-4" src="/images/abc.png" alt="Imagem representando os princípios da Fábrica ABC" />
</div>
</div>
</div>
</header>

<!-- Qualidades -->
<section class="py-5" id="qualidades" style="background-color: #f7d3ad;">
<div class="container px-5 my-5">
<div class="row gx-5">
<div class="col-lg-5 mb-5 mb-lg-0"><h2 class="fw-bolder mb-0" style="color: #425862;">⭐ Nosso Diferencial</h2></div>
<div class="col-lg-7">
<div class="row gx-5 row-cols-1 row-cols-md-2" style="color: #425862;">
<div class="col mb-5 h-100">
<h2 class="h5">★ Qualidade Superior</h2>
<p class="mb-0">Os produtos da ABC são feitos com materiais premium, garantindo durabilidade e conforto excepcionais.</p>
</div>
<div class="col mb-5 h-100">
<h2 class="h5">★ Variedade de Produtos</h2>
<p class="mb-0">A ABC oferece uma ampla gama de estilos e designs, atendendo a todos os gostos e necessidades.</p>
</div>
<div class="col mb-5 mb-md-0 h-100">
<h2 class="h5">★ Entrega Eficiente</h2>
<p class="mb-0">Com a ABC, a entrega é rápida e confiável, trazendo comodidade e satisfação ao cliente.</p>
</div>
<div class="col h-100">
<h2 class="h5">★ Atendimento ao Cliente</h2>
<p class="mb-0">A equipe de atendimento da ABC é atenciosa e pronta para resolver quaisquer dúvidas ou problemas.</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Testimonial -->
<div class="py-5" style="background-color: #faf7f5;">
<div class="container px-5 my-5">
<div class="row gx-10 justify-content-center">
<div class="col-lg-10 col-xl-7">
<div class="text-center" style="color: #425862;">
<div class="fs-4 mb-4 fst-italic">"Comprei lençóis da Fábrica ABC e estou encantado! Qualidade excepcional, conforto incomparável e entrega rápida. Superou todas as minhas expectativas!"</div>
<div class="d-flex align-items-center justify-content-center">
<div class="fw-bold">
João
<span class="fw-bold mx-1">/</span>
Cliente, Tobias Barreto
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container px-5 my-5">
<div class="row gx-10 justify-content-center">
<div class="col-lg-10 col-xl-7">
<div class="text-center" style="color: #425862;">
<div class="fs-4 mb-4 fst-italic">"ABC tem qualidade, mas precisa melhorar no atendimento online. Entrega e produto excelentes, mas o suporte é lento!"</div>
<div class="d-flex align-items-center justify-content-center">
<div class="fw-bold">
Maria
<span class="fw-bold mx-1">/</span>
Cliente, Riachão do Dantas
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Container Template Views -->
<main id="content-view" style="margin-top:56px"></main>

<!-- Bootstrap JS Bundle (optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- Script de Inicialização do SPA -->
<script type="module" src="./index.js"></script>
</body>
</html>
22 changes: 21 additions & 1 deletion js/routes.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,24 @@
import { HomeView } from "../views/home/home.js";
import { ContatoView } from "../views/contato/contato.js";
import { SobreView } from "../views/sobre/sobre.js";
import { NotFoundView } from "../views/not-found/not-found.js";

//Recupera o elemento HTML que vai armazenar os templates das views
const containerView = document.getElementById('content-view');

//Instancia as Views
const homeView = new HomeView(containerView);
const contatoView = new ContatoView(containerView);
const sobreView = new SobreView(containerView);
const notFoundView = new NotFoundView(containerView);

//Define um objeto para relacionar as rotas (URL) as views
const routes = {};
const routes = {
'/': homeView,
'/home': homeView,
'/contato': contatoView,
'/sobre': sobreView,
'/not-found': notFoundView,
};

export { routes }
96 changes: 0 additions & 96 deletions sobre.html
View file

This file was deleted.

Loading

0 comments on commit 3f66da4

Please sign in to comment.