Files
bentopdf/about.html
2025-12-14 14:35:26 +05:45

290 lines
16 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Bentopdf - Fast, Private, and Free PDF Tools</title>
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="apple-touch-icon" href="/images/favicon.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="alternate" hreflang="en" href="/en/about.html" />
<link rel="alternate" hreflang="de" href="/de/about.html" />
<link rel="alternate" hreflang="vi" href="/vi/about.html" />
<link rel="alternate" hreflang="x-default" href="/en/about.html" />
<link href="/src/css/styles.css" rel="stylesheet" />
</head>
<body class="antialiased bg-gray-900 text-gray-300">
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
<span class="text-white font-bold text-xl ml-2">
<a href="index.html">BentoPDF</a>
</span>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="nav-link" data-i18n="nav.home">Home</a>
<a href="./about.html" class="nav-link" data-i18n="nav.about">About</a>
<a href="./contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
<a href="./licensing.html" class="nav-link" data-i18n="nav.licensing">Licensing</a>
<a href="index.html#tools-header" class="nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
<!-- Mobile Hamburger Button -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Hamburger Icon -->
<svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Close Icon -->
<svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
<a href="index.html" class="mobile-nav-link" data-i18n="nav.home">Home</a>
<a href="./about.html" class="mobile-nav-link" data-i18n="nav.about">About</a>
<a href="./contact.html" class="mobile-nav-link" data-i18n="nav.contact">Contact</a>
<a href="./licensing.html" class="mobile-nav-link" data-i18n="nav.licensing">Licensing</a>
<a href="index.html#tools-header" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
</div>
</div>
</nav>
<div id="app" class="min-h-screen container mx-auto p-4 md:p-8">
<section id="about-hero" class="text-center py-16 md:py-24">
<h1 class="text-3xl md:text-6xl font-bold text-white mb-4">
<span data-i18n="about.hero.title">We believe PDF tools should be</span>
<span class="marker-slanted" data-i18n="about.hero.subtitle">fast, private, and free.</span>
</h1>
<p class="text-lg md:text-xl text-gray-400" data-i18n="about.hero.noCompromises">No compromises.</p>
</section>
<div class="section-divider"></div>
<section id="mission-section" class="py-16 max-w-4xl mx-auto">
<div class="text-center">
<i data-lucide="rocket" class="w-16 h-16 text-indigo-400 mx-auto mb-6"></i>
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4" data-i18n="about.mission.title">
Our Mission
</h2>
<p class="text-lg text-gray-400 leading-relaxed" data-i18n="about.mission.description">
To provide the most comprehensive PDF toolbox that respects your
privacy and never asks for payment. We believe essential document
tools should be accessible to everyone, everywhere, without
barriers.
</p>
</div>
</section>
<div class="bg-gray-800 rounded-xl p-8 md:p-12 my-16 border border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div class="text-center md:text-left">
<span class="text-indigo-400 font-bold uppercase" data-i18n="about.philosophy.label">Our Core
Philosophy</span>
<h2 class="text-3xl md:text-4xl font-bold text-white mt-2 mb-4" data-i18n="about.philosophy.title">
Privacy First. Always.
</h2>
<p class="text-gray-400 leading-relaxed" data-i18n="about.philosophy.description">
In an era where data is a commodity, we take a different approach.
All processing for Bentopdf tools happens locally in your browser.
This means your files never touch our servers, we never see your
documents, and we don't track what you do. Your documents remain
completely and unequivocally private. It's not just a feature;
it's our foundation.
</p>
</div>
<div class="flex justify-center">
<div class="relative w-48 h-48">
<div class="absolute inset-0 bg-indigo-500 rounded-full opacity-20 animate-pulse"></div>
<div class="absolute inset-4 bg-indigo-500 rounded-full opacity-30 animate-pulse delay-500"></div>
<i data-lucide="shield-check" class="w-48 h-48 text-indigo-400"></i>
</div>
</div>
</div>
</div>
<section id="why-Bentopdf" class="py-16">
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12">
<span data-i18n="about.whyBentopdf.title">Why</span> <span class="marker-slanted">Bentopdf?</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i data-lucide="zap" class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-xl font-bold text-white" data-i18n="about.whyBentopdf.speed.title">Built for Speed</h3>
<p class="text-gray-400 mt-2" data-i18n="about.whyBentopdf.speed.description">
No waiting for uploads or downloads to a server. By processing
files directly in your browser using modern web technologies
like WebAssembly, we offer unparalleled speed for all our tools.
</p>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i data-lucide="badge-dollar-sign" class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-xl font-bold text-white" data-i18n="about.whyBentopdf.free.title">Completely Free</h3>
<p class="text-gray-400 mt-2" data-i18n="about.whyBentopdf.free.description">
No trials, no subscriptions, no hidden fees, and no "premium"
features held hostage. We believe powerful PDF tools should be a
public utility, not a profit center.
</p>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i data-lucide="user-plus" class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-xl font-bold text-white" data-i18n="about.whyBentopdf.noAccount.title">No Account Required
</h3>
<p class="text-gray-400 mt-2" data-i18n="about.whyBentopdf.noAccount.description">
Start using any tool immediately. We don't need your email, a
password, or any personal information. Your workflow should be
frictionless and anonymous.
</p>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg flex items-start gap-4">
<i data-lucide="code-2" class="w-10 h-10 text-indigo-400 flex-shrink-0 mt-1"></i>
<div>
<h3 class="text-xl font-bold text-white" data-i18n="about.whyBentopdf.openSource.title">Open Source Spirit
</h3>
<p class="text-gray-400 mt-2" data-i18n="about.whyBentopdf.openSource.description">
Built with transparency in mind. We leverage incredible
open-source libraries like PDF-lib and PDF.js, and believe in
the community-driven effort to make powerful tools accessible to
everyone.
</p>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<section id="cta-section" class="text-center py-16">
<h2 class="text-3xl font-bold text-white mb-4" data-i18n="about.cta.title">
Ready to get started?
</h2>
<p class="text-lg text-gray-400 mb-8 max-w-2xl mx-auto" data-i18n="about.cta.description">
Join thousands of users who trust Bentopdf for their daily document
needs. Experience the difference that privacy and performance can
make.
</p>
<a href="index.html#tools-header"
class="inline-block px-8 py-3 rounded-full bg-gradient-to-b from-indigo-500 to-indigo-600 text-white font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-400 hover:shadow-xl hover:shadow-indigo-500/30 transition-all duration-200 transform hover:-translate-y-1"
data-i18n="about.cta.button">
Explore All Tools
</a>
</section>
</div>
<footer class="mt-16 border-t-2 border-gray-700 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
<div class="mb-8 md:mb-0">
<div class="flex items-center justify-center md:justify-start mb-4">
<img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
<span class="text-xl font-bold text-white">BentoPDF</span>
</div>
<p class="text-gray-400 text-sm" data-i18n="footer.copyright">
&copy; 2025 BentoPDF. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-2">
<span data-i18n="footer.version">Version</span> <span id="app-version"></span>
</p>
</div>
<div>
<h3 class="font-bold text-white mb-4" data-i18n="footer.company">Company</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="./about.html" class="hover:text-indigo-400" data-i18n="footer.aboutUs">About Us</a>
</li>
<li>
<a href="./faq.html" class="hover:text-indigo-400" data-i18n="footer.faqLink">FAQ</a>
</li>
<li>
<a href="./contact.html" class="hover:text-indigo-400" data-i18n="footer.contactUs">Contact Us</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4" data-i18n="footer.legal">Legal</h3>
<ul class="space-y-2 text-gray-400">
<li>
<a href="./licensing.html" class="hover:text-indigo-400" data-i18n="nav.licensing">Licensing</a>
</li>
<li>
<a href="./terms.html" class="hover:text-indigo-400" data-i18n="footer.termsAndConditions">Terms and
Conditions</a>
</li>
<li>
<a href="./privacy.html" class="hover:text-indigo-400" data-i18n="footer.privacyPolicy">Privacy Policy</a>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-white mb-4" data-i18n="footer.followUs">Follow Us</h3>
<div class="flex justify-center md:justify-start space-x-4">
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="GitHub">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
class="text-gray-400 hover:text-indigo-400" title="Discord">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
title="Instagram">
<i data-lucide="instagram"></i>
</a>
<a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
title="LinkedIn">
<i data-lucide="linkedin"></i>
</a>
<a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400" title="X (Twitter)">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
<script type="module" src="src/js/utils/lucide-init.ts"></script>
<script type="module" src="src/version.ts"></script>
<script type="module" src="src/js/main.ts"></script>
<script type="module" src="src/js/mobileMenu.ts"></script>
</body>
</html>