<!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 | A calmer way to read your documents</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&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
// Zen, warm, minimalist palette
'brand-bg': '#F9F6F3', // A slightly warmer, creamier off-white
'brand-bg-alt': '#FFFFFF', // Clean white for contrast sections
'brand-text': '#5A5A5A', // Softer, warm gray for text
'brand-heading': '#3A3A3A', // Darker, but not black, for headings
'brand-primary': '#D98686', // Muted terracotta
'brand-secondary': '#7DA9D4',// Muted, dusty blue
'brand-subtle': '#EAE5E1', // A very subtle border color
},
}
}
}
</script>
<style>
/* Base styles for the cozy minimalist aesthetic */
body {
background-color: #F9F6F3;
color: #5A5A5A;
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Style for sections that will be animated */
.fade-in-section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
}
.soft-gradient-text {
background: linear-gradient(90deg, #D98686, #7DA9D4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.soft-shadow {
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.04);
}
.button-primary {
background-color: #D98686;
color: white;
font-weight: 600;
padding: 12px 32px;
border-radius: 8px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.button-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px 0 rgba(217, 134, 134, 0.25);
}
.button-secondary {
background-color: #FFFFFF;
color: #5A5A5A;
font-weight: 600;
padding: 12px 32px;
border-radius: 8px;
border: 1px solid #EAE5E1;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.button-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.06);
}
</style>
</head>
<body class="antialiased">
<!-- Header -->
<header class="fixed top-0 left-0 w-full z-50 bg-brand-bg/80 backdrop-blur-lg border-b border-brand-subtle">
<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-primary"><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-brand-heading">PDF Agent</h1>
</div>
<a href="#install" class="button-primary hidden sm:block !py-2 !px-5">
Get Started
</a>
</div>
</header>
<main>
<!-- Hero Section -->
<section id="hero" class="fade-in-section pt-24 pb-24 md:pt-32 md:pb-32">
<div class="container mx-auto px-6 text-center">
<h2 class="text-4xl md:text-6xl font-bold text-brand-heading leading-tight tracking-tight">
Finally, AI that can actually <br class="hidden md:block" /> <span class="soft-gradient-text">read your PDFs</span>
</h2>
<p class="mt-6 max-w-2xl mx-auto text-lg md:text-xl text-brand-text leading-relaxed">
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="button-primary">
Download Now
</a>
<a href="https://github.com/vlad-ds/pdf-agent-mcp" target="_blank" rel="noopener noreferrer" class="button-secondary 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" class="text-gray-500"><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="fade-in-section py-24 md:py-32 bg-brand-bg-alt">
<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-brand-heading">Sound Familiar?</h2>
<p class="mt-4 text-lg text-brand-text leading-relaxed">
You've got a 300-page manual. You need one specific answer. But when you try to upload it to your favorite AI, you get an error. Or worse—it reads the first few pages and gives you the wrong answer.
</p>
</div>
<div class="mt-16 grid md:grid-cols-2 gap-8 items-start">
<!-- The Old Way -->
<div class="bg-white rounded-xl p-8 border border-brand-subtle soft-shadow">
<h3 class="text-2xl font-semibold text-brand-heading">The Old Way</h3>
<p class="mt-4 text-brand-text leading-relaxed">Copy-paste page by page. Upload fails. Split into chunks. Lose context. Give up.</p>
<div class="mt-6 p-4 flex items-center justify-center bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">❌ "File size exceeds limit"</div>
</div>
<!-- The Smart Way -->
<div class="bg-white rounded-xl p-8 border border-brand-subtle soft-shadow">
<h3 class="text-2xl font-semibold text-brand-heading">The Smart Way</h3>
<p class="mt-4 text-brand-text leading-relaxed">Drop the link. Ask your question. Get the exact answer with page references.</p>
<div class="mt-6 p-4 flex items-center justify-center bg-green-50 border border-green-200 rounded-lg text-green-800 text-sm">✓ "Found it on page 247"</div>
</div>
</div>
</div>
</section>
<!-- What You Can Do Section -->
<section id="features" class="fade-in-section py-24 md:py-32">
<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-brand-heading">What You Can Actually Do Now</h2>
</div>
<div class="mt-16 grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-brand-bg-alt p-6 rounded-xl border border-brand-subtle">
<h3 class="font-semibold text-lg text-brand-heading">"My employee handbook is 400 pages"</h3>
<p class="mt-2 text-brand-text">Finally get instant answers about vacation policy, benefits, or that one obscure form.</p>
</div>
<div class="bg-brand-bg-alt p-6 rounded-xl border border-brand-subtle">
<h3 class="font-semibold text-lg text-brand-heading">"I have 12 quarterly reports"</h3>
<p class="mt-2 text-brand-text">Compare trends across all of them without manually creating a spreadsheet.</p>
</div>
<div class="bg-brand-bg-alt p-6 rounded-xl border border-brand-subtle">
<h3 class="font-semibold text-lg text-brand-heading">"This contract is 200 pages"</h3>
<p class="mt-2 text-brand-text">Find that liability clause on page 147 without reading every single page.</p>
</div>
<div class="bg-brand-bg-alt p-6 rounded-xl border border-brand-subtle">
<h3 class="font-semibold text-lg text-brand-heading">"My research papers are huge"</h3>
<p class="mt-2 text-brand-text">Extract methodology sections from 20 papers in minutes, not hours.</p>
</div>
</div>
</div>
</section>
<!-- Examples Section -->
<section id="examples" class="fade-in-section py-24 md:py-32 bg-brand-bg-alt">
<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-brand-heading">Real Conversations, Real Results</h2>
<p class="mt-4 text-lg text-brand-text leading-relaxed">
These aren't demos. These are actual questions people asked their PDFs today.
</p>
</div>
<div class="mt-16 max-w-4xl mx-auto bg-white rounded-xl border border-brand-subtle p-6 md:p-8 space-y-6 font-mono text-sm md:text-base soft-shadow">
<div>
<p class="text-gray-700"><span class="font-semibold 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-3 text-brand-secondary"><span class="font-semibold mr-2 text-gray-500">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-t border-brand-subtle pt-6">
<p class="text-gray-700"><span class="font-semibold mr-2">YOU:</span>Does this lease agreement allow subletting? It's 150 pages long and full of legal jargon.</p>
<p class="mt-3 text-brand-secondary"><span class="font-semibold mr-2 text-gray-500">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 class="border-t border-brand-subtle pt-6">
<p class="text-gray-700"><span class="font-semibold mr-2">YOU:</span>Compare the revenue growth between these 5 annual reports from 2019-2023.</p>
<p class="mt-3 text-brand-secondary"><span class="font-semibold mr-2 text-gray-500">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>
</section>
<!-- Install Section -->
<section id="install" class="fade-in-section py-24 md:py-32">
<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-brand-heading">Start Using It in 2 Minutes</h2>
<p class="mt-4 text-lg text-brand-text leading-relaxed">
No coding. No setup. Just install and start asking questions.
</p>
</div>
<div class="mt-16 max-w-4xl mx-auto grid md:grid-cols-2 gap-10 text-brand-text">
<div>
<h3 class="text-xl font-semibold text-brand-heading mb-4">One-Time Setup (2 minutes)</h3>
<ol class="list-decimal list-inside space-y-4">
<li>Get <a href="https://claude.ai/download" target="_blank" rel="noopener noreferrer" class="text-brand-primary hover:underline font-semibold">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-brand-heading mb-4">Then, Every Time</h3>
<ol class="list-decimal list-inside space-y-4">
<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="button-primary text-lg">
Download PDF Agent MCP
</a>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="fade-in-section py-24 md:py-32 bg-brand-bg-alt">
<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-brand-heading">How It's Different</h2>
<p class="mt-4 text-lg text-brand-text leading-relaxed">
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="bg-white rounded-xl p-8 border border-brand-subtle soft-shadow">
<h3 class="text-2xl font-bold text-brand-heading mb-6">Smart, Not Brute Force</h3>
<ul class="space-y-4 text-brand-text">
<li class="flex items-start"><span class="text-brand-secondary mr-3 mt-1 font-bold">✓</span><span><strong class="text-brand-heading">Scans the map first:</strong> Checks table of contents, page count, document structure</span></li>
<li class="flex items-start"><span class="text-brand-secondary mr-3 mt-1 font-bold">✓</span><span><strong class="text-brand-heading">Searches like you would:</strong> Finds keywords, jumps to relevant sections</span></li>
<li class="flex items-start"><span class="text-brand-secondary mr-3 mt-1 font-bold">✓</span><span><strong class="text-brand-heading">Reads only what matters:</strong> Extracts specific pages, not the entire document</span></li>
<li class="flex items-start"><span class="text-brand-secondary mr-3 mt-1 font-bold">✓</span><span><strong class="text-brand-heading">Understands visuals:</strong> Can analyze charts, diagrams, and images when needed</span></li>
<li class="flex items-start"><span class="text-brand-secondary mr-3 mt-1 font-bold">✓</span><span><strong class="text-brand-heading">Your files stay private:</strong> Documents never leave your computer</span></li>
</ul>
</div>
<!-- Why Other Solutions Fail -->
<div class="bg-white rounded-xl p-8 border border-brand-subtle soft-shadow">
<h3 class="text-2xl font-bold text-brand-heading mb-6">Why Other Solutions <span class="text-red-500">Fail</span></h3>
<ul class="space-y-4 text-brand-text">
<li class="flex items-start"><span class="text-red-500 mr-3 mt-1 font-bold">✗</span><span><strong class="text-brand-heading">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-500 mr-3 mt-1 font-bold">✗</span><span><strong class="text-brand-heading">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-500 mr-3 mt-1 font-bold">✗</span><span><strong class="text-brand-heading">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="fade-in-section py-24 md:py-32">
<div class="container mx-auto px-6 text-center max-w-3xl">
<h2 class="text-3xl md:text-4xl font-bold text-brand-heading">For Teams & Enterprises</h2>
<p class="mt-4 text-lg text-brand-text leading-relaxed">
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-bg-alt p-6 rounded-lg border border-brand-subtle"><strong class="text-brand-heading">Multi-user Setup</strong></div>
<div class="bg-brand-bg-alt p-6 rounded-lg border border-brand-subtle"><strong class="text-brand-heading">Priority Support</strong></div>
<div class="bg-brand-bg-alt p-6 rounded-lg border border-brand-subtle"><strong class="text-brand-heading">Custom Features</strong></div>
</div>
<div class="mt-10">
<a href="mailto:vlad.datapro@gmail.com" class="text-brand-primary text-lg hover:underline font-semibold">Contact for Enterprise Solutions »</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-brand-subtle bg-brand-bg-alt">
<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-brand-text hover:text-brand-primary transition-colors">LinkedIn</a>
<a href="https://github.com/vlad-ds/pdf-agent-mcp" target="_blank" rel="noopener noreferrer" class="text-brand-text hover:text-brand-primary transition-colors">GitHub</a>
</div>
<p class="mt-6 text-sm text-gray-400">© 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('.fade-in-section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
}, {
rootMargin: '0px',
threshold: 0.1 // Triggers when 10% of the element is visible
});
sections.forEach(section => {
observer.observe(section);
});
});
</script>
</body>
</html>
