Arismidia Sistema - Sua Marca na Internet/title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary-color: #1a237e;
--secondary-color: #ff9800;
--accent-color: #e53935;
--light-color: #f5f7fa;
--dark-color: #263238;
--success-color: #4caf50;
--text-color: #333;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
--gradient-primary: linear-gradient(135deg, #1a237e 0%, #283593 100%);
--gradient-secondary: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--light-color);
color: var(--text-color);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}
.section-padding {
padding: 100px 0;
}
.section-title {
text-align: center;
margin-bottom: 60px;
position: relative;
}
.section-title h2 {
font-size: 2.8rem;
color: var(--primary-color);
margin-bottom: 15px;
}
.section-title p {
font-size: 1.1rem;
color: var(--dark-color);
max-width: 700px;
margin: 0 auto;
}
.title-decoration {
display: block;
width: 80px;
height: 4px;
background: var(--gradient-secondary);
margin: 20px auto 30px;
border-radius: 2px;
}
/* Header e Navega��o */
header {
background-color: white;
box-shadow: var(--shadow);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s ease;
}
header.scrolled {
padding: 5px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
<!-- BARRA DE CRIPTOMOEDAS - LIVECOINWATCH -->
<div class="livecoinwatch-widget-5"
lcw-base="USD"
lcw-color-tx="#999999"
lcw-marquee-1="coins"
lcw-marquee-2="movers"
lcw-marquee-items="10">
</div>
<!-- SCRIPT QUE CARREGA O WIDGET -->
<script defer src="https://www.livecoinwatch.com/static/lcw-widget.js"></script>
<!-- FIM BARRA DE CRIPTOMOEDAS - LIVECOINWATCH -->
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
transition: all 0.3s ease;
}
header.scrolled .header-container {
padding: 10px 0;
}
/* Logo */
.logo {
display: flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none;
z-index: 1001;
}
.logo-main {
font-size: 2.8rem;
font-weight: 900;
letter-spacing: 1px;
line-height: 1;
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-transform: uppercase;
transition: all 0.3s ease;
}
.logo-tagline {
font-size: 0.95rem;
font-weight: 600;
color: var(--accent-color);
letter-spacing: 1.5px;
margin-top: 3px;
transition: all 0.3s ease;
}
/* Menu de Navega��o */
.menu-toggle {
display: none;
font-size: 1.8rem;
background: none;
border: none;
color: var(--primary-color);
cursor: pointer;
z-index: 1001;
}
.nav-menu {
display: flex;
list-style: none;
}
.nav-menu li {
position: relative;
margin-left: 5px;
}
.nav-menu a {
display: block;
padding: 12px 22px;
text-decoration: none;
color: var(--dark-color);
font-weight: 600;
border-radius: 30px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.nav-menu a:hover {
color: var(--primary-color);
background-color: rgba(26, 35, 126, 0.05);
}
.nav-menu a.active {
background: var(--gradient-primary);
color: white;
box-shadow: 0 5px 15px rgba(26, 35, 126, 0.2);
}
.nav-menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background: var(--gradient-secondary);
transition: width 0.3s ease;
border-radius: 3px;
}
.nav-menu a:hover::after,
.nav-menu a.active::after {
width: 70%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 250px;
box-shadow: var(--shadow);
border-radius: 12px;
z-index: 1000;
top: 100%;
left: 0;
overflow: hidden;
transform: translateY(10px);
opacity: 0;
transition: all 0.3s ease;
}
.dropdown:hover .dropdown-content {
display: block;
transform: translateY(0);
opacity: 1;
}
.dropdown-content a {
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
border-radius: 0;
display: flex;
align-items: center;
}
.dropdown-content a:last-child {
border-bottom: none;
}
.dropdown-content a i {
margin-right: 10px;
color: var(--primary-color);
font-size: 1.1rem;
width: 20px;
text-align: center;
}
/* Hero Section */
.hero {
padding-top: 180px;
padding-bottom: 120px;
background: linear-gradient(135deg, rgba(26, 35, 126, 0.05) 0%, rgba(255, 152, 0, 0.05) 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(26, 35, 126, 0.1) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-text h1 {
font-size: 3.5rem;
color: var(--primary-color);
margin-bottom: 20px;
line-height: 1.2;
}
.hero-text h1 span {
color: var(--accent-color);
}
.hero-text p {
font-size: 1.2rem;
color: var(--dark-color);
margin-bottom: 30px;
}
.hero-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.btn {
display: inline-block;
padding: 16px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s ease;
text-align: center;
cursor: pointer;
border: none;
}
.btn-primary {
background: var(--gradient-primary);
color: white;
box-shadow: 0 8px 25px rgba(26, 35, 126, 0.3);
}
.btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(26, 35, 126, 0.4);
}
.btn-secondary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-secondary:hover {
background: rgba(26, 35, 126, 0.05);
transform: translateY(-5px);
}
.hero-visual {
position: relative;
}
.floating-elements {
position: relative;
height: 400px;
}
.floating-element {
position: absolute;
background: white;
border-radius: 15px;
box-shadow: var(--shadow);
padding: 20px;
display: flex;
align-items: center;
animation: float 6s ease-in-out infinite;
}
.floating-element:nth-child(1) {
top: 0;
left: 20px;
width: 200px;
animation-delay: 0s;
border-top: 5px solid var(--primary-color);
}
.floating-element:nth-child(2) {
top: 100px;
right: 0;
width: 220px;
animation-delay: 1s;
border-top: 5px solid var(--secondary-color);
}
.floating-element:nth-child(3) {
bottom: 50px;
left: 50px;
width: 180px;
animation-delay: 2s;
border-top: 5px solid var(--accent-color);
}
.floating-element i {
font-size: 2.5rem;
margin-right: 15px;
color: var(--primary-color);
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* Se��o de Servi�os */
.services-section {
background-color: white;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
}
.service-card {
background-color: white;
border-radius: 15px;
padding: 40px 30px;
box-shadow: var(--shadow);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
border: 1px solid #f0f0f0;
height: 100%;
}
.service-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.service-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
font-size: 2.2rem;
color: white;
}
.service-card:nth-child(1) .service-icon { background: var(--gradient-primary); }
.service-card:nth-child(2) .service-icon { background: var(--gradient-secondary); }
.service-card:nth-child(3) .service-icon { background: linear-gradient(135deg, #e53935 0%, #f44336 100%); }
.service-card:nth-child(4) .service-icon { background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%); }
.service-card:nth-child(5) .service-icon { background: linear-gradient(135deg, #2196f3 0%, #03a9f4 100%); }
.service-card:nth-child(6) .service-icon { background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%); }
.service-card h3 {
color: var(--primary-color);
margin-bottom: 15px;
font-size: 1.5rem;
}
.service-card p {
color: var(--dark-color);
margin-bottom: 20px;
}
.service-features {
list-style: none;
margin-top: 20px;
}
.service-features li {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.service-features li i {
color: var(--success-color);
margin-right: 10px;
font-size: 0.9rem;
}
/* Se��o Processo de Trabalho */
.process-section {
background: linear-gradient(135deg, rgba(26, 35, 126, 0.03) 0%, rgba(255, 152, 0, 0.03) 100%);
}
.process-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
counter-reset: step-counter;
}
.process-step {
background: white;
border-radius: 15px;
padding: 40px 30px;
box-shadow: var(--shadow);
position: relative;
text-align: center;
transition: all 0.3s ease;
}
.process-step:hover {
transform: translateY(-10px);
}
.process-step::before {
counter-increment: step-counter;
content: counter(step-counter);
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
box-shadow: 0 5px 15px rgba(26, 35, 126, 0.2);
}
.process-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: rgba(26, 35, 126, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto 25px;
font-size: 1.8rem;
color: var(--primary-color);
}
.process-step h3 {
color: var(--primary-color);
margin-bottom: 15px;
}
/* Se��o Tecnologias */
.tech-section {
background-color: white;
}
.tech-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 30px;
justify-items: center;
}
.tech-item {
text-align: center;
padding: 25px 15px;
background: white;
border-radius: 15px;
box-shadow: var(--shadow);
transition: all 0.3s ease;
width: 100%;
}
.tech-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.tech-icon {
font-size: 3rem;
margin-bottom: 15px;
color: var(--primary-color);
}
.tech-item span {
font-weight: 600;
color: var(--dark-color);
}
/* Se��o Diferenciais */
.diferenciais-section {
background: linear-gradient(135deg, rgba(26, 35, 126, 0.03) 0%, rgba(255, 152, 0, 0.03) 100%);
}
.diferenciais-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
}
.diferencial-card {
text-align: center;
padding: 40px 25px;
background: white;
border-radius: 15px;
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.diferencial-card:hover {
transform: translateY(-10px);
}
.diferencial-icon {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 1.8rem;
color: white;
background: var(--gradient-primary);
}
.diferencial-card h3 {
color: var(--primary-color);
margin-bottom: 15px;
}
/* Se��o Contato - FORMUL�RIO CORRIGIDO */
.contact-section {
background-color: white;
}
.contact-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 60px;
align-items: start;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 30px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 20px;
}
.contact-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
flex-shrink: 0;
}
.contact-text h4 {
color: var(--primary-color);
margin-bottom: 5px;
font-size: 1.2rem;
}
.contact-text p {
color: var(--dark-color);
line-height: 1.5;
}
.contact-form-container {
background: white;
border-radius: 15px;
padding: 40px;
box-shadow: var(--shadow);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.form-header {
margin-bottom: 30px;
text-align: center;
}
.form-header h3 {
color: var(--primary-color);
font-size: 1.8rem;
margin-bottom: 10px;
}
.form-header p {
color: var(--dark-color);
}
.contact-form {
width: 100%;
}
.form-group {
margin-bottom: 25px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--primary-color);
font-size: 0.95rem;
}
.form-control {
width: 100%;
padding: 15px 20px;
border: 1px solid #ddd;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
background-color: #f9f9f9;
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
background-color: white;
box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.1);
}
.form-control.error {
border-color: var(--accent-color);
}
.error-message {
color: var(--accent-color);
font-size: 0.85rem;
margin-top: 5px;
display: none;
}
.error-message.show {
display: block;
}
.form-group textarea.form-control {
resize: vertical;
min-height: 150px;
}
.form-group select.form-control {
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a237e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 20px center;
background-size: 16px;
padding-right: 50px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
.form-footer {
margin-top: 30px;
text-align: center;
color: #666;
font-size: 0.9rem;
}
.form-footer a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}
.form-footer a:hover {
text-decoration: underline;
}
.success-message {
display: none;
background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
color: white;
padding: 25px;
border-radius: 10px;
text-align: center;
margin-top: 30px;
}
.success-message.show {
display: block;
animation: fadeIn 0.5s ease;
}
.success-message i {
font-size: 3rem;
margin-bottom: 15px;
}
.success-message h4 {
font-size: 1.5rem;
margin-bottom: 10px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Footer */
footer {
background: var(--gradient-primary);
color: white;
padding: 80px 0 30px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 50px;
}
.footer-logo .logo-main {
font-size: 2.2rem;
background: linear-gradient(90deg, #ff9800 0%, #ffeb3b 100%);
-webkit-background-clip: text;
background-clip: text;
}
.footer-logo .logo-tagline {
color: #ffcc80;
}
.footer-logo p {
margin-top: 20px;
color: #e3f2fd;
}
.footer-section h3 {
color: #ffcc80;
margin-bottom: 25px;
font-size: 1.3rem;
}
.footer-links ul {
list-style: none;
}
.footer-links ul li {
margin-bottom: 12px;
}
.footer-links ul li a {
color: #e3f2fd;
text-decoration: none;
transition: color 0.3s;
display: flex;
align-items: center;
}
.footer-links ul li a:hover {
color: #ffcc80;
}
.footer-links ul li a i {
margin-right: 10px;
width: 20px;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s;
}
.social-link:hover {
background: var(--secondary-color);
transform: translateY(-5px);
}
.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #bbdefb;
font-size: 0.9rem;
}
/* Responsividade */
@media (max-width: 1100px) {
.hero-content {
grid-template-columns: 1fr;
text-align: center;
}
.hero-text h1 {
font-size: 3rem;
}
.hero-visual {
display: none;
}
}
@media (max-width: 900px) {
.menu-toggle {
display: block;
}
.nav-menu {
display: none;
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 400px;
height: 100vh;
background-color: white;
flex-direction: column;
padding: 100px 30px 30px;
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
transition: right 0.4s ease;
overflow-y: auto;
}
.nav-menu.active {
display: flex;
right: 0;
}
.nav-menu li {
margin-left: 0;
margin-bottom: 10px;
}
.nav-menu a {
padding: 18px 20px;
border-radius: 10px;
font-size: 1.1rem;
}
.dropdown-content {
position: static;
box-shadow: none;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 20px;
transform: none;
opacity: 1;
display: none;
}
.dropdown.active .dropdown-content {
display: block;
}
.dropdown > a::after {
content: '\f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-left: 10px;
transition: transform 0.3s;
}
.dropdown.active > a::after {
transform: rotate(180deg);
}
.section-title h2 {
font-size: 2.3rem;
}
.services-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
}
@media (max-width: 768px) {
.hero {
padding-top: 150px;
padding-bottom: 80px;
}
.hero-text h1 {
font-size: 2.5rem;
}
.section-padding {
padding: 70px 0;
}
.btn {
padding: 14px 28px;
font-size: 1rem;
}
.contact-form-container {
padding: 30px 25px;
}
}
</style>
<!-- BEGIN WAYBACK TOOLBAR INSERT -->
<script>__wm.rw(0);</script>
<div id="wm-ipp-base" lang="en" style="display:none;direction:ltr;" toolbar-mode="auto">
<div id="wm-ipp" style="position:fixed;left:0;top:0;right:0;">
<div id="donato" style="position:relative;width:100%;height:0;">
<div id="wm-ipp-inside">
<div id="wm-toolbar" style="position:relative;display:flex;flex-flow:row nowrap;justify-content:space-between;" nav="async">
<div id="wm-logo" style="/*width:110px;*/padding-top:12px;">
<a href="/web/" title="Wayback Machine home page"><img src="https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-200.png" srcset="https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-100.png, https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-150.png 1.5x, https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-200.png 2x" alt="Wayback Machine" style="width:100px" border="0" /></a>
</div>
<div class="c" style="display:flex;flex-flow:column nowrap;justify-content:space-between;flex:1;">
<form class="u" style="display:flex;flex-direction:row;flex-wrap:nowrap;" target="_top" method="get" action="/web/submit" name="wmtb" id="wmtb"><input type="text" name="url" id="wmtbURL" value="http://arismidia.com.br/" onfocus="this.focus();this.select();" style="flex:1;"/><input type="hidden" name="type" value="replay" /><input type="hidden" name="date" value="20260313142300" /><input type="submit" value="Go" />
</form>
<div style="display:flex;flex-flow:row nowrap;align-items:flex-end;">
<div class="s" id="wm-nav-captures" style="flex:1;">
<a class="t" href="/web/20260313142300*/http://arismidia.com.br/" title="See a list of every capture for this URL">52 captures</a>
<div class="r" title="Timespan for captures of this URL">16 Oct 2016 - 09 Jun 2026</div>
</div>
<div class="k">
<a href="" id="wm-graph-anchor">
<div id="wm-ipp-sparkline" title="Explore captures for this URL" style="position: relative">
<canvas id="wm-sparkline-canvas" width="775" height="27" border="0"></canvas>
</div>
</a>
</div>
</div>
</div>
<div class="n">
<!-- Header com Logo e Menu -->
<header id="header">
<div class="container header-container">
<a href="#home" class="logo">
<div class="logo-main">ARISMIDIA</div>
<div class="logo-tagline">SUA MARCA NA INTERNET</div>
</a>
<button class="menu-toggle" id="menuToggle">
<i class="fas fa-bars"></i>
</button>
<nav>
<ul class="nav-menu" id="navMenu">
<li><a href="#home" class="active">In�cio</a></li>
<li><a href="#servicos">Servi�os</a></li>
<li><a href="#processo">Processo</a></li>
<li><a href="#tecnologias">Tecnologias</a></li>
<li><a href="#diferenciais">Diferenciais</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="https://arismidia.dev.br/" target="_blank">APP ArisPlay</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h1>Solu��es Digitais <span>Completas</span> para seu Neg�cio</h1>
<p>Na Arismidia Sistema, oferecemos um ecossistema completo de solu��es digitais para transformar sua presen�a online, otimizar processos e impulsionar seus resultados.</p>
<div class="hero-buttons">
<a href="#servicos" class="btn btn-primary">Conhe�a Nossos Servi�os</a>
<a href="#contato" class="btn btn-secondary">Fale Conosco</a>
</div>
</div>
<div class="hero-visual">
<div class="floating-elements">
<div class="floating-element">
<i class="fas fa-laptop-code"></i>
<div>
<h4>Websites</h4>
<p>Profissionais e Responsivos</p>
</div>
</div>
<div class="floating-element">
<i class="fas fa-chart-line"></i>
<div>
<h4>Marketing</h4>
<p>Digital Estrat�gico</p>
</div>
</div>
<div class="floating-element">
<i class="fas fa-server"></i>
<div>
<h4>Hospedagem</h4>
<p>Segura e R�pida</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Servi�os -->
<section class="services-section section-padding" id="servicos">
<div class="container">
<div class="section-title">
<h2>Nossos Servi�os</h2>
<p>Oferecemos um portf�lio completo de solu��es digitais para atender todas as necessidades do seu neg�cio.</p>
<span class="title-decoration"></span>
</div>
<div class="services-grid">
<!-- Servi�o 1 -->
<div class="service-card">
<div class="service-icon">
<i class="fas fa-code"></i>
</div>
<h3>Desenvolvimento Web</h3>
<p>Cria��o de websites institucionais, blogs, portf�lios e sistemas web personalizados com as mais modernas tecnologias.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Sites responsivos (mobile-first)</li>
<li><i class="fas fa-check"></i> CMS personalizado ou WordPress</li>
<li><i class="fas fa-check"></i> Otimiza��o para SEO</li>
<li><i class="fas fa-check"></i> Integra��es com APIs</li>
</ul>
</div>
<!-- Servi�o 2 -->
<div class="service-card">
<div class="service-icon">
<i class="fas fa-shopping-cart"></i>
</div>
<h3>E-commerce</h3>
<p>Lojas virtuais completas com gest�o de produtos, pagamentos, fretes e integra��o com marketplaces.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Plataformas WooCommerce, Magento</li>
<li><i class="fas fa-check"></i> Gateway de pagamento integrado</li>
<li><i class="fas fa-check"></i> Gest�o de estoque e pedidos</li>
<li><i class="fas fa-check"></i> Relat�rios de vendas</li>
</ul>
</div>
<!-- Servi�o 3 -->
<div class="service-card">
<div class="service-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<h3>Aplicativos Mobile</h3>
<p>Desenvolvimento de apps nativos (iOS/Android) e h�bridos para engajar seus clientes em qualquer dispositivo.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Apps nativos e cross-platform</li>
<li><i class="fas fa-check"></i> Interface intuitiva e moderna</li>
<li><i class="fas fa-check"></i> Integra��o com sistemas</li>
<li><i class="fas fa-check"></i> Publica��o nas lojas oficiais</li>
</ul>
</div>
<!-- Servi�o 4 -->
<div class="service-card">
<div class="service-icon">
<i class="fas fa-bullhorn"></i>
</div>
<h3>Marketing Digital</h3>
<p>Estrat�gias completas para aumentar sua visibilidade, gerar leads e converter em vendas no ambiente digital.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Gest�o de redes sociais</li>
<li><i class="fas fa-check"></i> Campanhas de Google Ads</li>
<li><i class="fas fa-check"></i> Email marketing automatizado</li>
<li><i class="fas fa-check"></i> SEO e conte�do estrat�gico</li>
</ul>
</div>
<!-- Servi�o 5 -->
<div class="service-card">
<div class="service-icon">
<i class="fas fa-cloud"></i>
</div>
<h3>Sistemas em Nuvem</h3>
<p>Solu��es SaaS personalizadas para gest�o empresarial, CRM, ERP e automa��o de processos internos.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Sistemas sob demanda</li>
<li><i class="fas fa-check"></i> Multi-usu�rio e perfis de acesso</li>
<li><i class="fas fa-check"></i> Relat�rios e dashboards</li>
<li><i class="fas fa-check"></i> Backup autom�tico na nuvem</li>
</ul>
</div>
<!-- Servi�o 6 -->
<div class="service-card">
<div class="service-icon">
<i class="fas fa-server"></i>
</div>
<h3>Hospedagem & Dom�nio</h3>
<p>Servi�os de hospedagem de alta performance, registro de dom�nio, email corporativo e SSL seguran�a.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Hospedagem compartilhada e VPS</li>
<li><i class="fas fa-check"></i> Dom�nio .com.br e internacionais</li>
<li><i class="fas fa-check"></i> Email profissional personalizado</li>
<li><i class="fas fa-check"></i> Certificado SSL gratuito</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Processo de Trabalho -->
<section class="process-section section-padding" id="processo">
<div class="container">
<div class="section-title">
<h2>Nosso Processo de Trabalho</h2>
<p>Metodologia �gil e transparente para garantir a qualidade e efici�ncia em todos os projetos.</p>
<span class="title-decoration"></span>
</div>
<div class="process-steps">
<div class="process-step">
<div class="process-icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3>Consultoria</h3>
<p>An�lise detalhada das necessidades do cliente e defini��o dos objetivos do projeto.</p>
</div>
<div class="process-step">
<div class="process-icon">
<i class="fas fa-pencil-ruler"></i>
</div>
<h3>Planejamento</h3>
<p>Defini��o de escopo, cronograma, or�amento e tecnologias a serem utilizadas.</p>
</div>
<div class="process-step">
<div class="process-icon">
<i class="fas fa-code"></i>
</div>
<h3>Desenvolvimento</h3>
<p>Implementa��o do projeto com metodologias �geis e entregas parciais.</p>
</div>
<div class="process-step">
<div class="process-icon">
<i class="fas fa-rocket"></i>
</div>
<h3>Lan�amento</h3>
<p>Implanta��o, testes finais e treinamento para uso da solu��o desenvolvida.</p>
</div>
</div>
</div>
</section>
<!-- Tecnologias -->
<section class="tech-section section-padding" id="tecnologias">
<div class="container">
<div class="section-title">
<h2>Tecnologias que Utilizamos</h2>
<p>Utilizamos as melhores e mais modernas tecnologias do mercado para desenvolver solu��es robustas e escal�veis.</p>
<span class="title-decoration"></span>
</div>
<div class="tech-grid">
<div class="tech-item">
<div class="tech-icon">
<i class="fab fa-html5"></i>
</div>
<span>HTML5</span>
</div>
<div class="tech-item">
<div class="tech-icon">
<i class="fab fa-css3-alt"></i>
</div>
<span>CSS3</span>
</div>
<div class="tech-item">
<div class="tech-icon">
<i class="fab fa-js"></i>
</div>
<span>JavaScript</span>
</div>
<div class="tech-item">
<div class="tech-icon">
<i class="fab fa-react"></i>
</div>
<span>React</span>
</div>
<div class="tech-item">
<div class="tech-icon">
<i class="fab fa-node-js"></i>
</div>
<span>Node.js</span>
</div>
<div class="tech-item">
<div class="tech-icon">
<i class="fab fa-php"></i>
</div>
<span>PHP</span>
</div>
<div class="tech-item">
<div class="tech-icon">
<i class="fab fa-wordpress"></i>
</div>
<span>WordPress</span>
</div>
<div class="tech-item">
<div class="tech-icon">
<i class="fas fa-database"></i>
</div>
<span>MySQL</span>
</div>
</div>
</div>
</section>
<!-- Diferenciais -->
<section class="diferenciais-section section-padding" id="diferenciais">
<div class="container">
<div class="section-title">
<h2>Por que Escolher a Arismidia?</h2>
<p>Conhe�a os diferenciais que nos tornam a melhor escolha para suas solu��es digitais.</p>
<span class="title-decoration"></span>
</div>
<div class="diferenciais-grid">
<div class="diferencial-card">
<div class="diferencial-icon">
<i class="fas fa-award"></i>
</div>
<h3>10+ Anos de Experi�ncia</h3>
<p>Mais de uma d�cada criando solu��es digitais para empresas de todos os portes.</p>
</div>
<div class="diferencial-card">
<div class="diferencial-icon">
<i class="fas fa-users"></i>
</div>
<h3>Suporte Personalizado</h3>
<p>Atendimento dedicado e suporte t�cnico especializado para cada cliente.</p>
</div>
<div class="diferencial-card">
<div class="diferencial-icon">
<i class="fas fa-rocket"></i>
</div>
<h3>Tecnologia de Ponta</h3>
<p>Utilizamos as ferramentas e frameworks mais modernos do mercado.</p>
</div>
<div class="diferencial-card">
<div class="diferencial-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Seguran�a Garantida</h3>
<p>Todas as nossas solu��es incluem protocolos de seguran�a avan�ados.</p>
</div>
<div class="diferencial-card">
<div class="diferencial-icon">
<i class="fas fa-clock"></i>
</div>
<h3>Entrega no Prazo</h3>
<p>Compromisso com prazos e qualidade na entrega de todos os projetos.</p>
</div>
<div class="diferencial-card">
<div class="diferencial-icon">
<i class="fas fa-handshake"></i>
</div>
<h3>Parceria de Longo Prazo</h3>
<p>Acompanhamos a evolu��o do seu neg�cio com solu��es escal�veis.</p>
</div>
</div>
</div>
</section>
<!-- Contato - FORMUL�RIO APRIMORADO -->
<section class="contact-section section-padding" id="contato">
<div class="container">
<div class="section-title">
<h2>Entre em Contato</h2>
<p>Pronto para transformar sua presen�a digital? Fale conosco e solicite um or�amento personalizado.</p>
<span class="title-decoration"></span>
</div>
<div class="contact-container">
<!-- Informa��es de Contato -->
<div class="contact-info">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="contact-text">
<h4>Endere�o</h4>
<p>Av. Djalma Batista, 3000 <br>Manaus - AM, 69.058-807</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-phone-alt"></i>
</div>
<div class="contact-text">
<h4>Telefone</h4>
<p>(92) 99363-3845<br>(92) 99325-5258</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-text">
<h4>Email</h4>
<p>contato@arismidia.com.br<br>vendas@arismidia.com.br</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-clock"></i>
</div>
<div class="contact-text">
<h4>Hor�rio de Atendimento</h4>
<p>Segunda a Sexta: 9h �s 18h<br>S�bado: 9h �s 13h</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-headset"></i>
</div>
<div class="contact-text">
<h4>Suporte R�pido</h4>
<p>WhatsApp: (92) 99363-3845<br>Respondemos em at� 1 hora �til</p>
</div>
</div>
</div>
<!-- Formul�rio de Contato Corrigido -->
<div class="contact-form-container">
<div class="form-header">
<h3>Solicite um Or�amento</h3>
<p>Preencha o formul�rio abaixo e retornaremos em at� 24h</p>
</div>
<form class="contact-form" id="contactForm">
<div class="form-row">
<div class="form-group">
<label for="nome">Nome completo *</label>
<input type="text" id="nome" class="form-control" placeholder="Seu nome completo" required>
<div class="error-message" id="nomeError">Por favor, informe seu nome completo</div>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email" id="email" class="form-control" placeholder="seu@email.com" required>
<div class="error-message" id="emailError">Por favor, informe um email v�lido</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="telefone">Telefone *</label>
<input type="tel" id="telefone" class="form-control" placeholder="(11) 99999-9999" required>
<div class="error-message" id="telefoneError">Por favor, informe um telefone v�lido</div>
</div>
<div class="form-group">
<label for="empresa">Empresa</label>
<input type="text" id="empresa" class="form-control" placeholder="Nome da sua empresa">
</div>
</div>
<div class="form-group">
<label for="servico">Servi�o de interesse *</label>
<select id="servico" class="form-control" required>
<option value="" disabled selected>Selecione um servi�o</option>
<option value="web">Desenvolvimento Web</option>
<option value="ecommerce">E-commerce</option>
<option value="app">Aplicativos Mobile</option>
<option value="marketing">Marketing Digital</option>
<option value="sistema">Sistemas em Nuvem</option>
<option value="hospedagem">Hospedagem & Dom�nio</option>
<option value="outro">Outro</option>
</select>
<div class="error-message" id="servicoError">Por favor, selecione um servi�o</div>
</div>
<div class="form-group">
<label for="mensagem">Mensagem *</label>
<textarea id="mensagem" class="form-control" placeholder="Descreva sua necessidade ou projeto..." rows="5" required></textarea>
<div class="error-message" id="mensagemError">Por favor, descreva sua necessidade</div>
</div>
<div class="form-group">
<label for="orcamento">Or�amento aproximado</label>
<select id="orcamento" class="form-control">
<option value="" selected>Selecione uma faixa</option>
<option value="ate-5mil">At� R$ 5.000</option>
<option value="5-10mil">R$ 5.000 - R$ 10.000</option>
<option value="10-20mil">R$ 10.000 - R$ 20.000</option>
<option value="20-50mil">R$ 20.000 - R$ 50.000</option>
<option value="acima-50mil">Acima de R$ 50.000</option>
<option value="nao-sei">Ainda n�o sei</option>
</select>
</div>
<div class="form-group">
<div style="display: flex; align-items: flex-start; gap: 10px;">
<input type="checkbox" id="newsletter" style="margin-top: 3px;">
<label for="newsletter" style="font-weight: normal; font-size: 0.9rem; color: var(--dark-color);">
Desejo receber novidades e dicas da Arismidia por email
</label>
</div>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;" id="submitBtn">
<span id="btnText">Enviar Mensagem</span>
<div id="btnLoading" style="display: none;">
<i class="fas fa-spinner fa-spin"></i> Enviando...
</div>
</button>
<div class="form-footer">
<p>* Campos obrigat�rios</p>
<p>Ao enviar este formul�rio, voc� concorda com nossa <a href="#">Pol�tica de Privacidade</a></p>
</div>
</form>
<!-- Mensagem de sucesso (inicialmente oculta) -->
<div class="success-message" id="successMessage">
<i class="fas fa-check-circle"></i>
<h4>Mensagem Enviada com Sucesso!</h4>
<p>Obrigado pelo seu contato. Nossa equipe responder� em at� 24 horas �teis.</p>
<p style="margin-top: 15px; font-size: 0.9rem;">
<strong>N� do protocolo:</strong> <span id="protocolNumber">ARM-2023-001</span>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section footer-logo">
<a href="#home" class="logo">
<div class="logo-main">ARISMIDIA</div>
<div class="logo-tagline">SUA MARCA NA INTERNET</div>
</a>
<p>Transformando neg�cios atrav�s de solu��es digitais inovadoras e eficientes desde 2010.</p>
<div class="social-links">
<a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-link"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
<div class="footer-section footer-links">
<h3>Servi�os</h3>
<ul>
<li><a href="#servicos"><i class="fas fa-chevron-right"></i> Desenvolvimento Web</a></li>
<li><a href="#servicos"><i class="fas fa-chevron-right"></i> E-commerce</a></li>
<li><a href="#servicos"><i class="fas fa-chevron-right"></i> Aplicativos Mobile</a></li>
<li><a href="#servicos"><i class="fas fa-chevron-right"></i> Marketing Digital</a></li>
<li><a href="#servicos"><i class="fas fa-chevron-right"></i> Sistemas em Nuvem</a></li>
<li><a href="#servicos"><i class="fas fa-chevron-right"></i> Hospedagem & Dom�nio</a></li>
</ul>
</div>
<div class="footer-section footer-links">
<h3>Links R�pidos</h3>
<ul>
<li><a href="#home"><i class="fas fa-chevron-right"></i> In�cio</a></li>
<li><a href="#servicos"><i class="fas fa-chevron-right"></i> Servi�os</a></li>
<li><a href="#processo"><i class="fas fa-chevron-right"></i> Processo</a></li>
<li><a href="#tecnologias"><i class="fas fa-chevron-right"></i> Tecnologias</a></li>
<li><a href="#diferenciais"><i class="fas fa-chevron-right"></i> Diferenciais</a></li>
<li><a href="#contato"><i class="fas fa-chevron-right"></i> Contato</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>Copyright © 2014/<script>document.write(new Date().getFullYear());</script> Arismidia Sistema - Todos os direitos reservados. CNPJ: 37.442.207/0001-26</p>
</div>
</div>
</footer>
<script>
// Menu responsivo
const menuToggle = document.getElementById('menuToggle');
const navMenu = document.getElementById('navMenu');
menuToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
menuToggle.innerHTML = navMenu.classList.contains('active')
? '<i class="fas fa-times"></i>'
: '<i class="fas fa-bars"></i>';
});
// Fechar menu ao clicar em um link
document.querySelectorAll('.nav-menu a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
});
});
// Header scroll effect
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Ativar link ativo no menu
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-menu a');
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop - 150;
const sectionHeight = section.clientHeight;
if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
const href = link.getAttribute('href');
if (href === `#${current}` || (current === '' && href === '#home')) {
link.classList.add('active');
}
});
});
// FUNCIONALIDADES DO FORMUL�RIO
// M�scara para telefone
function mascaraTelefone(telefone) {
const texto = telefone.value.replace(/\D/g, '');
let mascara = '';
if (texto.length <= 10) {
mascara = texto.replace(/(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3');
} else {
mascara = texto.replace(/(\d{2})(\d{5})(\d{0,4})/, '($1) $2-$3');
}
telefone.value = mascara;
}
// Valida��o de formul�rio
const contactForm = document.getElementById('contactForm');
const submitBtn = document.getElementById('submitBtn');
const btnText = document.getElementById('btnText');
const btnLoading = document.getElementById('btnLoading');
const successMessage = document.getElementById('successMessage');
// Elementos do formul�rio
const nomeInput = document.getElementById('nome');
const emailInput = document.getElementById('email');
const telefoneInput = document.getElementById('telefone');
const servicoInput = document.getElementById('servico');
const mensagemInput = document.getElementById('mensagem');
// Aplicar m�scara de telefone
telefoneInput.addEventListener('input', () => {
mascaraTelefone(telefoneInput);
});
// Limpar erros ao digitar
[nomeInput, emailInput, telefoneInput, servicoInput, mensagemInput].forEach(input => {
input.addEventListener('input', function() {
this.classList.remove('error');
const errorElement = document.getElementById(this.id + 'Error');
if (errorElement) {
errorElement.classList.remove('show');
}
});
});
// Valida��o de email
function validarEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
// Valida��o de telefone
function validarTelefone(telefone) {
const numeros = telefone.replace(/\D/g, '');
return numeros.length >= 10 && numeros.length <= 11;
}
// Gerar n�mero de protocolo aleat�rio
function gerarProtocolo() {
const data = new Date();
const ano = data.getFullYear();
const mes = String(data.getMonth() + 1).padStart(2, '0');
const dia = String(data.getDate()).padStart(2, '0');
const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
return `ARM-${ano}${mes}${dia}-${random}`;
}
// Envio do formul�rio
contactForm.addEventListener('submit', async function(e) {
e.preventDefault();
let valido = true;
// Validar nome
if (!nomeInput.value.trim()) {
nomeInput.classList.add('error');
document.getElementById('nomeError').classList.add('show');
valido = false;
}
// Validar email
if (!emailInput.value.trim() || !validarEmail(emailInput.value)) {
emailInput.classList.add('error');
document.getElementById('emailError').classList.add('show');
valido = false;
}
// Validar telefone
if (!telefoneInput.value.trim() || !validarTelefone(telefoneInput.value)) {
telefoneInput.classList.add('error');
document.getElementById('telefoneError').classList.add('show');
valido = false;
}
// Validar servi�o
if (!servicoInput.value) {
servicoInput.classList.add('error');
document.getElementById('servicoError').classList.add('show');
valido = false;
}
// Validar mensagem
if (!mensagemInput.value.trim()) {
mensagemInput.classList.add('error');
document.getElementById('mensagemError').classList.add('show');
valido = false;
}
if (!valido) {
// Scroll para o primeiro erro
const primeiroErro = document.querySelector('.error');
if (primeiroErro) {
primeiroErro.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
return;
}
// Simular envio
submitBtn.disabled = true;
btnText.style.display = 'none';
btnLoading.style.display = 'block';
// Simular tempo de envio
await new Promise(resolve => setTimeout(resolve, 1500));
// Gerar protocolo
const protocolo = gerarProtocolo();
document.getElementById('protocolNumber').textContent = protocolo;
// Mostrar mensagem de sucesso
contactForm.style.display = 'none';
successMessage.classList.add('show');
// Resetar formul�rio ap�s 5 segundos (para demonstra��o)
setTimeout(() => {
successMessage.classList.remove('show');
contactForm.style.display = 'block';
contactForm.reset();
submitBtn.disabled = false;
btnText.style.display = 'block';
btnLoading.style.display = 'none';
}, 8000);
// Aqui normalmente enviaria para um backend
console.log('Dados do formul�rio:', {
nome: nomeInput.value,
email: emailInput.value,
telefone: telefoneInput.value,
empresa: document.getElementById('empresa').value,
servico: servicoInput.value,
mensagem: mensagemInput.value,
orcamento: document.getElementById('orcamento').value,
newsletter: document.getElementById('newsletter').checked,
protocolo: protocolo
});
});
// Valida��o em tempo real para email
emailInput.addEventListener('blur', function() {
if (this.value.trim() && !validarEmail(this.value)) {
this.classList.add('error');
document.getElementById('emailError').textContent = 'Por favor, informe um email v�lido';
document.getElementById('emailError').classList.add('show');
}
});
// Valida��o em tempo real para telefone
telefoneInput.addEventListener('blur', function() {
if (this.value.trim() && !validarTelefone(this.value)) {
this.classList.add('error');
document.getElementById('telefoneError').textContent = 'Por favor, informe um telefone v�lido (10 ou 11 d�gitos)';
document.getElementById('telefoneError').classList.add('show');
}
});
// Inicializa��o
document.addEventListener('DOMContentLoaded', () => {
// Adiciona classe scrolled ao header se j� estiver rolado
if (window.scrollY > 100) {
header.classList.add('scrolled');
}
// Foco no primeiro campo
nomeInput.focus();
});
// Bloqueia bot�o direito
document.addEventListener("contextmenu", e => e.preventDefault());
// Bloqueia teclas comuns para copiar c�digo
document.addEventListener("keydown", e => {
if (
e.ctrlKey && (e.key === "u" || e.key === "U" || e.key === "s" || e.key === "S" || e.key === "c" || e.key === "C") ||
e.key === "F12" ||
(e.ctrlKey && e.shiftKey && (e.key === "I" || e.key === "J"))
) {
e.preventDefault();
alert("Fun��o desativada neste site.");
}
});
// Detecta DevTools aberto (m�todo simples)
setInterval(() => {
const start = performance.now();
debugger;
const end = performance.now();
if (end - start > 100) {
document.body.innerHTML = "<h1 style='text-align:center;margin-top:50px'>Acesso n�o permitido</h1>";
}
}, 1000);
</script>
</body>
</html>