| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title data-i18n="meta.title">Paper - Advanced PDF Design Tool for React Developers</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link |
| rel="stylesheet" |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" |
| /> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: "#4f46e5", |
| secondary: "#818cf8", |
| dark: "#1e293b", |
| light: "#f8fafc", |
| }, |
| }, |
| }, |
| }; |
| </script> |
| <style> |
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"); |
| |
| body { |
| font-family: "Inter", sans-serif; |
| background-color: #f8fafc; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), |
| 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .feature-icon { |
| width: 60px; |
| height: 60px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 12px; |
| margin-bottom: 20px; |
| } |
| |
| .step-number { |
| position: absolute; |
| top: -15px; |
| left: -15px; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| color: white; |
| z-index: 10; |
| } |
| |
| .testimonial-card { |
| transition: all 0.3s ease; |
| } |
| |
| .testimonial-card:hover { |
| transform: scale(1.02); |
| } |
| |
| .pricing-card { |
| transition: all 0.3s ease; |
| } |
| |
| .pricing-card:hover { |
| transform: translateY(-10px); |
| } |
| |
| .code-block { |
| background-color: #1e293b; |
| border-radius: 8px; |
| padding: 20px; |
| font-family: monospace; |
| color: #e2e8f0; |
| overflow-x: auto; |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { |
| box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); |
| } |
| 70% { |
| box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); |
| } |
| 100% { |
| box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); |
| } |
| } |
| </style> |
| </head> |
| <body class="text-dark"> |
| |
| <nav class="bg-white py-4 px-6 shadow-sm"> |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center"> |
| <i class="fas fa-file-pdf text-white text-xl"></i> |
| </div> |
| <span class="text-2xl font-bold text-dark" data-i18n="nav.brand">Paper</span> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#features" class="text-gray-600 hover:text-primary font-medium" data-i18n="nav.features">Features</a> |
| <a href="#how-it-works" class="text-gray-600 hover:text-primary font-medium" data-i18n="nav.howItWorks">How It Works</a> |
| <a href="#pricing" class="text-gray-600 hover:text-primary font-medium" data-i18n="nav.pricing">Pricing</a> |
| <a href="#testimonials" class="text-gray-600 hover:text-primary font-medium" data-i18n="nav.testimonials">Testimonials</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="text-gray-600 hover:text-primary font-medium" data-i18n="nav.signIn">Sign In</button> |
| <button class="bg-primary hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300" data-i18n="nav.getStarted"> |
| Get Started |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="py-16 md:py-24 bg-light"> |
| <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6" data-i18n="hero.title"> |
| Create Beautiful PDFs with Your Existing React Components |
| </h1> |
| <p class="text-xl text-gray-600 mb-8" data-i18n="hero.subtitle"> |
| Paper is the advanced PDF design tool that lets React developers seamlessly convert their components into professional PDFs without changing their workflow. |
| </p> |
|
|
| <form name="hero-signup" method="POST" netlify class="w-full sm:flex sm:items-center gap-4"> |
| <input type="hidden" name="form-name" value="hero-signup" /> |
| <input |
| type="email" |
| name="email" |
| placeholder="" |
| data-i18n-placeholder="hero.emailPlaceholder" |
| class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" |
| required |
| /> |
| <button |
| type="submit" |
| class="bg-primary hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-lg transition duration-300 whitespace-nowrap mt-4 sm:mt-0" |
| data-i18n="hero.cta" |
| > |
| Get Early Access |
| </button> |
| </form> |
|
|
| <p class="text-sm text-gray-500 mt-4" data-i18n="hero.trialNote">Free 14‑day trial • No credit card required</p> |
| </div> |
|
|
| <div class="relative"> |
| <div class="bg-white rounded-2xl shadow-xl p-6 transform rotate-3"> |
| <div class="flex justify-between items-center mb-4"> |
| <div class="flex space-x-2"> |
| <div class="w-3 h-3 rounded-full bg-red-400"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-400"></div> |
| <div class="w-3 h-3 rounded-full bg-green-400"></div> |
| </div> |
| <div class="text-sm font-medium">PDF Preview</div> |
| <div></div> |
| </div> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex justify-between mb-4"> |
| <div class="font-bold text-lg">Invoice #INV-2023-001</div> |
| <div class="text-gray-500">April 15, 2023</div> |
| </div> |
| <div class="flex justify-between mb-6"> |
| <div> |
| <div class="font-semibold">Acme Corp</div> |
| <div class="text-gray-600">123 Business Ave</div> |
| <div class="text-gray-600">New York, NY 10001</div> |
| </div> |
| <div class="text-right"> |
| <div class="font-semibold">Paper Inc</div> |
| <div class="text-gray-600">456 Developer St</div> |
| <div class="text-gray-600">San Francisco, CA 94103</div> |
| </div> |
| </div> |
| <div class="mb-6"> |
| <table class="w-full"> |
| <thead> |
| <tr class="border-b"> |
| <th class="text-left py-2">Description</th> |
| <th class="text-right py-2">Amount</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td class="py-2">Website Design</td> |
| <td class="text-right py-2">$1,200.00</td> |
| </tr> |
| <tr> |
| <td class="py-2">Development</td> |
| <td class="text-right py-2">$2,500.00</td> |
| </tr> |
| <tr> |
| <td class="py-2">Consulting</td> |
| <td class="text-right py-2">$800.00</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="flex justify-end"> |
| <div class="text-right"> |
| <div class="text-gray-600">Subtotal</div> |
| <div class="text-xl font-bold">$4,500.00</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-secondary rounded-full opacity-20"></div> |
| <div class="absolute -top-6 -right-6 w-24 h-24 bg-primary rounded-full opacity-20"></div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4" data-i18n="features.title">Designed for React Developers</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="features.subtitle"> |
| Paper bridges the gap between your React components and professional PDF outputs with features built for developers. |
| </p> |
| </div> |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| <div class="card-hover bg-light rounded-2xl p-8"> |
| <div class="feature-icon bg-indigo-100 text-primary"> |
| <i class="fas fa-bolt text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3" data-i18n="features.livePreviewTitle">Live Preview</h3> |
| <p class="text-gray-600" data-i18n="features.livePreviewDesc">See your PDF changes instantly without leaving your development environment. No more guesswork.</p> |
| </div> |
| <div class="card-hover bg-light rounded-2xl p-8"> |
| <div class="feature-icon bg-indigo-100 text-primary"> |
| <i class="fas fa-plug text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3" data-i18n="features.integrationTitle">Seamless Integration</h3> |
| <p class="text-gray-600" data-i18n="features.integrationDesc">Leverage your existing React design libraries and workflows. Integrate Paper in minutes, not hours.</p> |
| </div> |
| <div class="card-hover bg-light rounded-2xl p-8"> |
| <div class="feature-icon bg-indigo-100 text-primary"> |
| <i class="fas fa-shield-alt text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3" data-i18n="features.securityTitle">Secure Logic Protection</h3> |
| <p class="text-gray-600" data-i18n="features.securityDesc">Complex pagination and conversion logic stays securely on our backend. Your IP is never exposed.</p> |
| </div> |
| <div class="card-hover bg-light rounded-2xl p-8"> |
| <div class="feature-icon bg-indigo-100 text-primary"> |
| <i class="fas fa-wallet text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3" data-i18n="features.pricingTitle">Pay‑as‑you‑go Pricing</h3> |
| <p class="text-gray-600" data-i18n="features.pricingDesc">Transparent, API‑driven pricing based on PDF outputs. Scale efficiently without unexpected costs.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="how-it-works" class="py-16 bg-light"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4" data-i18n="howItWorks.title">Simple Integration Process</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="howItWorks.subtitle"> |
| Get started with Paper in just three simple steps. Transform your React components into PDFs effortlessly. |
| </p> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="relative card-hover bg-white rounded-2xl p-8 shadow-sm"> |
| <div class="step-number gradient-bg">1</div> |
| <div class="text-center mb-6"> |
| <div class="w-16 h-16 rounded-full bg-indigo-100 text-primary flex items-center justify-center mx-auto"> |
| <i class="fas fa-code text-2xl"></i> |
| </div> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-3">Integrate Paper</h3> |
| <p class="text-gray-600 text-center">Install our npm package and import Paper components into your existing React application.</p> |
| </div> |
| <div class="relative card-hover bg-white rounded-2xl p-8 shadow-sm"> |
| <div class="step-number gradient-bg">2</div> |
| <div class="text-center mb-6"> |
| <div class="w-16 h-16 rounded-full bg-indigo-100 text-primary flex items-center justify-center mx-auto"> |
| <i class="fas fa-eye text-2xl"></i> |
| </div> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-3">Live Preview</h3> |
| <p class="text-gray-600 text-center">Develop your PDF in real‑time with our live preview feature. See changes instantly.</p> |
| </div> |
| <div class="relative card-hover bg-white rounded-2xl p-8 shadow-sm"> |
| <div class="step-number gradient-bg">3</div> |
| <div class="text-center mb-6"> |
| <div class="w-16 h-16 rounded-full bg-indigo-100 text-primary flex items-center justify-center mx-auto"> |
| <i class="fas fa-file-export text-2xl"></i> |
| </div> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-3">Export PDF</h3> |
| <p class="text-gray-600 text-center">Generate high‑quality PDFs with a single API call. Download or send directly to clients.</p> |
| </div> |
| </div> |
| <div class="mt-16 bg-white rounded-2xl shadow-sm p-8 max-w-4xl mx-auto"> |
| <h3 class="text-xl font-bold mb-4">Example Integration Code</h3> |
| <div class="code-block"> |
| <pre><code>// Install Paper |
| npm install @paper/pdf |
|
|
| // Import and use in your React component |
| import { Document, Chapter, Page } from '@paper/pdf'; |
|
|
| function FirstChapter() { |
| return ( |
| <Chapter> |
| <Page> |
| <h1>My PDF Document</h1> |
| <p>This content will be rendered as a PDF</p> |
| </Page> |
| </Chapter> |
| ); |
| } |
|
|
| function App() { |
| return ( |
| <div> |
| <Document> |
| <FirstChapter /> |
| </Document> |
| </div> |
| ); |
| }</code></pre> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gradient-to-r from-primary to-indigo-700 text-white"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Your Intellectual Property is Protected</h2> |
| <p class="text-xl mb-8 opacity-90"> |
| We understand that your business logic and design assets are valuable. That's why Paper handles all complex PDF processing on our secure backend servers. |
| </p> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-300 mt-1 mr-3"></i> |
| <span>Complex pagination logic stays on our servers</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-300 mt-1 mr-3"></i> |
| <span>Your React components never leave your environment</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-300 mt-1 mr-3"></i> |
| <span>Enterprise‑grade encryption for all data transfers</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-300 mt-1 mr-3"></i> |
| <span>Regular security audits and compliance certifications</span> |
| </li> |
| </ul> |
| </div> |
| <div class="flex justify-center"> |
| <div class="relative"> |
| <div class="w-64 h-64 rounded-full bg-indigo-500 opacity-20 absolute -top-6 -left-6"></div> |
| <div class="w-80 h-80 rounded-full bg-indigo-600 opacity-20 absolute -bottom-6 -right-6"></div> |
| <div class="relative bg-white bg-opacity-10 backdrop-blur-sm rounded-2xl p-8 border border-white border-opacity-20"> |
| <div class="flex justify-center mb-6"> |
| <div class="w-20 h-20 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> |
| <i class="fas fa-lock text-3xl"></i> |
| </div> |
| </div> |
| <h3 class="text-2xl font-bold text-center mb-4">End‑to‑End Security</h3> |
| <p class="text-center opacity-90"> |
| Your business logic and design assets remain completely private while we handle the complex PDF generation process securely. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="pricing" class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4" data-i18n="pricing.title">Transparent, Usage‑Based Pricing</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="pricing.subtitle"> |
| Pay only for what you use. No hidden fees or surprise bills. Scale efficiently as your needs grow. |
| </p> |
| </div> |
| <div class="grid md:grid-cols-5 gap-6 max-w-7xl mx-auto"> |
| <div class="pricing-card bg-light rounded-2xl p-6 border border-gray-200"> |
| <h3 class="text-xl font-bold mb-3" data-i18n="pricing.devTitle">Dev</h3> |
| <div class="mb-5"><span class="text-3xl font-bold" data-i18n="pricing.free">Free</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2 text-sm"></i> |
| <span data-i18n="pricing.devDesc">Up to 100 PDFs/month</span> |
| </li> |
| </ul> |
| <button class="w-full bg-white border border-gray-300 hover:border-primary text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-300 text-sm" data-i18n="pricing.ctaGetStarted">Get Started</button> |
| </div> |
| <div class="pricing-card bg-light rounded-2xl p-6 border border-gray-200"> |
| <h3 class="text-xl font-bold mb-3" data-i18n="pricing.starterTitle">Starter</h3> |
| <div class="mb-5"><span class="text-3xl font-bold">$99</span><span class="text-gray-600">/mo</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2 text-sm"></i> |
| <span data-i18n="pricing.starterDesc">Up to 500 PDFs/month</span> |
| </li> |
| <li class="text-xs text-gray-500 mt-2" data-i18n="pricing.overageStarter">Overage: $0.025/PDF</li> |
| </ul> |
| <button class="w-full bg-white border border-gray-300 hover:border-primary text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-300 text-sm" data-i18n="pricing.ctaTrial">Start Free Trial</button> |
| </div> |
| <div class="pricing-card bg-light rounded-2xl p-6 border border-gray-200"> |
| <h3 class="text-xl font-bold mb-3" data-i18n="pricing.growthTitle">Growth</h3> |
| <div class="mb-5"><span class="text-3xl font-bold">$199</span><span class="text-gray-600">/mo</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2 text-sm"></i> |
| <span data-i18n="pricing.growthDesc">Up to 1,000 PDFs/month</span> |
| </li> |
| <li class="text-xs text-gray-500 mt-2" data-i18n="pricing.overageGrowth">Overage: $0.015/PDF</li> |
| </ul> |
| <button class="w-full bg-white border border-gray-300 hover:border-primary text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-300 text-sm" data-i18n="pricing.ctaTrial">Start Free Trial</button> |
| </div> |
| <div class="pricing-card bg-light rounded-2xl p-6 border border-gray-200"> |
| <h3 class="text-xl font-bold mb-3" data-i18n="pricing.scaleTitle">Scale</h3> |
| <div class="mb-5"><span class="text-3xl font-bold">$399</span><span class="text-gray-600">/mo</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2 text-sm"></i> |
| <span data-i18n="pricing.scaleDesc">Up to 10,000 PDFs/month</span> |
| </li> |
| <li class="text-xs text-gray-500 mt-2" data-i18n="pricing.overageScale">Overage: $0.010/PDF</li> |
| </ul> |
| <button class="w-full bg-white border border-gray-300 hover:border-primary text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-300 text-sm" data-i18n="pricing.ctaTrial">Start Free Trial</button> |
| </div> |
| <div class="pricing-card bg-light rounded-2xl p-6 border border-gray-200"> |
| <h3 class="text-xl font-bold mb-3" data-i18n="pricing.enterpriseTitle">Enterprise</h3> |
| <div class="mb-5"><span class="text-3xl font-bold" data-i18n="pricing.custom">Custom</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2 text-sm"></i> |
| <span data-i18n="pricing.enterpriseDesc">100,000+ PDFs/month</span> |
| </li> |
| <li class="text-xs text-gray-500 mt-2" data-i18n="pricing.enterpriseOverage">≤ $0.008/PDF</li> |
| </ul> |
| <button class="w-full bg-white border border-gray-300 hover:border-primary text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-300 text-sm" data-i18n="pricing.ctaContact">Contact Sales</button> |
| </div> |
| </div> |
| <div class="mt-8 text-center"> |
| <p class="text-sm text-gray-500">Prices in USD. Renders reset monthly. Unlimited seats per workspace.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-16 bg-light"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4" data-i18n="testimonials.title">Trusted by Developers</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-i18n="testimonials.subtitle">Join developers who have transformed their PDF workflow with Paper.</p> |
| </div> |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="testimonial-card bg-white rounded-2xl p-8 shadow-sm"> |
| <div class="flex items-center mb-6"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex Johnson" /> |
| <div class="ml-4"> |
| <h4 class="font-bold">Alex Johnson</h4> |
| <p class="text-gray-600">Senior Frontend Engineer</p> |
| </div> |
| </div> |
| <p class="text-gray-700 italic mb-6"> |
| "Paper has completely transformed how we generate invoices and reports. We went from hours of manual work to just a few minutes with our existing components." |
| </p> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <div class="testimonial-card bg-white rounded-2xl p-8 shadow-sm"> |
| <div class="flex items-center mb-6"> |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Chen" /> |
| <div class="ml-4"> |
| <h4 class="font-bold">Sarah Chen</h4> |
| <p class="text-gray-600">CTO</p> |
| </div> |
| </div> |
| <p class="text-gray-700 italic mb-6"> |
| "The live preview feature alone has saved us countless development hours. Being able to see PDF changes instantly while coding is a game‑changer." |
| </p> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 gradient-bg"> |
| <div class="max-w-4xl mx-auto px-6 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6" data-i18n="cta.title"> |
| Ready to Transform Your PDF Workflow? |
| </h2> |
| <p class="text-xl text-indigo-100 mb-10 max-w-2xl mx-auto" data-i18n="cta.subtitle"> |
| Join thousands of React developers who are already creating beautiful, professional PDFs with Paper. |
| </p> |
|
|
| <div class="max-w-2xl mx-auto bg-white rounded-lg p-8 mb-8"> |
| <h3 class="text-2xl font-bold text-dark mb-2" data-i18n="cta.formTitle">Get Early Access</h3> |
| <p class="text-gray-600 mb-6" data-i18n="cta.formSubtitle">Be among the first to experience Paper when we launch.</p> |
| <form name="cta-signup" method="POST" netlify class="flex flex-col sm:flex-row gap-4"> |
| <input type="hidden" name="form-name" value="cta-signup" /> |
| <input |
| type="email" |
| name="email" |
| placeholder="" |
| data-i18n-placeholder="cta.emailPlaceholder" |
| class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" |
| required |
| /> |
| <button |
| type="submit" |
| class="bg-primary hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 whitespace-nowrap" |
| data-i18n="cta.cta" |
| > |
| Sign Up Now |
| </button> |
| </form> |
| </div> |
|
|
| <p class="mt-6 text-indigo-200" data-i18n="cta.trialNote">Free 14‑day trial • No credit card required</p> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-dark text-gray-300 py-12"> |
| <div class="max-w-7xl mx-auto px-6"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-6"> |
| <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center"> |
| <i class="fas fa-file-pdf text-white text-xl"></i> |
| </div> |
| <span class="text-2xl font-bold text-white">Paper</span> |
| </div> |
| <p class="mb-6"> |
| Advanced PDF design tool for React developers. Create beautiful PDFs with your existing components. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a> |
| </div> |
| </div> |
| <div> |
| <h4 class="text-white font-bold text-lg mb-6" data-i18n="footer.productTitle">Product</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.features">Features</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.pricing">Pricing</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.docs">Documentation</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.apiRef">API Reference</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.changelog">Changelog</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-white font-bold text-lg mb-6" data-i18n="footer.resourcesTitle">Resources</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.blog">Blog</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.tutorials">Tutorials</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.community">Community</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.support">Support</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.github">GitHub</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-white font-bold text-lg mb-6" data-i18n="footer.companyTitle">Company</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.about">About</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.careers">Careers</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.contact">Contact</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.legal">Legal</a></li> |
| <li><a href="#" class="hover:text-white transition" data-i18n="footer.privacy">Privacy Policy</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center"> |
| <p>© 2025 Paper Inc. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| <script> |
| const i18n = { |
| en: { |
| "meta.title": "Paper - Advanced PDF Design Tool for React Developers", |
| "nav.brand": "Paper", |
| "nav.features": "Features", |
| "nav.howItWorks": "How It Works", |
| "nav.pricing": "Pricing", |
| "nav.testimonials": "Testimonials", |
| "nav.signIn": "Sign In", |
| "nav.getStarted": "Get Started", |
| "hero.title": "Create Beautiful PDFs with Your Existing React Components", |
| "hero.subtitle": "Paper is the advanced PDF design tool that lets React developers seamlessly convert their components into professional PDFs without changing their workflow.", |
| "hero.emailPlaceholder": "Enter your email", |
| "hero.cta": "Get Early Access", |
| "hero.trialNote": "Free 14-day trial • No credit card required", |
| "features.title": "Designed for React Developers", |
| "features.subtitle": "Paper bridges the gap between your React components and professional PDF outputs with features built for developers.", |
| "features.livePreviewTitle": "Live Preview", |
| "features.livePreviewDesc": "See your PDF changes instantly without leaving your development environment. No more guesswork.", |
| "features.integrationTitle": "Seamless Integration", |
| "features.integrationDesc": "Leverage your existing React design libraries and workflows. Integrate Paper in minutes, not hours.", |
| "features.securityTitle": "Secure Logic Protection", |
| "features.securityDesc": "Complex pagination and conversion logic stays securely on our backend. Your IP is never exposed.", |
| "features.pricingTitle": "Pay-as-you-go Pricing", |
| "features.pricingDesc": "Transparent, API-driven pricing based on PDF outputs. Scale efficiently without unexpected costs.", |
| "howItWorks.title": "Simple Integration Process", |
| "howItWorks.subtitle": "Get started with Paper in just three simple steps. Transform your React components into PDFs effortlessly.", |
| "howItWorks.step1Title": "Integrate Paper", |
| "howItWorks.step1Desc": "Install our npm package and import Paper components into your existing React application.", |
| "howItWorks.step2Title": "Live Preview", |
| "howItWorks.step2Desc": "Develop your PDF in real-time with our live preview feature. See changes instantly.", |
| "howItWorks.step3Title": "Export PDF", |
| "howItWorks.step3Desc": "Generate high-quality PDFs with a single API call. Download or send directly to clients.", |
| "howItWorks.exampleTitle": "Example Integration Code", |
| "security.title": "Your Intellectual Property is Protected", |
| "security.subtitle": "We understand that your business logic and design assets are valuable. That's why Paper handles all complex PDF processing on our secure backend servers.", |
| "security.point1": "Complex pagination logic stays on our servers", |
| "security.point2": "Your React components never leave your environment", |
| "security.point3": "Enterprise-grade encryption for all data transfers", |
| "security.point4": "Regular security audits and compliance certifications", |
| "security.cardTitle": "End-to-End Security", |
| "security.cardSubtitle": "Your business logic and design assets remain completely private while we handle the complex PDF generation process securely.", |
| "pricing.title": "Transparent, Usage-Based Pricing", |
| "pricing.subtitle": "Pay only for what you use. No hidden fees or surprise bills. Scale efficiently as your needs grow.", |
| "pricing.devTitle": "Dev", |
| "pricing.free": "Free", |
| "pricing.devDesc": "Up to 100 PDFs/month", |
| "pricing.ctaGetStarted": "Get Started", |
| "pricing.starterTitle": "Starter", |
| "pricing.starterDesc": "Up to 500 PDFs/month", |
| "pricing.overageStarter": "Overage: $0.025/PDF", |
| "pricing.ctaTrial": "Start Free Trial", |
| "pricing.growthTitle": "Growth", |
| "pricing.growthDesc": "Up to 1,000 PDFs/month", |
| "pricing.overageGrowth": "Overage: $0.015/PDF", |
| "pricing.scaleTitle": "Scale", |
| "pricing.scaleDesc": "Up to 10,000 PDFs/month", |
| "pricing.overageScale": "Overage: $0.010/PDF", |
| "pricing.enterpriseTitle": "Enterprise", |
| "pricing.custom": "Custom", |
| "pricing.enterpriseDesc": "100,000+ PDFs/month", |
| "pricing.enterpriseOverage": "≤ $0.008/PDF", |
| "pricing.ctaContact": "Contact Sales", |
| "pricing.footnote": "Prices in USD. Renders reset monthly. Unlimited seats per workspace.", |
| "testimonials.title": "Trusted by Developers", |
| "testimonials.subtitle": "Join developers who have transformed their PDF workflow with Paper.", |
| "testimonials.alexRole": "Senior Frontend Engineer, TechCorp", |
| "testimonials.alexQuote": "Paper has completely transformed how we generate invoices and reports. We went from hours of manual work to just a few minutes with our existing components.", |
| "testimonials.sarahRole": "CTO, StartupXYZ", |
| "testimonials.sarahQuote": "The live preview feature alone has saved us countless development hours. Being able to see PDF changes instantly while coding is a game-changer.", |
| "testimonials.michaelRole": "Lead Developer, DesignStudio", |
| "testimonials.michaelQuote": "Security was our main concern, and Paper delivered. Our complex business logic stays protected while we get professional PDFs with minimal effort.", |
| "cta.title": "Ready to Transform Your PDF Workflow?", |
| "cta.subtitle": "Join thousands of React developers who are already creating beautiful, professional PDFs with Paper.", |
| "cta.formTitle": "Get Early Access", |
| "cta.formSubtitle": "Be among the first to experience Paper when we launch.", |
| "cta.emailPlaceholder": "Enter your email", |
| "cta.cta": "Sign Up Now", |
| "cta.trialNote": "Free 14-day trial • No credit card required", |
| "footer.brand": "Paper", |
| "footer.tagline": "Advanced PDF design tool for React developers. Create beautiful PDFs with your existing components.", |
| "footer.productTitle": "Product", |
| "footer.features": "Features", |
| "footer.pricing": "Pricing", |
| "footer.docs": "Documentation", |
| "footer.apiRef": "API Reference", |
| "footer.changelog": "Changelog", |
| "footer.resourcesTitle": "Resources", |
| "footer.blog": "Blog", |
| "footer.tutorials": "Tutorials", |
| "footer.community": "Community", |
| "footer.support": "Support", |
| "footer.github": "GitHub", |
| "footer.companyTitle": "Company", |
| "footer.about": "About", |
| "footer.careers": "Careers", |
| "footer.contact": "Contact", |
| "footer.legal": "Legal", |
| "footer.privacy": "Privacy Policy", |
| "footer.allRights": "All rights reserved." |
| } |
| }; |
| |
| window.lang = "en"; |
| const dict = i18n[window.lang] || {}; |
| function t(key) { return dict[key] || key; } |
| |
| |
| document.querySelectorAll("[data-i18n]").forEach(el => { |
| el.textContent = t(el.dataset.i18n); |
| }); |
| document.querySelectorAll("[data-i18n-placeholder]").forEach(el => { |
| el.placeholder = t(el.dataset.i18nPlaceholder); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mgolfi/paper" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
|
|
