SkyView Drones – Serviços Aéreos Profissionais
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
–primary: #0066ff;
–primary-dark: #003d99;
–accent: #ff6b35;
–dark: #0a1628;
–dark-2: #132240;
–light: #f5f7fa;
–gray: #8b95a7;
–white: #ffffff;
–gradient: linear-gradient(135deg, #0066ff 0%, #00c6ff 100%);
–gradient-dark: linear-gradient(135deg, #0a1628 0%, #1a2f52 100%);
}
html {
scroll-behavior: smooth;
}
body {
font-family: ‘Segoe UI’, -apple-system, BlinkMacSystemFont, sans-serif;
color: var(–dark);
line-height: 1.6;
overflow-x: hidden;
background: var(–white);
}
/* ===== HEADER ===== */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 20px 5%;
transition: all 0.3s ease;
background: transparent;
}
header.scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 15px 5%;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.5rem;
font-weight: 700;
color: var(–white);
transition: color 0.3s;
}
header.scrolled .logo {
color: var(–dark);
}
.logo svg {
width: 40px;
height: 40px;
}
.logo span {
background: var(–gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-links {
display: flex;
gap: 35px;
list-style: none;
}
.nav-links a {
color: var(–white);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
position: relative;
transition: color 0.3s;
}
header.scrolled .nav-links a {
color: var(–dark);
}
.nav-links a::after {
content: ”;
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(–gradient);
transition: width 0.3s;
}
.nav-links a:hover::after {
width: 100%;
}
.btn {
display: inline-block;
padding: 12px 28px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
cursor: pointer;
border: none;
text-align: center;
}
.btn-primary {
background: var(–gradient);
color: var(–white);
box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 102, 255, 0.4);
}
.btn-outline {
background: transparent;
color: var(–white);
border: 2px solid var(–white);
}
.btn-outline:hover {
background: var(–white);
color: var(–dark);
}
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
flex-direction: column;
gap: 5px;
}
.menu-toggle span {
width: 25px;
height: 3px;
background: var(–white);
border-radius: 3px;
transition: all 0.3s;
}
header.scrolled .menu-toggle span {
background: var(–dark);
}
/* ===== HERO ===== */
.hero {
min-height: 100vh;
background: var(–gradient-dark);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: 120px 5% 80px;
}
.hero::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(0, 102, 255, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 198, 255, 0.2) 0%, transparent 50%);
z-index: 1;
}
.hero-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
width: 100%;
}
.hero-content h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(–white);
line-height: 1.1;
margin-bottom: 25px;
font-weight: 800;
}
.hero-content h1 .highlight {
background: var(–gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-content p {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 35px;
max-width: 500px;
}
.hero-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.hero-stats {
display: flex;
gap: 40px;
margin-top: 50px;
}
.stat-item h3 {
font-size: 2.2rem;
color: var(–white);
font-weight: 800;
}
.stat-item p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
/* Drone SVG Animation */
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.drone-container {
position: relative;
width: 100%;
max-width: 500px;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.drone-svg {
width: 100%;
height: auto;
filter: drop-shadow(0 20px 40px rgba(0, 102, 255, 0.4));
}
.propeller {
animation: spin 0.1s linear infinite;
transform-origin: center;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Floating particles */
.particle {
position: absolute;
background: var(–white);
border-radius: 50%;
opacity: 0.3;
animation: particleFloat 15s infinite linear;
}
@keyframes particleFloat {
0% { transform: translate(0, 0); opacity: 0; }
10% { opacity: 0.3; }
90% { opacity: 0.3; }
100% { transform: translate(100vw, -100vh); opacity: 0; }
}
/* ===== SECTIONS COMMON ===== */
section {
padding: 100px 5%;
}
.section-container {
max-width: 1400px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 70px;
}
.section-tag {
display: inline-block;
padding: 6px 18px;
background: rgba(0, 102, 255, 0.1);
color: var(–primary);
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 15px;
letter-spacing: 1px;
text-transform: uppercase;
}
.section-header h2 {
font-size: clamp(2rem, 4vw, 3rem);
color: var(–dark);
margin-bottom: 15px;
font-weight: 800;
}
.section-header p {
font-size: 1.1rem;
color: var(–gray);
max-width: 600px;
margin: 0 auto;
}
/* ===== SERVICES ===== */
.services {
background: var(–light);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.service-card {
background: var(–white);
padding: 40px 30px;
border-radius: 20px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.service-card::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(–gradient);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 102, 255, 0.15);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-icon {
width: 70px;
height: 70px;
background: var(–gradient);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
transition: transform 0.4s ease;
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
}
.service-icon svg {
width: 35px;
height: 35px;
fill: var(–white);
}
.service-card h3 {
font-size: 1.3rem;
color: var(–dark);
margin-bottom: 12px;
font-weight: 700;
}
.service-card p {
color: var(–gray);
font-size: 0.95rem;
margin-bottom: 20px;
}
.service-link {
color: var(–primary);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 5px;
transition: gap 0.3s;
}
.service-link:hover {
gap: 10px;
}
/* ===== ABOUT ===== */
.about-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-image {
position: relative;
border-radius: 20px;
overflow: hidden;
height: 500px;
background: var(–gradient-dark);
display: flex;
align-items: center;
justify-content: center;
}
.about-image::before {
content: ”;
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(0, 102, 255, 0.4), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(0, 198, 255, 0.3), transparent 60%);
}
.about-image svg {
width: 70%;
position: relative;
z-index: 2;
filter: drop-shadow(0 10px 30px rgba(0, 102, 255, 0.5));
}
.about-content h2 {
font-size: clamp(2rem, 4vw, 2.8rem);
color: var(–dark);
margin-bottom: 20px;
font-weight: 800;
line-height: 1.2;
}
.about-content > p {
color: var(–gray);
font-size: 1.05rem;
margin-bottom: 30px;
}
.features-list {
list-style: none;
margin-bottom: 35px;
}
.features-list li {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}
.feature-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: rgba(0, 102, 255, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.feature-icon svg {
width: 20px;
height: 20px;
fill: var(–primary);
}
.features-list h4 {
color: var(–dark);
font-size: 1.05rem;
margin-bottom: 5px;
}
.features-list p {
color: var(–gray);
font-size: 0.9rem;
}
/* ===== STATS ===== */
.stats {
background: var(–gradient-dark);
color: var(–white);
position: relative;
overflow: hidden;
}
.stats::before {
content: ”;
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 50%, rgba(0, 102, 255, 0.3), transparent 50%),
radial-gradient(circle at 80% 50%, rgba(0, 198, 255, 0.2), transparent 50%);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
position: relative;
z-index: 2;
}
.stat-box {
text-align: center;
}
.stat-number {
font-size: 3.5rem;
font-weight: 800;
background: var(–gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 10px;
}
.stat-box p {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
font-weight: 500;
}
/* ===== PORTFOLIO ===== */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.portfolio-item {
position: relative;
border-radius: 20px;
overflow: hidden;
height: 300px;
cursor: pointer;
background: var(–gradient-dark);
}
.portfolio-item::before {
content: ”;
position: absolute;
inset: 0;
background: var(–gradient);
opacity: 0.85;
transition: opacity 0.4s;
z-index: 2;
}
.portfolio-item:hover::before {
opacity: 0.7;
}
.portfolio-item .portfolio-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.6s;
}
.portfolio-item:hover .portfolio-bg {
transform: scale(1.1);
}
.portfolio-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 30px;
z-index: 3;
color: var(–white);
}
.portfolio-content span {
font-size: 0.85rem;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 1px;
}
.portfolio-content h3 {
font-size: 1.4rem;
margin-top: 8px;
font-weight: 700;
}
/* ===== TESTIMONIALS ===== */
.testimonials {
background: var(–light);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.testimonial-card {
background: var(–white);
padding: 35px;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: transform 0.3s;
}
.testimonial-card:hover {
transform: translateY(-5px);
}
.stars {
color: #ffc107;
margin-bottom: 15px;
font-size: 1.1rem;
}
.testimonial-card p {
color: var(–dark);
font-style: italic;
margin-bottom: 25px;
line-height: 1.7;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(–gradient);
display: flex;
align-items: center;
justify-content: center;
color: var(–white);
font-weight: 700;
font-size: 1.2rem;
}
.author-info h4 {
color: var(–dark);
font-size: 1rem;
margin-bottom: 3px;
}
.author-info span {
color: var(–gray);
font-size: 0.85rem;
}
/* ===== CTA ===== */
.cta {
background: var(–gradient);
text-align: center;
color: var(–white);
position: relative;
overflow: hidden;
}
.cta::before {
content: ”;
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08), transparent 50%);
}
.cta-container {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.cta h2 {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 20px;
font-weight: 800;
}
.cta p {
font-size: 1.15rem;
margin-bottom: 35px;
opacity: 0.95;
}
.cta .btn {
background: var(–white);
color: var(–primary);
padding: 16px 40px;
font-size: 1.05rem;
}
.cta .btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
/* ===== FOOTER ===== */
footer {
background: var(–dark);
color: var(–white);
padding: 70px 5% 30px;
}
.footer-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 50px;
margin-bottom: 50px;
}
.footer-brand p {
color: rgba(255, 255, 255, 0.7);
margin: 20px 0;
font-size: 0.95rem;
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(–white);
text-decoration: none;
transition: all 0.3s;
}
.social-links a:hover {
background: var(–gradient);
transform: translateY(-3px);
}
.footer-col h4 {
color: var(–white);
margin-bottom: 20px;
font-size: 1.1rem;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 12px;
}
.footer-col a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s;
}
.footer-col a:hover {
color: var(–white);
}
.footer-bottom {
max-width: 1400px;
margin: 0 auto;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
}
/* ===== ANIMATIONS ===== */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 968px) {
.hero-container,
.about-container {
grid-template-columns: 1fr;
gap: 50px;
}
.hero-visual {
order: -1;
}
.drone-container {
max-width: 350px;
}
.footer-container {
grid-template-columns: 1fr 1fr;
}
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(–white);
flex-direction: column;
padding: 20px;
gap: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.nav-links.active {
display: flex;
}
.nav-links a {
color: var(–dark) !important;
}
.menu-toggle {
display: flex;
}
.hero-stats {
gap: 25px;
}
.stat-item h3 {
font-size: 1.8rem;
}
}
@media (max-width: 500px) {
section {
padding: 70px 5%;
}
.footer-container {
grid-template-columns: 1fr;
gap: 30px;
}
.hero-buttons {
flex-direction: column;
}
.hero-buttons .btn {
width: 100%;
}
}
Soluções aéreas com tecnologia de ponta em drones
Oferecemos serviços profissionais com drones para filmagens, mapeamentos, inspeções e muito mais. Qualidade, precisão e inovação em cada voo.
Filmagem Aérea
Imagens e vídeos em 4K de alta qualidade para eventos, imobiliárias, produções cinematográficas e publicidade.
Saiba mais →
Mapeamento e Topografia
Mapeamento aéreo preciso com ortofotos, modelos 3D e levantamentos topográficos para engenharia e construção.
Saiba mais →
Inspeção Técnica
Inspeção de estruturas, torres, telhados, painéis solares e linhas de transmissão com segurança e eficiência.
Saiba mais →
Agricultura de Precisão
Monitoramento de lavouras com NDVI, análise de saúde das plantas e pulverização agrícola com drones especializados.
Saiba mais →
Segurança e Monitoramento
Vigilância aérea, monitoramento de áreas e apoio a operações de segurança com tecnologia avançada.
Saiba mais →
Eventos Corporativos
Cobertura aérea completa de eventos, casamentos, shows e competições esportivas com imagens impressionantes.
Saiba mais →
Sobre Nós
Pioneiros em soluções aéreas com drones
Somos uma equipe de pilotos certificados e especialistas em tecnologia, dedicados a oferecer as melhores soluções em drones para diversos segmentos do mercado.
-
Pilotos Certificados ANAC
Equipe totalmente regularizada e com certificações profissionais
-
Equipamentos de Última Geração
Drones profissionais com câmeras 4K e sensores avançados
-
Segurança em Primeiro Lugar
Protocolos rigorosos e seguros aprovados pela ANAC
-
Entrega no Prazo
Comprometimento com prazos e qualidade em cada projeto
Entre em Contato
Filmagem Aérea
Resort Beach Paradise
Mapeamento
Obra Condomínio Vertical
Agricultura
Fazenda Santa Maria
Evento
Festival de Música 2025
Inspeção
Torre de Transmissão
Imobiliário
Condomínio Vista Mar
★★★★★
“Serviço excepcional! As filmagens aéreas do nosso evento ficaram incríveis. A equipe foi super profissional e entregou tudo no prazo.”
MC
Marina Costa
Produtora de Eventos
★★★★★
“O mapeamento topográfico que realizaram para nossa obra foi preciso e rápido. Recomendo a SkyView para qualquer projeto de engenharia.”
RS
Ricardo Silva
Engenheiro Civil
★★★★★
“As imagens aéreas dos nossos imóveis aumentaram muito as vendas. Qualidade cinematográfica e atendimento impecável!”
JP
Juliana Pereira
Corretora de Imóveis
Pronto para decolar seu projeto?
Entre em contato agora e receba um orçamento personalizado para o seu projeto. Nossa equipe está pronta para atender você!
Solicitar Orçamento Grátis
// Header scroll effect
const header = document.getElementById(‘header’);
window.addEventListener(‘scroll’, () => {
if (window.scrollY > 50) {
header.classList.add(‘scrolled’);
} else {
header.classList.remove(‘scrolled’);
}
});
// Mobile menu toggle
const menuToggle = document.getElementById(‘menuToggle’);
const navLinks = document.getElementById(‘navLinks’);
menuToggle.addEventListener(‘click’, () => {
navLinks.classList.toggle(‘active’);
});
// Close menu on link click
document.querySelectorAll(‘.nav-links a’).forEach(link => {
link.addEventListener(‘click’, () => {
navLinks.classList.remove(‘active’);
});
});
// Reveal on scroll
const reveals = document.querySelectorAll(‘.reveal’);
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘active’);
}
});
}, { threshold: 0.15 });
reveals.forEach(el => revealObserver.observe(el));
// Counter animation
const counters = document.querySelectorAll(‘.stat-number’);
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const counter = entry.target;
const target = +counter.getAttribute(‘data-target’);
const duration = 2000;
const step = target / (duration / 16);
let current = 0;
const updateCounter = () => {
current += step;
if (current counterObserver.observe(c));