Add onboarding flow using Reactour (#4635)

# Description of Changes
Add onboarding flow

frontend/scripts/sample-pdf/generate.mjs

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+
+/**
+ * Stirling PDF Sample Document Generator
+ *
+ * This script uses Puppeteer to generate a sample PDF from a HTML template.
+ * The output is used in the onboarding tour and as a demo document
+ * for users to experiment with Stirling PDF's features.
+ */
+
+import puppeteer from 'puppeteer';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { existsSync, mkdirSync, statSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const TEMPLATE_PATH = join(__dirname, 'template.html');
+const OUTPUT_DIR = join(__dirname, '../../public/samples');
+const OUTPUT_PATH = join(OUTPUT_DIR, 'Sample.pdf');
+
+async function generatePDF() {
+  console.log('🚀 Starting Stirling PDF sample document generation...\n');
+
+  // Ensure output directory exists
+  if (!existsSync(OUTPUT_DIR)) {
+    mkdirSync(OUTPUT_DIR, { recursive: true });
+    console.log(`✅ Created output directory: ${OUTPUT_DIR}`);
+  }
+
+  // Check if template exists
+  if (!existsSync(TEMPLATE_PATH)) {
+    console.error(`❌ Template file not found: ${TEMPLATE_PATH}`);
+    process.exit(1);
+  }
+
+  console.log(`📄 Reading template: ${TEMPLATE_PATH}`);
+
+  let browser;
+  try {
+    // Launch Puppeteer
+    console.log('🌐 Launching browser...');
+    browser = await puppeteer.launch({
+      headless: 'new',
+      args: ['--no-sandbox', '--disable-setuid-sandbox']
+    });
+
+    const page = await browser.newPage();
+
+    // Set viewport to match A4 proportions
+    await page.setViewport({
+      width: 794,  // A4 width in pixels at 96 DPI
+      height: 1123, // A4 height in pixels at 96 DPI
+      deviceScaleFactor: 2 // Higher quality rendering
+    });
+
+    // Navigate to the template file
+    const fileUrl = `file://${TEMPLATE_PATH}`;
+    console.log('📖 Loading HTML template...');
+    await page.goto(fileUrl, {
+      waitUntil: 'networkidle0' // Wait for all resources to load
+    });
+
+    // Generate PDF with A4 dimensions
+    console.log('📝 Generating PDF...');
+    await page.pdf({
+      path: OUTPUT_PATH,
+      format: 'A4',
+      printBackground: true,
+      margin: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      },
+      preferCSSPageSize: true
+    });
+
+    console.log('\n✅ PDF generated successfully!');
+    console.log(`📦 Output: ${OUTPUT_PATH}`);
+
+    // Get file size
+    const stats = statSync(OUTPUT_PATH);
+    const fileSizeInKB = (stats.size / 1024).toFixed(2);
+    console.log(`📊 File size: ${fileSizeInKB} KB`);
+
+  } catch (error) {
+    console.error('\n❌ Error generating PDF:', error.message);
+    process.exit(1);
+  } finally {
+    if (browser) {
+      await browser.close();
+      console.log('🔒 Browser closed.');
+    }
+  }
+
+  console.log('\n🎉 Done! Sample PDF is ready for use in Stirling PDF.\n');
+}
+
+// Run the generator
+generatePDF().catch(error => {
+  console.error('Fatal error:', error);
+  process.exit(1);
+});

frontend/scripts/sample-pdf/styles.css

@@ -0,0 +1,432 @@
+/* Stirling PDF Sample Document Styles */
+
+:root {
+  /* Brand Colors */
+  --brand-red: #8e3231;
+  --brand-blue: #3b82f6;
+
+  /* Category Colors */
+  --color-general: #3b82f6;
+  --color-security: #f59e0b;
+  --color-formatting: #8b5cf6;
+  --color-automation: #ec4899;
+
+  /* Neutral Colors */
+  --color-black: #111827;
+  --color-gray-dark: #4b5563;
+  --color-gray-medium: #6b7280;
+  --color-gray-light: #e5e7eb;
+  --color-gray-lighter: #f3f4f6;
+  --color-white: #ffffff;
+
+  /* Font Stack */
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+                  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family);
+  color: var(--color-black);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Page Structure - A4 Dimensions */
+.page {
+  width: 210mm;
+  height: 297mm;
+  background: white;
+  page-break-after: always;
+  position: relative;
+  overflow: hidden;
+}
+
+.page:last-child {
+  page-break-after: auto;
+}
+
+/* Page 1: Hero / Cover */
+.page-1 {
+  background: var(--brand-red);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Decorative shapes container */
+.decorative-shapes {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.shape {
+  position: absolute;
+}
+
+/* Logo SVG shape - top-right */
+.shape-1 {
+  top: -120px;
+  right: -100px;
+  width: 450px;
+  height: auto;
+  opacity: 0.12;
+}
+
+/* Logo SVG shape - top-left */
+.shape-2 {
+  top: -80px;
+  left: -80px;
+  width: 350px;
+  height: auto;
+  opacity: 0.08;
+}
+
+/* Logo SVG shape - bottom-left */
+.shape-3 {
+  bottom: -180px;
+  left: -150px;
+  width: 550px;
+  height: auto;
+  opacity: 0.15;
+}
+
+/* Logo SVG shape - bottom-right */
+.shape-4 {
+  bottom: -100px;
+  right: -120px;
+  width: 400px;
+  height: auto;
+  opacity: 0.1;
+}
+
+/* Small accent shape center-right */
+.shape-5 {
+  top: 50%;
+  right: -30px;
+  width: 200px;
+  height: auto;
+  opacity: 0.08;
+  transform: translateY(-50%);
+}
+
+.hero-content {
+  text-align: center;
+  padding: 60px;
+  position: relative;
+  z-index: 1;
+}
+
+.logo-container {
+  margin-bottom: 48px;
+  position: relative;
+}
+
+.hero-logo {
+  width: 280px;
+  height: auto;
+}
+
+.hero-tagline {
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--color-white);
+  margin-bottom: 32px;
+  line-height: 1.3;
+}
+
+.hero-stats {
+  margin-bottom: 40px;
+}
+
+.stat-badge {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 48px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.stat-number {
+  font-size: 48px;
+  font-weight: 700;
+  color: var(--brand-red);
+  line-height: 1;
+}
+
+.stat-label {
+  font-size: 18px;
+  color: var(--color-gray-dark);
+  margin-top: 8px;
+  font-weight: 500;
+}
+
+.hero-features {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.feature-pill {
+  padding: 12px 24px;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border-radius: 24px;
+  font-size: 16px;
+  font-weight: 500;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+}
+
+/* Page 2: What is Stirling PDF */
+.page-2 {
+  padding: 60px;
+}
+
+.content-wrapper {
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.page-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--brand-red);
+  margin-bottom: 24px;
+  border-bottom: 4px solid var(--brand-red);
+  padding-bottom: 16px;
+}
+
+.intro-text {
+  font-size: 16px;
+  color: var(--color-gray-dark);
+  margin-bottom: 48px;
+  line-height: 1.8;
+}
+
+.value-props {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+}
+
+.value-prop {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.value-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--brand-red);
+  margin-bottom: 8px;
+}
+
+.value-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.value-prop h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-black);
+}
+
+.value-prop p {
+  font-size: 14px;
+  color: var(--color-gray-dark);
+  line-height: 1.6;
+}
+
+/* Page 3: Key Features */
+.page-3 {
+  padding: 60px;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+.feature-card {
+  background: white;
+  border: 2px solid var(--color-gray-light);
+  border-radius: 12px;
+  padding: 24px;
+  transition: all 0.2s ease;
+}
+
+.feature-card[data-category="general"] {
+  border-color: var(--color-general);
+}
+
+.feature-card[data-category="security"] {
+  border-color: var(--color-security);
+}
+
+.feature-card[data-category="formatting"] {
+  border-color: var(--color-formatting);
+}
+
+.feature-card[data-category="automation"] {
+  border-color: var(--color-automation);
+}
+
+.feature-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.feature-icon-large {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+}
+
+.feature-card[data-category="general"] .feature-icon-large {
+  color: var(--color-general);
+}
+
+.feature-card[data-category="security"] .feature-icon-large {
+  color: var(--color-security);
+}
+
+.feature-card[data-category="formatting"] .feature-icon-large {
+  color: var(--color-formatting);
+}
+
+.feature-card[data-category="automation"] .feature-icon-large {
+  color: var(--color-automation);
+}
+
+.feature-icon-large svg {
+  width: 100%;
+  height: 100%;
+}
+
+.feature-card h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-black);
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+}
+
+.feature-list li {
+  font-size: 14px;
+  color: var(--color-gray-dark);
+  padding: 6px 0;
+  padding-left: 20px;
+  position: relative;
+}
+
+.feature-list li::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  color: var(--brand-red);
+  font-weight: bold;
+}
+
+.additional-features {
+  background: white;
+  border: 2px solid var(--brand-red);
+  padding: 24px;
+  border-radius: 12px;
+  margin-top: 24px;
+}
+
+.additional-features-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.additional-features-icon {
+  width: 40px;
+  height: 40px;
+  color: var(--brand-red);
+  flex-shrink: 0;
+}
+
+.additional-features-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.additional-features h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-black);
+  margin: 0;
+}
+
+.additional-features-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+}
+
+.additional-features-grid ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.additional-features-grid li {
+  font-size: 15px;
+  color: var(--color-gray-dark);
+  padding: 4px 0;
+  padding-left: 24px;
+  position: relative;
+  line-height: 1.5;
+}
+
+.additional-features-grid li::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  color: var(--brand-red);
+  font-weight: bold;
+  font-size: 18px;
+}
+
+/* Print Styles */
+@media print {
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  .page {
+    margin: 0;
+    border: none;
+    box-shadow: none;
+  }
+}

frontend/scripts/sample-pdf/template.html

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Stirling PDF - Sample Document</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <!-- Page 1: Hero / Cover Page -->
+  <div class="page page-1">
+    <div class="decorative-shapes">
+      <img src="../../public/branding/StirlingPDFLogoNoTextLight.svg" class="shape shape-1" alt="">
+      <img src="../../public/branding/StirlingPDFLogoNoTextDark.svg" class="shape shape-2" alt="">
+      <img src="../../public/branding/StirlingPDFLogoNoTextLight.svg" class="shape shape-3" alt="">
+      <img src="../../public/branding/StirlingPDFLogoNoTextDark.svg" class="shape shape-4" alt="">
+      <img src="../../public/branding/StirlingPDFLogoNoTextLight.svg" class="shape shape-5" alt="">
+    </div>
+    <div class="hero-content">
+      <div class="logo-container">
+        <img src="../../public/branding/StirlingPDFLogoWhiteText.svg" alt="Stirling PDF" class="hero-logo">
+      </div>
+      <h1 class="hero-tagline">The Free Adobe Acrobat Alternative</h1>
+      <div class="hero-stats">
+        <div class="stat-badge">
+          <span class="stat-number">10M+</span>
+          <span class="stat-label">Downloads</span>
+        </div>
+      </div>
+      <div class="hero-features">
+        <div class="feature-pill">Open Source</div>
+        <div class="feature-pill">Privacy First</div>
+        <div class="feature-pill">Self-Hosted</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Page 2: What is Stirling PDF -->
+  <div class="page page-2">
+    <div class="content-wrapper">
+      <h2 class="page-title">What is Stirling PDF?</h2>
+      <p class="intro-text">
+        Stirling PDF is a robust, web-based PDF manipulation tool.
+        It enables you to carry out various operations on PDF files, including splitting,
+        merging, converting, rearranging, adding images, rotating, compressing, and more.
+      </p>
+
+      <div class="value-props">
+        <div class="value-prop">
+          <div class="value-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+            </svg>
+          </div>
+          <h3>50+ PDF Operations</h3>
+          <p>Comprehensive toolkit covering all your PDF needs. From basic operations to advanced processing.</p>
+        </div>
+
+        <div class="value-prop">
+          <div class="value-icon">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path d="M7.4 17.25q-1.05.875-2.187.8t-1.988-.775t-1.162-1.837t.412-2.338L4.35 10q-.625-.55-.987-1.325T3 7q0-1.65 1.175-2.825T7 3t2.825 1.175T11 7T9.825 9.825T7 11q-.225 0-.45-.025t-.425-.075L4.2 14.15q-.275.45-.175.888t.425.712t.775.313t.875-.313l10.5-9.025q1.05-.875 2.2-.788t2 .788t1.15 1.838t-.425 2.337L19.65 14q.625.55.988 1.325T21 17q0 1.65-1.175 2.825T17 21t-2.825-1.175T13 17t1.175-2.825T17 13q.225 0 .438.025t.412.075l1.95-3.25q.275-.45.175-.888t-.425-.712t-.775-.312t-.875.312zM7 9q.825 0 1.413-.587T9 7t-.587-1.412T7 5t-1.412.588T5 7t.588 1.413T7 9m10 10q.825 0 1.413-.587T19 17t-.587-1.412T17 15t-1.412.588T15 17t.588 1.413T17 19m0-2" />
+            </svg>
+          </div>
+          <h3>Workflow Automation</h3>
+          <p>Chain multiple operations together and save them as reusable workflows. Perfect for recurring tasks.</p>
+        </div>
+
+        <div class="value-prop">
+          <div class="value-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="2" y1="12" x2="22" y2="12" />
+              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+            </svg>
+          </div>
+          <h3>Multi-Language Support</h3>
+          <p>Available in over 30 languages with community-contributed translations. Accessible to users worldwide.</p>
+        </div>
+
+        <div class="value-prop">
+          <div class="value-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="5" y="11" width="14" height="10" rx="2" />
+              <circle cx="12" cy="16" r="1" />
+              <path d="M8 11V7a4 4 0 0 1 8 0v4" />
+            </svg>
+          </div>
+          <h3>Privacy First</h3>
+          <p>Self-hosted solution means your data stays on your infrastructure. You have full control over your documents.</p>
+        </div>
+
+        <div class="value-prop">
+          <div class="value-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10" />
+              <path d="m9 12 2 2 4-4" />
+            </svg>
+          </div>
+          <h3>Open Source</h3>
+          <p>Transparent, community-driven development. Inspect the code, contribute features, and adapt as needed.</p>
+        </div>
+
+        <div class="value-prop">
+          <div class="value-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="16 18 22 12 16 6" />
+              <polyline points="8 6 2 12 8 18" />
+            </svg>
+          </div>
+          <h3>API Access</h3>
+          <p>RESTful API for integration with external tools and scripts. Automate PDF operations programmatically.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Page 3: Key Features -->
+  <div class="page page-3">
+    <div class="content-wrapper">
+      <h2 class="page-title">Key Features</h2>
+
+      <div class="features-grid">
+        <div class="feature-card" data-category="general">
+          <div class="feature-header">
+            <div class="feature-icon-large">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                <polyline points="14 2 14 8 20 8" />
+                <line x1="16" y1="13" x2="8" y2="13" />
+                <line x1="16" y1="17" x2="8" y2="17" />
+                <polyline points="10 9 9 9 8 9" />
+              </svg>
+            </div>
+            <h3>Page Operations</h3>
+          </div>
+          <ul class="feature-list">
+            <li>Merge & split PDFs</li>
+            <li>Rearrange pages</li>
+            <li>Rotate & crop</li>
+            <li>Extract pages</li>
+            <li>Multi-page layout</li>
+          </ul>
+        </div>
+
+        <div class="feature-card" data-category="security">
+          <div class="feature-header">
+            <div class="feature-icon-large">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+              </svg>
+            </div>
+            <h3>Security & Signing</h3>
+          </div>
+          <ul class="feature-list">
+            <li>Password protection</li>
+            <li>Digital signatures</li>
+            <li>Watermarks</li>
+            <li>Permission controls</li>
+            <li>Redaction tools</li>
+          </ul>
+        </div>
+
+        <div class="feature-card" data-category="formatting">
+          <div class="feature-header">
+            <div class="feature-icon-large">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="m5.825 17l1.9 1.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-3.6-3.6q-.15-.15-.213-.325T2.426 16t.063-.375t.212-.325l3.6-3.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L5.825 15H20q.425 0 .713.288T21 16t-.288.713T20 17zm12.35-8H4q-.425 0-.712-.288T3 8t.288-.712T4 7h14.175l-1.9-1.9q-.3-.3-.287-.7t.312-.7q.3-.275.7-.288t.7.288l3.6 3.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-3.6 3.6q-.275.275-.687.275T16.3 12.3q-.3-.3-.3-.712t.3-.713z" />
+              </svg>
+            </div>
+            <h3>File Conversions</h3>
+          </div>
+          <ul class="feature-list">
+            <li>PDF to/from images</li>
+            <li>Office documents</li>
+            <li>HTML to PDF</li>
+            <li>Markdown to PDF</li>
+            <li>PDF to Word/Excel</li>
+          </ul>
+        </div>
+
+        <div class="feature-card" data-category="automation">
+          <div class="feature-header">
+            <div class="feature-icon-large">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="M7.4 17.25q-1.05.875-2.187.8t-1.988-.775t-1.162-1.837t.412-2.338L4.35 10q-.625-.55-.987-1.325T3 7q0-1.65 1.175-2.825T7 3t2.825 1.175T11 7T9.825 9.825T7 11q-.225 0-.45-.025t-.425-.075L4.2 14.15q-.275.45-.175.888t.425.712t.775.313t.875-.313l10.5-9.025q1.05-.875 2.2-.788t2 .788t1.15 1.838t-.425 2.337L19.65 14q.625.55.988 1.325T21 17q0 1.65-1.175 2.825T17 21t-2.825-1.175T13 17t1.175-2.825T17 13q.225 0 .438.025t.412.075l1.95-3.25q.275-.45.175-.888t-.425-.712t-.775-.312t-.875.312zM7 9q.825 0 1.413-.587T9 7t-.587-1.412T7 5t-1.412.588T5 7t.588 1.413T7 9m10 10q.825 0 1.413-.587T19 17t-.587-1.412T17 15t-1.412.588T15 17t.588 1.413T17 19m0-2" />
+              </svg>
+            </div>
+            <h3>Automation</h3>
+          </div>
+          <ul class="feature-list">
+            <li>Multi-step workflows</li>
+            <li>Chain PDF operations</li>
+            <li>Save recurring tasks</li>
+            <li>Batch file processing</li>
+            <li>API integration</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="additional-features">
+        <div class="additional-features-header">
+          <div class="additional-features-icon">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path d="M6 20q-.825 0-1.4125-.5875T4 18t.5875-1.4125T6 16t1.4125.5875T8 18t-.5875 1.4125T6 20m6 0q-.825 0-1.4125-.5875T10 18t.5875-1.4125T12 16t1.4125.5875T14 18t-.5875 1.4125T12 20m6 0q-.825 0-1.4125-.5875T16 18t.5875-1.4125T18 16t1.4125.5875T20 18t-.5875 1.4125T18 20M6 14q-.825 0-1.4125-.5875T4 12t.5875-1.4125T6 10t1.4125.5875T8 12t-.5875 1.4125T6 14m6 0q-.825 0-1.4125-.5875T10 12t.5875-1.4125T12 10t1.4125.5875T14 12t-.5875 1.4125T12 14m6 0q-.825 0-1.4125-.5875T16 12t.5875-1.4125T18 10t1.4125.5875T20 12t-.5875 1.4125T18 14M6 8q-.825 0-1.4125-.5875T4 6t.5875-1.4125T6 4t1.4125.5875T8 6t-.5875 1.4125T6 8m6 0q-.825 0-1.4125-.5875T10 6t.5875-1.4125T12 4t1.4125.5875T14 6t-.5875 1.4125T12 8m6 0q-.825 0-1.4125-.5875T16 6t.5875-1.4125T18 4t1.4125.5875T20 6t-.5875 1.4125T18 8" />
+            </svg>
+          </div>
+          <h3>Plus Many More</h3>
+        </div>
+        <div class="additional-features-grid">
+          <ul>
+            <li>OCR text recognition</li>
+            <li>Compress PDFs</li>
+            <li>Add images & stamps</li>
+            <li>Detect blank pages</li>
+            <li>Extract images</li>
+            <li>Edit metadata</li>
+          </ul>
+          <ul>
+            <li>Flatten forms</li>
+            <li>PDF/A conversion</li>
+            <li>Add page numbers</li>
+            <li>Remove pages</li>
+            <li>Repair PDFs</li>
+            <li>And 40+ more tools</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</body>
+</html>