Feito a home page do site com vue e bootstrap
This commit is contained in:
Caio1w
@@ -2,12 +2,15 @@
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="icon" href="./src/assets/icons/facivon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||||
<title>CtrlCash</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
||||
</html>
|
||||
|
||||
2561
package-lock.json
generated
Normal file
2561
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
13
src/App.vue
13
src/App.vue
@@ -1,11 +1,10 @@
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>You did it!</h1>
|
||||
<p>
|
||||
Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
|
||||
documentation
|
||||
</p>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
BIN
src/assets/CtrlCash.png
Normal file
BIN
src/assets/CtrlCash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
src/assets/Hero.png
Normal file
BIN
src/assets/Hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
BIN
src/assets/icons/facivon.ico
Normal file
BIN
src/assets/icons/facivon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
89
src/components/FooterPublic.vue
Normal file
89
src/components/FooterPublic.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<footer class="bg-dark-footer text-white pt-5 pb-3">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
|
||||
<div class="col-md-4 col-12">
|
||||
<img src="@/assets/CtrlCash.png" alt="CtrlCash Logo" width="120" height="35" class="mb-3">
|
||||
<p class="text-secondary-footer mt-2">
|
||||
Seu dinheiro. Seu controle total.
|
||||
</p>
|
||||
<p class="text-secondary-footer small">
|
||||
Um projeto acadêmico de finanças inovadoras.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 col-6">
|
||||
<h5 class="fw-bold text-white-footer mb-3">Navegue</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><router-link to="/" class="text-secondary-footer text-decoration-none">Início</router-link></li>
|
||||
<li class="mb-2"><router-link to="/features" class="text-secondary-footer text-decoration-none">Recursos</router-link></li>
|
||||
<li class="mb-2"><router-link to="/about" class="text-secondary-footer text-decoration-none">Sobre Nós</router-link></li>
|
||||
<li class="mb-2"><router-link to="/help" class="text-secondary-footer text-decoration-none">Ajuda</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-6">
|
||||
<h5 class="fw-bold text-white-footer mb-3">Projeto</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/Caio1w/CtrlCash" target="_blank" class="text-secondary-footer text-decoration-none">Repósitorio GitHub</a></li>
|
||||
<li class="mb-2"><a href="/termos" class="text-secondary-footer text-decoration-none">Termos de Uso</a></li>
|
||||
<li class="mb-2"><a href="/privacidade" class="text-secondary-footer text-decoration-none">Política de Privacidade</a></li>
|
||||
<li class="mb-2"><a href="/equipe" class="text-secondary-footer text-decoration-none">Equipe de Desenvolvimento</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-12">
|
||||
<h5 class="fw-bold text-white-footer mb-3">Contato</h5>
|
||||
<p class="text-secondary-footer mb-1">E-mail: contato@ctrlcash.com</p>
|
||||
<p class="text-secondary-footer">Telefone: (XX) XXXX-XXXX</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<hr class="my-4 border-secondary-footer">
|
||||
<div class="text-center">
|
||||
<p class="text-secondary-footer small mb-0">
|
||||
© 2025 CtrlCash - Todos os direitos reservados. Protótipo desenvolvido para fins acadêmicos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.bg-dark-footer {
|
||||
background-color: #1A3B5E;
|
||||
}
|
||||
|
||||
|
||||
.text-white-footer {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
.text-secondary-footer {
|
||||
color: #C0CCDA !important;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.text-success-footer {
|
||||
color: #2ECC71 !important;
|
||||
}
|
||||
|
||||
|
||||
.text-secondary-footer:hover {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
.text-success-footer:hover {
|
||||
color: #34D399 !important;
|
||||
}
|
||||
|
||||
.border-secondary-footer {
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
</style>
|
||||
51
src/components/HeaderPublic.vue
Normal file
51
src/components/HeaderPublic.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<script>
|
||||
// A tag <script> pode ficar vazia se não houver lógica (como imports de componentes ou métodos),
|
||||
// mas é bom mantê-la para futuras expansões.
|
||||
</script>
|
||||
<template>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-lg px-3" :class="['bg-especial', 'navbar-dark']">
|
||||
<div class="container-fluid">
|
||||
|
||||
<router-link class="navbar-brand p-0" to="/">
|
||||
<img src="@/assets/CtrlCash.png" alt="CtrlCash Logo" width="140" height="40">
|
||||
</router-link>
|
||||
|
||||
<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">
|
||||
|
||||
<div class="navbar-nav ms-auto align-items-center">
|
||||
|
||||
<router-link to="/about" class="nav-link">Sobre nós</router-link>
|
||||
<router-link to="/help" class="nav-link me-3">Ajuda</router-link>
|
||||
|
||||
<router-link to="/register" class="btn btn-success me-2">Abrir Conta</router-link>
|
||||
<router-link to="/login" class="btn btn-light text-primary">Login</router-link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
<style scoped>
|
||||
.bg-especial {
|
||||
background-color: #1A3B5E;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #2ECC71;
|
||||
border-color: #2ECC71;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background-color: #26a95f;
|
||||
border-color: #26a95f;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #1A3B5E !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,12 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [],
|
||||
routes: [{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView
|
||||
}],
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
154
src/views/HomeView.vue
Normal file
154
src/views/HomeView.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<script setup>
|
||||
import HeaderPublic from '../components/HeaderPublic.vue'
|
||||
import FooterPublic from '../components/FooterPublic.vue'
|
||||
</script>
|
||||
<template>
|
||||
<HeaderPublic />
|
||||
|
||||
|
||||
<main class="main-no-gap">
|
||||
|
||||
|
||||
<div class="bg-especial">
|
||||
<section class="container p-3 row align-items-center m-auto">
|
||||
|
||||
<div class="col-md-6 col-12 py-5">
|
||||
<h1 class="text-white display-10 text fw-bold text-break">Seu dinheiro. <br> Seu controle total.</h1>
|
||||
<p class="text-secondary fs-5">Organize, invista e alcance seus objetivos financeiros com segurança e facilidade. </p>
|
||||
|
||||
<router-link to="/register" class="btn btn-success btn-lg mt-3 fw-bold me-3">Abra sua conta</router-link>
|
||||
<router-link to="/features" class="btn btn-outline-light btn-lg mt-3">Conheça os recursos</router-link>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6 col-12 d-flex justify-content-center py-5">
|
||||
<img src="@/assets/Hero.png" alt="Ilustração de controle financeiro do CtrlCash" class="img-fluid">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="container py-5">
|
||||
|
||||
<div class="row text-center mb-5">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
|
||||
<h2 class="fw-bold display-6 text-primary-dark">Concentre-se no que importa. Nós cuidamos do resto.</h2>
|
||||
<p class="lead text-secondary-feature mt-3">Descubra as funcionalidades que dão o controle total da sua vida financeira na palma da sua mão.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row g-5">
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-pie-chart-fill display-5 me-5 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">Orçamento Inteligente</h4>
|
||||
<p class="text-secondary-feature">Crie orçamentos por categoria, receba alertas e visualize seus gastos em tempo real, evitando surpresas no fim do mês.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-rocket-takeoff-fill display-5 me-4 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">Metas e Investimentos</h4>
|
||||
<p class="text-secondary-feature">Defina seus objetivos (viagem, casa, carro) e o CtrlCash te ajuda a poupar, investir e acompanhar seu progresso.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-lightning-charge-fill display-5 me-4 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">PIX e Pagamentos Rápidos</h4>
|
||||
<p class="text-secondary-feature">Envie e receba dinheiro em segundos. Pague contas e boletos com agilidade, tudo em um só lugar.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-clock-history display-5 me-4 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">Histórico Automático</h4>
|
||||
<p class="text-secondary-feature">Chega de planilhas. O app registra todas as transações, categoriza e gera relatórios visuais inteligentes para você.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recurso 5: Segurança e Alertas -->
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-lock-fill display-5 me-4 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">Segurança e Alertas</h4>
|
||||
<p class="text-secondary-feature">Monitoramento 24h e notificações em tempo real. Sua segurança é prioridade máxima com tecnologia de ponta.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-credit-card-2-front-fill display-5 me-4 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">Central de Cartões</h4>
|
||||
<p class="text-secondary-feature">Controle seus limites, bloqueie e desbloqueie cartões virtuais e físicos diretamente pelo app, com total autonomia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<FooterPublic />
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.main-no-gap {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.bg-especial {
|
||||
background-color: #122942;
|
||||
}
|
||||
.btn-success {
|
||||
background-color: #2ECC71;
|
||||
border-color: #2ECC71;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background-color: #26a95f;
|
||||
border-color: #26a95f;
|
||||
}
|
||||
|
||||
|
||||
.text-secondary {
|
||||
color: #D1D5DB !important;
|
||||
}
|
||||
|
||||
|
||||
.text-primary-dark {
|
||||
color: #1A3B5E !important;
|
||||
}
|
||||
.text-success-feature {
|
||||
color: #2ECC71 !important;
|
||||
}
|
||||
.text-dark-feature {
|
||||
color: #343a40 !important;
|
||||
}
|
||||
.text-secondary-feature {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user