<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Agent - Finally, AI That Can Actually Read Your PDFs</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Inter -->
<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@400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
'brand-blue': '#3b82f6',
'brand-dark': '#0a0a0a',
'brand-gray': '#1a1a1a',
'brand-light-gray': '#27272a',
},
animation: {
'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
},
keyframes: {
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
}
}
}
}
</script>
<style>
/* Basic styling for a clean look */
body {
background-color: #0a0a0a;
color: #e5e7eb;
}
.section {
opacity: 0;
transition: opacity 1s, transform 1s;
}
.section.visible {
animation: fadeInUp 0.8s ease-out forwards;
}
.glass-card {
background: rgba(26, 26, 26, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gradient-text {
background: linear-gradient(90deg, #a5b4fc, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="antialiased">
<!-- Header -->
<header class="fixed top-0 left-0 w-full z-50 bg-brand-dark/80 backdrop-blur-lg border-b border-gray-800">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-brand-blue"><path d="M9 4H5C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V15M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V7.6875C15 8.33254 15.3526 8.92292 15.8995 9.29639L18.1005 11.0036C18.6474 11.3771 19 11.9675 19 12.6125V13M9 4V9L12 11L15 9V4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
<h1 class="text-xl font-bold text-gray-100">PDF Agent</h1>
</div>
<a href="#install" class="bg-brand-blue text-white font-semibold px-5 py-2 rounded-lg hover:bg-blue-500 transition-colors duration-300 hidden sm:block">
Get Started
</a>
</div>
</header>
<main class="pt-20">
<!-- Hero Section -->
<section id="hero" class="pt-16 pb-20 md:pt-24 md:pb-28">
<div class="container mx-auto px-6 text-center">
<h2 class="text-4xl md:text-6xl font-extrabold text-gray-50 leading-tight tracking-tighter">
Finally, AI that can actually <span class="gradient-text">read your PDFs</span>
</h2>
<p class="mt-6 max-w-2xl mx-auto text-lg md:text-xl text-gray-400">
Stop copying and pasting chunks of text. Stop getting "file too large" errors. Just drop your PDF link and ask your question—whether it's a 10-page contract or a 1,000-page manual.
</p>
<div class="mt-10 flex justify-center items-center gap-4">
<a href="#install" class="bg-brand-blue text-white font-semibold px-8 py-3 rounded-lg hover:bg-blue-500 transition-colors duration-300">
Download Now
</a>
<a href="https://github.com/vlad-ds/pdf-agent-mcp" target="_blank" rel="noopener noreferrer" class="bg-gray-800 text-gray-200 font-semibold px-8 py-3 rounded-lg hover:bg-gray-700 transition-colors duration-300 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
View on GitHub
</a>
</div>
</div>
</section>
<!-- The Problem Section -->
<section id="problem" class="py-20 bg-brand-gray">
<div class="container mx-auto px-6">
<div class="text-center max-w-3xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-gray-100">Sound Familiar?</h2>
<p class="mt-4 text-lg text-gray-400">
You've got a 300-page manual. You need one specific answer. But when you try to upload it to ChatGPT or Claude, you get an error. Or worse—it reads the first few pages and gives you the wrong answer.
</p>
</div>
<div class="mt-12 grid md:grid-cols-2 gap-8 items-center">
<div class="bg-red-900/20 border border-red-500/30 rounded-xl p-8 text-center">
<h3 class="text-2xl font-semibold text-red-300">The Old Way</h3>
<p class="mt-4 text-gray-400">Copy-paste page by page. Upload fails. Split into chunks. Lose context. Give up.</p>
<div class="mt-6 h-32 flex items-center justify-center bg-brand-light-gray rounded-lg text-red-400 font-mono text-sm">❌ "File size exceeds limit"</div>
</div>
<div class="bg-green-900/20 border border-green-500/30 rounded-xl p-8 text-center">
<h3 class="text-2xl font-semibold text-green-300">The Smart Way</h3>
<p class="mt-4 text-gray-400">Drop the link. Ask your question. Get the exact answer with page references.</p>
<div class="mt-6 h-32 flex items-center justify-center bg-brand-light-gray rounded-lg text-green-400 font-mono text-sm">✓ "Found it on page 247"</div>
</div>
</div>
</div>
</section>
<!-- What You Can Do Section -->
<section id="features" class="py-20">
<div class="container mx-auto px-6">
<div class="text-center max-w-2xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-gray-100">What You Can Actually Do Now</h2>
<p class="mt-4 text-lg text-gray-400">
Real examples from real users who were stuck before PDF Agent.
</p>
</div>
<div class="mt-16 grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-brand-light-gray p-6 rounded-xl border border-gray-700">
<h3 class="font-semibold text-lg text-gray-200">"My employee handbook is 400 pages"</h3>
<p class="mt-2 text-gray-400">Finally get instant answers about vacation policy, benefits, or that one obscure form.</p>
</div>
<div class="bg-brand-light-gray p-6 rounded-xl border border-gray-700">
<h3 class="font-semibold text-lg text-gray-200">"I have 12 quarterly reports"</h3>
<p class="mt-2 text-gray-400">Compare trends across all of them without manually creating a spreadsheet.</p>
</div>
<div class="bg-brand-light-gray p-6 rounded-xl border border-gray-700">
<h3 class="font-semibold text-lg text-gray-200">"This contract is 200 pages"</h3>
<p class="mt-2 text-gray-400">Find that liability clause on page 147 without reading every single page.</p>
</div>
<div class="bg-brand-light-gray p-6 rounded-xl border border-gray-700">
<h3 class="font-semibold text-lg text-gray-200">"My research papers are huge"</h3>
<p class="mt-2 text-gray-400">Extract methodology sections from 20 papers in minutes, not hours.</p>
</div>
</div>
</div>
</section>
<!-- Examples Section -->
<section id="examples" class="py-20 bg-brand-gray">
<div class="container mx-auto px-6">
<div class="text-center max-w-2xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-gray-100">Real Conversations, Real Results</h2>
<p class="mt-4 text-lg text-gray-400">
These aren't demos. These are actual questions people asked their PDFs today.
</p>
</div>
<div class="mt-12">
<div class="glass-card rounded-xl p-6 md:p-8 font-mono text-gray-300 text-sm md:text-base space-y-4">
<div class="border-b border-gray-700 pb-4">
<p class="text-green-400"><span class="font-semibold text-gray-500 mr-2">YOU:</span>What's our company's policy on working from home? I can't find it in this 400-page handbook.</p>
<p class="mt-2 text-blue-400"><span class="font-semibold text-gray-500 mr-2">AI:</span>Found it! The remote work policy starts on page 89. You can work from home 2 days per week after 90 days of employment. Manager approval required. The full policy details are in Section 4.3.2.</p>
</div>
<div class="border-b border-gray-700 pb-4">
<p class="text-green-400"><span class="font-semibold text-gray-500 mr-2">YOU:</span>Does this lease agreement allow subletting? It's 150 pages long and full of legal jargon.</p>
<p class="mt-2 text-blue-400"><span class="font-semibold text-gray-500 mr-2">AI:</span>No, subletting is prohibited. Found it in Section 12.4 (page 78): "Tenant shall not sublet the premises in whole or in part without prior written consent from Landlord, which may be withheld at Landlord's sole discretion."</p>
</div>
<div>
<p class="text-green-400"><span class="font-semibold text-gray-500 mr-2">YOU:</span>Compare the revenue growth between these 5 annual reports from 2019-2023.</p>
<p class="mt-2 text-blue-400"><span class="font-semibold text-gray-500 mr-2">AI:</span>Revenue grew from $2.1M (2019) to $8.7M (2023). Year-over-year growth: 2020: +15%, 2021: +42%, 2022: +38%, 2023: +51%. Strongest growth in Q4 each year, detailed breakdowns on pages 23-25 of each report.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Install Section -->
<section id="install" class="py-20">
<div class="container mx-auto px-6">
<div class="text-center max-w-2xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-gray-100">Start Using It in 2 Minutes</h2>
<p class="mt-4 text-lg text-gray-400">
No coding. No setup. Just install and start asking questions.
</p>
</div>
<div class="mt-12 max-w-4xl mx-auto grid md:grid-cols-2 gap-10">
<div>
<h3 class="text-xl font-semibold text-gray-200 mb-4">One-Time Setup (2 minutes)</h3>
<ol class="list-decimal list-inside space-y-4 text-gray-400">
<li>Get <a href="https://claude.ai/download" target="_blank" rel="noopener noreferrer" class="text-brand-blue hover:underline">Claude Desktop</a> (if you don't have it)</li>
<li>Download PDF Agent below</li>
<li>Double-click the .dxt file</li>
<li>Click "Install" when Claude asks</li>
</ol>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-200 mb-4">Then, Every Time</h3>
<ol class="list-decimal list-inside space-y-4 text-gray-400">
<li>Open your PDF anywhere (Google Drive, email, website)</li>
<li>Copy the URL</li>
<li>Paste it in Claude</li>
<li>Ask your question. That's it.</li>
</ol>
</div>
</div>
<div class="mt-16 text-center">
<a href="https://github.com/vlad-ds/pdf-agent-mcp/releases/latest" class="bg-brand-blue text-white font-semibold px-10 py-4 rounded-lg hover:bg-blue-500 transition-colors duration-300 text-lg">
Download PDF Agent MCP
</a>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="py-20 bg-brand-gray">
<div class="container mx-auto px-6">
<div class="text-center max-w-2xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-gray-100">How It's Different</h2>
<p class="mt-4 text-lg text-gray-400">
Instead of trying to eat the whole elephant, PDF Agent takes smart bites.
</p>
</div>
<div class="mt-16 grid lg:grid-cols-2 gap-8">
<!-- How It Works -->
<div class="glass-card rounded-xl p-8">
<h3 class="text-2xl font-bold text-gray-100 mb-6">Smart, Not Brute Force</h3>
<ul class="space-y-4 text-gray-300">
<li class="flex items-start"><span class="text-brand-blue mr-3 mt-1">✓</span><span><strong class="text-gray-100">Scans the map first:</strong> Checks table of contents, page count, document structure</span></li>
<li class="flex items-start"><span class="text-brand-blue mr-3 mt-1">✓</span><span><strong class="text-gray-100">Searches like you would:</strong> Finds keywords, jumps to relevant sections</span></li>
<li class="flex items-start"><span class="text-brand-blue mr-3 mt-1">✓</span><span><strong class="text-gray-100">Reads only what matters:</strong> Extracts specific pages, not the entire document</span></li>
<li class="flex items-start"><span class="text-brand-blue mr-3 mt-1">✓</span><span><strong class="text-gray-100">Understands visuals:</strong> Can analyze charts, diagrams, and images when needed</span></li>
<li class="flex items-start"><span class="text-brand-blue mr-3 mt-1">✓</span><span><strong class="text-gray-100">Your files stay private:</strong> Documents never leave your computer</span></li>
</ul>
</div>
<!-- What It Does Not Do -->
<div class="bg-red-900/20 border border-red-500/30 rounded-xl p-8">
<h3 class="text-2xl font-bold text-gray-100 mb-6">Why Other Solutions <span class="text-red-400">Fail</span></h3>
<ul class="space-y-4 text-gray-300">
<li class="flex items-start"><span class="text-red-400 mr-3 mt-1">✗</span><span><strong class="text-gray-100">The "read everything" approach:</strong> Most tools try to process the entire PDF, hitting size limits immediately</span></li>
<li class="flex items-start"><span class="text-red-400 mr-3 mt-1">✗</span><span><strong class="text-gray-100">Complex RAG setups:</strong> Require databases, embeddings, and technical knowledge just to ask a simple question</span></li>
<li class="flex items-start"><span class="text-red-400 mr-3 mt-1">✗</span><span><strong class="text-gray-100">Generic summarizers:</strong> Give you vague overviews when you need specific answers with page numbers</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Enterprise Section -->
<section id="enterprise" class="py-20">
<div class="container mx-auto px-6 text-center max-w-3xl">
<h2 class="text-3xl md:text-4xl font-bold text-gray-100">For Teams & Enterprises</h2>
<p class="mt-4 text-lg text-gray-400">
Need PDF Agent for your whole team? We can help with deployment, training, and custom features.
</p>
<div class="mt-8 grid sm:grid-cols-1 md:grid-cols-3 gap-6 text-left">
<div class="bg-brand-light-gray p-6 rounded-lg border border-gray-700/50"><strong class="text-gray-200">Multi-user Setup</strong></div>
<div class="bg-brand-light-gray p-6 rounded-lg border border-gray-700/50"><strong class="text-gray-200">Priority Support</strong></div>
<div class="bg-brand-light-gray p-6 rounded-lg border border-gray-700/50"><strong class="text-gray-200">Custom Features</strong></div>
</div>
<div class="mt-10">
<a href="mailto:vlad.datapro@gmail.com" class="text-brand-blue text-lg hover:underline">Contact for Enterprise Solutions »</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-gray-800 bg-brand-gray">
<div class="container mx-auto px-6 py-8 text-center text-gray-500">
<div class="flex justify-center items-center space-x-6">
<a href="https://www.linkedin.com/in/vlad-ds/" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors">LinkedIn</a>
<a href="https://github.com/vlad-ds/pdf-agent-mcp" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors">GitHub</a>
</div>
<p class="mt-6 text-sm">© 2025 PDF Agent. A free and open-source project.</p>
</div>
</footer>
<script>
// Simple Intersection Observer for fade-in animations
document.addEventListener("DOMContentLoaded", function() {
const sections = document.querySelectorAll('.section, section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, {
rootMargin: '0px',
threshold: 0.1
});
sections.forEach(section => {
observer.observe(section);
});
});
</script>
</body>
</html>
