diff --git a/.hintrc b/.hintrc new file mode 100644 index 0000000..9024f9c --- /dev/null +++ b/.hintrc @@ -0,0 +1,13 @@ +{ + "extends": [ + "development" + ], + "hints": { + "axe/name-role-value": [ + "default", + { + "button-name": "off" + } + ] + } +} \ No newline at end of file diff --git a/Public/Images/Cars/CCRO.png b/Public/Images/Cars/CCRO.png new file mode 100644 index 0000000..c229588 Binary files /dev/null and b/Public/Images/Cars/CCRO.png differ diff --git a/Public/Images/Cars/COMP.png b/Public/Images/Cars/COMP.png new file mode 100644 index 0000000..f1d0adc Binary files /dev/null and b/Public/Images/Cars/COMP.png differ diff --git a/Public/Images/Cars/ECLI.png b/Public/Images/Cars/ECLI.png new file mode 100644 index 0000000..6a88c23 Binary files /dev/null and b/Public/Images/Cars/ECLI.png differ diff --git a/Public/Images/Cars/EQBL.png b/Public/Images/Cars/EQBL.png new file mode 100644 index 0000000..7362dc7 Binary files /dev/null and b/Public/Images/Cars/EQBL.png differ diff --git a/Public/Images/Cars/FIFO.png b/Public/Images/Cars/FIFO.png new file mode 100644 index 0000000..49d40ad Binary files /dev/null and b/Public/Images/Cars/FIFO.png differ diff --git a/Public/Images/Cars/HAVA.png b/Public/Images/Cars/HAVA.png new file mode 100644 index 0000000..43060eb Binary files /dev/null and b/Public/Images/Cars/HAVA.png differ diff --git a/Public/Images/Cars/L200.png b/Public/Images/Cars/L200.png new file mode 100644 index 0000000..61ba650 Binary files /dev/null and b/Public/Images/Cars/L200.png differ diff --git a/Public/Images/Cars/PATN.png b/Public/Images/Cars/PATN.png new file mode 100644 index 0000000..2d67598 Binary files /dev/null and b/Public/Images/Cars/PATN.png differ diff --git a/Public/Images/Cars/S10X.png b/Public/Images/Cars/S10X.png new file mode 100644 index 0000000..8703190 Binary files /dev/null and b/Public/Images/Cars/S10X.png differ diff --git a/Public/Images/Cars/SONG.png b/Public/Images/Cars/SONG.png new file mode 100644 index 0000000..33b1ff8 Binary files /dev/null and b/Public/Images/Cars/SONG.png differ diff --git a/Public/Images/Cars/TAOS.png b/Public/Images/Cars/TAOS.png new file mode 100644 index 0000000..81fc769 Binary files /dev/null and b/Public/Images/Cars/TAOS.png differ diff --git a/Public/Images/Cars/TOYH.png b/Public/Images/Cars/TOYH.png new file mode 100644 index 0000000..ad43e2d Binary files /dev/null and b/Public/Images/Cars/TOYH.png differ diff --git a/Public/Images/Cars/TUCN.png b/Public/Images/Cars/TUCN.png new file mode 100644 index 0000000..f9f68cd Binary files /dev/null and b/Public/Images/Cars/TUCN.png differ diff --git a/Public/Images/RENOVauto-removebg-preview.png b/Public/Images/RENOVauto-removebg-preview.png new file mode 100644 index 0000000..1f5b5a3 Binary files /dev/null and b/Public/Images/RENOVauto-removebg-preview.png differ diff --git a/Public/Images/locadora.jpg b/Public/Images/locadora.jpg index 6a0e72f..d9957e6 100644 Binary files a/Public/Images/locadora.jpg and b/Public/Images/locadora.jpg differ diff --git a/Public/Images/planoFamilia.jpg b/Public/Images/planoFamilia.jpg index b2be945..cd3bde6 100644 Binary files a/Public/Images/planoFamilia.jpg and b/Public/Images/planoFamilia.jpg differ diff --git a/Public/Images/svg/close_white_36dp.svg b/Public/Images/svg/close_white_36dp.svg new file mode 100644 index 0000000..22f41e2 --- /dev/null +++ b/Public/Images/svg/close_white_36dp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Public/Images/svg/geo-alt-fill.svg b/Public/Images/svg/geo-alt-fill.svg new file mode 100644 index 0000000..77f0478 --- /dev/null +++ b/Public/Images/svg/geo-alt-fill.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/Public/Images/svg/instagram.svg b/Public/Images/svg/instagram.svg new file mode 100644 index 0000000..855e653 --- /dev/null +++ b/Public/Images/svg/instagram.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/Public/Images/svg/menu_white_36dp.svg b/Public/Images/svg/menu_white_36dp.svg new file mode 100644 index 0000000..469f3ad --- /dev/null +++ b/Public/Images/svg/menu_white_36dp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Public/Images/svg/telephone.svg b/Public/Images/svg/telephone.svg new file mode 100644 index 0000000..679e8a9 --- /dev/null +++ b/Public/Images/svg/telephone.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/Public/JS/agendamento.js b/Public/JS/agendamento.js index e10f2a1..6288ac2 100644 --- a/Public/JS/agendamento.js +++ b/Public/JS/agendamento.js @@ -1,10 +1,13 @@ - -const hamburgerMenu = document.getElementById('hamburger-menu'); -const navLinks = document.querySelector('.nav-links'); - -hamburgerMenu.addEventListener('click', () => { - navLinks.classList.toggle('active'); -}); +function menuShow() { + let menuMobile = document.querySelector('.mobile-menu'); + if (menuMobile.classList.contains('open')) { + menuMobile.classList.remove('open'); + document.querySelector('.icon').src = "/Public/Images/svg/menu_white_36dp.svg"; + } else { + menuMobile.classList.add('open'); + document.querySelector('.icon').src = "/Public/Images/svg/close_white_36dp.svg"; + } +} const showDetailButtons = document.querySelectorAll('.show-details'); const hideDetailButtons = document.querySelectorAll('.hide-details'); diff --git a/Public/JS/home.js b/Public/JS/home.js index ac7e15d..b56b148 100644 --- a/Public/JS/home.js +++ b/Public/JS/home.js @@ -1,12 +1,13 @@ -// Menu hamburguer -const hamburgerMenu = document.getElementById('hamburger-menu'); -const navLinks = document.querySelector('.nav-links'); - -hamburgerMenu.addEventListener('click', () => { - // Só para confirmação de debug - console.log('Menu hamburguer clicado'); - navLinks.classList.toggle('active'); -}); +function menuShow() { + let menuMobile = document.querySelector('.mobile-menu'); + if (menuMobile.classList.contains('open')) { + menuMobile.classList.remove('open'); + document.querySelector('.icon').src = "/Public/Images/svg/menu_white_36dp.svg"; + } else { + menuMobile.classList.add('open'); + document.querySelector('.icon').src = "/Public/Images/svg/close_white_36dp.svg"; + } +} // botão de scroll para o topo do site window.onscroll = function () { diff --git a/Public/Page/Planos/CSS/agendamento.css b/Public/Page/Planos/CSS/agendamento.css index b16d4f1..1ed107e 100644 --- a/Public/Page/Planos/CSS/agendamento.css +++ b/Public/Page/Planos/CSS/agendamento.css @@ -1,17 +1,16 @@ +/* Estilos globais */ +html { + scroll-behavior: smooth; +} + * { margin: 0; padding: 0; box-sizing: border-box; } -header { - background-color: #000; - color: #fff; - padding: 20px 0; -} - p { - font-family: "Inter"; + font-family: "Segoe UI"; } body { @@ -21,103 +20,116 @@ body { line-height: 1.6; } -/* NAV BAR */ +/* NAV BAR */ header { - background-color: #000; + background-color: #111; + box-shadow: 0px 3px 10px #464646; +} + +.nav-bar { + display: flex; + justify-content: space-between; + padding: 1.5rem 6rem; + margin: 0; +} + +.logo { + display: flex; + align-items: center; +} + +.logo h1 { color: #fff; - padding: 20px 0; + font-size: 1.7em; + margin: 0; } -header h1 { - margin-top: 5px; - font-size: 15pt; - font-weight: bold; - margin-left: 10px; +.nav-list { + color: #fff; + display: flex; + align-items: center; } -nav { - padding: 5px; - border-radius: 10px; - width: 100%; +.nav-list ul { display: flex; - justify-content: space-between; + justify-content: center; + list-style: none; } -nav .effect-underline { - color: white; - text-transform: uppercase; +.nav-item { + margin: 0 15px; +} + +.nav-item a{ text-decoration: none; - letter-spacing: 0.15em; - display: inline-block; - padding: 8px; - position: relative; + color: #fff; + transition: background-color 0.3s ease; } -.effect-underline:after { - background: none repeat scroll 0 0 transparent; - bottom: 0; - content: ""; - display: block; - height: 2px; - left: 50%; - position: absolute; - background: white; - transition: width 0.3s ease 0s, left 0.3s ease 0s; - width: 0; +.nav-item a:hover { + color: rgb(161, 161, 161); } -.effect-underline:hover:after { - width: 100%; - left: 0; +.nav-link { + text-decoration: none; + font-size: 1.15rem; + color: #fff; + font-weight: 400; } -.hamburger-menu { +.mobile-menu-icon { display: none; - background: none; - border: none; - font-size: 30px; - color: white; - cursor: pointer; } -@media (max-width: 768px) { - nav .nav-links { - display: none; - flex-direction: column; - position: absolute; - top: 60px; - right: 0; - background-color: #000; - width: 100%; - text-align: center; +.mobile-menu { + display: none; +} + +@media screen and (max-width: 730px) { + .nav-bar { + padding: 1.5rem 4rem; } + .nav-item { + display: none; - nav .nav-links.active { + } + .mobile-menu-icon { + display: block; + z-index: 1000; + } + .mobile-menu-icon button { + background-color: transparent; + border: none; + cursor: pointer; + + } + .mobile-menu ul { display: flex; + flex-direction: column; + text-align: center; + padding-bottom: 1rem; } - - .hamburger-menu { + .mobile-menu .nav-item { display: block; + padding-top: 1.2rem; + color: #fff; } - - nav .effect-underline { - padding: 10px 0; - border-bottom: 1px solid #333; - color: white; + .mobile-menu .login-button { + display: block; + padding: 1rem 2rem; } - - .effect-underline:after { - background: none; + .mobile-menu .login-button button { + width: 100%; } - - .effect-underline:hover:after { - width: 0; + .open { + display: block; } } /* CARDS DE CARROS */ #vehicle-list h3 { + padding-top: 40px; font-size: 2.5em; margin-bottom: 30px; color: #333; @@ -138,7 +150,7 @@ nav .effect-underline { gap: 20px; margin-top: 20px; - padding: 0; + padding: 40px; } .card-item { @@ -230,6 +242,7 @@ nav .effect-underline { font-size: 1.5rem; margin-bottom: 40px; } + .card-front { background-color: #ffffff; } @@ -275,17 +288,20 @@ nav .effect-underline { #aluguel-form { display: flex; flex-direction: column; - align-items: center; /* Centraliza os elementos horizontalmente */ + align-items: center; + /* Centraliza os elementos horizontalmente */ } .modal { - display: none; /* Oculto por padrão */ + display: none; + /* Oculto por padrão */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, 0.5); /* Fundo escurecido */ + background: rgba(0, 0, 0, 0.5); + /* Fundo escurecido */ justify-content: center; align-items: center; z-index: 1000; @@ -489,4 +505,4 @@ footer a { padding: 10px; font-size: 14px; } -} +} \ No newline at end of file diff --git a/Public/Page/Planos/CSS/planEnterprise.css b/Public/Page/Planos/CSS/planEnterprise.css index dbb8d5e..aee2ec4 100644 --- a/Public/Page/Planos/CSS/planEnterprise.css +++ b/Public/Page/Planos/CSS/planEnterprise.css @@ -22,9 +22,10 @@ body { .title-plans { font-size: 2em; - margin-bottom: 30px; color: #333; text-align: center; + margin-top: 100px; + margin-bottom: -30px; } .beneficios, @@ -34,67 +35,120 @@ body { visibility: hidden; } -/* Header */ +/* HEADER NAVBAR */ +/* NAV BAR */ header { - background-color: #000; + background-color: black; + box-shadow: 0px 3px 10px #464646; +} + +.nav-bar { + display: flex; + justify-content: space-between; + padding: 1.5rem 6rem; + margin: 0; +} + +.logo { + display: flex; + align-items: center; +} + +.logo h1 { color: #fff; - padding: 20px 0; + font-size: 1.7em; + margin: 0; } -header h1 { - margin-top: 5px; - font-size: 15pt; - font-weight: bold; - margin-left: 10px; +.nav-list { + color: #fff; + display: flex; + align-items: center; } -nav { - padding: 5px; - border-radius: 10px; - width: 100%; +.nav-list ul { display: flex; - justify-content: space-between; + justify-content: center; + list-style: none; } -nav .effect-underline { - color: white; - text-transform: uppercase; +.nav-item { + margin: 0 15px; +} + +.nav-item a { text-decoration: none; - letter-spacing: 0.10em; - display: inline-block; - padding: 8px 20px; - position: relative; + color: #fff; + transition: background-color 0.3s ease; } -.effect-underline:after { - background: none repeat scroll 0 0 transparent; - bottom: 0; - content: ""; - display: block; - height: 2px; - left: 50%; - position: absolute; - background: white; - transition: width 0.3s ease 0s, left 0.3s ease 0s; - width: 0; +.nav-item a:hover { + color: rgb(161, 161, 161); } -.effect-underline:hover:after { - width: 100%; - left: 0; +.nav-link { + text-decoration: none; + font-size: 1.15rem; + color: #fff; + font-weight: 400; } -.hamburger-menu { - /* Esconder o ícone no desktop */ +.mobile-menu-icon { display: none; - background: none; - border: none; - font-size: 30px; - color: white; - cursor: pointer; } -/* SEÇÃO DA HERO */ +.mobile-menu { + display: none; +} + +@media screen and (max-width: 730px) { + .nav-bar { + padding: 1.5rem 4rem; + } + + .nav-item { + display: none; + + } + + .mobile-menu-icon { + display: block; + z-index: 1000; + } + + .mobile-menu-icon button { + background-color: transparent; + border: none; + cursor: pointer; + + } + + .mobile-menu ul { + display: flex; + flex-direction: column; + text-align: center; + padding-bottom: 1rem; + } + + .mobile-menu .nav-item { + display: block; + padding-top: 1.2rem; + color: #fff; + } + + .mobile-menu .login-button { + display: block; + padding: 1rem 2rem; + } + + .mobile-menu .login-button button { + width: 100%; + } + + .open { + display: block; + } +} /* SEÇÃO DA HERO */ .hero-section { @@ -113,7 +167,6 @@ nav .effect-underline { justify-content: space-between; align-items: center; z-index: 1; - /* Coloca o conteúdo na frente */ } .img-plan { @@ -130,6 +183,7 @@ nav .effect-underline { display: flex; flex-direction: column; justify-content: center; + align-items: center; text-align: center; } @@ -146,20 +200,27 @@ nav .effect-underline { } .hero-plan-btn { - padding: 0px 20px; - background-color: #007bff; - color: white; + background-color: #00c43f; + color: #fff; + padding: 15px 30px; + text-align: center; + font-size: 1.4em; + border-radius: 30px; border: none; - cursor: pointer; - font-size: 1rem; - border-radius: 5px; + text-decoration: none; + transition: background-color 0.3s ease; + width: 200px; + display: inline-block; + margin-top: 20px; } .hero-plan-btn:hover { - background-color: #0056b3; + background-color: #04832c; + color: #fff; + cursor: pointer; } -/* Media query para resoluções menores */ +/* HERO-PLANO */ @media (max-width: 768px) { .hero-section { display: flex; @@ -180,9 +241,7 @@ nav .effect-underline { width: 100%; height: 100%; background-color: rgba(17, 17, 17, 0.7); - /* Cor escura com opacidade */ z-index: 0; - /* Certifica-se de que o overlay fica atrás do conteúdo */ } .container-plan-E { @@ -190,12 +249,10 @@ nav .effect-underline { justify-content: center; align-items: center; z-index: 1; - /* Coloca o conteúdo na frente */ } .img-plan { display: none; - /* Esconde a imagem como elemento separado */ } #hero-content { @@ -205,108 +262,94 @@ nav .effect-underline { } } + /* Beneficios */ +.plans-cards .card-grid { + display: flex; + flex-wrap: wrap; + gap: 1.5em; + justify-content: space-around; +} -/* Benefícios */ -.beneficios { - padding: 50px 20px; +.plan-card { + border: 1px solid #ddd; + border-radius: 8px; + padding: 1.5em; text-align: center; + max-width: 300px; + /* max-height: 800px; */ + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + flex: 1 1 300px; + box-sizing: border-box; + transition: transform 0.2s; } -.beneficios h3 { - font-size: 2em; - margin-bottom: 30px; - color: #333; +.btn-details { + padding: 10px; + border-radius: 5px; + border: none; + background-color: #007bff; + transition: transform 0.2s; + color: wheat; } -/* Container flexível para as caixas de serviço */ -.beneficios .services-container { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 20px; - max-width: 100%; +.btn-details:hover { + background-color: #0056b3; } -/* Estilos para cada caixa de serviço */ -.beneficios .box-service { - width: 300px; - height: 180px; - padding: 20px; - border-radius: 6px; - background-color: #fff; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); - transition: transform 0.3s ease; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; +.plan-card:hover { + transform: scale(1.05); } -.beneficios .box-service h4 { - font-size: 1.3em; - margin-bottom: 10px; - color: #111; +.plans-cards h2 { + text-align: center; + padding: 40px; } -.beneficios .box-service p { - font-size: 1em; - color: #666; +.plan-card h3 { + margin-bottom: 20px; } -/* Responsivo para telas menores */ -@media (max-width: 768px) { - .beneficios h3 { - font-size: 1.8em; - } - - .beneficios .services-container { - flex-direction: column; - align-items: center; - } +.plan-card li { + font-weight: 500; + list-style-type: none; + padding: 0; + text-align: left; + margin-top: 10px; +} - .beneficios .box-service { - width: 100%; - max-width: 300px; - height: auto; - } +.price { + font-weight: bold; + color: #2d87f0; } +/* SEÇÃO DE PLANOS */ +@media (max-width: 768px) { + .plans-cards .card-grid { + justify-content: center; + } -/* .beneficios { - padding: 100px; - text-align: center; + .plan-card { + max-width: 90%; + margin: 10px 0; + } } -.beneficios h3 { - font-size: 2.5em; - margin-bottom: 30px; - color: #333; -} +@media (max-width: 480px) { + .plans-cards h2 { + font-size: 24px; + padding: 20px; + } -.beneficios .service-item { - display: inline-block; - width: 300px; - height: 180px; - padding: 20px; - border-radius: 6px; - margin: 10px; - background-color: #fff; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); - transition: transform 0.3s ease; - vertical-align: top; -} + .plan-card h3 { + font-size: 20px; + } -.beneficios h4 { - font-size: 1.5em; - margin-bottom: 10px; - color: #111; + .price { + font-size: 18px; + } } -.beneficios p { - font-size: 1.1em; - color: #666; -} */ /* Contato */ .contact-section { diff --git a/Public/Page/Planos/CSS/planFamily.css b/Public/Page/Planos/CSS/planFamily.css index e15c4c1..f64e0c3 100644 --- a/Public/Page/Planos/CSS/planFamily.css +++ b/Public/Page/Planos/CSS/planFamily.css @@ -20,71 +20,126 @@ body { line-height: 1.6; } -.title-plans { - margin-top: 80px; +.title-plans { font-size: 2em; - margin-bottom: 30px; color: #333; text-align: center; + margin-top: 100px; + margin-bottom: -30px; } +/* NAV BAR */ header { - background-color: #000; + background-color: black; + box-shadow: 0px 3px 10px #464646; +} + +.nav-bar { + display: flex; + justify-content: space-between; + padding: 1.5rem 6rem; + margin: 0; +} + +.logo { + display: flex; + align-items: center; +} + +.logo h1 { color: #fff; - padding: 20px 0; + font-size: 1.7em; + margin: 0; } -header h1 { - margin-top: 5px; - font-size: 15pt; - font-weight: bold; - margin-left: 10px; +.nav-list { + color: #fff; + display: flex; + align-items: center; } -nav { - padding: 5px; - border-radius: 10px; - width: 100%; +.nav-list ul { display: flex; - justify-content: space-between; + justify-content: center; + list-style: none; } -nav .effect-underline { - color: white; - text-transform: uppercase; +.nav-item { + margin: 0 15px; +} + +.nav-item a { text-decoration: none; - letter-spacing: 0.10em; - display: inline-block; - padding: 8px 20px; - position: relative; + color: #fff; + transition: background-color 0.3s ease; } -.effect-underline:after { - background: none repeat scroll 0 0 transparent; - bottom: 0; - content: ""; - display: block; - height: 2px; - left: 50%; - position: absolute; - background: white; - transition: width 0.3s ease 0s, left 0.3s ease 0s; - width: 0; +.nav-item a:hover { + color: rgb(161, 161, 161); } -.effect-underline:hover:after { - width: 100%; - left: 0; +.nav-link { + text-decoration: none; + font-size: 1.15rem; + color: #fff; + font-weight: 400; } -.hamburger-menu { - /* Esconder o ícone no desktop */ +.mobile-menu-icon { display: none; - background: none; - border: none; - font-size: 30px; - color: white; - cursor: pointer; +} + +.mobile-menu { + display: none; +} + +@media screen and (max-width: 730px) { + .nav-bar { + padding: 1.5rem 4rem; + } + + .nav-item { + display: none; + + } + + .mobile-menu-icon { + display: block; + z-index: 1000; + } + + .mobile-menu-icon button { + background-color: transparent; + border: none; + cursor: pointer; + + } + + .mobile-menu ul { + display: flex; + flex-direction: column; + text-align: center; + padding-bottom: 1rem; + } + + .mobile-menu .nav-item { + display: block; + padding-top: 1.2rem; + color: #fff; + } + + .mobile-menu .login-button { + display: block; + padding: 1rem 2rem; + } + + .mobile-menu .login-button button { + width: 100%; + } + + .open { + display: block; + } } /* SEÇÃO DA HERO */ @@ -103,7 +158,7 @@ nav .effect-underline { max-width: 1200px; justify-content: space-between; align-items: center; - z-index: 1; /* Coloca o conteúdo na frente */ + z-index: 1; } .img-plan { @@ -120,6 +175,7 @@ nav .effect-underline { display: flex; flex-direction: column; justify-content: center; + align-items: center; text-align: center; } @@ -136,20 +192,27 @@ nav .effect-underline { } .hero-plan-btn { - padding: 15px; - background-color: #007bff; - color: white; + background-color: #00c43f; + color: #fff; + padding: 15px 30px; + text-align: center; + font-size: 1.4em; + border-radius: 30px; border: none; - cursor: pointer; - font-size: 1rem; - border-radius: 5px; + text-decoration: none; + transition: background-color 0.3s ease; + width: 200px; + display: inline-block; + margin-top: 20px; } .hero-plan-btn:hover { - background-color: #0056b3; + background-color: #04832c; + color: #fff; + cursor: pointer; } -/* Media query para resoluções menores */ +/* HERO-PLANO */ @media (max-width: 768px) { .hero-section { display: flex; @@ -157,7 +220,7 @@ nav .effect-underline { align-items: center; height: 100vh; position: relative; - background-image: url('/Public/Images/planoFamilia.jpg'); + background-image: url('/Public/Images/empresario-de-sucesso.webp'); background-size: cover; background-position: center; } @@ -169,19 +232,19 @@ nav .effect-underline { left: 0; width: 100%; height: 100%; - background-color: rgba(17, 17, 17, 0.7); /* Cor escura com opacidade */ - z-index: 0; /* Certifica-se de que o overlay fica atrás do conteúdo */ + background-color: rgba(17, 17, 17, 0.7); + z-index: 0; } .container-plan-E { flex-direction: column; justify-content: center; align-items: center; - z-index: 1; /* Coloca o conteúdo na frente */ + z-index: 1; } .img-plan { - display: none; /* Esconde a imagem como elemento separado */ + display: none; } #hero-content { @@ -191,7 +254,82 @@ nav .effect-underline { } } -/* Contato */ +/* PLANOS DO PLAN-FAMILY */ +.plans-cards .card-grid { + display: flex; + flex-wrap: wrap; + gap: 1.5em; + justify-content: space-around; +} + +.plan-card { + border: 1px solid #ddd; + border-radius: 8px; + padding: 1.5em; + text-align: center; + max-width: 300px; + max-height: 500px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + flex: 1 1 300px; + box-sizing: border-box; + transition: transform 0.2s; +} + +.plan-card:hover { + transform: scale(1.05); +} + +.plans-cards h2 { + text-align: center; + padding: 40px; +} + +.plan-card h3 { + margin-bottom: 20px; +} + +.plan-card li { + font-weight: 500; + list-style-type: none; + padding: 0; + text-align: left; + margin-top: 10px; +} + +.price { + font-weight: bold; + color: #2d87f0; +} + +/* SEÇÃO DE PLANOS */ +@media (max-width: 768px) { + .plans-cards .card-grid { + justify-content: center; + } + + .plan-card { + max-width: 90%; + margin: 10px 0; + } +} + +@media (max-width: 480px) { + .plans-cards h2 { + font-size: 24px; + padding: 20px; + } + + .plan-card h3 { + font-size: 20px; + } + + .price { + font-size: 18px; + } +} + + +/* Seção de Contato */ .contact-section { width: 100%; max-width: 1000px; @@ -215,7 +353,8 @@ nav .effect-underline { align-items: flex-start; } -.contact-form, .contact-info { +.contact-form, +.contact-info { flex: 1; } @@ -276,6 +415,48 @@ nav .effect-underline { background-color: #0056b3; } +/* Media Queries para Responsividade */ +@media (max-width: 768px) { + .contact-container { + flex-direction: column; + /* Altera a direção para coluna em telas menores */ + } + + .divider { + display: none; + /* Esconde a divisória em telas menores */ + } + + .contact-form, + .contact-info { + width: 100%; + /* Faz os contêineres ocuparem toda a largura */ + } +} + +@media (max-width: 480px) { + .contact-section { + padding: 20px; + /* Reduz o padding na seção de contato */ + } + + .contact-section h2 { + font-size: 24px; + /* Ajusta o tamanho do título */ + } + + .form-group label { + font-size: 14px; + /* Ajusta o tamanho das labels */ + } + + .submit-btn { + font-size: 14px; + /* Ajusta o tamanho do botão */ + } +} + + /* Footer */ footer { diff --git a/Public/Page/Planos/planEnterprise.html b/Public/Page/Planos/planEnterprise.html index cb36bf3..b8d0812 100644 --- a/Public/Page/Planos/planEnterprise.html +++ b/Public/Page/Planos/planEnterprise.html @@ -9,6 +9,7 @@ + @@ -23,19 +24,36 @@
-
+
@@ -44,49 +62,224 @@

RenovAuto

Buscando os melhores preços e benefícios para os seus funcionários?

Confira mais abaixo sobre o nosso plano empresarial e entre contato conosco para adquirir este pacote!

- - - + Fale Conosco!
- - -
-

Benefícios do Plano

-
-
-

Pagamento anual

-

Pagamento realizado apenas uma vez ao ano!

-
-
-

Manutenção

-

Manutenção preventiva e ajustes a cada 6 meses por nossa conta.

-
-
-

Flexível

-

Diferentes tamanhos de veículos de acordo com a necessidade da sua empresa.

-
-
-
+ +
+

Escolha o Plano Ideal para Sua Empresa

+
+ +
+

Plano Empresarial Básico

+

A opção ideal para pequenas empresas que precisam de transporte regular.

+
    +
  • 🚗 Quilometragem: 1.000 km
    • +
  • 👥 1 motorista adicional
    • +
  • 🔒 Seguro básico incluído
    • +
+

R$ 300/dia

+ +
- +
+

Plano Empresarial Completo

+

Flexibilidade e conforto para grandes empresas com múltiplos funcionários.

+
    +
  • 🚗 Quilometragem ilimitada
    • +
  • 👥 Motoristas adicionais ilimitados
    • +
  • 🔒 Seguro completo incluído
    • +
  • 📞 Assistência 24h
    • +
+

R$ 600/dia

+ +
+ + +
+

Plano Empresarial Premium

+

O pacote completo para empresas que buscam excelência no transporte.

+
    +
  • 🚗 Quilometragem ilimitada
    • +
  • 👥 Motoristas adicionais ilimitados
    • +
  • 🔒 Seguro premium
    • +
  • 📞 Assistência 24h e carro reserva
    • +
  • 💼 Atendimento prioritário
    • +
+

R$ 1.000/dia

+ +
-
-

Flexível

-

Diferentes tamanhos de veiculos de acordo com a necessidade da sua empresa

+
+ + + +
+

Principais veículos inclusos no plano

+
+
+ +
+ + +
+
+ +
+

Fiat Fiorino

+ user-image +
+
    +
  • Modelo: Fiat Fiorino
    • +
  • Cor: Branco
    • +
+
+ +
+ +
+

Detalhes do Fiat Fiorino

+

Veículo utilitário com excelente capacidade de carga, ideal para transporte + urbano de mercadorias.

+
    +
  • ⛽Consumo: 12 km/l (cidade) e 13 km/l (estrada)
    • +
  • 🐎Potência: 85 cv
    • +
  • 💺Capacidade: 2 lugares
    • +
  • 🧳Capacidade de carga: 650 kg
    • +
+ +
+
+
+ + +
+
+
+

Chevrolet S10

+ user-image +
+
    +
  • Modelo: Chevrolet S10
    • +
  • Cor: Preto
    • +
+
+ +
+
+

Detalhes da Chevrolet S10

+

Perfeita para terrenos difíceis e aventuras, com tração 4x4 e motor potente.

+
    +
  • ⛽Consumo: 8 km/l (cidade) e 10 km/l (estrada)
    • +
  • 🐎Potência: 200 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 1061 L
    • +
+ +
+
+
+ + +
+
+
+

Mitsubishi L200

+ user-image +
+
    +
  • Modelo: Mitsubishi L200
    • +
  • Cor: Prata
    • +
+
+ +
+
+

Detalhes da Mitsubishi L200

+

Robustez e potência para trabalhos pesados, ideal para uso em áreas rurais.

+
    +
  • ⛽Consumo: 9 km/l (cidade) e 11 km/l (estrada)
    • +
  • 🐎Potência: 190 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 1000 L
    • +
+ +
+
+
+ + +
+
+
+

Peugeot Partner

+ user-image +
+
    +
  • Modelo: Peugeot Partner
    • +
  • Cor: Cinza
    • +
+
+ +
+
+

Detalhes do Peugeot Partner

+

Veículo utilitário ideal para entregas, com amplo espaço de carga e conforto para + o + motorista.

+
    +
  • ⛽Consumo: 12 km/l (cidade) e 14 km/l (estrada)
    • +
  • 🐎Potência: 115 cv
    • +
  • 💺Capacidade: 2 lugares
    • +
  • 🧳Capacidade de carga: 750 kg
    • +
+ +
+
+
+ + +
+
+
+

Toyota Hilux

+ user-image +
+
    +
  • Modelo: Toyota Hilux
    • +
  • Cor: Branco
    • +
+
+ +
+
+

Detalhes da Toyota Hilux

+

Veículo potente e resistente, excelente para aventuras e uso em terrenos + acidentados. +

+
    +
  • ⛽Consumo: 9 km/l (cidade) e 11 km/l (estrada)
    • +
  • 🐎Potência: 204 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 1150 L
    • +
+ +
+
+
+ +
+ +
+
+
+
-
--> +
@@ -123,20 +316,23 @@

Fale Conosco

Nossos Contatos

-

E-mail: contato@empresa.com

-

Telefone: (11) 1234-5678

-

Endereço: Rua Exemplo, 123, São Paulo

+

Icone instagram   @RenovAuto

+

Icone de telefone   (11) 1234-5678

+

Icone de Localização   Rua + LaAondeATuaInvejaNaoChega, 123, Fortaleza, CE

- + + + \ No newline at end of file diff --git a/Public/Page/Planos/planFamily.html b/Public/Page/Planos/planFamily.html index af32e59..0ce5711 100644 --- a/Public/Page/Planos/planFamily.html +++ b/Public/Page/Planos/planFamily.html @@ -13,7 +13,7 @@ - + @@ -32,19 +32,36 @@
-
+
@@ -53,139 +70,220 @@

RenovAuto

Buscando os melhores preços e benefícios para os seus funcionários?

Confira mais abaixo sobre o nosso plano empresarial e entre contato conosco para adquirir este pacote!

- - - + Fale Conosco! +
+ +
+ + + +
+

Escolha o Plano Ideal para Sua Família

+
+ +
+

Plano Básico Familiar

+

A opção mais econômica para famílias.

+
    +
  • 🚗 Quilometragem: 500 km
    • +
  • 👥 2 motoristas adicionais
    • +
  • 🔒 Seguro básico incluído
    • +
+

R$ 150/dia

+ +
+ + +
+

Plano Completo

+

Mais flexibilidade e segurança para suas viagens.

+
    +
  • 🚗 Quilometragem ilimitada
    • +
  • 👥 Motoristas adicionais ilimitados
    • +
  • 🔒 Seguro completo incluído
    • +
  • 📞 Assistência 24h
    • +
+

R$ 250/dia

+ +
+ + +
+

Plano VIP

+

O pacote completo com benefícios exclusivos.

+
    +
  • 🚗 Quilometragem ilimitada
    • +
  • 👥 Motoristas adicionais ilimitados
    • +
  • 🔒 Seguro premium
    • +
  • 📞 Assistência 24h e carro reserva
    • +
  • 💼 Atendimento prioritário
    • +
+

R$ 350/dia

+
-

Principais veículos inclusos neste plano

+

Principais veículos inclusos no plano

- + +
-

Fiat Mobi

- user-image +

Jeep Commander

+ Jeep Commander
    -
  • Modelo: Fiat Mobi
    • -
  • Cor: Cinza
    • +
  • Modelo: Jeep Commander
    • +
  • Cor: Preto
-

Detalhes do Fiat Mobi

-

Mais informações do veículo...

+

Detalhes do Jeep Commander

+

Espaçoso e robusto, ideal para aventuras em família. Equipado com motor 2.0 Turbo e + tração 4x4.

+
    +
  • ⛽Consumo: 10 km/l (cidade) e 12 km/l (estrada)
    • +
  • 🐎Potência: 270 cv
    • +
  • 💺Capacidade: 7 lugares
    • +
  • 🧳Porta-malas: 233 L
    • +
- +
-

Fiat Argo

- user-image +

Volkswagen T-Cross

+ Volkswagen T-Cross
    -
  • Modelo: Fiat Argo
    • +
  • Modelo: Volkswagen T-Cross
  • Cor: Vermelho
-

Detalhes do Fiat Argo

-

Mais informações do veículo...

+

Detalhes do Volkswagen T-Cross

+

Compacto e versátil, ideal para o dia a dia. Oferece conforto e tecnologia avançada. +

+
    +
  • ⛽Consumo: 12 km/l (cidade) e 14 km/l (estrada)
    • +
  • 🐎Potência: 128 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 373 L
    • +
- +
-

Chevrolet Onix

- user-image +

Hyundai Tucson

+ Hyundai Tucson
    -
  • Modelo: Chevrolet Onix
    • -
  • Cor: Cinza
    • +
  • Modelo: Hyundai Tucson
    • +
  • Cor: Prata
-

Detalhes do Chevrolet Onix

-

Mais informações do veículo...

+

Detalhes do Hyundai Tucson

+

Elegante e espaçoso, perfeito para famílias. Conta com motor 2.0 e tecnologia de + ponta.

+
    +
  • ⛽Consumo: 11 km/l (cidade) e 13 km/l (estrada)
    • +
  • 🐎Potência: 150 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 488 L
    • +
- +
-

Chevrolet Prisma

- user-image +

BYD Song

+ BYD Song
    -
  • Modelo: Chevrolet Prisma
    • -
  • Cor: Cinza
    • +
  • Modelo: BYD Song
    • +
  • Cor: Branco
-

Detalhes do Chevrolet Prisma

-

Mais informações do veículo...

+

Detalhes do BYD Song

+

SUV elétrico, ideal para quem busca sustentabilidade. Alta autonomia e conforto.

+
    +
  • 🔋Autonomia: 400 km
    • +
  • 🐎Potência: 245 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 500 L
    • +
- +
-

Volkswagen T-Cross

- user-image +

Chevrolet Spin

+ Chevrolet Spin
    -
  • Modelo: Volkswagen T-Cross
    • -
  • Cor: Cinza
    • +
  • Modelo: Chevrolet Spin
    • +
  • Cor: Azul
-

Detalhes do Volkswagen T-Cross

-

Mais informações do veículo...

+

Detalhes do Chevrolet Spin

+

Espaçosa e prática, ideal para famílias. Com motor 1.8 e ampla capacidade de bagagem. +

+
    +
  • ⛽Consumo: 10 km/l (cidade) e 12 km/l (estrada)
    • +
  • 🐎Potência: 106 cv
    • +
  • 💺Capacidade: 7 lugares
    • +
  • 🧳Porta-malas: 710 L
    • +
+
@@ -194,8 +292,10 @@

Detalhes do Volkswagen T-Cross

+ + -
+

Fale Conosco

@@ -229,9 +329,10 @@

Fale Conosco

Nossos Contatos

-

E-mail: contato@empresa.com

-

Telefone: (11) 1234-5678

-

Endereço: Rua Exemplo, 123, São Paulo

+

Icone instagram   @RenovAuto

+

Icone de telefone   (11) 1234-5678

+

Icone de Localização   Rua + LaAondeATuaInvejaNaoChega, 123, Fortaleza, CE

diff --git a/Public/Page/agendamento.html b/Public/Page/agendamento.html index 56d6c34..eb929bf 100644 --- a/Public/Page/agendamento.html +++ b/Public/Page/agendamento.html @@ -27,18 +27,35 @@ +
-
@@ -46,6 +63,124 @@

RenovAuto

Veículos Disponíveis

+ +
+
+
+

Hyundai Sentra

+ Fiat Mobi +
+ + +
+
+
+

Detalhes

+
    +
  • ⛽Consumo: 14 km/l (cidade) e 15 km/l (estrada)
    • +
  • 🐎Potência: 70 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 235 L
    • +
+ +
+
+
+ +
+
+
+

BYD Song

+ Fiat Mobi +
+ + +
+
+
+

Detalhes

+
    +
  • ⛽Consumo: 14 km/l (cidade) e 15 km/l (estrada)
    • +
  • 🐎Potência: 70 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 235 L
    • +
+ +
+
+
+ +
+
+
+

Mitsubishi Ecliplise Cross

+ Fiat Mobi +
+ + +
+
+
+

Detalhes

+
    +
  • ⛽Consumo: 14 km/l (cidade) e 15 km/l (estrada)
    • +
  • 🐎Potência: 70 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 235 L
    • +
+ +
+
+
+ +
+
+
+

Chevrolet Equinox

+ Fiat Mobi +
+ + +
+
+
+

Detalhes

+
    +
  • ⛽Consumo: 14 km/l (cidade) e 15 km/l (estrada)
    • +
  • 🐎Potência: 70 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 235 L
    • +
+ +
+
+
+ +
+
+
+

HAVAL GHW

+ Fiat Mobi +
+ + +
+
+
+

Detalhes

+
    +
  • ⛽Consumo: 14 km/l (cidade) e 15 km/l (estrada)
    • +
  • 🐎Potência: 70 cv
    • +
  • 💺Capacidade: 5 lugares
    • +
  • 🧳Porta-malas: 235 L
    • +
+ +
+
+
+
@@ -171,6 +306,7 @@

Detalhes

×

Alugar

Preço: R$ por dia

+
@@ -195,12 +331,8 @@

Escolha a Forma de Pagamento

-
-
- -