700 lines
46 KiB
HTML
700 lines
46 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt-BR">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="ErikrafT Drop - Compartilhamento de arquivos seguro e direto no navegador. Transferência P2P com criptografia de ponta a ponta, sem instalação ou cadastro. Alternativa gratuita ao armazenamento em nuvem.">
|
||
<meta name="keywords" content="compartilhamento de arquivos, transferência de arquivos, armazenamento em nuvem, P2P, criptografia, WebRTC, compartilhamento seguro, transferência direta, nuvem privada, alternativa ao dropbox, alternativa ao google drive, compartilhamento de arquivos online, compartilhamento de arquivos gratuito, compartilhamento de arquivos sem instalação, compartilhamento de arquivos sem cadastro, compartilhamento de arquivos sem servidor, compartilhamento de arquivos sem login, compartilhamento de arquivos sem senha, compartilhamento de arquivos sem servidor, compartilhamento de arquivos sem login, compartilhamento de arquivos sem senha, alternativa ao mega, megaupload, alternativa ao mega upload, alternativa ao onedrive, upload, PairDrop, Snapdrop">
|
||
<meta name="author" content="ErikrafT">
|
||
<meta property="og:title" content="ErikrafT Drop - Compartilhamento de Arquivos Seguro e Direto">
|
||
<meta property="og:description" content="Compartilhe arquivos com segurança e privacidade, sem instalação ou cadastro. Transferência P2P com criptografia de ponta a ponta.">
|
||
<meta property="og:image" content="images/Logo.png">
|
||
<meta property="og:url" content="https://drop.erikraft.com">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="trustpilot-one-time-domain-verification-id" content="4c03c6cf-9bae-4e91-a212-f34ef645ad56"/>
|
||
<link rel="canonical" href="https://drop.erikraft.com">
|
||
<link rel="icon" href="images/Logo.png" type="image/png">
|
||
<title>ErikrafT Drop - A maneira mais fácil de transferir arquivos entre dispositivos</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdn.lordicon.com/lordicon.js"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet"/>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background-color: #f8fafc;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.gradient-bg {
|
||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
|
||
}
|
||
.feature-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
}
|
||
.dropzone {
|
||
border: 2px dashed #cbd5e1;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.dropzone.active {
|
||
border-color: #6366f1;
|
||
background-color: #eef2ff;
|
||
}
|
||
|
||
/* Header responsivo */
|
||
.header-container {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Desktop styles */
|
||
@media (min-width: 1024px) {
|
||
.header-container nav {
|
||
display: flex !important;
|
||
}
|
||
.mobile-menu {
|
||
display: none !important;
|
||
}
|
||
.mobile-only {
|
||
display: none !important;
|
||
}
|
||
.desktop-nav {
|
||
display: flex !important;
|
||
}
|
||
}
|
||
|
||
/* Mobile e Tablet styles */
|
||
@media (max-width: 1023px) {
|
||
.mobile-menu {
|
||
position: fixed;
|
||
top: 72px;
|
||
right: 0;
|
||
width: 100%;
|
||
background-color: white;
|
||
padding: 1rem;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||
z-index: 50;
|
||
display: none;
|
||
}
|
||
|
||
.mobile-menu.active {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.mobile-menu a {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
.mobile-menu .mobile-cta {
|
||
width: 100%;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.desktop-nav {
|
||
display: none !important;
|
||
}
|
||
|
||
.desktop-only {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* Estilo padrão (desktop) */
|
||
.iframe-container {
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding-top: 56.25%; /* 16:9 aspect ratio */
|
||
border-radius: 0.5rem;
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
}
|
||
.iframe-container iframe {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 0;
|
||
}
|
||
/* Estilo para telas menores que 600px (mobile) */
|
||
@media (max-width: 600px) {
|
||
body {
|
||
width: 400px;
|
||
height: 600px;
|
||
}
|
||
.iframe-container {
|
||
padding-top: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
.iframe-container iframe {
|
||
position: static;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Header/Navigation -->
|
||
<header class="bg-white shadow-sm sticky top-0 z-50 header-container">
|
||
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
||
<div class="flex items-center space-x-2">
|
||
<a href="https://biodrop.erikraft.com/" target="_blank" rel="noopener noreferrer">
|
||
<img src="images/Logo.png" alt="ErikrafT Drop" width="50" style="user-select: none;" oncontextmenu="return false" draggable="false">
|
||
</a>
|
||
<span class="text-xl font-bold text-gray-800 whitespace-nowrap">ErikrafT Drop</span>
|
||
</div>
|
||
<nav class="desktop-nav hidden lg:flex items-center space-x-8">
|
||
<a href="#features" class="text-gray-600 hover:text-indigo-600 font-medium">Recursos</a>
|
||
<a href="#how-it-works" class="text-gray-600 hover:text-indigo-600 font-medium">Como funciona</a>
|
||
<a href="#advantages" class="text-gray-600 hover:text-indigo-600 font-medium">Vantagens</a>
|
||
<a href="#self-host" class="text-gray-600 hover:text-indigo-600 font-medium">Auto-hospedagem</a>
|
||
<a href="https://drop.erikraft.com" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition-colors">
|
||
<i class="fa-solid fa-up-right-from-square fa-beat"></i> Experimente agora
|
||
</a>
|
||
</nav>
|
||
<button class="lg:hidden text-gray-600" id="mobile-menu-button">
|
||
<i class="fas fa-bars text-xl"></i>
|
||
</button>
|
||
</div>
|
||
<!-- Menu mobile -->
|
||
<div class="mobile-menu" id="mobile-menu">
|
||
<a href="#features" class="text-gray-600 hover:text-indigo-600 font-medium"><i class="fa-solid fa-compass"></i> Recursos</a>
|
||
<a href="#how-it-works" class="text-gray-600 hover:text-indigo-600 font-medium"><i class="fa-solid fa-question"></i> Como funciona</a>
|
||
<a href="#advantages" class="text-gray-600 hover:text-indigo-600 font-medium"><i class="fa-solid fa-trophy"></i> Vantagens</a>
|
||
<a href="#self-host" class="text-gray-600 hover:text-indigo-600 font-medium"><i class="fa-solid fa-server"></i> Auto-hospedagem</a>
|
||
<a href="https://drop.erikraft.com" class="mobile-cta bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition-colors text-center">
|
||
<i class="fa-solid fa-up-right-from-square fa-beat"></i> Experimente agora
|
||
</a>
|
||
</div>
|
||
</header>
|
||
<!-- Hero Section -->
|
||
<section class="gradient-bg text-white">
|
||
<div class="container mx-auto px-4 py-20 md:py-28">
|
||
<div class="max-w-4xl mx-auto text-center">
|
||
<h1 class="text-4xl md:text-5xl font-bold mb-6">Compartilhamento de arquivos <span class="text-indigo-200">direto no navegador</span> - Alternativa Segura ao Armazenamento em Nuvem</h1>
|
||
<p class="text-xl md:text-3xl mb-8 opacity-90">Envie arquivos entre dispositivos com segurança, sem instalação ou cadastro, utilizando tecnologia P2P com criptografia de ponta a ponta. Uma solução moderna para transferência de arquivos que supera os serviços tradicionais de nuvem.</p>
|
||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||
<a href="https://drop.erikraft.com" class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-md font-semibold text-lg transition-colors">
|
||
<i class="fas fa-bolt mr-2"></i> Começar agora
|
||
</a>
|
||
<a href="#how-it-works" class="bg-indigo-800 hover:bg-indigo-900 px-6 py-3 rounded-md font-semibold text-lg transition-colors">
|
||
<i class="fas fa-info-circle mr-2"></i> Saiba mais
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Demo Section -->
|
||
<section class="py-16 bg-white">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-2xl font-bold text-center text-gray-800 mb-12">Experimente agora mesmo</h2>
|
||
<div class="max-w-4xl mx-auto">
|
||
<div class="iframe-container">
|
||
<iframe src="https://drop.erikraft.com/"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Features Section -->
|
||
<section id="features" class="py-16 bg-gray-50">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Recursos poderosos para compartilhamento de arquivos</h2>
|
||
<p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Tudo que você precisa para compartilhar arquivos com segurança e privacidade, superando os serviços tradicionais de armazenamento em nuvem</p>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<!-- Feature 1 -->
|
||
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
|
||
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
||
<i class="fas fa-lock text-indigo-600 text-3xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Criptografia de ponta a ponta</h3>
|
||
<p class="text-gray-600">Seus arquivos são criptografados antes de sair do seu dispositivo e só podem ser descriptografados pelo destinatário.</p>
|
||
</div>
|
||
<!-- Feature 2 -->
|
||
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
|
||
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
||
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#5046e5">
|
||
<path d="M414.67-120q-14.34 0-23.84-9.5t-9.5-23.83v-85.34l-123-131.66q-9-9-13.66-20.84Q240-403 240-415.67V-606q0-24.67 15-43.33 15-18.67 38-22.34v93.34L86.67-784.67Q77-794.33 77-808q0-13.67 9.67-23.33Q96.33-841 110-841q13.67 0 23.33 9.67L832-132.67q9.67 9.67 9.67 23.34 0 13.66-9.67 23.33-9.67 9.67-23.33 9.67-13.67 0-23.34-9.67L604.67-266.67l-26 28v85.34q0 14.33-9.5 23.83-9.5 9.5-23.84 9.5H414.67ZM690-369.33 334.67-724.67v-82q0-14.33 9.5-23.83 9.5-9.5 23.83-9.5 14.33 0 23.83 9.5 9.5 9.5 9.5 23.83v134h157.34v-134q0-14.33 9.5-23.83 9.5-9.5 23.83-9.5 14.33 0 23.83 9.5 9.5 9.5 9.5 23.83v167.34L592-672.67h61.33q27.67 0 47.17 19.5T720-606v177.67q0 12.66-4.33 24.5Q711.33-392 702.33-383L690-369.33Z"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Sem servidores intermediários</h3>
|
||
<p class="text-gray-600">Conexão direta entre dispositivos usando WebRTC. Seus arquivos nunca passam por servidores de terceiros.</p>
|
||
</div>
|
||
<!-- Feature 3 -->
|
||
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
|
||
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
||
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#5046e5">
|
||
<path d="M80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q133.67 0 236.5 76.67 102.83 76.66 142.5 197 5 14.33-1.17 27.66-6.16 13.34-20.42 17.52-13.41 3.48-24.91-4.18-11.5-7.67-16.17-21-22.66-69.34-72.33-123-49.67-53.67-119.33-82V-774q0 34.33-23.84 59.5-23.83 25.17-58.16 25.17H438v84.66q0 16.72-12.83 28.03-12.84 11.31-29.84 11.31h-82V-480H380q14.17 0 23.75 9.58 9.58 9.59 9.58 23.75v90h-58l-200-200q-4.33 19.34-6.5 38.45-2.16 19.11-2.16 38.22 0 126.01 81.83 220.01Q310.33-166 435-150q13.12 1.79 21.72 12.06 8.61 10.27 8.61 24.27t-9.92 23.17q-9.93 9.17-23.74 7.17Q282-101.67 181-213.67T80-480Zm744.67 351.33L716-236.67q-21 14-45.33 22-24.34 8-50.38 8-72.34 0-122.98-50.58-50.64-50.57-50.64-122.83 0-72.25 50.58-122.75 50.57-50.5 122.83-50.5 72.25 0 122.75 50.64t50.5 122.98q0 26.04-8.33 50.38-8.33 24.33-21.67 46l108 108q9.67 9.66 10 23.33.34 13.67-9.33 23.33-9.67 9.67-23.67 9.67-14 0-23.66-9.67ZM619.91-273.33q44.76 0 75.76-30.91 31-30.91 31-75.67 0-44.76-30.91-75.76-30.91-31-75.67-31-44.76 0-75.76 30.91-31 30.91-31 75.67 0 44.76 30.91 75.76 30.91 31 75.67 31Z"/>
|
||
</svg>
|
||
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Funciona no navegador</h3>
|
||
<p class="text-gray-600">Sem instalação necessária. Basta acessar o site em qualquer navegador moderno e começar a compartilhar.</p>
|
||
</div>
|
||
<!-- Feature 4 -->
|
||
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
|
||
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
||
<lord-icon src="https://cdn.lordicon.com/xpgofwru.json" trigger="loop" delay="2000" colors="primary:#5046e5" style="width:40px;height:40px"></lord-icon>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Suporte a diversos arquivos</h3>
|
||
<p class="text-gray-600">Envie fotos, vídeos, documentos, arquivos compactados e qualquer outro tipo de arquivo sem restrições.</p>
|
||
</div>
|
||
<!-- Feature 5 -->
|
||
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
|
||
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
||
<i class="fas fa-mobile-alt text-indigo-600 text-3xl"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Multiplataforma</h3>
|
||
<p class="text-gray-600">Funciona em Windows, macOS, Linux, Android e iOS. Qualquer dispositivo com um navegador moderno.</p>
|
||
</div>
|
||
<!-- Feature 6 -->
|
||
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
|
||
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
||
<lord-icon src="https://cdn.lordicon.com/fowixcuo.json" trigger="loop" delay="2000" colors="primary:#5046e5" style="width:40px;height:40px"></lord-icon>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Interface arrastar e soltar</h3>
|
||
<p class="text-gray-600">Interface intuitiva que permite enviar arquivos simplesmente arrastando e soltando na janela do navegador.</p>
|
||
</div>
|
||
<!-- Feature 7 -->
|
||
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
|
||
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
||
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#5046e5">
|
||
<path d="M479.83-102.33q-11.83 0-23.5-4-11.66-4-20.66-12.67-49.67-45.33-99-97.33-49.34-52-88.5-107.84Q209-380 184.5-437.83 160-495.67 160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 56.33-24.5 114.17Q751-380 711.83-324.17q-39.16 55.84-88.5 107.84-49.33 52-99 97.33-9 8.67-20.83 12.67-11.83 4-23.67 4Zm.23-384.34q30.27 0 51.77-21.56 21.5-21.55 21.5-51.83 0-30.27-21.56-51.77-21.55-21.5-51.83-21.5-30.27 0-51.77 21.56-21.5 21.55-21.5 51.83 0 30.27 21.56 51.77 21.55 21.5 51.83 21.5Z"/>
|
||
</svg>
|
||
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Compartilhe com qualquer pessoa, em qualquer lugar</h3>
|
||
<p class="text-gray-600">Envie arquivos para outras cidades ou países, mesmo em redes Wi-Fi diferentes. Conecte dispositivos com emparelhamento seguro ou use salas públicas temporárias para grupos. Tudo direto no navegador, sem instalar nada — simples, rápido e criptografado de ponta a ponta.</p>
|
||
</div>
|
||
<!-- Feature 8 -->
|
||
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300">
|
||
<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
|
||
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#5046e5">
|
||
<path d="M354.67-120h-168q-27 0-46.84-19.83Q120-159.67 120-186.67v-168q45.33-3.33 78.33-33.16 33-29.84 33-74.17t-33-74.17q-33-29.83-78.33-33.16v-168q0-27 19.83-46.84Q159.67-804 186.67-804H358q7.33-40.67 36-68.33Q422.67-900 463.33-900q40.67 0 69.34 27.67 28.66 27.66 36 68.33h168.66q27 0 46.84 19.83Q804-764.33 804-737.33v168.66q40.67 7.34 67.33 37.34 26.67 30 26.67 70.66 0 40.67-26.67 68.34-26.66 27.66-67.33 35v170.66q0 27-19.83 46.84Q764.33-120 737.33-120h-168q-3.33-48.67-34.16-80-30.84-31.33-73.17-31.33T388.83-200q-30.83 31.33-34.16 80Z"/>
|
||
</svg>
|
||
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Extensão Disponível</h3>
|
||
<p class="text-gray-600"> Extensão Disponível no <a href="https://addons.mozilla.org/pt-BR/firefox/addon/erikraft-drop/" target="_blank" rel="noopener noreferrer" style="color: #2563eb;">Firefox Browser Add-ons</a>, <a href="https://marketplace.visualstudio.com/items?itemName=ErikrafT.erikraft-drop" target="_blank" rel="noopener noreferrer" style="color: #2563eb;">VS Code Marketplace</a> e no <a href="https://open-vsx.org/extension/ErikrafT/erikraft-drop" target="_blank" rel="noopener noreferrer" style="color: #2563eb;">Open VSX Registry</a> para acessar o site de forma fácil e rápida.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- How It Works Section -->
|
||
<section id="how-it-works" class="py-16 bg-white">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Como funciona</h2>
|
||
<p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">O ErikrafT Drop utiliza tecnologia WebRTC para criar conexões diretas e seguras entre navegadores</p>
|
||
<div class="max-w-4xl mx-auto">
|
||
<div class="grid md:grid-cols-4 gap-8">
|
||
<!-- Step 1 -->
|
||
<div class="text-center">
|
||
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span class="text-indigo-600 font-bold text-xl">1</span>
|
||
</div>
|
||
<h3 class="font-semibold text-gray-800 mb-2">Acesse o site</h3>
|
||
<p class="text-gray-600 text-sm">Ambas as partes acessam drop.erikraft.com em seus navegadores</p>
|
||
</div>
|
||
<!-- Step 2 -->
|
||
<div class="text-center">
|
||
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span class="text-indigo-600 font-bold text-xl">2</span>
|
||
</div>
|
||
<h3 class="font-semibold text-gray-800 mb-2">Conecte-se</h3>
|
||
<p class="text-gray-600 text-sm">Um código de conexão é gerado e compartilhado entre os dispositivos</p>
|
||
</div>
|
||
<!-- Step 3 -->
|
||
<div class="text-center">
|
||
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span class="text-indigo-600 font-bold text-xl">3</span>
|
||
</div>
|
||
<h3 class="font-semibold text-gray-800 mb-2">Envie arquivos</h3>
|
||
<p class="text-gray-600 text-sm">Arraste e solte os arquivos para enviá-los diretamente ao outro dispositivo</p>
|
||
</div>
|
||
<!-- Step 4 -->
|
||
<div class="text-center">
|
||
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span class="text-indigo-600 font-bold text-xl">4</span>
|
||
</div>
|
||
<h3 class="font-semibold text-gray-800 mb-2">Receba</h3>
|
||
<p class="text-gray-600 text-sm">O destinatário recebe os arquivos com segurança, prontos para download</p>
|
||
</div>
|
||
</div>
|
||
<div class="mt-16 bg-gray-50 p-8 rounded-xl">
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-4">Tecnologia por trás do ErikrafT Drop</h3>
|
||
<p class="text-gray-600 mb-4">
|
||
O ErikrafT Drop utiliza WebRTC (Web Real-Time Communication), uma tecnologia aberta que permite comunicação em tempo real diretamente entre navegadores. Isso significa que seus arquivos são transferidos diretamente entre os dispositivos envolvidos, sem passar por servidores intermediários.
|
||
</p>
|
||
<p class="text-gray-600">
|
||
Para estabelecer a conexão inicial, é usado um servidor de sinalização mínimo (que não tem acesso aos arquivos transferidos) apenas para ajudar os dispositivos a se encontrarem na rede. Uma vez conectados, toda comunicação ocorre diretamente entre eles com criptografia de ponta a ponta.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Advantages Section -->
|
||
<section id="advantages" class="py-16 bg-gray-50">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Por que escolher o ErikrafT Drop para transferência de arquivos?</h2>
|
||
<p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">A melhor alternativa para compartilhamento de arquivos, comparado a serviços de nuvem tradicionais</p>
|
||
<div class="max-w-5xl mx-auto">
|
||
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
||
<div class="grid md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-200">
|
||
<!-- ErikrafT Drop -->
|
||
<div class="p-8 text-center">
|
||
<div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<img src="images/Logo.png" alt="ErikrafT Drop" width="50" style="user-select: none; pointer-events: none;" oncontextmenu="return false" draggable="false">
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-4">ErikrafT Drop</h3>
|
||
<ul class="space-y-3 text-left">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
|
||
<span>Sem instalação necessária</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
|
||
<span>Sem cadastro ou login</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
|
||
<span>Criptografia de ponta a ponta</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
|
||
<span>Sem limites de tamanho de arquivo</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
|
||
<span>Funciona em qualquer dispositivo</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- AirDrop -->
|
||
<div class="p-8 text-center">
|
||
<div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<i class="fab fa-apple text-gray-600" style="font-size: 50px;"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-4">AirDrop</h3>
|
||
<ul class="space-y-3 text-left">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-times text-red-500 mt-1 mr-2"></i>
|
||
<span>Restrito a dispositivos Apple</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
|
||
<span>Fácil de usar</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-question text-yellow-500 mt-1 mr-2"></i>
|
||
<span>Criptografia não transparente</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
|
||
<span>Rápido na mesma rede</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-times text-red-500 mt-1 mr-2"></i>
|
||
<span>Não funciona na internet</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Serviços de nuvem -->
|
||
<div class="p-8 text-center">
|
||
<div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<i class="fas fa-cloud text-gray-600" style="font-size: 40px;"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-4">Serviços de Nuvem</h3>
|
||
<ul class="space-y-3 text-left">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-times text-red-500 mt-1 mr-2"></i>
|
||
<span>Arquivos armazenados em servidores</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-times text-red-500 mt-1 mr-2"></i>
|
||
<span>Requer cadastro/login</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-question text-yellow-500 mt-1 mr-2"></i>
|
||
<span>Criptografia variável</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-times text-red-500 mt-1 mr-2"></i>
|
||
<span>Limites de armazenamento</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
|
||
<span>Acesso de qualquer lugar</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Self Host Section -->
|
||
<section id="self-host" class="py-16 bg-white">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Hospede seu próprio ErikrafT Drop</h2>
|
||
<p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Código aberto e fácil de implementar em sua própria infraestrutura</p>
|
||
<div class="max-w-4xl mx-auto bg-gray-50 p-8 rounded-xl">
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-4">Por que hospedar você mesmo?</h3>
|
||
<ul class="space-y-3 text-gray-600">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-server text-indigo-500 mt-1 mr-3"></i>
|
||
<span>Controle total sobre seus dados e privacidade</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-shield-alt text-indigo-500 mt-1 mr-3"></i>
|
||
<span>Implementação interna para equipes ou organizações</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-tachometer-alt text-indigo-500 mt-1 mr-3"></i>
|
||
<span>Maior velocidade em redes locais</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fas fa-code text-indigo-500 mt-1 mr-3"></i>
|
||
<span>Personalização e extensão do código fonte</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-4">Como implementar</h3>
|
||
<div class="bg-gray-800 rounded-lg p-4 text-gray-100 font-mono text-sm overflow-x-auto">
|
||
<p class="mb-2"># Clone o repositório</p>
|
||
<p class="mb-2 text-green-400">git clone https://github.com/erikraft/Drop.git</p>
|
||
<p class="mb-2"># Instale as dependências</p>
|
||
<p class="mb-2 text-green-400">npm install</p>
|
||
<p class="mb-2"># Inicie o servidor</p>
|
||
<p class="text-green-400">npm start</p>
|
||
</div>
|
||
<a href="https://github.com/erikraft/drop" class="mt-4 inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
|
||
<i class="fab fa-github mr-2"></i> Ver no GitHub
|
||
</a>
|
||
<br/>
|
||
<a href="https://github.com/erikraft/Drop/blob/master/docs/host-your-own.md" class="mt-4 inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
|
||
<i class="fab fa-github mr-2"></i> Ver Tutorial
|
||
<br/>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Reviews Section -->
|
||
<section id="reviews" class="py-16 bg-gray-50">
|
||
<div class="container mx-auto px-4">
|
||
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Avaliações</h2>
|
||
<p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Veja o que os usuários estão dizendo sobre o ErikrafT Drop nas principais plataformas</p>
|
||
<div class="grid md:grid-cols-2 gap-8 max-w-3xl mx-auto">
|
||
<!-- Firefox Review -->
|
||
<a href="https://addons.mozilla.org/pt-BR/firefox/addon/erikraft-drop/reviews/2217252/" target="_blank" rel="noopener noreferrer" class="block bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
|
||
<div class="flex items-center mb-4">
|
||
<img src="images/NoProfilePhotoFirefox.png" alt="Usuário Firefox" class="w-16 h-16">
|
||
<div>
|
||
<div class="flex items-center mb-1">
|
||
<span class="font-semibold text-gray-800 text-lg mr-2">Vera Lucia</span>
|
||
<span class="flex text-yellow-400">
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
</span>
|
||
</div>
|
||
<span class="text-gray-500 text-sm">Firefox Add-ons</span>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 italic mb-2">"A extensão tem me ajudado em minhas tarefas, vale muito a pena usar, recomendo à todos."</p>
|
||
<span class="text-indigo-600 font-medium text-sm">Ver avaliação completa <i class="fa-solid fa-arrow-up-right-from-square"></i></span>
|
||
</a>
|
||
<!-- VS Code Review -->
|
||
<a href="https://marketplace.visualstudio.com/items?itemName=ErikrafT.erikraft-drop&ssr=false#review-details" target="_blank" rel="noopener noreferrer" class="block bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-300">
|
||
<div class="flex items-center mb-4">
|
||
<img src="images/NoProfilePhotoVScode.png" alt="Usuário VS Code" class="w-16 h-16">
|
||
<div>
|
||
<div class="flex items-center mb-1">
|
||
<span class="font-semibold text-gray-800 text-lg mr-2">Anonymous at School Learning Programming</span>
|
||
<span class="flex text-yellow-400">
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
</span>
|
||
</div>
|
||
<span class="text-gray-500 text-sm">VS Code Marketplace</span>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 italic mb-2">"Very Good, Easy to use, Helped me Transfer my Files to my other Device! 😃"</p>
|
||
<span class="text-indigo-600 font-medium text-sm">Ver avaliação completa <i class="fa-solid fa-arrow-up-right-from-square"></i></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- CTA Section -->
|
||
<section class="py-16 gradient-bg text-white">
|
||
<div class="container mx-auto px-4">
|
||
<div class="max-w-4xl mx-auto text-center">
|
||
<h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para compartilhar arquivos com segurança?</h2>
|
||
<p class="text-xl mb-8 opacity-90">Experimente agora mesmo o ErikrafT Drop - rápido, seguro e sem complicações.</p>
|
||
<a href="https://drop.erikraft.com" class="inline-block bg-white text-indigo-600 hover:bg-gray-100 px-8 py-4 rounded-md font-semibold text-lg transition-colors">
|
||
<i class="fa-solid fa-paper-plane"></i> Começar a compartilhar
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Footer -->
|
||
<footer class="bg-gray-900 text-gray-400 py-12">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid md:grid-cols-4 gap-8">
|
||
<div>
|
||
<div class="flex items-center space-x-2 mb-4">
|
||
<a href="https://biodrop.erikraft.com/" target="_blank" rel="noopener noreferrer">
|
||
<img src="images/Logo.png" alt="ErikrafT Drop" width="50" style="user-select: none;" oncontextmenu="return false" draggable="false">
|
||
</a>
|
||
<span class="text-xl font-bold text-white">ErikrafT Drop</span>
|
||
</div>
|
||
<p class="mb-4">A maneira mais fácil de transferir arquivos entre dispositivos de forma segura e direto no navegador.</p>
|
||
<div class="flex space-x-4">
|
||
<a href="https://github.com/erikraft/" class="text-gray-400 hover:text-white">
|
||
<i class="fab fa-github text-xl"></i>
|
||
</a>
|
||
<a href="https://www.instagram.com/erikraft.yt/" class="text-gray-400 hover:text-white">
|
||
<i class="fa-brands fa-instagram text-xl"></i>
|
||
</a>
|
||
<a href="https://discord.erikraft.com/" class="text-gray-400 hover:text-white">
|
||
<i class="fab fa-discord text-xl"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-white font-semibold text-lg mb-4">Links úteis</h3>
|
||
<ul class="space-y-2">
|
||
<li><a href="https://drop.erikraft.com" class="hover:text-white"><i class="fa-solid fa-link"></i> Aplicação web</a></li>
|
||
<li><a href="https://github.com/erikraft/App-Drop-Apk/raw/main/ErikrafT%20Drop.apk" class="hover:text-white"><i class="fa-brands fa-android"></i> APK</a></li>
|
||
<li><a href="https://addons.mozilla.org/pt-BR/firefox/addon/erikraft-drop/" class="hover:text-white"><i class="fa-solid fa-puzzle-piece"></i> Firefox Extension</a></li>
|
||
<li><a href="https://marketplace.visualstudio.com/items?itemName=ErikrafT.erikraft-drop" class="hover:text-white"><i class="fa-solid fa-puzzle-piece"></i> VS Code Extension</a></li>
|
||
<li><a href="https://open-vsx.org/extension/ErikrafT/erikraft-drop" class="hover:text-white"><i class="fa-solid fa-puzzle-piece"></i> Open VSX Registry</a></li>
|
||
<li><a href="https://ko-fi.com/erikraft" class="hover:text-white"><i class="fa-solid fa-sack-dollar"></i> Donate on Ko-fi.com</a></li>
|
||
<li><a href="https://github.com/erikraft/drop" class="hover:text-white"><i class="fa-solid fa-folder-open"></i> Código fonte</a></li>
|
||
<li><a href="https://github.com/erikraft/Drop/tree/master/docs" class="hover:text-white"><i class="fa-solid fa-book"></i> Documentação</a></li>
|
||
<li><a href="https://github.com/erikraft/Drop/blob/master/docs/faq.md" class="hover:text-white"><i class="fa-solid fa-circle-question"></i> FAQ</a></li>
|
||
<li><a href="https://www.trustpilot.com/evaluate/biodrop.erikraft.com" class="hover:text-white"><i class="fa-solid fa-star"></i> Avaliação Trustpilot</a></li>
|
||
<li><a href="https://addons.mozilla.org/pt-BR/firefox/addon/erikraft-drop/reviews/" class="hover:text-white"><i class="fa-solid fa-star"></i> Avaliação Firefox Extension</a></li>
|
||
<li><a href="https://marketplace.visualstudio.com/items?itemName=ErikrafT.erikraft-drop&ssr=false#review-details" class="hover:text-white"><i class="fa-solid fa-star"></i> Avaliação VS Code Extension</a></li>
|
||
<li><a href="https://open-vsx.org/extension/ErikrafT/erikraft-drop/reviews" class="hover:text-white"><i class="fa-solid fa-star"></i> Avaliação Open VSX Registry</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-white font-semibold text-lg mb-4">Legal</h3>
|
||
<ul class="space-y-2">
|
||
<li><a href="https://drop.erikraft.com/privacy-policy.html" class="hover:text-white"><i class="fa-solid fa-shield-halved"></i> Política de privacidade</a></li>
|
||
<li><a href="https://drop.erikraft.com/terms-of-use.html" class="hover:text-white"><i class="fa-solid fa-shield-halved"></i> Termos de uso</a></li>
|
||
<li><a href="https://github.com/erikraft/Drop/blob/master/LICENSE" class="hover:text-white"><i class="fa-solid fa-shield-halved"></i> Licença</a></li>
|
||
<li><a href="https://github.com/erikraft/Drop/blob/master/SECURITY.md" class="hover:text-white"><i class="fa-solid fa-shield-halved"></i> Segurança</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-white font-semibold text-lg mb-4">Contato</h3>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start">
|
||
<i class="fas fa-envelope mt-1 mr-2"></i>
|
||
<span><a href="mailto:erikraft43@gmail.com" class="hover:text-white">erikraft43@gmail.com</a></span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<i class="fab fa-github mt-1 mr-2"></i>
|
||
<span><a href="https://github.com/erikraft" class="hover:text-white">github.com/erikraft</a></span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-gray-800 mt-12 pt-8 text-center">
|
||
<p>© 2025 ErikrafT Drop. Todos os direitos reservados.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<script>
|
||
// Mobile menu toggle functionality
|
||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
|
||
mobileMenuButton.addEventListener('click', function() {
|
||
mobileMenu.classList.toggle('active');
|
||
// Alterna o ícone do botão
|
||
const icon = this.querySelector('i');
|
||
if (mobileMenu.classList.contains('active')) {
|
||
icon.classList.remove('fa-bars');
|
||
icon.classList.add('fa-times');
|
||
} else {
|
||
icon.classList.remove('fa-times');
|
||
icon.classList.add('fa-bars');
|
||
}
|
||
});
|
||
|
||
// Fecha o menu mobile ao clicar em um link
|
||
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
mobileMenu.classList.remove('active');
|
||
const icon = mobileMenuButton.querySelector('i');
|
||
icon.classList.remove('fa-times');
|
||
icon.classList.add('fa-bars');
|
||
});
|
||
});
|
||
|
||
// Smooth scrolling for anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
|
||
const targetId = this.getAttribute('href');
|
||
if (targetId === '#') return;
|
||
|
||
const targetElement = document.querySelector(targetId);
|
||
if (targetElement) {
|
||
targetElement.scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Add active class to navigation items when scrolling
|
||
const sections = document.querySelectorAll('section');
|
||
const navItems = document.querySelectorAll('nav a');
|
||
|
||
window.addEventListener('scroll', function() {
|
||
let current = '';
|
||
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionHeight = section.clientHeight;
|
||
|
||
if (pageYOffset >= (sectionTop - 300)) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
navItems.forEach(item => {
|
||
item.classList.remove('text-indigo-600');
|
||
if (item.getAttribute('href').includes(current)) {
|
||
item.classList.add('text-indigo-600');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|