|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Support - 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%); |
|
|
} |
|
|
.fade-in { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: all 0.6s ease-out; |
|
|
} |
|
|
.fade-in.visible { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
.help-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.help-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.accordion-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease; |
|
|
} |
|
|
.accordion-content.open { |
|
|
max-height: 500px; |
|
|
} |
|
|
</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-primary hover: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-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-20 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 font-bold text-primary leading-tight"> |
|
|
Need Help? We're Here for You. |
|
|
</h1> |
|
|
<p class="mt-6 text-xl text-gray-600"> |
|
|
Find answers to common questions or reach out to the Pixlare team for assistance. |
|
|
</p> |
|
|
<div class="mt-12 w-full max-w-md mx-auto"> |
|
|
<div class="bg-gradient-to-r from-secondary/20 to-accent/20 rounded-2xl p-8 backdrop-blur-sm"> |
|
|
<i data-feather="help-circle" class="w-16 h-16 text-secondary mx-auto"></i> |
|
|
</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">How can we help you today?</h2> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
<a href="#getting-started" class="help-card bg-white rounded-xl p-6 text-center cursor-pointer"> |
|
|
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="play" class="w-6 h-6 text-blue-600"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-semibold text-primary">Getting Started</h3> |
|
|
<p class="mt-2 text-sm text-gray-600">Learn how to use Pixlare for the first time</p> |
|
|
</a> |
|
|
|
|
|
<a href="#media-help" class="help-card bg-white rounded-xl p-6 text-center cursor-pointer"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="image" class="w-6 h-6 text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-semibold text-primary">Image & Video Help</h3> |
|
|
<p class="mt-2 text-sm text-gray-600">Fix issues with uploads, blurs, or output quality</p> |
|
|
</a> |
|
|
|
|
|
<a href="#privacy" class="help-card bg-white rounded-xl p-6 text-center cursor-pointer"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="shield" class="w-6 h-6 text-green-600"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-semibold text-primary">Privacy & Data</h3> |
|
|
<p class="mt-2 text-sm text-gray-600">Learn how Pixlare keeps your files private</p> |
|
|
</a> |
|
|
|
|
|
<a href="#contact" class="help-card bg-white rounded-xl p-6 text-center cursor-pointer"> |
|
|
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center mx-auto"> |
|
|
<i data-feather="mail" class="w-6 h-6 text-orange-600"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-semibold text-primary">Contact Support</h3> |
|
|
<p class="mt-2 text-sm text-gray-600">Get in touch with our team directly</p> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="faq" class="py-20"> |
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center fade-in"> |
|
|
<h2 class="text-3xl font-bold text-primary">Frequently Asked Questions</h2> |
|
|
<p class="mt-4 text-lg text-gray-600">Quick answers to common questions about Pixlare</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 space-y-4 fade-in"> |
|
|
|
|
|
<div class="bg-white rounded-xl p-6"> |
|
|
<button class="w-full text-left flex items-center justify-between text-lg font-semibold text-primary accordion-btn"> |
|
|
How do I blur faces in an image or video? |
|
|
<i data-feather="chevron-down" class="w-5 h-5 transform transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content mt-4"> |
|
|
<p class="text-gray-600">Upload your media in the Workspace, select the faces or objects to blur, and export your result instantly. Our AI automatically detects faces and objects for easy selection.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6"> |
|
|
<button class="w-full text-left flex items-center justify-between text-lg font-semibold text-primary accordion-btn"> |
|
|
Can I blur multiple faces at once? |
|
|
<i data-feather="chevron-down" class="w-5 h-5 transform transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content mt-4"> |
|
|
<p class="text-gray-600">Yes. Pixlare automatically detects all faces and lets you choose which ones to blur. You can select multiple faces simultaneously or process them individually.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6"> |
|
|
<button class="w-full text-left flex items-center justify-between text-lg font-semibold text-primary accordion-btn"> |
|
|
Is my data stored anywhere? |
|
|
<i data-feather="chevron-down" class="w-5 h-5 transform transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content mt-4"> |
|
|
<p class="text-gray-600">No. All processing happens securely in your browser, and your files are never saved or shared with our servers. Your privacy is our top priority.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6"> |
|
|
<button class="w-full text-left flex items-center justify-between text-lg font-semibold text-primary accordion-btn"> |
|
|
Why does the blur sometimes look incomplete? |
|
|
<i data-feather="chevron-down" class="w-5 h-5 transform transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content mt-4"> |
|
|
<p class="text-gray-600">Try adjusting detection sensitivity or re-uploading your media — lighting and motion can affect accuracy. You can also manually adjust blur areas for perfect results.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6"> |
|
|
<button class="w-full text-left flex items-center justify-between text-lg font-semibold text-primary accordion-btn"> |
|
|
Can I use Pixlare offline? |
|
|
<i data-feather="chevron-down" class="w-5 h-5 transform transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content mt-4"> |
|
|
<p class="text-gray-600">Currently, Pixlare works in-browser and requires an internet connection for AI processing. Offline mode may be available in future updates.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6"> |
|
|
<button class="w-full text-left flex items-center justify-between text-lg font-semibold text-primary accordion-btn"> |
|
|
How do I report a bug or suggest a feature? |
|
|
<i data-feather="chevron-down" class="w-5 h-5 transform transition-transform"></i> |
|
|
</button> |
|
|
<div class="accordion-content mt-4"> |
|
|
<p class="text-gray-600">You can contact our team via the form below or email us directly at [email protected]. We welcome all feedback and suggestions!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-white bg-opacity-80 backdrop-blur-sm"> |
|
|
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center fade-in"> |
|
|
<h2 class="text-3xl font-bold text-primary">Still need help?</h2> |
|
|
<p class="mt-4 text-lg text-gray-600">Reach out to our support team and we'll get back to you soon</p> |
|
|
</div> |
|
|
|
|
|
<form class="mt-12 space-y-6 fade-in"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label> |
|
|
<input type="text" id="name" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent" placeholder="Your name"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent" placeholder="[email protected]"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message</label> |
|
|
<textarea id="message" rows="5" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-secondary focus:border-transparent" placeholder="Describe your issue or question..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-secondary text-white font-medium py-3 px-8 rounded-lg hover:bg-accent transition-colors"> |
|
|
Send Message |
|
|
</button> |
|
|
|
|
|
<p class="text-center text-sm text-gray-500">We usually respond within 24 hours</p> |
|
|
</form> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16"> |
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center fade-in"> |
|
|
<h2 class="text-2xl font-bold text-primary">Helpful Resources</h2> |
|
|
<div class="mt-8 flex flex-wrap justify-center gap-6"> |
|
|
<a href="/how-it-works" class="text-secondary hover:text-accent transition-colors">How Pixlare Works</a> |
|
|
<a href="#" class="text-secondary hover:text-accent transition-colors">Privacy Policy</a> |
|
|
<a href="#" class="text-secondary hover:text-accent transition-colors">AI Technology Overview</a> |
|
|
<a href="#" class="text-secondary hover:text-accent transition-colors">Terms of Use</a> |
|
|
</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">Ready to protect your privacy?</h2> |
|
|
<a href="/workspace" class="mt-8 inline-block 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"> |
|
|
Try Pixlare Now |
|
|
<i data-feather="arrow-right" class="ml-2 w-5 h-5 inline"></i> |
|
|
</a> |
|
|
</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 text-center"> |
|
|
<p class="text-gray-300 text-sm">© 2025 Pixlare — Privacy, Perfected.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.accordion-btn').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const content = button.nextElementSibling; |
|
|
const icon = button.querySelector('i'); |
|
|
|
|
|
content.classList.toggle('open'); |
|
|
icon.classList.toggle('rotate-180'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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(); |
|
|
|
|
|
|
|
|
document.querySelector('form').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
alert('Thank you for your message! Our support team will get back to you within 24 hours.'); |
|
|
e.target.reset(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
