Help
RSS
API
Feed
Maltego
Contact
Domain > afill.com.br
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2025-07-11
104.21.69.19
(
ClassC
)
2026-01-05
172.67.202.210
(
ClassC
)
Port 443
HTTP/1.1 200 OKDate: Mon, 05 Jan 2026 02:40:26 GMTContent-Type: text/htmlTransfer-Encoding: chunkedConnection: keep-aliveAccept-Ranges: bytesCache-Control: no-cacheReport-To: {group:cf-nel,max_age:604800,endpoints:{url:https://a.nel.cloudflare.com/report/v4?sn%2B7Vm1H%2BFUZVeSCCA1zyGeCIgQdDe%2Bz7AxTNPfB8ezeR3rublA3NmDMJgZkbgaDFdAvDhEGgXJZhIMSpw5gQdgzoUme22Kp17fIjlw%3D%3D}}last-modified: Mon, 11 Aug 2025 07:00:56 GMTServer: cloudflarecf-cache-status: DYNAMICNel: {report_to:cf-nel,success_fraction:0.0,max_age:604800}CF-RAY: 9b8f9c612ee3c8da-PDXalt-svc: h3:443; ma86400 !DOCTYPE html>html langpt-BR>head> meta charsetUTF-8> meta nameviewport contentwidthdevice-width, initial-scale1.0> title>aFill Inovação | Soluções Para Comércio Exterior/title> meta namedescription contentEmpresa de tecnologia especializada em sistemas para controle das operações de Importação e Exportação, totalmente voltada para inovação no Comércio Exterior.> link relicon hrefA de Afill.png typeimage/png> link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css> style> /* Variáveis CSS com paleta escura moderna */ :root { --primary: #778da9; --primary-light: #a3b8cc; --primary-dark: #415a77; --secondary: #1b263b; --accent: #0d1b2a; --light: #e0e1dd; --white: #ffffff; --dark-bg: #0d1117; --dark-surface: #161b22; --dark-elevated: #21262d; --text-primary: #f0f6fc; --text-secondary: #8b949e; --text-muted: #6e7681; --border-color: #30363d; --glass-bg: rgba(33, 38, 45, 0.8); --glass-border: rgba(240, 246, 252, 0.1); --gradient-primary: linear-gradient(135deg, #778da9 0%, #415a77 100%); --gradient-accent: linear-gradient(135deg, #415a77 0%, #1b263b 100%); --gradient-dark: linear-gradient(135deg, #0d1117 0%, #161b22 100%); --gradient-hero: radial-gradient(ellipse at center, rgba(119, 141, 169, 0.15) 0%, transparent 70%); --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.3); --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.4); --shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 30px rgba(119, 141, 169, 0.3); --border-radius: 16px; --animation-speed: 0.4s; --animation-curve: cubic-bezier(0.23, 1, 0.32, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; background: var(--dark-bg); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; } /* Estilos gerais */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Controle de visibilidade para ícones mobile/desktop */ .mobile-only { display: none; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* Efeitos de fundo animados */ .animated-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .floating-particle { position: absolute; background: var(--primary); border-radius: 50%; opacity: 0.1; animation: floatParticle 20s infinite linear; } .floating-particle:nth-child(1) { width: 6px; height: 6px; top: 20%; left: 10%; animation-delay: 0s; } .floating-particle:nth-child(2) { width: 4px; height: 4px; top: 60%; left: 80%; animation-delay: 5s; } .floating-particle:nth-child(3) { width: 8px; height: 8px; top: 80%; left: 20%; animation-delay: 10s; } /* Header Glassmorphism */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--glass-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); transition: all var(--animation-speed) var(--animation-curve); } .header.scrolled { background: rgba(13, 17, 23, 0.95); box-shadow: var(--shadow-light); } .nav-container { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; max-width: 1400px; margin: 0 auto; } .logo { font-size: 1.8rem; font-weight: 800; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; position: relative; } .logo::after { content: ; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: var(--gradient-primary); transform: scaleX(0); transition: transform var(--animation-speed) var(--animation-curve); } .logo:hover::after { transform: scaleX(1); } .nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; } .nav-link { color: var(--text-secondary); text-decoration: none; font-weight: 500; position: relative; transition: all var(--animation-speed) var(--animation-curve); padding: 0.8rem 1.2rem; border-radius: 12px; display: flex; align-items: center; gap: 0.5rem; } .nav-link span { color: var(--white); } .nav-link::before { content: ; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(119, 141, 169, 0.1), rgba(65, 90, 119, 0.05)); border-radius: 12px; opacity: 0; transition: all var(--animation-speed) var(--animation-curve); } .nav-link:hover::before, .nav-link.active::before { opacity: 1; } .nav-link:hover, .nav-link.active { color: var(--primary); transform: translateY(-2px); } .nav-link i { font-size: 0.9rem; opacity: 0.7; transition: all var(--animation-speed) var(--animation-curve); } .nav-link:hover i { opacity: 1; transform: scale(1.1); } .contact-btn { background: var(--white); color: #009aff; padding: 0.8rem 1.8rem; border-radius: 25px; text-decoration: none; font-weight: 600; transition: all var(--animation-speed) var(--animation-curve); box-shadow: var(--shadow-light); display: flex; align-items: center; gap: 0.5rem; position: relative; overflow: hidden; border: 2px solid #009aff; } .contact-btn::before { content: ; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.7s ease; } .contact-btn:hover::before { left: 100%; } .contact-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); } .mobile-menu { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 4px; } .mobile-menu span { width: 25px; height: 3px; background: var(--primary); transition: all var(--animation-speed) var(--animation-curve); border-radius: 2px; } .mobile-menu.active span:nth-child(1) { transform: rotate(45deg) translateY(7px); } .mobile-menu.active span:nth-child(2) { opacity: 0; } .mobile-menu.active span:nth-child(3) { transform: rotate(-45deg) translateY(-7px); } .mobile-nav { position: fixed; top: 80px; left: 0; right: 0; background: var(--dark-elevated); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); transform: translateY(-100%); transition: all var(--animation-speed) var(--animation-curve); opacity: 0; visibility: hidden; z-index: 999; } .mobile-nav.active { transform: translateY(0); opacity: 1; visibility: visible; } .mobile-nav .nav-links { flex-direction: column; padding: 2rem; gap: 1rem; } .mobile-nav .nav-link { width: 100%; justify-content: flex-start; padding: 1rem; border-radius: var(--border-radius); } /* Hero Section com efeitos avançados */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 6rem 2rem 2rem; position: relative; overflow: hidden; } .hero::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-hero); z-index: 1; } .hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .particle { position: absolute; background: var(--primary); border-radius: 50%; opacity: 0.1; animation: particleFloat 15s infinite ease-in-out; } .particle:nth-child(1) { width: 4px; height: 4px; top: 20%; left: 20%; animation-delay: 0s; } .particle:nth-child(2) { width: 6px; height: 6px; top: 80%; left: 80%; animation-delay: 5s; } .particle:nth-child(3) { width: 3px; height: 3px; top: 60%; left: 10%; animation-delay: 10s; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; z-index: 2; position: relative; } .hero-text { opacity: 0; transform: translateY(50px); animation: heroFadeIn 1s var(--animation-curve) 0.5s forwards; } .hero-subtitle { color: #009aff; font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; opacity: 0; transform: translateY(30px); animation: heroFadeIn 1s var(--animation-curve) 0.7s forwards; text-transform: uppercase; letter-spacing: 1px; } .hero-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; opacity: 0; transform: translateY(30px); animation: heroFadeIn 1s var(--animation-curve) 0.9s forwards; } .gradient-text { color: #009aff; position: relative; display: inline-block; } .hero-description { font-size: 1.2rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 2.5rem; opacity: 0; transform: translateY(30px); animation: heroFadeIn 1s var(--animation-curve) 1.1s forwards; } .hero-buttons { display: flex; gap: 1.5rem; opacity: 0; transform: translateY(30px); animation: heroFadeIn 1s var(--animation-curve) 1.3s forwards; } .btn { padding: 1.2rem 2.5rem; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all var(--animation-speed) var(--animation-curve); display: inline-flex; align-items: center; gap: 0.8rem; cursor: pointer; border: none; position: relative; overflow: hidden; } .btn::before { content: ; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.6s ease; } .btn:hover::before { left: 100%; } .btn-primary { background: var(--white); color: #009aff; box-shadow: var(--shadow-light); border: 2px solid #009aff; } .btn-primary:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-glow); } .btn-secondary { background: var(--white); color: #009aff; border: 2px solid #009aff; backdrop-filter: blur(20px); } .btn-secondary:hover { background: var(--white); color: #009aff; border-color: #009aff; transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-medium); } /* Visual Hero com animações 3D */ .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 500px; } .floating-elements { position: absolute; inset: 0; pointer-events: none; } .floating-icon { position: absolute; width: 80px; height: 80px; background: var(--white); border-radius: 20px; display: flex; align-items: center; border: 2px solid #009aff; justify-content: center; font-size: 2.5rem; color: #009aff; box-shadow: var(--shadow-glow); animation: iconFloat 12s ease-in-out infinite; transition: all var(--animation-speed) var(--animation-curve); } .floating-icon:hover { transform: scale(1.1); box-shadow: var(--shadow-glow); } .floating-icon:nth-child(1) { top: 5%; left: 5%; animation-delay: 0s; } .floating-icon:nth-child(2) { top: 65%; right: 5%; animation-delay: 4s; } .floating-icon:nth-child(3) { bottom: 5%; left: 10%; animation-delay: 8s; } /* Seções */ .section { padding: 6rem 0; position: relative; } .section-header { text-align: center; margin-bottom: 4rem; } .section-subtitle { color: #009aff; font-size: 1rem; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; } .section-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: 1.5rem; color: var(--text-primary); } .section-description { font-size: 1.2rem; color: var(--text-secondary); max-width: 700px; margin: 0 auto; line-height: 1.7; } /* Grid de Cards com efeitos modernos */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; margin-top: 4rem; } .card { background: var(--dark-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 2.5rem; transition: all var(--animation-speed) var(--animation-curve); position: relative; overflow: hidden; opacity: 0; transform: translateY(50px); text-align: center; } .card.animate { opacity: 1; transform: translateY(0); } .card::before { content: ; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #009aff, transparent); transform: scaleX(0); transition: transform var(--animation-speed) var(--animation-curve); } .card::after { content: ; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(119, 141, 169, 0.05), transparent); opacity: 0; transition: opacity var(--animation-speed) var(--animation-curve); } .card:hover::before { transform: scaleX(1); } .card:hover::after { opacity: 1; } .card:hover { transform: translateY(-10px); box-shadow: var(--shadow-glow); border-color: #009aff; } .card-icon { width: 70px; height: 70px; background: var(--white); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #009aff; border: 2px solid #009aff; margin: 0 auto 2rem; position: relative; z-index: 1; transition: all var(--animation-speed) var(--animation-curve); } .card:hover .card-icon { transform: scale(1.1) rotate(5deg); box-shadow: var(--shadow-glow); } .card-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); position: relative; z-index: 1; } .card-description { color: var(--text-secondary); line-height: 1.7; position: relative; z-index: 1; } /* Produtos com efeitos especiais */ .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2.5rem; margin-top: 4rem; } .product-card { background: var(--dark-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 2.5rem; transition: all var(--animation-speed) var(--animation-curve); position: relative; overflow: hidden; cursor: pointer; opacity: 0; transform: translateY(50px); text-align: center; } .product-card.animate { opacity: 1; transform: translateY(0); } .product-card::before { content: ; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(119, 141, 169, 0.1), transparent); transition: left 0.8s ease; } .product-card:hover::before { left: 100%; } .product-card:hover { transform: translateY(-15px) scale(1.02); box-shadow: var(--shadow-glow); border-color: #009aff; } .product-icon { width: 80px; height: 80px; background: var(--white); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #009aff; border: 2px solid #009aff; margin: 0 auto 2rem; position: relative; z-index: 1; transition: all var(--animation-speed) var(--animation-curve); } .product-card:hover .product-icon { transform: scale(1.15) rotate(-5deg); box-shadow: var(--shadow-glow); } .product-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); position: relative; z-index: 1; } .product-description { color: var(--text-secondary); line-height: 1.7; margin-bottom: 2rem; position: relative; z-index: 1; } .product-features { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2rem; justify-content: center; } .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .feature-tag { background: var(--white); color: #009aff; padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; border: 2px solid #009aff; transition: all var(--animation-speed) var(--animation-curve); } .product-card:hover .feature-tag { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(119, 141, 169, 0.3); } .product-link { color: var(--white); text-decoration: none; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 0.8rem; transition: all var(--animation-speed) var(--animation-curve); position: relative; z-index: 1; justify-content: center; } .product-link:hover { gap: 1.5rem; color: var(--white); } /* Clientes com marquee avançado */ .clients-marquee { overflow: hidden; margin: 2rem 0; mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent); position: relative; } .marquee-content { display: flex; gap: 3rem; animation: marqueeScroll 10s linear infinite; } /* Segundo carrossel em direção oposta e mais rápido */ .clients-marquee-reverse { overflow: hidden; margin: 2rem 0; mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent); position: relative; } .marquee-content-reverse { display: flex; gap: 3rem; animation: marqueeScrollReverse 10s linear infinite; } .client-logo { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 2rem; min-width: 220px; height: 120px; display: flex; align-items: center; justify-content: center; transition: all var(--animation-speed) var(--animation-curve); position: relative; overflow: hidden; box-shadow: var(--shadow-light); } .client-logo::before { content: ; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(119, 141, 169, 0.1), transparent); opacity: 0; transition: opacity var(--animation-speed) var(--animation-curve); } .client-logo:hover::before { opacity: 1; } .client-logo:hover { transform: scale(1.05); border-color: #009aff; box-shadow: var(--shadow-light); } .client-logo img { max-width: 100%; height: auto; opacity: 1; transition: all var(--animation-speed) var(--animation-curve); filter: grayscale(0%); } .client-logo:hover img { transform: scale(1.05); } /* Footer moderno */ .footer { background: var(--dark-surface); border-top: 1px solid var(--border-color); color: var(--text-primary); padding: 4rem 0 2rem; margin-top: 6rem; position: relative; } .footer::before { content: ; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #009aff, transparent); } .footer-content { text-align: center; max-width: 600px; margin: 0 auto; } .footer-section h3 { color: #009aff; margin-bottom: 2rem; font-size: 1.8rem; font-weight: 700; } .contact-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .contact-item { background: var(--dark-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 2rem; transition: all var(--animation-speed) var(--animation-curve); position: relative; overflow: hidden; } .contact-item::before { content: ; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #009aff, transparent); transform: scaleX(0); transition: transform var(--animation-speed) var(--animation-curve); } .contact-item:hover::before { transform: scaleX(1); } .contact-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-glow); border-color: #009aff; } .contact-label { font-weight: 600; color: #009aff; margin-bottom: 0.5rem; font-size: 1.1rem; } .contact-value { color: var(--text-secondary); font-size: 1.1rem; } .contact-value a { color: var(--text-secondary); text-decoration: none; transition: color var(--animation-speed) var(--animation-curve); } .contact-value a:hover { color: var(--primary); } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid var(--border-color); color: var(--text-muted); } /* Botões Flutuantes com efeitos */ .floating-buttons { position: fixed; bottom: 2rem; right: 2rem; display: flex; flex-direction: column; gap: 1rem; z-index: 1000; } .floating-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.5rem; text-decoration: none; transition: all var(--animation-speed) var(--animation-curve); box-shadow: var(--shadow-light); border: none; cursor: pointer; position: relative; overflow: hidden; } .floating-btn::before { content: ; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent); opacity: 0; transition: opacity var(--animation-speed) var(--animation-curve); } .floating-btn:hover::before { opacity: 1; } .scroll-btn { background: var(--white); color: #009aff; border: 2px solid #009aff; opacity: 0; visibility: hidden; transition: all var(--animation-speed) var(--animation-curve); } .scroll-btn.visible { opacity: 1; visibility: visible; } .floating-btn:hover { transform: translateY(-5px) scale(1.1); box-shadow: var(--shadow-glow); } /* Animações avançadas */ @keyframes heroFadeIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes iconFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-30px) rotate(2deg); } 50% { transform: translateY(-20px) rotate(-2deg); } 75% { transform: translateY(-35px) rotate(1deg); } } @keyframes particleFloat { 0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.1; } 50% { transform: translateY(-40px) translateX(30px); opacity: 0.3; } } @keyframes floatParticle { 0% { transform: translateY(0px) rotate(0deg); opacity: 0.1; } 50% { transform: translateY(-60px) rotate(180deg); opacity: 0.3; } 100% { transform: translateY(0px) rotate(360deg); opacity: 0.1; } } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marqueeScrollReverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(119, 141, 169, 0.3); } 50% { box-shadow: 0 0 40px rgba(119, 141, 169, 0.6); } } /* Scroll Reveal com stagger */ .scroll-reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s var(--animation-curve); } .scroll-reveal.revealed { opacity: 1; transform: translateY(0); } .stagger-1 { transition-delay: 0.1s; } .stagger-2 { transition-delay: 0.2s; } .stagger-3 { transition-delay: 0.3s; } .stagger-4 { transition-delay: 0.4s; } /* Efeitos especiais */ .glow-on-hover { transition: all var(--animation-speed) var(--animation-curve); } .glow-on-hover:hover { animation: pulseGlow 2s infinite; } /* Responsividade avançada */ @media (max-width: 1024px) { .hero-content { gap: 3rem; } .cards-grid, .products-grid { gap: 2rem; } } /* Cor dos ícones */ .fas { color: #009aff; } @media (max-width: 768px) { .nav-links { display: none; flex-direction: column; position: fixed; top: 80px; left: 0; right: 0; background: var(--dark-elevated); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); padding: 2rem; gap: 1rem; z-index: 999; transform: translateY(-100%); transition: all var(--animation-speed) var(--animation-curve); opacity: 0; visibility: hidden; } .nav-links.active { display: flex; transform: translateY(0); opacity: 1; visibility: visible; } .nav-links .nav-link { width: 100%; justify-content: flex-start; padding: 1rem; border-radius: var(--border-radius); } .mobile-menu { display: flex; } .hero-content { grid-template-columns: 1fr; text-align: center; gap: 2rem; } .hero-text { display: flex; flex-direction: column; align-items: center; } .hero-visual { display: none; } .mobile-only { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 1.5rem; margin: 2rem 0; flex-wrap: wrap; transform: scale(0.8); } .floating-elements { transform: scale(0.8); display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 1.5rem; position: relative; height: auto; margin: 2rem 0; flex-wrap: wrap; order: 1; } .floating-icon { position: relative; top: auto; left: auto; right: auto; bottom: auto; margin: 0; width: 70px; height: 70px; font-size: 2rem; } .floating-icon:nth-child(1) { top: auto; left: auto; animation-delay: 0s; order: 2; /* Navio no centro */ } .floating-icon:nth-child(2) { top: auto; right: auto; animation-delay: 4s; order: 3; /* Avião à direita */ } .floating-icon:nth-child(3) { bottom: auto; left: auto; animation-delay: 8s; order: 1; /* Caminhão à esquerda */ } .cards-grid, .products-grid { grid-template-columns: 1fr; } .hero-buttons { flex-direction: column; align-items: center; order: 2; } .btn { width: 100%; justify-content: center; max-width: 300px; } .floating-buttons { right: 1rem; bottom: 1rem; } .floating-btn { width: 50px; height: 50px; font-size: 1.2rem; } .section { padding: 4rem 0; } .contact-info { grid-template-columns: 1fr; gap: 1.5rem; } } @media (max-width: 480px) { .hero { padding: 5rem 1rem 2rem; } .card, .product-card { padding: 2rem; } .hero-title { font-size: 2.5rem; } .nav-container { padding: 1rem; } .client-logo { min-width: 180px; padding: 1.5rem; } .contact-item { padding: 1.5rem; } } /* Prefers reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /style>/head>body> !-- Cursor personalizado --> div classcursor>/div> div classcursor-follower>/div> !-- Fundo animado --> div classanimated-bg> div classfloating-particle>/div> div classfloating-particle>/div> div classfloating-particle>/div> /div> !-- Header --> header classheader> nav classnav-container> a href# classlogo>img srcLogo Afill.avif altLogo aFill width100 height40>/a> button classmobile-menu aria-labelMenu> span>/span> span>/span> span>/span> /button> div classnav-links> a href#home classnav-link active> i classfas fa-home>/i> span>Home/span> /a> a href#sobre classnav-link> i classfas fa-building>/i> span>Sobre/span> /a> a href#produtos classnav-link> i classfas fa-box>/i> span>Produtos/span> /a> a href#clientes classnav-link> i classfas fa-handshake>/i> span>Clientes/span> /a> a href#equipe classnav-link> i classfas fa-users>/i> span>Equipe/span> /a> a hrefsuporte.html classnav-link> i classfas fa-headset>/i> span>Suporte/span> /a> /div> /nav> /header> !-- Hero Section --> section classhero idhome> div classhero-particles> div classparticle>/div> div classparticle>/div> div classparticle>/div> /div> div classcontainer> div classhero-content> div classhero-text> div classhero-subtitle>Tecnologia • Inovação • Excelência/div> h1 classhero-title> Inovação em span classgradient-text>Comércio Exterior/span> /h1> p classhero-description> Soluções tecnológicas que transformam a maneira de gerenciar operações de importação e exportação /p> div classfloating-elements mobile-only> div classfloating-icon> i classfas fa-ship>/i> /div> div classfloating-icon> i classfas fa-plane-departure>/i> /div> div classfloating-icon> i classfas fa-truck>/i> /div> /div> div classhero-buttons> a href#contato classbtn btn-primary> Começar Agora i classfas fa-rocket>/i> /a> a href#produtos classbtn btn-secondary> Nossos Produtos i classfas fa-arrow-down>/i> /a> /div> /div> div classhero-visual> div classfloating-elements> div classfloating-icon> i classfas fa-plane-departure>/i> /div> div classfloating-icon> i classfas fa-ship>/i> /div> div classfloating-icon> i classfas fa-truck>/i> /div> /div> /div> /div> /div> /section> !-- Sobre Section --> section classsection scroll-reveal idsobre> div classcontainer> div classsection-header> div classsection-subtitle>Por que escolher aFill?/div> h2 classsection-title>Excelência em Cada Detalhe/h2> p classsection-description> Nascemos da necessidade de descomplicar o Comércio Exterior. Nossa expertise de mais de 17 anos nos permite oferecer soluções inovadoras e personalizadas para cada cliente. /p> /div> div classcards-grid> div classcard stagger-1> div classcard-icon> i classfas fa-lightbulb>/i> /div> h3 classcard-title>Inovação Constante/h3> p classcard-description> Desenvolvemos continuamente novas funcionalidades para manter nossos clientes sempre à frente no mercado de comércio exterior. /p> /div> div classcard stagger-2> div classcard-icon> i classfas fa-award>/i> /div> h3 classcard-title>+17 Anos de Experiência/h3> p classcard-description> Mais de uma década desenvolvendo soluções práticas e flexíveis para otimizar processos logísticos e eliminar barreiras comerciais. /p> /div> div classcard stagger-3> div classcard-icon> i classfas fa-rocket>/i> /div> h3 classcard-title>Agilidade Garantida/h3> p classcard-description> Nossas soluções garantem eficiência em todos os registros operacionais, desde a compra até a entrega final de produtos e serviços. /p> /div> /div> /div> /section> !-- Produtos Section --> section classsection scroll-reveal idprodutos> div classcontainer> div classsection-header> div classsection-subtitle>Soluções Completas/div> h2 classsection-title>Produtos aFill/h2> p classsection-description> Descubra nossas soluções inovadoras desenvolvidas especificamente para revolucionar suas operações de comércio exterior. /p> /div> div classproducts-grid> div classproduct-card stagger-1 onclickwindow.location.hrefimport.html> div classproduct-icon> i classfas fa-ship>/i> /div> h3 classproduct-title>aFill Import/h3> p classproduct-description> Sistema completo para importadores, com automação de processos e controle total das operações de importação /p> div classproduct-features> span classfeature-tag>Automação/span> span classfeature-tag>Controle/span> span classfeature-tag>Eficiência/span> /div> a hrefimport.html classproduct-link> Explorar Produto i classfas fa-arrow-right>/i> /a> /div> div classproduct-card stagger-2 onclickwindow.location.hrefexport.html> div classproduct-icon> i classfas fa-plane-departure>/i> /div> h3 classproduct-title>aFill Export/h3> p classproduct-description> Gestão eficiente de exportações com cotações e Packing List simplificados pronto para seu negócio /p> div classproduct-features> span classfeature-tag>Gestão/span> span classfeature-tag>Cotações/span> span classfeature-tag>Packing List/span> /div> a hrefexport.html classproduct-link> Explorar Produto i classfas fa-arrow-right>/i> /a> /div> div classproduct-card stagger-3 onclickwindow.location.hrefconsultoria.html> div classproduct-icon> i classfas fa-brain>/i> /div> h3 classproduct-title>Consultoria/h3> p classproduct-description> Consultores especializados em Comércio Exterior e programação, dedicados em resolver problemas e esclarecer dúvidas /p> div classproduct-features> span classfeature-tag>Expertise/span> span classfeature-tag>Suporte/span> span classfeature-tag>Soluções/span> /div> a hrefconsultoria.html classproduct-link> Explorar Produto i classfas fa-arrow-right>/i> /a> /div> div classproduct-card stagger-4 onclickwindow.location.hrefuniversidade.html> div classproduct-icon> i classfas fa-graduation-cap>/i> /div> h3 classproduct-title>Universidade aFill/h3> p classproduct-description> Aulas gravadas sobre nosso sistema, com conteúdo exclusivo para aprimorar seus conhecimentos e capacitação no comércio exterior /p> div classproduct-features> span classfeature-tag>Aprendizado/span> span classfeature-tag>Capacitação/span> span classfeature-tag>Conhecimento/span> /div> a hrefuniversidade.html classproduct-link> Explorar Produto i classfas fa-arrow-right>/i> /a> /div> /div> /div> /section> !-- Clientes Section --> section classsection scroll-reveal idclientes> div classcontainer> div classsection-header> div classsection-subtitle>Nossos Parceiros/div> h2 classsection-title>Clientes que Confiam/h2> p classsection-description> Empresas em todo o Brasil confiam em nossas soluções /p> /div> div classclients-marquee> div classmarquee-content> div classclient-logo> img srcMetalnox.png altLogo da Metalnox - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcBuddemeyer.png altLogo da Buddemeyer - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcChery.png altLogo da Chery - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcCosta Sul.png altLogo da Costa Sul - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcDecanter.png altLogo da Decanter - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcJohnson.png altLogo da Johnson - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcKalunga.png altLogo da Kalunga - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcPradolux.png altLogo da Pradolux - Cliente aFill width180 heightauto> /div> !-- Duplicar para scroll infinito --> div classclient-logo> img srcTaf.png altLogo da Taf - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcTodimo.png altLogo da Todimo - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcUnitá.png altLogo da Unitá - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcWega.png altLogo da Wega - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcAmazonAco.png altLogo da Amazon Aço - Cliente aFill width180 heightauto> /div> /div> /div> !-- Segundo carrossel em direção oposta e mais rápido --> div classclients-marquee-reverse> div classmarquee-content-reverse> div classclient-logo> img srcAmazonAco.png altLogo da Amazon Aço - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcWega.png altLogo da Wega - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcUnitá.png altLogo da Unitá - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcTodimo.png altLogo da Todimo - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcTaf.png altLogo da Taf - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcPradolux.png altLogo da Pradolux - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcKalunga.png altLogo da Kalunga - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcJohnson.png altLogo da Johnson - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcDecanter.png altLogo da Decanter - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcCosta Sul.png altLogo da Costa Sul - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcChery.png altLogo da Chery - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcBuddemeyer.png altLogo da Buddemeyer - Cliente aFill width180 heightauto> /div> div classclient-logo> img srcMetalnox.png altLogo da Metalnox - Cliente aFill width180 heightauto> /div> /div> /div> /div> /section> !-- Equipe Section --> section classsection scroll-reveal idequipe> div classcontainer> div classsection-header> div classsection-subtitle>Nosso Time/div> h2 classsection-title>Equipe de Especialistas/h2> p classsection-description> Na aFill Inovação, reunimos algo verdadeiramente especial: um grupo ágil composto por especialistas em Comércio Exterior, desenvolvedores, todos unidos por um compromisso comum com a comunicação, a colaboração e a excelência. br> br> Somos um time diversificado e é a individualidade de cada um que nos torna uma ótima equipe. Essa individualidade alimenta discussões significativas e traz à tona ideias inovadoras. Cada integrante do nosso time é único e essencial na construção de uma empresa diferenciada. São ideias e sonhos que se transformam em projetos que nos levam ao alcance de nossos objetivos todos os dias /p> /div> div classcards-grid> div classcard stagger-1> div classcard-icon> i classfas fa-brain>/i> /div> h3 classcard-title>Inovação/h3> p classcard-description> Desenvolvemos soluções com as mais recentes tecnologias para revolucionar o comércio exterior. /p> /div> div classcard stagger-2> div classcard-icon> i classfas fa-globe-americas>/i> /div> h3 classcard-title>Expertise em Comex/h3> p classcard-description> Conhecimento especializado em regulamentações, processos automatizados e melhores práticas do comércio exterior brasileiro e internacional. /p> /div> div classcard stagger-3> div classcard-icon> i classfas fa-users>/i> /div> h3 classcard-title>Trabalho Colaborativo/h3> p classcard-description> Cultura de colaboração, comunicação aberta e metodologias ágeis que nos permite entregar soluções excepcionais e inovadoras para nossos clientes. /p> /div> /div> /div> /section> !-- Footer --> footer classfooter idcontato> div classcontainer> div classfooter-content> div classfooter-section> h3>Contato/h3> div classcontact-info> div classcontact-item> div classcontact-label>Comercial/div> div classcontact-value> a href/cdn-cgi/l/email-protection#c2a1adacb6a3b6adf3f6f582a3a4abaeaeeca1adafeca0b0>span class__cf_email__ data-cfemaila0c3cfced4c1d4cf919497e0c1c6c9cccc8ec3cfcd8ec2d2>email protected/span>/a> /div> /div> div classcontact-item> div classcontact-label>Financeiro/div> div classcontact-value> a href/cdn-cgi/l/email-protection#6d0b04030c030e08041f025c595a2d0c0b040101430e0200430f1f>span class__cf_email__ data-cfemail74121d1a151a17111d061b4540433415121d18185a171b195a1606>email protected/span>/a> /div> /div> /div> /div> /div> div classfooter-bottom> p>© 2025 aFill Inovação. Todos os direitos reservados./p> /div> /div> /footer> script data-cfasyncfalse src/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js>/script>script> // Cursor personalizado const cursor document.querySelector(.cursor); const cursorFollower document.querySelector(.cursor-follower); document.addEventListener(mousemove, (e) > { cursor.style.left e.clientX + px; cursor.style.top e.clientY + px; setTimeout(() > { cursorFollower.style.left e.clientX + px; cursorFollower.style.top e.clientY + px; }, 100); }); // Efeitos de hover no cursor document.querySelectorAll(a, button, .product-card, .card).forEach(el > { el.addEventListener(mouseenter, () > { cursor.classList.add(cursor-hover); cursorFollower.classList.add(cursor-hover); }); el.addEventListener(mouseleave, () > { cursor.classList.remove(cursor-hover); cursorFollower.classList.remove(cursor-hover); }); }); // Mobile menu toggle const mobileMenu document.querySelector(.mobile-menu); const mobileNavLinks document.querySelector(.nav-links); if (mobileMenu && mobileNavLinks) { mobileMenu.addEventListener(click, () > { mobileMenu.classList.toggle(active); mobileNavLinks.classList.toggle(active); }); // Fechar menu ao clicar em um link document.querySelectorAll(.nav-link).forEach(link > { link.addEventListener(click, () > { mobileMenu.classList.remove(active); mobileNavLinks.classList.remove(active); }); }); } // Smooth scroll document.querySelectorAll(ahref^#).forEach(anchor > { anchor.addEventListener(click, function (e) { e.preventDefault(); const target document.querySelector(this.getAttribute(href)); if (target) { target.scrollIntoView({ behavior: smooth, block: start }); // Close mobile menu if open mobileMenu.classList.remove(active); mobileNav.classList.remove(active); } }); }); // Scroll to top function scrollToTop() { window.scrollTo({ top: 0, behavior: smooth }); } // Enhanced scroll reveal with stagger effect const observerOptions { threshold: 0.1, rootMargin: 0px 0px -50px 0px }; const observer new IntersectionObserver((entries) > { entries.forEach(entry > { if (entry.isIntersecting) { entry.target.classList.add(revealed); // Animate cards with stagger const cards entry.target.querySelectorAll(.card, .product-card); cards.forEach((card, index) > { setTimeout(() > { card.classList.add(animate); }, index * 150); }); } }); }, observerOptions); document.querySelectorAll(.scroll-reveal).forEach(el > { observer.observe(el); }); // Navigation active state const sections document.querySelectorAll(section); const navLinks document.querySelectorAll(.nav-linkhref^#); window.addEventListener(scroll, () > { let current home; 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); if (link.getAttribute(href) `#${current}`) { link.classList.add(active); } }); }); // Product card click handlers document.querySelectorAll(.product-card).forEach(card > { card.addEventListener(click, (e) > { if (!e.target.closest(.product-link)) { const link card.querySelector(.product-link); if (link) { window.location.href link.getAttribute(href); } } }); }); // Enhanced animations on scroll const animateOnScroll () > { const elements document.querySelectorAll(.card, .product-card); elements.forEach((element, index) > { const elementTop element.getBoundingClientRect().top; const elementVisible 150; if (elementTop window.innerHeight - elementVisible) { setTimeout(() > { element.style.opacity 1; element.style.transform translateY(0); }, index * 100); } }); }; window.addEventListener(scroll, animateOnScroll); window.addEventListener(load, animateOnScroll); // Parallax effect for floating cards window.addEventListener(scroll, () > { const scrolled window.pageYOffset; const parallaxElements document.querySelectorAll(.floating-card); parallaxElements.forEach((element, index) > { const speed 0.5 + (index * 0.2); const yPos -(scrolled * speed * 0.1); element.style.transform `translateY(${yPos}px)`; }); }); // Performance optimization - throttle scroll events function throttle(func, wait) { let timeout; return function executedFunction(...args) { const later () > { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout setTimeout(later, wait); }; } // Apply throttling to scroll events window.addEventListener(scroll, throttle(() > { // All scroll-based animations here }, 16)); // ~60fps // Loading animation window.addEventListener(load, () > { document.body.style.opacity 1; document.body.style.transition opacity 0.5s ease; // Start hero animations setTimeout(() > { document.querySelector(.hero-text).style.opacity 1; }, 200); }); // Add some interactive particles function createInteractiveParticle(x, y) { const particle document.createElement(div); particle.style.position fixed; particle.style.left x + px; particle.style.top y + px; particle.style.width 4px; particle.style.height 4px; particle.style.background var(--primary); particle.style.borderRadius 50%; particle.style.pointerEvents none; particle.style.zIndex 9999; particle.style.opacity 0.6; particle.style.transition all 0.5s ease; document.body.appendChild(particle); setTimeout(() > { particle.style.transform scale(0) translateY(-50px); particle.style.opacity 0; }, 50); setTimeout(() > { document.body.removeChild(particle); }, 550); } // Click effect document.addEventListener(click, (e) > { createInteractiveParticle(e.clientX, e.clientY); }); // Preload critical resources const preloadImages /api/placeholder/150/80, /api/placeholder/150/40 ; preloadImages.forEach(src > { const img new Image(); img.src src; }); /script>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]