|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>How It Works - Pixlare AI</title> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
}, |
|
|
colors: { |
|
|
primary: '#313233', |
|
|
secondary: '#6366F1', |
|
|
accent: '#8B5CF6', |
|
|
light: '#F8FAFC', |
|
|
dark: '#1F2937' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 50%, #CBD5E1 100%); |
|
|
} |
|
|
.step-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.step-card:hover { |
|
|
transform: translateY(-8px); |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
.fade-in { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: all 0.6s ease-out; |
|
|
} |
|
|
.fade-in.visible { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
.process-flow { |
|
|
position: relative; |
|
|
} |
|
|
.process-flow::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, #6366F1, #8B5CF6); |
|
|
z-index: 1; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.process-flow::before { |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans gradient-bg min-h-screen"> |
|
|
|
|
|
<nav class="bg-white bg-opacity-90 backdrop-blur-sm border-b border-gray-200 fixed w-full z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<a href="/" class="text-primary text-xl font-bold">Pixlare</a> |
|
|
<span class="ml-1 bg-secondary text-white text-xs px-2 py-1 rounded-full">AI</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="/" class="text-primary hover:text-secondary px-3 py-2 rounded-md text-sm font-medium">Home</a> |
|
|
<a href="/workspace" class="text-primary hover:text-secondary px-3 py-2 rounded-md text-sm font-medium">Workspace</a> |
|
|
<a href="/how-it-works" class="text-secondary px-3 py-2 rounded-md text-sm font-medium">How It Works</a> |
|
|
<a href="/about" class="text-primary hover:text-secondary px-3 py-2 rounded-md text-sm font-medium">About</a> |
|
|
<a href="/support" class="text-primary hover:text-secondary px-3 py-2 rounded-md text-sm font-medium">Support</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<a href="/workspace" class="bg-secondary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-accent transition-colors">Launch Tool</a> |
|
|
<div class="md:hidden ml-4"> |
|
|
<button type="button" class="text-primary"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="pt-32 pb-16 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-4xl mx-auto text-center fade-in"> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-primary leading-tight"> |
|
|
How Pixlare Works |
|
|
</h1> |
|
|
<p class="mt-6 text-xl text-gray-600"> |
|
|
From upload to AI blur in seconds. Here's what happens behind the pixels. |
|
|
</p> |
|
|
<p class="mt-4 text-lg text-gray-500"> |
|
|
Simple, Fast, Private — AI privacy made simple. |
|
|
</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="process-flow relative"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10"> |
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 text-center step-card fade-in"> |
|
|
<div class="w-20 h-20 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="upload" class="w-10 h-10 text-blue-600"></i> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto text-sm font-bold">1</div> |
|
|
<h3 class="mt-4 text-xl font-semibold text-primary">Upload Your File</h3> |
|
|
<p class="mt-3 text-gray-600">Upload an image or video — Pixlare handles all file types securely.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 text-center step-card fade-in"> |
|
|
<div class="w-20 h-20 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="cpu" class="w-10 h-10 text-purple-600"></i> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<div class="w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center mx-auto text-sm font-bold">2</div> |
|
|
<h3 class="mt-4 text-xl font-semibold text-primary">AI Detects Faces & Objects</h3> |
|
|
<p class="mt-3 text-gray-600">Our YOLO-based AI automatically detects all visible faces and objects.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 text-center step-card fade-in"> |
|
|
<div class="w-20 h-20 bg-green-100 rounded-2xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="edit" class="w-10 h-10 text-green-600"></i> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<div class="w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center mx-auto text-sm font-bold">3</div> |
|
|
<h3 class="mt-4 text-xl font-semibold text-primary">Choose What to Blur</h3> |
|
|
<p class="mt-3 text-gray-600">Manually select areas or let AI auto-blur — you're in full control.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 text-center step-card fade-in"> |
|
|
<div class="w-20 h-20 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="download" class="w-10 h-10 text-orange-600"></i> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<div class="w-8 h-8 bg-orange-600 text-white rounded-full flex items-center justify-center mx-auto text-sm font-bold">4</div> |
|
|
<h3 class="mt-4 text-xl font-semibold text-primary">Download Instantly</h3> |
|
|
<p class="mt-3 text-gray-600">Your processed result is ready in seconds — no data stored, ever.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white bg-opacity-80 backdrop-blur-sm"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center fade-in"> |
|
|
<h2 class="text-3xl font-bold text-primary">See the Process in Action</h2> |
|
|
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">From upload to blur — in just 4 steps</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-12 items-center fade-in"> |
|
|
<div class="relative"> |
|
|
<div class="bg-gray-100 rounded-2xl p-6"> |
|
|
<img src="http://static.photos/people/640x360/10" alt="Process demonstration" class="w-full h-auto rounded-xl shadow-lg"> |
|
|
<div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-lg"> |
|
|
<i data-feather="play" class="w-6 h-6 text-secondary"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start space-x-4"> |
|
|
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="upload" class="w-6 h-6 text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-primary">Upload & Process</h3> |
|
|
<p class="mt-1 text-gray-600">Drag and drop your media file — our AI starts processing immediately.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start space-x-4"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="eye" class="w-6 h-6 text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-primary">Real-time Preview</h3> |
|
|
<p class="mt-1 text-gray-600">Watch as AI detects and highlights faces and objects in real-time.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start space-x-4"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="settings" class="w-6 h-6 text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-primary">Customize & Refine</h3> |
|
|
<p class="mt-1 text-gray-600">Adjust blur strength and select specific areas for precision control.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center fade-in"> |
|
|
<h2 class="text-3xl font-bold text-primary">Why Pixlare is Different</h2> |
|
|
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">Behind every pixel, Pixlare works for you</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white rounded-2xl p-8 text-center step-card fade-in"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="cpu" class="w-8 h-8 text-blue-600"></i> |
|
|
</div> |
|
|
<h3 class="mt-6 text-xl font-semibold text-primary">Smart Detection</h3> |
|
|
<p class="mt-3 text-gray-600">Powered by advanced YOLO segmentation models for precise detection.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 text-center step-card fade-in"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="zap" class="w-8 h-8 text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="mt-6 text-xl font-semibold text-primary">Lightning Fast</h3> |
|
|
<p class="mt-3 text-gray-600">Process videos and photos in seconds with optimized AI algorithms.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 text-center step-card fade-in"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="shield" class="w-8 h-8 text-green-600"></i> |
|
|
</div> |
|
|
<h3 class="mt-6 text-xl font-semibold text-primary">Privacy First</h3> |
|
|
<p class="mt-3 text-gray-600">No files are saved or shared. Your data stays on your device.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-secondary"> |
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center fade-in"> |
|
|
<h2 class="text-3xl font-bold text-white">Now that you know how Pixlare works, try it yourself</h2> |
|
|
<p class="mt-4 text-lg text-blue-100">Experience the power of AI-powered privacy protection</p> |
|
|
<div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center"> |
|
|
<a href="/workspace" class="bg-white text-secondary font-medium py-4 px-8 rounded-lg shadow-md transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg flex items-center justify-center"> |
|
|
Launch Pixlare Studio |
|
|
<i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="border border-white text-white font-medium py-4 px-8 rounded-lg transition-all duration-300 hover:bg-white hover:text-secondary"> |
|
|
Learn more about our AI technology |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-primary text-white py-8"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="text-center md:text-left"> |
|
|
<p class="text-gray-300 text-sm">Made with ❤️ by Pixlare | © 2025 All rights reserved.</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 flex space-x-6"> |
|
|
<a href="/" class="text-gray-300 hover:text-white text-sm">Home</a> |
|
|
<a href="/workspace" class="text-gray-300 hover:text-white text-sm">Workspace</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white text-sm">Contact</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white text-sm">Support</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const fadeElements = document.querySelectorAll('.fade-in'); |
|
|
|
|
|
function checkFade() { |
|
|
fadeElements.forEach(element => { |
|
|
const elementTop = element.getBoundingClientRect().top; |
|
|
const elementVisible = 150; |
|
|
|
|
|
if (elementTop < window.innerHeight - elementVisible) { |
|
|
element.classList.add('visible'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
window.addEventListener('scroll', checkFade); |
|
|
window.addEventListener('resize', checkFade); |
|
|
checkFade(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
