From 3f66da4b33d20b0436017363f1223894638bef6f Mon Sep 17 00:00:00 2001
From: "Diego Armando O. Meneses" <diegoarmandoo@hotmail.com>
Date: Sat, 13 Jan 2024 22:54:14 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat:=20converte=20p=C3=A1ginas=20em?=
 =?UTF-8?q?=20views=20do=20SPA=20|=20Parte=2003?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .vscode/settings.json          |   5 ++
 contato.html                   |  91 ----------------------------
 index.html                     | 106 +++------------------------------
 js/routes.js                   |  22 ++++++-
 sobre.html                     |  96 -----------------------------
 views/contato/contato.html     |  42 +++++++++++++
 views/contato/contato.js       |  23 +++++++
 views/home/home.html           |  95 +++++++++++++++++++++++++++++
 views/home/home.js             |  23 +++++++
 views/not-found/not-found.html |  16 +++++
 views/not-found/not-found.js   |  23 +++++++
 views/sobre/sobre.html         |  46 ++++++++++++++
 views/sobre/sobre.js           |  23 +++++++
 13 files changed, 325 insertions(+), 286 deletions(-)
 create mode 100644 .vscode/settings.json
 delete mode 100644 contato.html
 delete mode 100644 sobre.html
 create mode 100644 views/contato/contato.html
 create mode 100644 views/contato/contato.js
 create mode 100644 views/home/home.html
 create mode 100644 views/home/home.js
 create mode 100644 views/not-found/not-found.html
 create mode 100644 views/not-found/not-found.js
 create mode 100644 views/sobre/sobre.html
 create mode 100644 views/sobre/sobre.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..3be91f8
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "liveServer.settings.port": 5400,
+    "liveServer.settings.file": "index.html",
+    "liveServer.settings.root":"/",
+}
\ No newline at end of file
diff --git a/contato.html b/contato.html
deleted file mode 100644
index 027bf81..0000000
--- a/contato.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>🛒E-Commerce ABC | Simple SPA</title>
-        <!-- Bootstrap CSS -->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
-        <!-- Bootstrap icons-->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" rel="stylesheet"/>
-    </head>
-    <body style="background-color: #faf7f5;">
-        
-        <!-- Barra de Navegação -->
-        <nav id="navbar" class="navbar navbar-expand-lg fixed-top" style="background-color: #425862;" data-bs-theme="dark">
-            <div class="container-fluid">
-                <a class="navbar-brand" style="color:#f4dfc8;" href="#">
-                    🛒 <b>E-Commerce ABC</b>
-                </a>
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="collapse navbar-collapse" id="navbarNav">
-                    <ul class="navbar-nav me-auto">
-                        <li class="nav-item">
-                            <a class="nav-link page" href="/">
-                                <i class="bi bi-house"> Home</i>
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link page" href="/contato.html">
-                              <i class="bi bi-telephone"> Contato</i>
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link page" href="/sobre.html">
-                              <i class="bi bi-patch-question"> Sobre</i>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </nav>
-
-        <!--Contato -->
-        <section class="py-5">
-            <div class="rounded-3 py-5 px-4 px-md-5 mb-5" style="background-color: #f7d3ad;">
-                <div class="text-center mb-5" style="color: #425862;">
-                    <h1 class="fw-bolder">
-                        Entrar em Contato
-                    </h1>
-                    <p class="lead fw-normal text-muted mb-0">Queremos ouvir você!!</p>
-                </div>
-                <div class="row gx-5 justify-content-center">
-                    <div class="col-lg-8 col-xl-6">
-
-                        <form id="contactForm">
-                            <!-- Nome Complete input-->
-                            <div class="form-floating mb-3">
-                                <input class="form-control" id="name" type="text" placeholder="Nome..." />
-                                <label for="name">Nome Completo</label>
-                            </div>
-                            <!-- Email input-->
-                            <div class="form-floating mb-3">
-                                <input class="form-control" id="email" type="email" placeholder="nome@mail.com" />
-                                <label for="email">Email</label>
-                            </div>
-                            <!-- Número de Telefone input-->
-                            <div class="form-floating mb-3">
-                                <input class="form-control" id="phone" type="tel" placeholder="(79) 99999-9999" />
-                                <label for="phone">Telefone</label>
-                            </div>
-                            <!-- Mensagem input-->
-                            <div class="form-floating mb-3">
-                                <textarea class="form-control" id="message" type="text" placeholder="Digite sua mensagem..."
-                                    style="height: 10rem"></textarea>
-                                <label for="message">Mensagem</label>
-                            </div <!-- Submit Button-->
-                            <div class="d-grid"><button class="btn btn-lg disabled" id="submitButton"
-                                    style="background-color: #655d54; color: #fcfcfc" type="submit">Enviar</button></div>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Bootstrap JS Bundle (optional) -->
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    </body>
-</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 1b0ea5d..a900b8a 100644
--- a/index.html
+++ b/index.html
@@ -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>
@@ -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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+        <!-- Script de Inicialização do SPA -->
+        <script type="module" src="./index.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/js/routes.js b/js/routes.js
index ddcdeda..a01cbaa 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -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 }
\ No newline at end of file
diff --git a/sobre.html b/sobre.html
deleted file mode 100644
index 802e5d7..0000000
--- a/sobre.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>🛒E-Commerce ABC | Simple SPA</title>
-        <!-- Bootstrap CSS -->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
-        <!-- Bootstrap icons-->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" rel="stylesheet"/>
-    </head>
-    <body style="background-color: #faf7f5;">
-        
-        <!-- Barra de Navegação -->
-        <nav id="navbar" class="navbar navbar-expand-lg fixed-top" style="background-color: #425862;" data-bs-theme="dark">
-            <div class="container-fluid">
-                <a class="navbar-brand" style="color:#f4dfc8;" href="#">
-                    🛒 <b>E-Commerce ABC</b>
-                </a>
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="collapse navbar-collapse" id="navbarNav">
-                    <ul class="navbar-nav me-auto">
-                        <li class="nav-item">
-                            <a class="nav-link page" href="/">
-                                <i class="bi bi-house"> Home</i>
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link page" href="/contato.html">
-                              <i class="bi bi-telephone"> Contato</i>
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link page" href="/sobre.html">
-                              <i class="bi bi-patch-question"> Sobre</i>
-                            </a>
-                          </li>
-                    </ul>
-                </div>
-            </div>
-        </nav>
-
-        <!--Sobre -->
-        <section class="container my-5">
-            <section class="py-5">
-            <div class="container px-5">
-                <div class="rounded-3 py-5 px-4 px-md-5 mb-5" style="background-color: #f7d3ad;color: #425862;">
-                <h1 class="fw-bolder">
-                    Sobre
-                </h1>
-                <section class="mb-5">
-                    <p>
-                    A Fábrica ABC, situada no coração da indústria têxtil brasileira, é um exemplo vibrante de inovação e
-                    adaptação aos novos tempos. Especializada na produção de itens de cama, mesa e banho, a ABC construiu sua
-                    reputação na qualidade superior de seus produtos, que incluem lençóis de algodão egípcio, toalhas macias e
-                    resistentes, e uma variedade de artigos para decoração de interiores.
-                    </p>
-                    <p>
-                    Com o avanço da tecnologia digital e a crescente demanda por conveniência nas compras, a ABC decidiu
-                    expandir
-                    suas operações para o comércio eletrônico. Esta transição para o ambiente online marca um momento
-                    significativo na história da empresa, permitindo-lhe atender a uma clientela mais ampla e diversificada em
-                    todo o Brasil.
-                    </p>
-                    <p>
-                    O modelo de negócios adotado pela ABC no comércio eletrônico é o B2C (Business-to-Consumer), no qual a
-                    empresa
-                    vende diretamente para o consumidor final. Este modelo é ideal para o varejo online, pois facilita a
-                    interação
-                    direta com os clientes, permitindo uma experiência de compra personalizada e eficiente.
-                    </p>
-                    <p>
-                    A plataforma de e-commerce da ABC foi desenhada para oferecer uma navegação intuitiva e segura, com
-                    descrições
-                    detalhadas dos produtos, fotos de alta qualidade e opções variadas de pagamento. Além disso, a ABC investiu
-                    em
-                    uma logística robusta e eficiente, garantindo entregas rápidas e seguras em várias regiões do país.
-                    <p />
-                    <p>
-                    Com esta nova fase, a Fábrica ABC não apenas mantém sua tradição de excelência e qualidade, mas também se
-                    posiciona como uma empresa moderna e adaptável, pronta para enfrentar os desafios e aproveitar as
-                    oportunidades do século 21.
-                    </p>
-                </section>
-                </div>
-            </div>
-            </section>
-        </section>
-
-        <!-- Bootstrap JS Bundle (optional) -->
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    </body>
-</html>
\ No newline at end of file
diff --git a/views/contato/contato.html b/views/contato/contato.html
new file mode 100644
index 0000000..f3a5d60
--- /dev/null
+++ b/views/contato/contato.html
@@ -0,0 +1,42 @@
+<!--Contato -->
+<section class="py-5">
+    <div class="rounded-3 py-5 px-4 px-md-5 mb-5" style="background-color: #f7d3ad;">
+        <div class="text-center mb-5" style="color: #425862;">
+            <h1 class="fw-bolder">
+                Entrar em Contato
+            </h1>
+            <p class="lead fw-normal text-muted mb-0">Queremos ouvir você!!</p>
+        </div>
+        <div class="row gx-5 justify-content-center">
+            <div class="col-lg-8 col-xl-6">
+
+                <form id="contactForm">
+                    <!-- Nome Complete input-->
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="name" type="text" placeholder="Nome..." />
+                        <label for="name">Nome Completo</label>
+                    </div>
+                    <!-- Email input-->
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="email" type="email" placeholder="nome@mail.com" />
+                        <label for="email">Email</label>
+                    </div>
+                    <!-- Número de Telefone input-->
+                    <div class="form-floating mb-3">
+                        <input class="form-control" id="phone" type="tel" placeholder="(79) 99999-9999" />
+                        <label for="phone">Telefone</label>
+                    </div>
+                    <!-- Mensagem input-->
+                    <div class="form-floating mb-3">
+                        <textarea class="form-control" id="message" type="text" placeholder="Digite sua mensagem..."
+                            style="height: 10rem"></textarea>
+                        <label for="message">Mensagem</label>
+                    </div <!-- Submit Button-->
+                    <div class="d-grid"><button class="btn btn-lg disabled" id="submitButton"
+                            style="background-color: #655d54; color: #fcfcfc" type="submit">Enviar</button></div>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>
+
diff --git a/views/contato/contato.js b/views/contato/contato.js
new file mode 100644
index 0000000..f07c166
--- /dev/null
+++ b/views/contato/contato.js
@@ -0,0 +1,23 @@
+import { View } from "../../js/view.js";
+
+class ContatoView extends View {
+
+    //////////////
+    //Construtor//
+    //////////////
+
+    constructor(contentView,templatePath = '/views/contato/contato.html') {
+        super(contentView,templatePath);
+    }
+
+    ///////////////////////
+    //Metodos Assincronos//
+    ///////////////////////
+
+    async init() {
+        await this.show();
+    }
+
+}
+
+export { ContatoView }
\ No newline at end of file
diff --git a/views/home/home.html b/views/home/home.html
new file mode 100644
index 0000000..83374db
--- /dev/null
+++ b/views/home/home.html
@@ -0,0 +1,95 @@
+ <!-- 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" data-link>
+                            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>
diff --git a/views/home/home.js b/views/home/home.js
new file mode 100644
index 0000000..034cd5d
--- /dev/null
+++ b/views/home/home.js
@@ -0,0 +1,23 @@
+import { View } from "../../js/view.js";
+
+class HomeView extends View {
+
+    //////////////
+    //Construtor//
+    //////////////
+
+    constructor(contentView,templatePath = '/views/home/home.html') {
+        super(contentView,templatePath);
+    }
+
+    ///////////////////////
+    //Metodos Assincronos//
+    ///////////////////////
+    
+    async init() {
+        await this.show();
+    }
+
+}
+
+export { HomeView }
\ No newline at end of file
diff --git a/views/not-found/not-found.html b/views/not-found/not-found.html
new file mode 100644
index 0000000..d82db89
--- /dev/null
+++ b/views/not-found/not-found.html
@@ -0,0 +1,16 @@
+<!--Not Found -->
+<section class="py-5">
+    <div class="container text-center mt-5">
+      <h1 class="display-1 fw-bold" style="color: #425862;">404</h1>
+      <p class="fs-3" style="color: #425862;"> <span class="text-danger">Ops!</span> Página Não Encontrada.</p>
+      <p class="lead">
+        A página que você procura pode ter sido removida, ter seu nome alterado ou estar temporariamente indisponível.
+      </p>
+      <a class="btn btn-lg px-4 me-sm-3" style="background-color: #7d7062; color: #f8e9d8" href="/" data-link>
+        Página Inicial
+      </a>
+      <a class="btn btn-outline-dark btn-lg px-4 fw-bolder" href="/contato" data-link>
+        Contato
+      </a>
+    </div>
+  </section>
\ No newline at end of file
diff --git a/views/not-found/not-found.js b/views/not-found/not-found.js
new file mode 100644
index 0000000..d853ed5
--- /dev/null
+++ b/views/not-found/not-found.js
@@ -0,0 +1,23 @@
+import { View } from "../../js/view.js";
+
+class NotFoundView extends View {
+
+    //////////////
+    //Construtor//
+    //////////////
+
+    constructor(contentView,templatePath = '/views/not-found/not-found.html') {
+        super(contentView,templatePath);
+    }
+
+    ///////////////////////
+    //Metodos Assincronos//
+    ///////////////////////
+
+    async init() {
+        await this.show();
+    }
+
+}
+
+export { NotFoundView }
\ No newline at end of file
diff --git a/views/sobre/sobre.html b/views/sobre/sobre.html
new file mode 100644
index 0000000..9377c0d
--- /dev/null
+++ b/views/sobre/sobre.html
@@ -0,0 +1,46 @@
+<!--Sobre -->
+<section class="container my-5">
+    <section class="py-5">
+    <div class="container px-5">
+        <div class="rounded-3 py-5 px-4 px-md-5 mb-5" style="background-color: #f7d3ad;color: #425862;">
+        <h1 class="fw-bolder">
+            Sobre
+        </h1>
+        <section class="mb-5">
+            <p>
+            A Fábrica ABC, situada no coração da indústria têxtil brasileira, é um exemplo vibrante de inovação e
+            adaptação aos novos tempos. Especializada na produção de itens de cama, mesa e banho, a ABC construiu sua
+            reputação na qualidade superior de seus produtos, que incluem lençóis de algodão egípcio, toalhas macias e
+            resistentes, e uma variedade de artigos para decoração de interiores.
+            </p>
+            <p>
+            Com o avanço da tecnologia digital e a crescente demanda por conveniência nas compras, a ABC decidiu
+            expandir
+            suas operações para o comércio eletrônico. Esta transição para o ambiente online marca um momento
+            significativo na história da empresa, permitindo-lhe atender a uma clientela mais ampla e diversificada em
+            todo o Brasil.
+            </p>
+            <p>
+            O modelo de negócios adotado pela ABC no comércio eletrônico é o B2C (Business-to-Consumer), no qual a
+            empresa
+            vende diretamente para o consumidor final. Este modelo é ideal para o varejo online, pois facilita a
+            interação
+            direta com os clientes, permitindo uma experiência de compra personalizada e eficiente.
+            </p>
+            <p>
+            A plataforma de e-commerce da ABC foi desenhada para oferecer uma navegação intuitiva e segura, com
+            descrições
+            detalhadas dos produtos, fotos de alta qualidade e opções variadas de pagamento. Além disso, a ABC investiu
+            em
+            uma logística robusta e eficiente, garantindo entregas rápidas e seguras em várias regiões do país.
+            <p />
+            <p>
+            Com esta nova fase, a Fábrica ABC não apenas mantém sua tradição de excelência e qualidade, mas também se
+            posiciona como uma empresa moderna e adaptável, pronta para enfrentar os desafios e aproveitar as
+            oportunidades do século 21.
+            </p>
+        </section>
+        </div>
+    </div>
+    </section>
+</section>
\ No newline at end of file
diff --git a/views/sobre/sobre.js b/views/sobre/sobre.js
new file mode 100644
index 0000000..236159e
--- /dev/null
+++ b/views/sobre/sobre.js
@@ -0,0 +1,23 @@
+import { View } from "../../js/view.js";
+
+class SobreView extends View {
+
+    //////////////
+    //Construtor//
+    //////////////
+
+    constructor(contentView,templatePath = '/views/sobre/sobre.html') {
+        super(contentView,templatePath);
+    }
+
+    ///////////////////////
+    //Metodos Assincronos//
+    ///////////////////////
+
+    async init() {
+        await this.show();
+    }
+
+}
+
+export { SobreView }
\ No newline at end of file