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