Skip to content

Commit

Permalink
✨feat: implementa múltiplas páginas estáticas com abordagem tradicion…
Browse files Browse the repository at this point in the history 
…al | Parte 01

- Commit Inicial do Projeto
- Cria o Diretório do Projeto
- Implementa a Página Inicial "Home" Usando a Abordagem Tradicional
- Implementa a Página "Contato" Usando a Abordagem Tradicional
- Implementa a Página "Sobre" Usando a Abordagem Tradicional
  • Loading branch information
@diegoarmandoo
diegoarmandoo committed Jan 7, 2024
1 parent 8f60343 commit bb0386e
Show file tree
Hide file tree
Showing 5 changed files with 333 additions and 1 deletion.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# ecommerce-simple-spa
[Software Development] Repositório de um projeto acadêmico para prática de desenvolvimento WEB de software, mais especificamente a implementação de um Single Page Application (SPA) básico usando HTML, CSS, Javascript e o framework Bootstrap.
[Software Development] Este é um repositório de um projeto acadêmico para prática de desenvolvimento WEB de software mais especificamente a implementação de um Single Page Application (SPA) básico usando HTML, Javascript, CSS, framework Bootstrap e os conceitos de módulos, views, componentes, roteamento além de observância às boas práticas de desenvolvimento.
91 changes: 91 additions & 0 deletions contato.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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="[email protected]" />
<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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Binary file added images/abc.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
145 changes: 145 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

<!-- 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>

<!-- Bootstrap JS Bundle (optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
96 changes: 96 additions & 0 deletions sobre.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

0 comments on commit bb0386e

Please sign in to comment.