feat: add PDF manipulation tools including Protect, Rotate, Split, Unlock, and Watermark functionalities

- Implemented ProtectPdf component for adding password protection to PDFs.
- Implemented RotatePdf component for rotating PDF pages by specified angles.
- Implemented SplitPdf component for splitting PDFs into individual pages or specified ranges.
- Implemented UnlockPdf component for removing password protection from PDFs.
- Implemented WatermarkPdf component for adding custom text watermarks to PDFs.
- Updated i18n files to include translations for new tools.
- Enhanced HomePage to include links to new PDF tools.
- Updated Nginx configuration to improve security with CSP and Permissions-Policy headers.
- Updated sitemap generation script to include new tools.

frontend/index.html

@@ -4,7 +4,17 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Free online tools for PDF, image, video, and text processing. Convert, compress, and transform your files instantly." />
+    <meta name="description" content="Free online tools for PDF, image, video, and text processing. Merge, split, compress, convert, watermark, protect & more — instantly." />
+    <meta name="keywords" content="PDF tools, merge PDF, split PDF, compress PDF, PDF to Word, image converter, free online tools, Arabic PDF tools" />
+    <meta name="author" content="SaaS-PDF" />
+    <meta name="robots" content="index, follow" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="SaaS-PDF — Free Online File Tools" />
+    <meta property="og:description" content="16+ free tools: merge, split, compress, convert PDFs, images, videos & text. No signup required." />
+    <meta property="og:site_name" content="SaaS-PDF" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="SaaS-PDF — Free Online File Tools" />
+    <meta name="twitter:description" content="16+ free tools: merge, split, compress, convert PDFs, images, videos & text. No signup required." />
     <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@300;400;500;600;700&family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet" />

frontend/src/App.tsx

@@ -19,6 +19,15 @@ const ImageConverter = lazy(() => import('@/components/tools/ImageConverter'));
 const VideoToGif = lazy(() => import('@/components/tools/VideoToGif'));
 const WordCounter = lazy(() => import('@/components/tools/WordCounter'));
 const TextCleaner = lazy(() => import('@/components/tools/TextCleaner'));
+const MergePdf = lazy(() => import('@/components/tools/MergePdf'));
+const SplitPdf = lazy(() => import('@/components/tools/SplitPdf'));
+const RotatePdf = lazy(() => import('@/components/tools/RotatePdf'));
+const PdfToImages = lazy(() => import('@/components/tools/PdfToImages'));
+const ImagesToPdf = lazy(() => import('@/components/tools/ImagesToPdf'));
+const WatermarkPdf = lazy(() => import('@/components/tools/WatermarkPdf'));
+const ProtectPdf = lazy(() => import('@/components/tools/ProtectPdf'));
+const UnlockPdf = lazy(() => import('@/components/tools/UnlockPdf'));
+const AddPageNumbers = lazy(() => import('@/components/tools/AddPageNumbers'));
 
 function LoadingFallback() {
   return (
@@ -48,6 +57,15 @@ export default function App() {
             <Route path="/tools/pdf-to-word" element={<PdfToWord />} />
             <Route path="/tools/word-to-pdf" element={<WordToPdf />} />
             <Route path="/tools/compress-pdf" element={<PdfCompressor />} />
+            <Route path="/tools/merge-pdf" element={<MergePdf />} />
+            <Route path="/tools/split-pdf" element={<SplitPdf />} />
+            <Route path="/tools/rotate-pdf" element={<RotatePdf />} />
+            <Route path="/tools/pdf-to-images" element={<PdfToImages />} />
+            <Route path="/tools/images-to-pdf" element={<ImagesToPdf />} />
+            <Route path="/tools/watermark-pdf" element={<WatermarkPdf />} />
+            <Route path="/tools/protect-pdf" element={<ProtectPdf />} />
+            <Route path="/tools/unlock-pdf" element={<UnlockPdf />} />
+            <Route path="/tools/page-numbers" element={<AddPageNumbers />} />
 
             {/* Image Tools */}
             <Route path="/tools/image-converter" element={<ImageConverter />} />

frontend/src/components/tools/AddPageNumbers.tsx

@@ -0,0 +1,171 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet-async';
+import { ListOrdered } from 'lucide-react';
+import FileUploader from '@/components/shared/FileUploader';
+import ProgressBar from '@/components/shared/ProgressBar';
+import DownloadButton from '@/components/shared/DownloadButton';
+import AdSlot from '@/components/layout/AdSlot';
+import { useFileUpload } from '@/hooks/useFileUpload';
+import { useTaskPolling } from '@/hooks/useTaskPolling';
+import { generateToolSchema } from '@/utils/seo';
+
+type Position = 'bottom-center' | 'bottom-right' | 'bottom-left' | 'top-center' | 'top-right' | 'top-left';
+
+export default function AddPageNumbers() {
+  const { t } = useTranslation();
+  const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
+  const [position, setPosition] = useState<Position>('bottom-center');
+  const [startNumber, setStartNumber] = useState(1);
+
+  const {
+    file,
+    uploadProgress,
+    isUploading,
+    taskId,
+    error: uploadError,
+    selectFile,
+    startUpload,
+    reset,
+  } = useFileUpload({
+    endpoint: '/pdf-tools/page-numbers',
+    maxSizeMB: 20,
+    acceptedTypes: ['pdf'],
+    extraData: { position, start_number: startNumber.toString() },
+  });
+
+  const { status, result, error: taskError } = useTaskPolling({
+    taskId,
+    onComplete: () => setPhase('done'),
+    onError: () => setPhase('done'),
+  });
+
+  const handleUpload = async () => {
+    const id = await startUpload();
+    if (id) setPhase('processing');
+  };
+
+  const handleReset = () => {
+    reset();
+    setPhase('upload');
+  };
+
+  const positions: { value: Position; label: string }[] = [
+    { value: 'bottom-center', label: t('tools.pageNumbers.bottomCenter') },
+    { value: 'bottom-right', label: t('tools.pageNumbers.bottomRight') },
+    { value: 'bottom-left', label: t('tools.pageNumbers.bottomLeft') },
+    { value: 'top-center', label: t('tools.pageNumbers.topCenter') },
+    { value: 'top-right', label: t('tools.pageNumbers.topRight') },
+    { value: 'top-left', label: t('tools.pageNumbers.topLeft') },
+  ];
+
+  const schema = generateToolSchema({
+    name: t('tools.pageNumbers.title'),
+    description: t('tools.pageNumbers.description'),
+    url: `${window.location.origin}/tools/page-numbers`,
+  });
+
+  return (
+    <>
+      <Helmet>
+        <title>{t('tools.pageNumbers.title')} — {t('common.appName')}</title>
+        <meta name="description" content={t('tools.pageNumbers.description')} />
+        <link rel="canonical" href={`${window.location.origin}/tools/page-numbers`} />
+        <script type="application/ld+json">{JSON.stringify(schema)}</script>
+      </Helmet>
+
+      <div className="mx-auto max-w-2xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-sky-100">
+            <ListOrdered className="h-8 w-8 text-sky-600" />
+          </div>
+          <h1 className="section-heading">{t('tools.pageNumbers.title')}</h1>
+          <p className="mt-2 text-slate-500">{t('tools.pageNumbers.description')}</p>
+        </div>
+
+        <AdSlot slot="top-banner" format="horizontal" className="mb-6" />
+
+        {phase === 'upload' && (
+          <div className="space-y-4">
+            <FileUploader
+              onFileSelect={selectFile}
+              file={file}
+              accept={{ 'application/pdf': ['.pdf'] }}
+              maxSizeMB={20}
+              isUploading={isUploading}
+              uploadProgress={uploadProgress}
+              error={uploadError}
+              onReset={handleReset}
+              acceptLabel="PDF (.pdf)"
+            />
+
+            {file && !isUploading && (
+              <>
+                {/* Position Selector */}
+                <div>
+                  <label className="mb-2 block text-sm font-medium text-slate-700">
+                    {t('tools.pageNumbers.position')}
+                  </label>
+                  <div className="grid grid-cols-3 gap-2">
+                    {positions.map((p) => (
+                      <button
+                        key={p.value}
+                        onClick={() => setPosition(p.value)}
+                        className={`rounded-lg p-2 text-center text-xs ring-1 transition-all ${
+                          position === p.value
+                            ? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
+                            : 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
+                        }`}
+                      >
+                        {p.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Start Number */}
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-slate-700">
+                    {t('tools.pageNumbers.startNumber')}
+                  </label>
+                  <input
+                    type="number"
+                    min="1"
+                    value={startNumber}
+                    onChange={(e) => setStartNumber(Math.max(1, Number(e.target.value)))}
+                    className="input-field w-32"
+                  />
+                </div>
+
+                <button onClick={handleUpload} className="btn-primary w-full">
+                  {t('tools.pageNumbers.shortDesc')}
+                </button>
+              </>
+            )}
+          </div>
+        )}
+
+        {phase === 'processing' && !result && (
+          <ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
+        )}
+
+        {phase === 'done' && result && result.status === 'completed' && (
+          <DownloadButton result={result} onStartOver={handleReset} />
+        )}
+
+        {phase === 'done' && taskError && (
+          <div className="space-y-4">
+            <div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
+              <p className="text-sm text-red-700">{taskError}</p>
+            </div>
+            <button onClick={handleReset} className="btn-secondary w-full">
+              {t('common.startOver')}
+            </button>
+          </div>
+        )}
+
+        <AdSlot slot="bottom-banner" className="mt-8" />
+      </div>
+    </>
+  );
+}

frontend/src/components/tools/ImagesToPdf.tsx

@@ -0,0 +1,208 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet-async';
+import { FileImage } from 'lucide-react';
+import AdSlot from '@/components/layout/AdSlot';
+import ProgressBar from '@/components/shared/ProgressBar';
+import DownloadButton from '@/components/shared/DownloadButton';
+import { useTaskPolling } from '@/hooks/useTaskPolling';
+import { generateToolSchema } from '@/utils/seo';
+
+export default function ImagesToPdf() {
+  const { t } = useTranslation();
+  const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
+  const [files, setFiles] = useState<File[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const [taskId, setTaskId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const { status, result, error: taskError } = useTaskPolling({
+    taskId,
+    onComplete: () => setPhase('done'),
+    onError: () => setPhase('done'),
+  });
+
+  const acceptedTypes = ['image/png', 'image/jpeg', 'image/webp', 'image/bmp'];
+
+  const handleFilesSelect = (newFiles: FileList | File[]) => {
+    const fileArray = Array.from(newFiles).filter((f) =>
+      acceptedTypes.includes(f.type)
+    );
+    if (fileArray.length === 0) {
+      setError(t('tools.imagesToPdf.invalidFiles'));
+      return;
+    }
+    setFiles((prev) => [...prev, ...fileArray]);
+    setError(null);
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleUpload = async () => {
+    if (files.length < 1) {
+      setError(t('tools.imagesToPdf.minFiles'));
+      return;
+    }
+
+    setIsUploading(true);
+    setError(null);
+
+    try {
+      const formData = new FormData();
+      files.forEach((f) => formData.append('files', f));
+
+      const response = await fetch('/api/pdf-tools/images-to-pdf', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Upload failed.');
+      }
+
+      setTaskId(data.task_id);
+      setPhase('processing');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload failed.');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleReset = () => {
+    setFiles([]);
+    setPhase('upload');
+    setTaskId(null);
+    setError(null);
+  };
+
+  const schema = generateToolSchema({
+    name: t('tools.imagesToPdf.title'),
+    description: t('tools.imagesToPdf.description'),
+    url: `${window.location.origin}/tools/images-to-pdf`,
+  });
+
+  return (
+    <>
+      <Helmet>
+        <title>{t('tools.imagesToPdf.title')} — {t('common.appName')}</title>
+        <meta name="description" content={t('tools.imagesToPdf.description')} />
+        <link rel="canonical" href={`${window.location.origin}/tools/images-to-pdf`} />
+        <script type="application/ld+json">{JSON.stringify(schema)}</script>
+      </Helmet>
+
+      <div className="mx-auto max-w-2xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-pink-100">
+            <FileImage className="h-8 w-8 text-pink-600" />
+          </div>
+          <h1 className="section-heading">{t('tools.imagesToPdf.title')}</h1>
+          <p className="mt-2 text-slate-500">{t('tools.imagesToPdf.description')}</p>
+        </div>
+
+        <AdSlot slot="top-banner" format="horizontal" className="mb-6" />
+
+        {phase === 'upload' && (
+          <div className="space-y-4">
+            {/* Drop zone */}
+            <div
+              className="upload-zone cursor-pointer"
+              onClick={() => document.getElementById('images-file-input')?.click()}
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={(e) => {
+                e.preventDefault();
+                if (e.dataTransfer.files) handleFilesSelect(e.dataTransfer.files);
+              }}
+            >
+              <input
+                id="images-file-input"
+                type="file"
+                accept=".png,.jpg,.jpeg,.webp,.bmp"
+                multiple
+                className="hidden"
+                onChange={(e) => {
+                  if (e.target.files) handleFilesSelect(e.target.files);
+                  e.target.value = '';
+                }}
+              />
+              <FileImage className="mb-4 h-12 w-12 text-slate-400" />
+              <p className="mb-2 text-base font-medium text-slate-700">
+                {t('common.dragDrop')}
+              </p>
+              <p className="text-sm text-slate-500">PNG, JPG, WebP, BMP</p>
+              <p className="mt-1 text-xs text-slate-400">
+                {t('common.maxSize', { size: 10 })}
+              </p>
+            </div>
+
+            {/* File list */}
+            {files.length > 0 && (
+              <div className="space-y-2">
+                {files.map((f, idx) => (
+                  <div
+                    key={`${f.name}-${idx}`}
+                    className="flex items-center justify-between rounded-lg bg-primary-50 p-3 ring-1 ring-primary-200"
+                  >
+                    <span className="truncate text-sm font-medium text-slate-900">
+                      {idx + 1}. {f.name}
+                    </span>
+                    <button
+                      onClick={() => removeFile(idx)}
+                      className="ml-2 text-xs text-red-500 hover:text-red-700"
+                    >
+                      ✕
+                    </button>
+                  </div>
+                ))}
+                <p className="text-sm text-slate-500">
+                  {files.length} {t('tools.imagesToPdf.imagesSelected')}
+                </p>
+              </div>
+            )}
+
+            {error && (
+              <div className="rounded-xl bg-red-50 p-3 ring-1 ring-red-200">
+                <p className="text-sm text-red-700">{error}</p>
+              </div>
+            )}
+
+            {files.length >= 1 && (
+              <button
+                onClick={handleUpload}
+                disabled={isUploading}
+                className="btn-primary w-full"
+              >
+                {isUploading ? t('common.processing') : t('tools.imagesToPdf.shortDesc')}
+              </button>
+            )}
+          </div>
+        )}
+
+        {phase === 'processing' && !result && (
+          <ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
+        )}
+
+        {phase === 'done' && result && result.status === 'completed' && (
+          <DownloadButton result={result} onStartOver={handleReset} />
+        )}
+
+        {phase === 'done' && taskError && (
+          <div className="space-y-4">
+            <div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
+              <p className="text-sm text-red-700">{taskError}</p>
+            </div>
+            <button onClick={handleReset} className="btn-secondary w-full">
+              {t('common.startOver')}
+            </button>
+          </div>
+        )}
+
+        <AdSlot slot="bottom-banner" className="mt-8" />
+      </div>
+    </>
+  );
+}

frontend/src/components/tools/MergePdf.tsx

@@ -0,0 +1,210 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet-async';
+import { Layers } from 'lucide-react';
+import FileUploader from '@/components/shared/FileUploader';
+import ProgressBar from '@/components/shared/ProgressBar';
+import DownloadButton from '@/components/shared/DownloadButton';
+import AdSlot from '@/components/layout/AdSlot';
+import { useTaskPolling } from '@/hooks/useTaskPolling';
+import { uploadFile, type TaskResponse } from '@/services/api';
+import { generateToolSchema } from '@/utils/seo';
+
+export default function MergePdf() {
+  const { t } = useTranslation();
+  const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
+  const [files, setFiles] = useState<File[]>([]);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [isUploading, setIsUploading] = useState(false);
+  const [taskId, setTaskId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const { status, result, error: taskError } = useTaskPolling({
+    taskId,
+    onComplete: () => setPhase('done'),
+    onError: () => setPhase('done'),
+  });
+
+  const handleFilesSelect = (newFiles: FileList | File[]) => {
+    const fileArray = Array.from(newFiles).filter(
+      (f) => f.type === 'application/pdf'
+    );
+    if (fileArray.length === 0) {
+      setError(t('tools.mergePdf.invalidFiles'));
+      return;
+    }
+    setFiles((prev) => [...prev, ...fileArray]);
+    setError(null);
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleUpload = async () => {
+    if (files.length < 2) {
+      setError(t('tools.mergePdf.minFiles'));
+      return;
+    }
+
+    setIsUploading(true);
+    setError(null);
+
+    try {
+      const formData = new FormData();
+      files.forEach((f) => formData.append('files', f));
+
+      const response = await fetch('/api/pdf-tools/merge', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Upload failed.');
+      }
+
+      setTaskId(data.task_id);
+      setPhase('processing');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload failed.');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleReset = () => {
+    setFiles([]);
+    setPhase('upload');
+    setTaskId(null);
+    setError(null);
+    setUploadProgress(0);
+  };
+
+  const schema = generateToolSchema({
+    name: t('tools.mergePdf.title'),
+    description: t('tools.mergePdf.description'),
+    url: `${window.location.origin}/tools/merge-pdf`,
+  });
+
+  return (
+    <>
+      <Helmet>
+        <title>{t('tools.mergePdf.title')} — {t('common.appName')}</title>
+        <meta name="description" content={t('tools.mergePdf.description')} />
+        <link rel="canonical" href={`${window.location.origin}/tools/merge-pdf`} />
+        <script type="application/ld+json">{JSON.stringify(schema)}</script>
+      </Helmet>
+
+      <div className="mx-auto max-w-2xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-100">
+            <Layers className="h-8 w-8 text-violet-600" />
+          </div>
+          <h1 className="section-heading">{t('tools.mergePdf.title')}</h1>
+          <p className="mt-2 text-slate-500">{t('tools.mergePdf.description')}</p>
+        </div>
+
+        <AdSlot slot="top-banner" format="horizontal" className="mb-6" />
+
+        {phase === 'upload' && (
+          <div className="space-y-4">
+            {/* Drop zone for adding files */}
+            <div
+              className="upload-zone cursor-pointer"
+              onClick={() => document.getElementById('merge-file-input')?.click()}
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={(e) => {
+                e.preventDefault();
+                if (e.dataTransfer.files) handleFilesSelect(e.dataTransfer.files);
+              }}
+            >
+              <input
+                id="merge-file-input"
+                type="file"
+                accept=".pdf"
+                multiple
+                className="hidden"
+                onChange={(e) => {
+                  if (e.target.files) handleFilesSelect(e.target.files);
+                  e.target.value = '';
+                }}
+              />
+              <Layers className="mb-4 h-12 w-12 text-slate-400" />
+              <p className="mb-2 text-base font-medium text-slate-700">
+                {t('common.dragDrop')}
+              </p>
+              <p className="text-sm text-slate-500">PDF (.pdf)</p>
+              <p className="mt-1 text-xs text-slate-400">
+                {t('common.maxSize', { size: 20 })}
+              </p>
+            </div>
+
+            {/* File list */}
+            {files.length > 0 && (
+              <div className="space-y-2">
+                {files.map((f, idx) => (
+                  <div
+                    key={`${f.name}-${idx}`}
+                    className="flex items-center justify-between rounded-lg bg-primary-50 p-3 ring-1 ring-primary-200"
+                  >
+                    <span className="truncate text-sm font-medium text-slate-900">
+                      {idx + 1}. {f.name}
+                    </span>
+                    <button
+                      onClick={() => removeFile(idx)}
+                      className="ml-2 text-xs text-red-500 hover:text-red-700"
+                    >
+                      ✕
+                    </button>
+                  </div>
+                ))}
+                <p className="text-sm text-slate-500">
+                  {files.length} {t('tools.mergePdf.filesSelected')}
+                </p>
+              </div>
+            )}
+
+            {error && (
+              <div className="rounded-xl bg-red-50 p-3 ring-1 ring-red-200">
+                <p className="text-sm text-red-700">{error}</p>
+              </div>
+            )}
+
+            {files.length >= 2 && (
+              <button
+                onClick={handleUpload}
+                disabled={isUploading}
+                className="btn-primary w-full"
+              >
+                {isUploading ? t('common.processing') : t('tools.mergePdf.shortDesc')}
+              </button>
+            )}
+          </div>
+        )}
+
+        {phase === 'processing' && !result && (
+          <ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
+        )}
+
+        {phase === 'done' && result && result.status === 'completed' && (
+          <DownloadButton result={result} onStartOver={handleReset} />
+        )}
+
+        {phase === 'done' && taskError && (
+          <div className="space-y-4">
+            <div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
+              <p className="text-sm text-red-700">{taskError}</p>
+            </div>
+            <button onClick={handleReset} className="btn-secondary w-full">
+              {t('common.startOver')}
+            </button>
+          </div>
+        )}
+
+        <AdSlot slot="bottom-banner" className="mt-8" />
+      </div>
+    </>
+  );
+}

frontend/src/components/tools/PdfToImages.tsx

@@ -0,0 +1,183 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet-async';
+import { ImageIcon } from 'lucide-react';
+import FileUploader from '@/components/shared/FileUploader';
+import ProgressBar from '@/components/shared/ProgressBar';
+import DownloadButton from '@/components/shared/DownloadButton';
+import AdSlot from '@/components/layout/AdSlot';
+import { useFileUpload } from '@/hooks/useFileUpload';
+import { useTaskPolling } from '@/hooks/useTaskPolling';
+import { generateToolSchema } from '@/utils/seo';
+
+type OutputFormat = 'png' | 'jpg';
+
+export default function PdfToImages() {
+  const { t } = useTranslation();
+  const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
+  const [format, setFormat] = useState<OutputFormat>('png');
+  const [dpi, setDpi] = useState(200);
+
+  const {
+    file,
+    uploadProgress,
+    isUploading,
+    taskId,
+    error: uploadError,
+    selectFile,
+    startUpload,
+    reset,
+  } = useFileUpload({
+    endpoint: '/pdf-tools/pdf-to-images',
+    maxSizeMB: 20,
+    acceptedTypes: ['pdf'],
+    extraData: { format, dpi: dpi.toString() },
+  });
+
+  const { status, result, error: taskError } = useTaskPolling({
+    taskId,
+    onComplete: () => setPhase('done'),
+    onError: () => setPhase('done'),
+  });
+
+  const handleUpload = async () => {
+    const id = await startUpload();
+    if (id) setPhase('processing');
+  };
+
+  const handleReset = () => {
+    reset();
+    setPhase('upload');
+  };
+
+  const formats: { value: OutputFormat; label: string }[] = [
+    { value: 'png', label: 'PNG' },
+    { value: 'jpg', label: 'JPG' },
+  ];
+
+  const dpiOptions = [
+    { value: 72, label: '72 DPI', desc: t('tools.pdfToImages.lowQuality') },
+    { value: 150, label: '150 DPI', desc: t('tools.pdfToImages.mediumQuality') },
+    { value: 200, label: '200 DPI', desc: t('tools.pdfToImages.highQuality') },
+    { value: 300, label: '300 DPI', desc: t('tools.pdfToImages.bestQuality') },
+  ];
+
+  const schema = generateToolSchema({
+    name: t('tools.pdfToImages.title'),
+    description: t('tools.pdfToImages.description'),
+    url: `${window.location.origin}/tools/pdf-to-images`,
+  });
+
+  return (
+    <>
+      <Helmet>
+        <title>{t('tools.pdfToImages.title')} — {t('common.appName')}</title>
+        <meta name="description" content={t('tools.pdfToImages.description')} />
+        <link rel="canonical" href={`${window.location.origin}/tools/pdf-to-images`} />
+        <script type="application/ld+json">{JSON.stringify(schema)}</script>
+      </Helmet>
+
+      <div className="mx-auto max-w-2xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-teal-100">
+            <ImageIcon className="h-8 w-8 text-teal-600" />
+          </div>
+          <h1 className="section-heading">{t('tools.pdfToImages.title')}</h1>
+          <p className="mt-2 text-slate-500">{t('tools.pdfToImages.description')}</p>
+        </div>
+
+        <AdSlot slot="top-banner" format="horizontal" className="mb-6" />
+
+        {phase === 'upload' && (
+          <div className="space-y-4">
+            <FileUploader
+              onFileSelect={selectFile}
+              file={file}
+              accept={{ 'application/pdf': ['.pdf'] }}
+              maxSizeMB={20}
+              isUploading={isUploading}
+              uploadProgress={uploadProgress}
+              error={uploadError}
+              onReset={handleReset}
+              acceptLabel="PDF (.pdf)"
+            />
+
+            {file && !isUploading && (
+              <>
+                {/* Format Selector */}
+                <div>
+                  <label className="mb-2 block text-sm font-medium text-slate-700">
+                    {t('tools.pdfToImages.outputFormat')}
+                  </label>
+                  <div className="grid grid-cols-2 gap-3">
+                    {formats.map((f) => (
+                      <button
+                        key={f.value}
+                        onClick={() => setFormat(f.value)}
+                        className={`rounded-xl p-3 text-center ring-1 transition-all ${
+                          format === f.value
+                            ? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
+                            : 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
+                        }`}
+                      >
+                        {f.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* DPI Selector */}
+                <div>
+                  <label className="mb-2 block text-sm font-medium text-slate-700">
+                    {t('tools.pdfToImages.quality')}
+                  </label>
+                  <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+                    {dpiOptions.map((opt) => (
+                      <button
+                        key={opt.value}
+                        onClick={() => setDpi(opt.value)}
+                        className={`rounded-xl p-3 text-center ring-1 transition-all ${
+                          dpi === opt.value
+                            ? 'bg-primary-50 ring-primary-300 text-primary-700'
+                            : 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
+                        }`}
+                      >
+                        <p className="text-sm font-medium">{opt.label}</p>
+                        <p className="text-xs text-slate-400 mt-0.5">{opt.desc}</p>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                <button onClick={handleUpload} className="btn-primary w-full">
+                  {t('tools.pdfToImages.shortDesc')}
+                </button>
+              </>
+            )}
+          </div>
+        )}
+
+        {phase === 'processing' && !result && (
+          <ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
+        )}
+
+        {phase === 'done' && result && result.status === 'completed' && (
+          <DownloadButton result={result} onStartOver={handleReset} />
+        )}
+
+        {phase === 'done' && taskError && (
+          <div className="space-y-4">
+            <div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
+              <p className="text-sm text-red-700">{taskError}</p>
+            </div>
+            <button onClick={handleReset} className="btn-secondary w-full">
+              {t('common.startOver')}
+            </button>
+          </div>
+        )}
+
+        <AdSlot slot="bottom-banner" className="mt-8" />
+      </div>
+    </>
+  );
+}

frontend/src/components/tools/ProtectPdf.tsx

@@ -0,0 +1,168 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet-async';
+import { Lock } from 'lucide-react';
+import FileUploader from '@/components/shared/FileUploader';
+import ProgressBar from '@/components/shared/ProgressBar';
+import DownloadButton from '@/components/shared/DownloadButton';
+import AdSlot from '@/components/layout/AdSlot';
+import { useFileUpload } from '@/hooks/useFileUpload';
+import { useTaskPolling } from '@/hooks/useTaskPolling';
+import { generateToolSchema } from '@/utils/seo';
+
+export default function ProtectPdf() {
+  const { t } = useTranslation();
+  const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  const passwordsMatch = password === confirmPassword && password.length > 0;
+
+  const {
+    file,
+    uploadProgress,
+    isUploading,
+    taskId,
+    error: uploadError,
+    selectFile,
+    startUpload,
+    reset,
+  } = useFileUpload({
+    endpoint: '/pdf-tools/protect',
+    maxSizeMB: 20,
+    acceptedTypes: ['pdf'],
+    extraData: { password },
+  });
+
+  const { status, result, error: taskError } = useTaskPolling({
+    taskId,
+    onComplete: () => setPhase('done'),
+    onError: () => setPhase('done'),
+  });
+
+  const handleUpload = async () => {
+    if (!passwordsMatch) return;
+    const id = await startUpload();
+    if (id) setPhase('processing');
+  };
+
+  const handleReset = () => {
+    reset();
+    setPassword('');
+    setConfirmPassword('');
+    setPhase('upload');
+  };
+
+  const schema = generateToolSchema({
+    name: t('tools.protectPdf.title'),
+    description: t('tools.protectPdf.description'),
+    url: `${window.location.origin}/tools/protect-pdf`,
+  });
+
+  return (
+    <>
+      <Helmet>
+        <title>{t('tools.protectPdf.title')} — {t('common.appName')}</title>
+        <meta name="description" content={t('tools.protectPdf.description')} />
+        <link rel="canonical" href={`${window.location.origin}/tools/protect-pdf`} />
+        <script type="application/ld+json">{JSON.stringify(schema)}</script>
+      </Helmet>
+
+      <div className="mx-auto max-w-2xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-red-100">
+            <Lock className="h-8 w-8 text-red-600" />
+          </div>
+          <h1 className="section-heading">{t('tools.protectPdf.title')}</h1>
+          <p className="mt-2 text-slate-500">{t('tools.protectPdf.description')}</p>
+        </div>
+
+        <AdSlot slot="top-banner" format="horizontal" className="mb-6" />
+
+        {phase === 'upload' && (
+          <div className="space-y-4">
+            <FileUploader
+              onFileSelect={selectFile}
+              file={file}
+              accept={{ 'application/pdf': ['.pdf'] }}
+              maxSizeMB={20}
+              isUploading={isUploading}
+              uploadProgress={uploadProgress}
+              error={uploadError}
+              onReset={handleReset}
+              acceptLabel="PDF (.pdf)"
+            />
+
+            {file && !isUploading && (
+              <>
+                {/* Password Input */}
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-slate-700">
+                    {t('tools.protectPdf.password')}
+                  </label>
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="input-field w-full"
+                    placeholder={t('tools.protectPdf.passwordPlaceholder')}
+                    autoComplete="new-password"
+                  />
+                </div>
+
+                {/* Confirm Password */}
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-slate-700">
+                    {t('tools.protectPdf.confirmPassword')}
+                  </label>
+                  <input
+                    type="password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    className="input-field w-full"
+                    placeholder={t('tools.protectPdf.confirmPlaceholder')}
+                    autoComplete="new-password"
+                  />
+                  {confirmPassword && !passwordsMatch && (
+                    <p className="mt-1 text-xs text-red-500">
+                      {t('tools.protectPdf.mismatch')}
+                    </p>
+                  )}
+                </div>
+
+                <button
+                  onClick={handleUpload}
+                  disabled={!passwordsMatch}
+                  className="btn-primary w-full disabled:opacity-50"
+                >
+                  {t('tools.protectPdf.shortDesc')}
+                </button>
+              </>
+            )}
+          </div>
+        )}
+
+        {phase === 'processing' && !result && (
+          <ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
+        )}
+
+        {phase === 'done' && result && result.status === 'completed' && (
+          <DownloadButton result={result} onStartOver={handleReset} />
+        )}
+
+        {phase === 'done' && taskError && (
+          <div className="space-y-4">
+            <div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
+              <p className="text-sm text-red-700">{taskError}</p>
+            </div>
+            <button onClick={handleReset} className="btn-secondary w-full">
+              {t('common.startOver')}
+            </button>
+          </div>
+        )}
+
+        <AdSlot slot="bottom-banner" className="mt-8" />
+      </div>
+    </>
+  );
+}

frontend/src/components/tools/RotatePdf.tsx

@@ -0,0 +1,155 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet-async';
+import { RotateCw } from 'lucide-react';
+import FileUploader from '@/components/shared/FileUploader';
+import ProgressBar from '@/components/shared/ProgressBar';
+import DownloadButton from '@/components/shared/DownloadButton';
+import AdSlot from '@/components/layout/AdSlot';
+import { useFileUpload } from '@/hooks/useFileUpload';
+import { useTaskPolling } from '@/hooks/useTaskPolling';
+import { generateToolSchema } from '@/utils/seo';
+
+type Rotation = 90 | 180 | 270;
+
+export default function RotatePdf() {
+  const { t } = useTranslation();
+  const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
+  const [rotation, setRotation] = useState<Rotation>(90);
+
+  const {
+    file,
+    uploadProgress,
+    isUploading,
+    taskId,
+    error: uploadError,
+    selectFile,
+    startUpload,
+    reset,
+  } = useFileUpload({
+    endpoint: '/pdf-tools/rotate',
+    maxSizeMB: 20,
+    acceptedTypes: ['pdf'],
+    extraData: { rotation: rotation.toString(), pages: 'all' },
+  });
+
+  const { status, result, error: taskError } = useTaskPolling({
+    taskId,
+    onComplete: () => setPhase('done'),
+    onError: () => setPhase('done'),
+  });
+
+  const handleUpload = async () => {
+    const id = await startUpload();
+    if (id) setPhase('processing');
+  };
+
+  const handleReset = () => {
+    reset();
+    setPhase('upload');
+  };
+
+  const rotations: { value: Rotation; label: string }[] = [
+    { value: 90, label: '90°' },
+    { value: 180, label: '180°' },
+    { value: 270, label: '270°' },
+  ];
+
+  const schema = generateToolSchema({
+    name: t('tools.rotatePdf.title'),
+    description: t('tools.rotatePdf.description'),
+    url: `${window.location.origin}/tools/rotate-pdf`,
+  });
+
+  return (
+    <>
+      <Helmet>
+        <title>{t('tools.rotatePdf.title')} — {t('common.appName')}</title>
+        <meta name="description" content={t('tools.rotatePdf.description')} />
+        <link rel="canonical" href={`${window.location.origin}/tools/rotate-pdf`} />
+        <script type="application/ld+json">{JSON.stringify(schema)}</script>
+      </Helmet>
+
+      <div className="mx-auto max-w-2xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-cyan-100">
+            <RotateCw className="h-8 w-8 text-cyan-600" />
+          </div>
+          <h1 className="section-heading">{t('tools.rotatePdf.title')}</h1>
+          <p className="mt-2 text-slate-500">{t('tools.rotatePdf.description')}</p>
+        </div>
+
+        <AdSlot slot="top-banner" format="horizontal" className="mb-6" />
+
+        {phase === 'upload' && (
+          <div className="space-y-4">
+            <FileUploader
+              onFileSelect={selectFile}
+              file={file}
+              accept={{ 'application/pdf': ['.pdf'] }}
+              maxSizeMB={20}
+              isUploading={isUploading}
+              uploadProgress={uploadProgress}
+              error={uploadError}
+              onReset={handleReset}
+              acceptLabel="PDF (.pdf)"
+            />
+
+            {file && !isUploading && (
+              <>
+                <div>
+                  <label className="mb-2 block text-sm font-medium text-slate-700">
+                    {t('tools.rotatePdf.rotationAngle')}
+                  </label>
+                  <div className="grid grid-cols-3 gap-3">
+                    {rotations.map((r) => (
+                      <button
+                        key={r.value}
+                        onClick={() => setRotation(r.value)}
+                        className={`rounded-xl p-3 text-center ring-1 transition-all ${
+                          rotation === r.value
+                            ? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
+                            : 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
+                        }`}
+                      >
+                        <RotateCw className={`mx-auto h-5 w-5 mb-1 ${
+                          rotation === r.value ? 'text-primary-600' : 'text-slate-400'
+                        }`} />
+                        {r.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                <button onClick={handleUpload} className="btn-primary w-full">
+                  {t('tools.rotatePdf.shortDesc')}
+                </button>
+              </>
+            )}
+          </div>
+        )}
+
+        {phase === 'processing' && !result && (
+          <ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
+        )}
+
+        {phase === 'done' && result && result.status === 'completed' && (
+          <DownloadButton result={result} onStartOver={handleReset} />
+        )}
+
+        {phase === 'done' && taskError && (
+          <div className="space-y-4">
+            <div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
+              <p className="text-sm text-red-700">{taskError}</p>
+            </div>
+            <button onClick={handleReset} className="btn-secondary w-full">
+              {t('common.startOver')}
+            </button>
+          </div>
+        )}
+
+        <AdSlot slot="bottom-banner" className="mt-8" />
+      </div>
+    </>
+  );
+}

frontend/src/components/tools/SplitPdf.tsx

@@ -0,0 +1,174 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet-async';
+import { Scissors } from 'lucide-react';
+import FileUploader from '@/components/shared/FileUploader';
+import ProgressBar from '@/components/shared/ProgressBar';
+import DownloadButton from '@/components/shared/DownloadButton';
+import AdSlot from '@/components/layout/AdSlot';
+import { useFileUpload } from '@/hooks/useFileUpload';
+import { useTaskPolling } from '@/hooks/useTaskPolling';
+import { generateToolSchema } from '@/utils/seo';
+
+type SplitMode = 'all' | 'range';
+
+export default function SplitPdf() {
+  const { t } = useTranslation();
+  const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
+  const [mode, setMode] = useState<SplitMode>('all');
+  const [pages, setPages] = useState('');
+
+  const {
+    file,
+    uploadProgress,
+    isUploading,
+    taskId,
+    error: uploadError,
+    selectFile,
+    startUpload,
+    reset,
+  } = useFileUpload({
+    endpoint: '/pdf-tools/split',
+    maxSizeMB: 20,
+    acceptedTypes: ['pdf'],
+    extraData: { mode, ...(mode === 'range' ? { pages } : {}) },
+  });
+
+  const { status, result, error: taskError } = useTaskPolling({
+    taskId,
+    onComplete: () => setPhase('done'),
+    onError: () => setPhase('done'),
+  });
+
+  const handleUpload = async () => {
+    if (mode === 'range' && !pages.trim()) return;
+    const id = await startUpload();
+    if (id) setPhase('processing');
+  };
+
+  const handleReset = () => {
+    reset();
+    setPhase('upload');
+    setMode('all');
+    setPages('');
+  };
+
+  const schema = generateToolSchema({
+    name: t('tools.splitPdf.title'),
+    description: t('tools.splitPdf.description'),
+    url: `${window.location.origin}/tools/split-pdf`,
+  });
+
+  return (
+    <>
+      <Helmet>
+        <title>{t('tools.splitPdf.title')} — {t('common.appName')}</title>
+        <meta name="description" content={t('tools.splitPdf.description')} />
+        <link rel="canonical" href={`${window.location.origin}/tools/split-pdf`} />
+        <script type="application/ld+json">{JSON.stringify(schema)}</script>
+      </Helmet>
+
+      <div className="mx-auto max-w-2xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-100">
+            <Scissors className="h-8 w-8 text-amber-600" />
+          </div>
+          <h1 className="section-heading">{t('tools.splitPdf.title')}</h1>
+          <p className="mt-2 text-slate-500">{t('tools.splitPdf.description')}</p>
+        </div>
+
+        <AdSlot slot="top-banner" format="horizontal" className="mb-6" />
+
+        {phase === 'upload' && (
+          <div className="space-y-4">
+            <FileUploader
+              onFileSelect={selectFile}
+              file={file}
+              accept={{ 'application/pdf': ['.pdf'] }}
+              maxSizeMB={20}
+              isUploading={isUploading}
+              uploadProgress={uploadProgress}
+              error={uploadError}
+              onReset={handleReset}
+              acceptLabel="PDF (.pdf)"
+            />
+
+            {file && !isUploading && (
+              <>
+                {/* Mode Selector */}
+                <div className="grid grid-cols-2 gap-3">
+                  <button
+                    onClick={() => setMode('all')}
+                    className={`rounded-xl p-3 text-center ring-1 transition-all ${
+                      mode === 'all'
+                        ? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
+                        : 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
+                    }`}
+                  >
+                    <p className="text-sm font-medium">{t('tools.splitPdf.allPages')}</p>
+                    <p className="text-xs text-slate-400 mt-0.5">{t('tools.splitPdf.allPagesDesc')}</p>
+                  </button>
+                  <button
+                    onClick={() => setMode('range')}
+                    className={`rounded-xl p-3 text-center ring-1 transition-all ${
+                      mode === 'range'
+                        ? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
+                        : 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
+                    }`}
+                  >
+                    <p className="text-sm font-medium">{t('tools.splitPdf.selectPages')}</p>
+                    <p className="text-xs text-slate-400 mt-0.5">{t('tools.splitPdf.selectPagesDesc')}</p>
+                  </button>
+                </div>
+
+                {/* Page Range Input */}
+                {mode === 'range' && (
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-slate-700">
+                      {t('tools.splitPdf.pageRange')}
+                    </label>
+                    <input
+                      type="text"
+                      value={pages}
+                      onChange={(e) => setPages(e.target.value)}
+                      placeholder="1, 3, 5-8"
+                      className="input-field"
+                    />
+                    <p className="mt-1 text-xs text-slate-400">
+                      {t('tools.splitPdf.pageRangeHint')}
+                    </p>
+                  </div>
+                )}
+
+                <button onClick={handleUpload} className="btn-primary w-full">
+                  {t('tools.splitPdf.shortDesc')}
+                </button>
+              </>
+            )}
+          </div>
+        )}
+
+        {phase === 'processing' && !result && (
+          <ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
+        )}
+
+        {phase === 'done' && result && result.status === 'completed' && (
+          <DownloadButton result={result} onStartOver={handleReset} />
+        )}
+
+        {phase === 'done' && taskError && (
+          <div className="space-y-4">
+            <div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
+              <p className="text-sm text-red-700">{taskError}</p>
+            </div>
+            <button onClick={handleReset} className="btn-secondary w-full">
+              {t('common.startOver')}
+            </button>
+          </div>
+        )}
+
+        <AdSlot slot="bottom-banner" className="mt-8" />
+      </div>
+    </>
+  );
+}

frontend/src/components/tools/UnlockPdf.tsx

@@ -0,0 +1,144 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet-async';
+import { Unlock } from 'lucide-react';
+import FileUploader from '@/components/shared/FileUploader';
+import ProgressBar from '@/components/shared/ProgressBar';
+import DownloadButton from '@/components/shared/DownloadButton';
+import AdSlot from '@/components/layout/AdSlot';
+import { useFileUpload } from '@/hooks/useFileUpload';
+import { useTaskPolling } from '@/hooks/useTaskPolling';
+import { generateToolSchema } from '@/utils/seo';
+
+export default function UnlockPdf() {
+  const { t } = useTranslation();
+  const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
+  const [password, setPassword] = useState('');
+
+  const {
+    file,
+    uploadProgress,
+    isUploading,
+    taskId,
+    error: uploadError,
+    selectFile,
+    startUpload,
+    reset,
+  } = useFileUpload({
+    endpoint: '/pdf-tools/unlock',
+    maxSizeMB: 20,
+    acceptedTypes: ['pdf'],
+    extraData: { password },
+  });
+
+  const { status, result, error: taskError } = useTaskPolling({
+    taskId,
+    onComplete: () => setPhase('done'),
+    onError: () => setPhase('done'),
+  });
+
+  const handleUpload = async () => {
+    if (!password) return;
+    const id = await startUpload();
+    if (id) setPhase('processing');
+  };
+
+  const handleReset = () => {
+    reset();
+    setPassword('');
+    setPhase('upload');
+  };
+
+  const schema = generateToolSchema({
+    name: t('tools.unlockPdf.title'),
+    description: t('tools.unlockPdf.description'),
+    url: `${window.location.origin}/tools/unlock-pdf`,
+  });
+
+  return (
+    <>
+      <Helmet>
+        <title>{t('tools.unlockPdf.title')} — {t('common.appName')}</title>
+        <meta name="description" content={t('tools.unlockPdf.description')} />
+        <link rel="canonical" href={`${window.location.origin}/tools/unlock-pdf`} />
+        <script type="application/ld+json">{JSON.stringify(schema)}</script>
+      </Helmet>
+
+      <div className="mx-auto max-w-2xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-green-100">
+            <Unlock className="h-8 w-8 text-green-600" />
+          </div>
+          <h1 className="section-heading">{t('tools.unlockPdf.title')}</h1>
+          <p className="mt-2 text-slate-500">{t('tools.unlockPdf.description')}</p>
+        </div>
+
+        <AdSlot slot="top-banner" format="horizontal" className="mb-6" />
+
+        {phase === 'upload' && (
+          <div className="space-y-4">
+            <FileUploader
+              onFileSelect={selectFile}
+              file={file}
+              accept={{ 'application/pdf': ['.pdf'] }}
+              maxSizeMB={20}
+              isUploading={isUploading}
+              uploadProgress={uploadProgress}
+              error={uploadError}
+              onReset={handleReset}
+              acceptLabel="PDF (.pdf)"
+            />
+
+            {file && !isUploading && (
+              <>
+                {/* Password Input */}
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-slate-700">
+                    {t('tools.unlockPdf.password')}
+                  </label>
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="input-field w-full"
+                    placeholder={t('tools.unlockPdf.passwordPlaceholder')}
+                    autoComplete="current-password"
+                  />
+                </div>
+
+                <button
+                  onClick={handleUpload}
+                  disabled={!password}
+                  className="btn-primary w-full disabled:opacity-50"
+                >
+                  {t('tools.unlockPdf.shortDesc')}
+                </button>
+              </>
+            )}
+          </div>
+        )}
+
+        {phase === 'processing' && !result && (
+          <ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
+        )}
+
+        {phase === 'done' && result && result.status === 'completed' && (
+          <DownloadButton result={result} onStartOver={handleReset} />
+        )}
+
+        {phase === 'done' && taskError && (
+          <div className="space-y-4">
+            <div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
+              <p className="text-sm text-red-700">{taskError}</p>
+            </div>
+            <button onClick={handleReset} className="btn-secondary w-full">
+              {t('common.startOver')}
+            </button>
+          </div>
+        )}
+
+        <AdSlot slot="bottom-banner" className="mt-8" />
+      </div>
+    </>
+  );
+}

frontend/src/components/tools/WatermarkPdf.tsx

@@ -0,0 +1,162 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet-async';
+import { Droplets } from 'lucide-react';
+import FileUploader from '@/components/shared/FileUploader';
+import ProgressBar from '@/components/shared/ProgressBar';
+import DownloadButton from '@/components/shared/DownloadButton';
+import AdSlot from '@/components/layout/AdSlot';
+import { useFileUpload } from '@/hooks/useFileUpload';
+import { useTaskPolling } from '@/hooks/useTaskPolling';
+import { generateToolSchema } from '@/utils/seo';
+
+export default function WatermarkPdf() {
+  const { t } = useTranslation();
+  const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
+  const [text, setText] = useState('CONFIDENTIAL');
+  const [opacity, setOpacity] = useState(30);
+
+  const {
+    file,
+    uploadProgress,
+    isUploading,
+    taskId,
+    error: uploadError,
+    selectFile,
+    startUpload,
+    reset,
+  } = useFileUpload({
+    endpoint: '/pdf-tools/watermark',
+    maxSizeMB: 20,
+    acceptedTypes: ['pdf'],
+    extraData: { text, opacity: (opacity / 100).toString() },
+  });
+
+  const { status, result, error: taskError } = useTaskPolling({
+    taskId,
+    onComplete: () => setPhase('done'),
+    onError: () => setPhase('done'),
+  });
+
+  const handleUpload = async () => {
+    const id = await startUpload();
+    if (id) setPhase('processing');
+  };
+
+  const handleReset = () => {
+    reset();
+    setPhase('upload');
+  };
+
+  const schema = generateToolSchema({
+    name: t('tools.watermarkPdf.title'),
+    description: t('tools.watermarkPdf.description'),
+    url: `${window.location.origin}/tools/watermark-pdf`,
+  });
+
+  return (
+    <>
+      <Helmet>
+        <title>{t('tools.watermarkPdf.title')} — {t('common.appName')}</title>
+        <meta name="description" content={t('tools.watermarkPdf.description')} />
+        <link rel="canonical" href={`${window.location.origin}/tools/watermark-pdf`} />
+        <script type="application/ld+json">{JSON.stringify(schema)}</script>
+      </Helmet>
+
+      <div className="mx-auto max-w-2xl">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-cyan-100">
+            <Droplets className="h-8 w-8 text-cyan-600" />
+          </div>
+          <h1 className="section-heading">{t('tools.watermarkPdf.title')}</h1>
+          <p className="mt-2 text-slate-500">{t('tools.watermarkPdf.description')}</p>
+        </div>
+
+        <AdSlot slot="top-banner" format="horizontal" className="mb-6" />
+
+        {phase === 'upload' && (
+          <div className="space-y-4">
+            <FileUploader
+              onFileSelect={selectFile}
+              file={file}
+              accept={{ 'application/pdf': ['.pdf'] }}
+              maxSizeMB={20}
+              isUploading={isUploading}
+              uploadProgress={uploadProgress}
+              error={uploadError}
+              onReset={handleReset}
+              acceptLabel="PDF (.pdf)"
+            />
+
+            {file && !isUploading && (
+              <>
+                {/* Watermark Text */}
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-slate-700">
+                    {t('tools.watermarkPdf.text')}
+                  </label>
+                  <input
+                    type="text"
+                    value={text}
+                    onChange={(e) => setText(e.target.value)}
+                    maxLength={50}
+                    className="input-field w-full"
+                    placeholder={t('tools.watermarkPdf.textPlaceholder')}
+                  />
+                </div>
+
+                {/* Opacity Slider */}
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-slate-700">
+                    {t('tools.watermarkPdf.opacity')}: {opacity}%
+                  </label>
+                  <input
+                    type="range"
+                    min="5"
+                    max="100"
+                    value={opacity}
+                    onChange={(e) => setOpacity(Number(e.target.value))}
+                    className="w-full accent-cyan-600"
+                  />
+                  <div className="flex justify-between text-xs text-slate-400">
+                    <span>{t('tools.watermarkPdf.light')}</span>
+                    <span>{t('tools.watermarkPdf.heavy')}</span>
+                  </div>
+                </div>
+
+                <button
+                  onClick={handleUpload}
+                  disabled={!text.trim()}
+                  className="btn-primary w-full disabled:opacity-50"
+                >
+                  {t('tools.watermarkPdf.shortDesc')}
+                </button>
+              </>
+            )}
+          </div>
+        )}
+
+        {phase === 'processing' && !result && (
+          <ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
+        )}
+
+        {phase === 'done' && result && result.status === 'completed' && (
+          <DownloadButton result={result} onStartOver={handleReset} />
+        )}
+
+        {phase === 'done' && taskError && (
+          <div className="space-y-4">
+            <div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
+              <p className="text-sm text-red-700">{taskError}</p>
+            </div>
+            <button onClick={handleReset} className="btn-secondary w-full">
+              {t('common.startOver')}
+            </button>
+          </div>
+        )}
+
+        <AdSlot slot="bottom-banner" className="mt-8" />
+      </div>
+    </>
+  );
+}

frontend/src/i18n/ar.json

@@ -82,6 +82,92 @@
       "toSentenceCase": "حالة الجملة",
       "removeDiacritics": "إزالة التشكيل العربي",
       "copyResult": "نسخ النتيجة"
+    },
+    "mergePdf": {
+      "title": "دمج PDF",
+      "description": "ادمج عدة ملفات PDF في مستند واحد. مجاني وسريع.",
+      "shortDesc": "دمج PDF",
+      "selectFiles": "اختر ملفات PDF",
+      "addMore": "أضف ملفات أخرى",
+      "filesSelected": "{{count}} ملفات مختارة",
+      "dragToReorder": "اسحب الملفات لإعادة ترتيبها"
+    },
+    "splitPdf": {
+      "title": "تقسيم PDF",
+      "description": "قسّم ملف PDF إلى صفحات فردية أو استخرج نطاقات صفحات محددة.",
+      "shortDesc": "تقسيم PDF",
+      "allPages": "كل الصفحات",
+      "pageRange": "نطاق الصفحات",
+      "rangeHint": "مثال: 1,3,5-8",
+      "rangePlaceholder": "أدخل الصفحات: 1,3,5-8"
+    },
+    "rotatePdf": {
+      "title": "تدوير PDF",
+      "description": "دوّر جميع صفحات ملف PDF بزاوية 90° أو 180° أو 270° درجة.",
+      "shortDesc": "تدوير PDF",
+      "angle": "زاوية التدوير",
+      "90": "90° مع عقارب الساعة",
+      "180": "180° قلب",
+      "270": "270° عكس عقارب الساعة"
+    },
+    "pdfToImages": {
+      "title": "PDF إلى صور",
+      "description": "حوّل كل صفحة من ملف PDF إلى صور عالية الجودة (PNG أو JPG).",
+      "shortDesc": "PDF → صور",
+      "format": "صيغة الصورة",
+      "dpi": "الدقة (DPI)",
+      "dpiLow": "72 — شاشة",
+      "dpiMedium": "150 — قياسي",
+      "dpiHigh": "200 — جيد",
+      "dpiUltra": "300 — جودة طباعة"
+    },
+    "imagesToPdf": {
+      "title": "صور إلى PDF",
+      "description": "ادمج عدة صور في مستند PDF واحد.",
+      "shortDesc": "صور → PDF",
+      "selectImages": "اختر الصور",
+      "addMore": "أضف صور أخرى",
+      "imagesSelected": "{{count}} صور مختارة"
+    },
+    "watermarkPdf": {
+      "title": "علامة مائية PDF",
+      "description": "أضف علامة مائية نصية مخصصة لكل صفحة من ملف PDF.",
+      "shortDesc": "إضافة علامة مائية",
+      "text": "نص العلامة المائية",
+      "textPlaceholder": "أدخل نص العلامة المائية",
+      "opacity": "الشفافية",
+      "light": "خفيف",
+      "heavy": "كثيف"
+    },
+    "protectPdf": {
+      "title": "حماية PDF",
+      "description": "أضف حماية بكلمة مرور لملف PDF لمنع الوصول غير المصرّح به.",
+      "shortDesc": "حماية PDF",
+      "password": "كلمة المرور",
+      "passwordPlaceholder": "أدخل كلمة مرور قوية",
+      "confirmPassword": "تأكيد كلمة المرور",
+      "confirmPlaceholder": "أعد إدخال كلمة المرور",
+      "mismatch": "كلمات المرور غير متطابقة"
+    },
+    "unlockPdf": {
+      "title": "فك حماية PDF",
+      "description": "أزل حماية كلمة المرور من ملف PDF.",
+      "shortDesc": "فك حماية PDF",
+      "password": "كلمة المرور الحالية",
+      "passwordPlaceholder": "أدخل كلمة مرور الملف"
+    },
+    "pageNumbers": {
+      "title": "إضافة أرقام الصفحات",
+      "description": "أضف أرقام الصفحات لكل صفحة في ملف PDF. اختر الموضع ورقم البداية.",
+      "shortDesc": "أرقام الصفحات",
+      "position": "موضع الرقم",
+      "startNumber": "ابدأ من",
+      "bottomCenter": "أسفل الوسط",
+      "bottomRight": "أسفل اليمين",
+      "bottomLeft": "أسفل اليسار",
+      "topCenter": "أعلى الوسط",
+      "topRight": "أعلى اليمين",
+      "topLeft": "أعلى اليسار"
     }
   },
   "result": {

frontend/src/i18n/en.json

@@ -82,6 +82,92 @@
       "toSentenceCase": "Sentence case",
       "removeDiacritics": "Remove Arabic Diacritics",
       "copyResult": "Copy Result"
+    },
+    "mergePdf": {
+      "title": "Merge PDF",
+      "description": "Combine multiple PDF files into a single document. Free and fast.",
+      "shortDesc": "Merge PDFs",
+      "selectFiles": "Select PDF Files",
+      "addMore": "Add More Files",
+      "filesSelected": "{{count}} files selected",
+      "dragToReorder": "Drag files to reorder them"
+    },
+    "splitPdf": {
+      "title": "Split PDF",
+      "description": "Split a PDF into individual pages or extract specific page ranges.",
+      "shortDesc": "Split PDF",
+      "allPages": "All Pages",
+      "pageRange": "Page Range",
+      "rangeHint": "e.g. 1,3,5-8",
+      "rangePlaceholder": "Enter pages: 1,3,5-8"
+    },
+    "rotatePdf": {
+      "title": "Rotate PDF",
+      "description": "Rotate all pages of a PDF by 90°, 180°, or 270° degrees.",
+      "shortDesc": "Rotate PDF",
+      "angle": "Rotation Angle",
+      "90": "90° Clockwise",
+      "180": "180° Flip",
+      "270": "270° Counter-clockwise"
+    },
+    "pdfToImages": {
+      "title": "PDF to Images",
+      "description": "Convert each page of a PDF into high-quality images (PNG or JPG).",
+      "shortDesc": "PDF → Images",
+      "format": "Image Format",
+      "dpi": "Resolution (DPI)",
+      "dpiLow": "72 — Screen",
+      "dpiMedium": "150 — Standard",
+      "dpiHigh": "200 — Good",
+      "dpiUltra": "300 — Print Quality"
+    },
+    "imagesToPdf": {
+      "title": "Images to PDF",
+      "description": "Combine multiple images into a single PDF document.",
+      "shortDesc": "Images → PDF",
+      "selectImages": "Select Images",
+      "addMore": "Add More Images",
+      "imagesSelected": "{{count}} images selected"
+    },
+    "watermarkPdf": {
+      "title": "Watermark PDF",
+      "description": "Add a custom text watermark to every page of your PDF.",
+      "shortDesc": "Add Watermark",
+      "text": "Watermark Text",
+      "textPlaceholder": "Enter watermark text",
+      "opacity": "Opacity",
+      "light": "Light",
+      "heavy": "Heavy"
+    },
+    "protectPdf": {
+      "title": "Protect PDF",
+      "description": "Add password protection to your PDF to prevent unauthorized access.",
+      "shortDesc": "Protect PDF",
+      "password": "Password",
+      "passwordPlaceholder": "Enter a strong password",
+      "confirmPassword": "Confirm Password",
+      "confirmPlaceholder": "Re-enter the password",
+      "mismatch": "Passwords do not match"
+    },
+    "unlockPdf": {
+      "title": "Unlock PDF",
+      "description": "Remove password protection from your PDF file.",
+      "shortDesc": "Unlock PDF",
+      "password": "Current Password",
+      "passwordPlaceholder": "Enter the PDF password"
+    },
+    "pageNumbers": {
+      "title": "Add Page Numbers",
+      "description": "Add page numbers to every page of your PDF. Choose position and starting number.",
+      "shortDesc": "Add Page Numbers",
+      "position": "Number Position",
+      "startNumber": "Start From",
+      "bottomCenter": "Bottom Center",
+      "bottomRight": "Bottom Right",
+      "bottomLeft": "Bottom Left",
+      "topCenter": "Top Center",
+      "topRight": "Top Right",
+      "topLeft": "Top Left"
     }
   },
   "result": {

frontend/src/pages/HomePage.tsx

@@ -8,6 +8,15 @@ import {
   Film,
   Hash,
   Eraser,
+  Layers,
+  Scissors,
+  RotateCw,
+  Image,
+  FileImage,
+  Droplets,
+  Lock,
+  Unlock,
+  ListOrdered,
 } from 'lucide-react';
 import ToolCard from '@/components/shared/ToolCard';
 import AdSlot from '@/components/layout/AdSlot';
@@ -23,6 +32,15 @@ const tools: ToolInfo[] = [
   { key: 'pdfToWord', path: '/tools/pdf-to-word', icon: <FileText className="h-6 w-6 text-red-600" />, bgColor: 'bg-red-50' },
   { key: 'wordToPdf', path: '/tools/word-to-pdf', icon: <FileOutput className="h-6 w-6 text-blue-600" />, bgColor: 'bg-blue-50' },
   { key: 'compressPdf', path: '/tools/compress-pdf', icon: <Minimize2 className="h-6 w-6 text-orange-600" />, bgColor: 'bg-orange-50' },
+  { key: 'mergePdf', path: '/tools/merge-pdf', icon: <Layers className="h-6 w-6 text-violet-600" />, bgColor: 'bg-violet-50' },
+  { key: 'splitPdf', path: '/tools/split-pdf', icon: <Scissors className="h-6 w-6 text-pink-600" />, bgColor: 'bg-pink-50' },
+  { key: 'rotatePdf', path: '/tools/rotate-pdf', icon: <RotateCw className="h-6 w-6 text-teal-600" />, bgColor: 'bg-teal-50' },
+  { key: 'pdfToImages', path: '/tools/pdf-to-images', icon: <Image className="h-6 w-6 text-amber-600" />, bgColor: 'bg-amber-50' },
+  { key: 'imagesToPdf', path: '/tools/images-to-pdf', icon: <FileImage className="h-6 w-6 text-lime-600" />, bgColor: 'bg-lime-50' },
+  { key: 'watermarkPdf', path: '/tools/watermark-pdf', icon: <Droplets className="h-6 w-6 text-cyan-600" />, bgColor: 'bg-cyan-50' },
+  { key: 'protectPdf', path: '/tools/protect-pdf', icon: <Lock className="h-6 w-6 text-red-600" />, bgColor: 'bg-red-50' },
+  { key: 'unlockPdf', path: '/tools/unlock-pdf', icon: <Unlock className="h-6 w-6 text-green-600" />, bgColor: 'bg-green-50' },
+  { key: 'pageNumbers', path: '/tools/page-numbers', icon: <ListOrdered className="h-6 w-6 text-sky-600" />, bgColor: 'bg-sky-50' },
   { key: 'imageConvert', path: '/tools/image-converter', icon: <ImageIcon className="h-6 w-6 text-purple-600" />, bgColor: 'bg-purple-50' },
   { key: 'videoToGif', path: '/tools/video-to-gif', icon: <Film className="h-6 w-6 text-emerald-600" />, bgColor: 'bg-emerald-50' },
   { key: 'wordCounter', path: '/tools/word-counter', icon: <Hash className="h-6 w-6 text-blue-600" />, bgColor: 'bg-blue-50' },