الميزات: إضافة صفحات الأسعار والمدونة، وتفعيل ميزة تقييم الأدوات

- إضافة روابط جديدة في تذييل صفحات الأسعار والمدونة.

- إنشاء مكون صفحة الأسعار لعرض تفاصيل الخطط ومقارنة الميزات.

- تطوير مكون صفحة المدونة لعرض منشورات المدونة مع روابط للمقالات الفردية.

- تقديم مكون تقييم الأدوات لتلقي ملاحظات المستخدمين حول الأدوات، بما في ذلك التقييم بالنجوم والتعليقات الاختيارية.

- تفعيل وظيفة useToolRating لجلب وعرض تقييمات الأدوات.

- تحديث أدوات تحسين محركات البحث لتضمين بيانات التقييم في البيانات المنظمة للأدوات.

- تحسين ملفات i18n بترجمات للميزات والصفحات الجديدة.

- دمج إدارة الموافقة على ملفات تعريف الارتباط لتتبع التحليلات.
This commit is contained in:
Your Name
2026-03-10 15:16:28 +02:00
parent 75e11df5fb
commit a14c31c594
25 changed files with 2194 additions and 16 deletions

View File

@@ -2,6 +2,7 @@ import { lazy, Suspense, useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import CookieConsent from '@/components/layout/CookieConsent';
import ErrorBoundary from '@/components/shared/ErrorBoundary';
import ToolLandingPage from '@/components/seo/ToolLandingPage';
import { useDirection } from '@/hooks/useDirection';
@@ -18,6 +19,8 @@ const ContactPage = lazy(() => import('@/pages/ContactPage'));
const AccountPage = lazy(() => import('@/pages/AccountPage'));
const ForgotPasswordPage = lazy(() => import('@/pages/ForgotPasswordPage'));
const ResetPasswordPage = lazy(() => import('@/pages/ResetPasswordPage'));
const PricingPage = lazy(() => import('@/pages/PricingPage'));
const BlogPage = lazy(() => import('@/pages/BlogPage'));
// Tool Pages
const PdfToWord = lazy(() => import('@/components/tools/PdfToWord'));
@@ -92,6 +95,8 @@ export default function App() {
<Route path="/privacy" element={<PrivacyPage />} />
<Route path="/terms" element={<TermsPage />} />
<Route path="/contact" element={<ContactPage />} />
<Route path="/pricing" element={<PricingPage />} />
<Route path="/blog" element={<BlogPage />} />
{/* PDF Tools */}
<Route path="/tools/pdf-to-word" element={<ToolLandingPage slug="pdf-to-word"><PdfToWord /></ToolLandingPage>} />
@@ -149,6 +154,7 @@ export default function App() {
</main>
<Footer />
<CookieConsent />
</div>
);
}

View File

@@ -0,0 +1,123 @@
import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { Cookie, X } from 'lucide-react';
const CONSENT_KEY = 'cookie_consent';
const CONSENT_VERSION = '1';
type ConsentState = 'pending' | 'accepted' | 'rejected';
function getStoredConsent(): ConsentState {
try {
const raw = localStorage.getItem(CONSENT_KEY);
if (!raw) return 'pending';
const parsed = JSON.parse(raw);
if (parsed?.version === CONSENT_VERSION) return parsed.state as ConsentState;
return 'pending';
} catch {
return 'pending';
}
}
function storeConsent(state: ConsentState) {
localStorage.setItem(
CONSENT_KEY,
JSON.stringify({ state, version: CONSENT_VERSION, timestamp: Date.now() }),
);
}
/**
* Emit a custom event so analytics.ts can listen for consent changes.
*/
function dispatchConsentEvent(accepted: boolean) {
window.dispatchEvent(
new CustomEvent('cookie-consent', { detail: { accepted } }),
);
}
export function hasAnalyticsConsent(): boolean {
return getStoredConsent() === 'accepted';
}
export default function CookieConsent() {
const { t } = useTranslation();
const [visible, setVisible] = useState(false);
useEffect(() => {
if (getStoredConsent() === 'pending') {
// Small delay so it doesn't block LCP
const timer = setTimeout(() => setVisible(true), 1500);
return () => clearTimeout(timer);
}
}, []);
function handleAccept() {
storeConsent('accepted');
dispatchConsentEvent(true);
setVisible(false);
}
function handleReject() {
storeConsent('rejected');
dispatchConsentEvent(false);
setVisible(false);
}
if (!visible) return null;
return (
<div
role="dialog"
aria-label={t('cookie.title', 'Cookie Consent')}
className="fixed inset-x-0 bottom-0 z-50 p-4 sm:p-6"
>
<div className="mx-auto max-w-3xl rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl dark:border-slate-700 dark:bg-slate-800 sm:flex sm:items-start sm:gap-4">
<div className="mb-3 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400 sm:mb-0">
<Cookie className="h-5 w-5" />
</div>
<div className="flex-1">
<h3 className="mb-1 text-sm font-semibold text-slate-900 dark:text-white">
{t('cookie.title', 'We use cookies')}
</h3>
<p className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
{t(
'cookie.message',
'We use essential cookies for site functionality and optional analytics cookies (Google Analytics) to improve your experience. You can accept or reject non-essential cookies.',
)}{' '}
<Link
to="/privacy"
className="font-medium text-primary-600 hover:underline dark:text-primary-400"
>
{t('cookie.learnMore', 'Learn more')}
</Link>
</p>
<div className="mt-4 flex flex-wrap gap-3">
<button
onClick={handleAccept}
className="rounded-lg bg-primary-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800"
>
{t('cookie.accept', 'Accept All')}
</button>
<button
onClick={handleReject}
className="rounded-lg border border-slate-300 bg-white px-5 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600 dark:focus:ring-offset-slate-800"
>
{t('cookie.reject', 'Reject Non-Essential')}
</button>
</div>
</div>
<button
onClick={handleReject}
className="absolute right-3 top-3 rounded-lg p-1 text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-300 sm:static"
aria-label={t('common.close', 'Close')}
>
<X className="h-5 w-5" />
</button>
</div>
</div>
);
}

View File

@@ -99,6 +99,18 @@ export default function Footer() {
>
{t('common.contact')}
</Link>
<Link
to="/pricing"
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
>
{t('common.pricing')}
</Link>
<Link
to="/blog"
className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
>
{t('common.blog')}
</Link>
</div>
</div>
</div>

View File

@@ -5,6 +5,8 @@ import { getToolSEO } from '@/config/seoData';
import { generateToolSchema, generateBreadcrumbs, generateFAQ } from '@/utils/seo';
import FAQSection from './FAQSection';
import RelatedTools from './RelatedTools';
import ToolRating from '@/components/shared/ToolRating';
import { useToolRating } from '@/hooks/useToolRating';
interface SEOFAQ {
q: string;
@@ -25,6 +27,7 @@ interface ToolLandingPageProps {
export default function ToolLandingPage({ slug, children }: ToolLandingPageProps) {
const { t } = useTranslation();
const seo = getToolSEO(slug);
const ratingData = useToolRating(slug);
// Fallback: just render tool without SEO wrapper
if (!seo) return <>{children}</>;
@@ -39,6 +42,8 @@ export default function ToolLandingPage({ slug, children }: ToolLandingPageProps
description: seo.metaDescription,
url: canonicalUrl,
category: seo.category === 'PDF' ? 'UtilitiesApplication' : 'WebApplication',
ratingValue: ratingData.average,
ratingCount: ratingData.count,
});
const breadcrumbSchema = generateBreadcrumbs([
@@ -156,6 +161,9 @@ export default function ToolLandingPage({ slug, children }: ToolLandingPageProps
{/* Related Tools */}
<RelatedTools currentSlug={slug} />
{/* User Rating */}
<ToolRating toolSlug={slug} />
</div>
</>
);

View File

@@ -0,0 +1,143 @@
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Star, ThumbsUp, AlertTriangle, Zap, Send } from 'lucide-react';
import api from '@/services/api';
interface ToolRatingProps {
/** Tool slug e.g. "compress-pdf" */
toolSlug: string;
}
const TAGS = [
{ key: 'fast', icon: Zap },
{ key: 'accurate', icon: ThumbsUp },
{ key: 'issue', icon: AlertTriangle },
] as const;
export default function ToolRating({ toolSlug }: ToolRatingProps) {
const { t } = useTranslation();
const [rating, setRating] = useState(0);
const [hoveredStar, setHoveredStar] = useState(0);
const [selectedTag, setSelectedTag] = useState('');
const [feedback, setFeedback] = useState('');
const [submitted, setSubmitted] = useState(false);
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState('');
async function handleSubmit() {
if (rating === 0) return;
setSubmitting(true);
setError('');
try {
await api.post('/ratings/submit', {
tool: toolSlug,
rating,
feedback: feedback.trim(),
tag: selectedTag,
});
setSubmitted(true);
} catch {
setError(t('rating.error', 'Failed to submit rating. Please try again.'));
} finally {
setSubmitting(false);
}
}
if (submitted) {
return (
<div className="mt-8 rounded-2xl border border-green-200 bg-green-50 p-6 text-center dark:border-green-800 dark:bg-green-900/20">
<ThumbsUp className="mx-auto mb-3 h-8 w-8 text-green-600 dark:text-green-400" />
<p className="font-semibold text-green-800 dark:text-green-300">
{t('rating.thankYou', 'Thank you for your feedback!')}
</p>
<p className="mt-1 text-sm text-green-600 dark:text-green-400">
{t('rating.helpImprove', 'Your rating helps us improve our tools.')}
</p>
</div>
);
}
return (
<div className="mt-8 rounded-2xl border border-slate-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-800">
<h3 className="mb-4 text-center text-lg font-semibold text-slate-900 dark:text-white">
{t('rating.title', 'How was your experience?')}
</h3>
{/* Star Rating */}
<div className="mb-5 flex items-center justify-center gap-1">
{[1, 2, 3, 4, 5].map((star) => (
<button
key={star}
onClick={() => setRating(star)}
onMouseEnter={() => setHoveredStar(star)}
onMouseLeave={() => setHoveredStar(0)}
className="rounded-lg p-1 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-amber-400"
aria-label={`${star} ${t('rating.stars', 'stars')}`}
>
<Star
className={`h-8 w-8 transition-colors ${
star <= (hoveredStar || rating)
? 'fill-amber-400 text-amber-400'
: 'text-slate-300 dark:text-slate-600'
}`}
/>
</button>
))}
</div>
{/* Quick Tags */}
{rating > 0 && (
<>
<div className="mb-4 flex flex-wrap items-center justify-center gap-2">
{TAGS.map(({ key, icon: Icon }) => (
<button
key={key}
onClick={() => setSelectedTag(selectedTag === key ? '' : key)}
className={`flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
selectedTag === key
? 'bg-primary-100 text-primary-700 ring-1 ring-primary-300 dark:bg-primary-900/40 dark:text-primary-300 dark:ring-primary-700'
: 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600'
}`}
>
<Icon className="h-3.5 w-3.5" />
{t(`rating.tag.${key}`, key)}
</button>
))}
</div>
{/* Optional Feedback */}
<div className="mb-4">
<textarea
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
placeholder={t('rating.feedbackPlaceholder', 'Any additional feedback? (optional)')}
rows={2}
maxLength={500}
className="w-full resize-none rounded-xl border border-slate-300 bg-slate-50 px-4 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500"
/>
</div>
{error && (
<p className="mb-3 text-center text-sm text-red-600 dark:text-red-400">
{error}
</p>
)}
<div className="text-center">
<button
onClick={handleSubmit}
disabled={submitting}
className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-primary-700 disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800"
>
<Send className="h-4 w-4" />
{submitting
? t('common.processing', 'Processing...')
: t('rating.submit', 'Submit Rating')}
</button>
</div>
</>
)}
</div>
);
}

View File

@@ -0,0 +1,35 @@
import { useState, useEffect } from 'react';
import api from '@/services/api';
interface RatingSummary {
tool: string;
count: number;
average: number;
}
/**
* Fetch the aggregate rating for a tool slug.
* Returns { average, count } or defaults if the fetch fails.
*/
export function useToolRating(toolSlug: string) {
const [data, setData] = useState<RatingSummary>({ tool: toolSlug, count: 0, average: 0 });
useEffect(() => {
let cancelled = false;
api
.get<RatingSummary>(`/ratings/tool/${toolSlug}`)
.then((res) => {
if (!cancelled) setData(res.data);
})
.catch(() => {
// silently fail — rating is optional
});
return () => {
cancelled = true;
};
}, [toolSlug]);
return data;
}

View File

@@ -25,6 +25,8 @@
"darkMode": "الوضع الداكن",
"lightMode": "الوضع الفاتح",
"contact": "اتصل بنا",
"pricing": "الأسعار",
"blog": "المدونة",
"send": "إرسال",
"subject": "الموضوع",
"message": "الرسالة",
@@ -192,6 +194,99 @@
"changesText": "نحتفظ بالحق في تعديل هذه الشروط في أي وقت. الاستمرار في استخدام الخدمة بعد التغييرات يعني قبول الشروط المحدثة.",
"contactTitle": "8. الاتصال",
"contactText": "أسئلة حول هذه الشروط؟ تواصل معنا على"
},
"cookie": {
"title": "إعدادات ملفات الارتباط",
"message": "نستخدم ملفات الارتباط لتحسين تجربتك وتحليل حركة الموقع. بالموافقة، فإنك توافق على ملفات الارتباط التحليلية.",
"accept": "قبول الكل",
"reject": "رفض غير الضرورية",
"learnMore": "اعرف المزيد في سياسة الخصوصية."
},
"rating": {
"title": "قيّم هذه الأداة",
"submit": "إرسال التقييم",
"thanks": "شكراً لملاحظاتك!",
"fast": "سريع",
"accurate": "دقيق",
"issue": "واجهت مشكلة",
"feedbackPlaceholder": "شارك تجربتك (اختياري)",
"average": "متوسط التقييم",
"totalRatings": "تقييم"
},
"pricing": {
"metaTitle": "الأسعار — SaaS-PDF",
"metaDescription": "قارن بين الخطة المجانية والاحترافية لـ SaaS-PDF. استخدم أكثر من 30 أداة مجانًا أو قم بالترقية للمعالجة غير المحدودة.",
"title": "الخطط والأسعار",
"subtitle": "ابدأ مجانًا وقم بالترقية عندما تحتاج المزيد.",
"free": "مجاني",
"pro": "احترافي",
"freePrice": "$0",
"proPrice": "$9",
"perMonth": "/شهر",
"currentPlan": "الخطة الحالية",
"comingSoon": "قريبًا",
"freeFeatures": [
"جميع الأدوات (+30)",
"5 ملفات يوميًا",
"حد أقصى 20 ميجابايت",
"معالجة عادية",
"دعم المجتمع"
],
"proFeatures": [
"جميع الأدوات (+30)",
"ملفات غير محدودة",
"حد أقصى 100 ميجابايت",
"معالجة بأولوية",
"دعم عبر البريد",
"بدون إعلانات",
"وصول API"
],
"featureCompare": "مقارنة الميزات",
"faqTitle": "الأسئلة الشائعة",
"faq": [
{
"q": "هل الخطة المجانية مجانية فعلًا؟",
"a": "نعم! تحصل على وصول كامل لجميع الأدوات الـ 30+ مع حدود يومية سخية — لا حاجة لبطاقة ائتمان."
},
{
"q": "هل يمكنني إلغاء خطة Pro في أي وقت؟",
"a": "بالتأكيد. يمكنك الإلغاء في أي وقت دون أي أسئلة. ستحتفظ بالوصول Pro حتى نهاية فترة الفوترة."
},
{
"q": "ما طرق الدفع المقبولة؟",
"a": "نقبل جميع بطاقات الائتمان/الخصم الرئيسية وPayPal. تتم معالجة جميع المدفوعات بأمان عبر Stripe."
}
]
},
"blog": {
"metaTitle": "المدونة — نصائح ودروس وتحديثات",
"metaDescription": "تعلم كيفية ضغط وتحويل وتعديل وإدارة ملفات PDF مع أدلتنا ودروسنا الاحترافية.",
"title": "المدونة",
"subtitle": "نصائح ودروس تعليمية وتحديثات المنتج لمساعدتك على العمل بذكاء.",
"readMore": "اقرأ المزيد",
"comingSoon": "مقالات أخرى قادمة قريبًا — تابعنا!",
"posts": {
"compressPdf": {
"title": "كيف تضغط ملفات PDF دون فقدان الجودة",
"excerpt": "تعلم أفضل التقنيات لتقليل حجم ملفات PDF مع الحفاظ على جودة المستند للمشاركة والرفع."
},
"imageConvert": {
"title": "تحويل الصور بين الصيغ دون فقدان",
"excerpt": "دليل كامل لتحويل بين PNG وJPG وWebP وغيرها من صيغ الصور مع الحفاظ على الجودة."
},
"ocrGuide": {
"title": "استخراج النص من المستندات الممسوحة بـ OCR",
"excerpt": "حوّل ملفات PDF الممسوحة والصور إلى نص قابل للتعديل والبحث باستخدام تقنية OCR المدعومة بالذكاء الاصطناعي."
},
"mergeSplit": {
"title": "إتقان دمج وتقسيم ملفات PDF",
"excerpt": "دليل خطوة بخطوة لدمج عدة ملفات PDF في ملف واحد أو تقسيم ملف PDF كبير إلى ملفات منفصلة."
},
"aiChat": {
"title": "تحدث مع مستندات PDF باستخدام الذكاء الاصطناعي",
"excerpt": "اكتشف كيف يمكن للذكاء الاصطناعي مساعدتك في طرح الأسئلة والحصول على إجابات فورية من أي مستند PDF."
}
}
}
},
"tools": {

View File

@@ -25,6 +25,8 @@
"darkMode": "Dark Mode",
"lightMode": "Light Mode",
"contact": "Contact",
"pricing": "Pricing",
"blog": "Blog",
"send": "Send",
"subject": "Subject",
"message": "Message",
@@ -192,6 +194,99 @@
"changesText": "We reserve the right to modify these terms at any time. Continued use of the service after changes constitutes acceptance of the updated terms.",
"contactTitle": "8. Contact",
"contactText": "Questions about these terms? Contact us at"
},
"cookie": {
"title": "Cookie Settings",
"message": "We use cookies to improve your experience and analyze site traffic. By accepting, you consent to analytics cookies.",
"accept": "Accept All",
"reject": "Reject Non-Essential",
"learnMore": "Learn more in our Privacy Policy."
},
"rating": {
"title": "Rate this tool",
"submit": "Submit Rating",
"thanks": "Thank you for your feedback!",
"fast": "Fast",
"accurate": "Accurate",
"issue": "Had Issues",
"feedbackPlaceholder": "Share your experience (optional)",
"average": "Average rating",
"totalRatings": "ratings"
},
"pricing": {
"metaTitle": "Pricing — SaaS-PDF",
"metaDescription": "Compare free and pro plans for SaaS-PDF. Access 30+ tools for free, or upgrade for unlimited processing.",
"title": "Plans & Pricing",
"subtitle": "Start free and upgrade when you need more.",
"free": "Free",
"pro": "Pro",
"freePrice": "$0",
"proPrice": "$9",
"perMonth": "/month",
"currentPlan": "Current Plan",
"comingSoon": "Coming Soon",
"freeFeatures": [
"All 30+ tools",
"5 files per day",
"Max 20 MB per file",
"Standard processing",
"Community support"
],
"proFeatures": [
"All 30+ tools",
"Unlimited files",
"Max 100 MB per file",
"Priority processing",
"Email support",
"No ads",
"API access"
],
"featureCompare": "Feature Comparison",
"faqTitle": "Frequently Asked Questions",
"faq": [
{
"q": "Is the free plan really free?",
"a": "Yes! You get full access to all 30+ tools with generous daily limits — no credit card required."
},
{
"q": "Can I cancel the Pro plan anytime?",
"a": "Absolutely. Cancel anytime with no questions asked. You'll keep Pro access until the end of your billing period."
},
{
"q": "What payment methods do you accept?",
"a": "We accept all major credit/debit cards and PayPal. All payments are securely processed via Stripe."
}
]
},
"blog": {
"metaTitle": "Blog — Tips, Tutorials & Updates",
"metaDescription": "Learn how to compress, convert, edit, and manage PDF files with our expert guides and tutorials.",
"title": "Blog",
"subtitle": "Tips, tutorials, and product updates to help you work smarter.",
"readMore": "Read more",
"comingSoon": "More articles coming soon — stay tuned!",
"posts": {
"compressPdf": {
"title": "How to Compress PDFs Without Losing Quality",
"excerpt": "Learn the best techniques to reduce PDF file size while maintaining document quality for sharing and uploading."
},
"imageConvert": {
"title": "Convert Images Between Formats Losslessly",
"excerpt": "A complete guide to converting between PNG, JPG, WebP and other image formats while preserving quality."
},
"ocrGuide": {
"title": "Extract Text from Scanned Documents with OCR",
"excerpt": "Turn scanned PDFs and images into editable, searchable text using our AI-powered OCR technology."
},
"mergeSplit": {
"title": "Master Merging and Splitting PDF Files",
"excerpt": "Step-by-step guide to combining multiple PDFs into one or splitting a large PDF into separate files."
},
"aiChat": {
"title": "Chat with Your PDF Documents Using AI",
"excerpt": "Discover how AI can help you ask questions and get instant answers from any PDF document."
}
}
}
},
"tools": {

View File

@@ -25,6 +25,8 @@
"darkMode": "Mode sombre",
"lightMode": "Mode clair",
"contact": "Contact",
"pricing": "Tarifs",
"blog": "Blog",
"send": "Envoyer",
"subject": "Sujet",
"message": "Message",
@@ -192,6 +194,99 @@
"changesText": "Nous nous réservons le droit de modifier ces conditions à tout moment. L'utilisation continue du service après les modifications constitue l'acceptation des conditions mises à jour.",
"contactTitle": "8. Contact",
"contactText": "Des questions sur ces conditions ? Contactez-nous à"
},
"cookie": {
"title": "Paramètres des cookies",
"message": "Nous utilisons des cookies pour améliorer votre expérience et analyser le trafic du site. En acceptant, vous consentez aux cookies analytiques.",
"accept": "Tout accepter",
"reject": "Refuser les non essentiels",
"learnMore": "En savoir plus dans notre Politique de confidentialité."
},
"rating": {
"title": "Évaluez cet outil",
"submit": "Envoyer l'évaluation",
"thanks": "Merci pour votre retour !",
"fast": "Rapide",
"accurate": "Précis",
"issue": "Problème",
"feedbackPlaceholder": "Partagez votre expérience (facultatif)",
"average": "Note moyenne",
"totalRatings": "évaluations"
},
"pricing": {
"metaTitle": "Tarifs — SaaS-PDF",
"metaDescription": "Comparez les plans gratuit et pro de SaaS-PDF. Accédez à plus de 30 outils gratuitement ou passez au pro pour un traitement illimité.",
"title": "Plans & Tarifs",
"subtitle": "Commencez gratuitement et passez au pro quand vous en avez besoin.",
"free": "Gratuit",
"pro": "Pro",
"freePrice": "0€",
"proPrice": "9€",
"perMonth": "/mois",
"currentPlan": "Plan actuel",
"comingSoon": "Bientôt disponible",
"freeFeatures": [
"Tous les 30+ outils",
"5 fichiers par jour",
"Max 20 Mo par fichier",
"Traitement standard",
"Support communautaire"
],
"proFeatures": [
"Tous les 30+ outils",
"Fichiers illimités",
"Max 100 Mo par fichier",
"Traitement prioritaire",
"Support par email",
"Sans publicité",
"Accès API"
],
"featureCompare": "Comparaison des fonctionnalités",
"faqTitle": "Questions fréquentes",
"faq": [
{
"q": "Le plan gratuit est-il vraiment gratuit ?",
"a": "Oui ! Vous avez un accès complet à tous les 30+ outils avec des limites quotidiennes généreuses — aucune carte bancaire requise."
},
{
"q": "Puis-je annuler le plan Pro à tout moment ?",
"a": "Absolument. Annulez à tout moment sans questions. Vous conserverez l'accès Pro jusqu'à la fin de votre période de facturation."
},
{
"q": "Quels moyens de paiement acceptez-vous ?",
"a": "Nous acceptons toutes les cartes de crédit/débit principales et PayPal. Tous les paiements sont traités de manière sécurisée via Stripe."
}
]
},
"blog": {
"metaTitle": "Blog — Conseils, tutoriels et mises à jour",
"metaDescription": "Apprenez à compresser, convertir, éditer et gérer des fichiers PDF avec nos guides et tutoriels experts.",
"title": "Blog",
"subtitle": "Conseils, tutoriels et mises à jour produit pour vous aider à travailler plus intelligemment.",
"readMore": "Lire la suite",
"comingSoon": "D'autres articles arrivent bientôt — restez connecté !",
"posts": {
"compressPdf": {
"title": "Comment compresser des PDF sans perte de qualité",
"excerpt": "Découvrez les meilleures techniques pour réduire la taille des fichiers PDF tout en maintenant la qualité du document."
},
"imageConvert": {
"title": "Convertir des images entre formats sans perte",
"excerpt": "Guide complet pour convertir entre PNG, JPG, WebP et d'autres formats d'image tout en préservant la qualité."
},
"ocrGuide": {
"title": "Extraire du texte de documents numérisés avec l'OCR",
"excerpt": "Transformez les PDF numérisés et les images en texte modifiable et recherchable grâce à notre technologie OCR alimentée par l'IA."
},
"mergeSplit": {
"title": "Maîtriser la fusion et la division de fichiers PDF",
"excerpt": "Guide étape par étape pour combiner plusieurs PDF en un seul ou diviser un grand PDF en fichiers séparés."
},
"aiChat": {
"title": "Discutez avec vos documents PDF grâce à l'IA",
"excerpt": "Découvrez comment l'IA peut vous aider à poser des questions et obtenir des réponses instantanées à partir de n'importe quel document PDF."
}
}
}
},
"tools": {

View File

@@ -0,0 +1,124 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import SEOHead from '@/components/seo/SEOHead';
import { generateWebPage } from '@/utils/seo';
import { BookOpen, Calendar, ArrowRight } from 'lucide-react';
interface BlogPost {
slug: string;
titleKey: string;
excerptKey: string;
date: string;
category: string;
}
const BLOG_POSTS: BlogPost[] = [
{
slug: 'how-to-compress-pdf-online',
titleKey: 'pages.blog.posts.compressPdf.title',
excerptKey: 'pages.blog.posts.compressPdf.excerpt',
date: '2025-01-15',
category: 'PDF',
},
{
slug: 'convert-images-without-losing-quality',
titleKey: 'pages.blog.posts.imageConvert.title',
excerptKey: 'pages.blog.posts.imageConvert.excerpt',
date: '2025-01-10',
category: 'Image',
},
{
slug: 'ocr-extract-text-from-images',
titleKey: 'pages.blog.posts.ocrGuide.title',
excerptKey: 'pages.blog.posts.ocrGuide.excerpt',
date: '2025-01-05',
category: 'AI',
},
{
slug: 'merge-split-pdf-files',
titleKey: 'pages.blog.posts.mergeSplit.title',
excerptKey: 'pages.blog.posts.mergeSplit.excerpt',
date: '2024-12-28',
category: 'PDF',
},
{
slug: 'ai-chat-with-pdf-documents',
titleKey: 'pages.blog.posts.aiChat.title',
excerptKey: 'pages.blog.posts.aiChat.excerpt',
date: '2024-12-20',
category: 'AI',
},
];
export default function BlogPage() {
const { t } = useTranslation();
return (
<>
<SEOHead
title={t('pages.blog.metaTitle')}
description={t('pages.blog.metaDescription')}
path="/blog"
jsonLd={generateWebPage({
name: t('pages.blog.metaTitle'),
description: t('pages.blog.metaDescription'),
url: `${window.location.origin}/blog`,
})}
/>
<div className="mx-auto max-w-4xl">
<div className="mb-10 text-center">
<div className="mb-4 flex items-center justify-center gap-3">
<BookOpen className="h-8 w-8 text-primary-600 dark:text-primary-400" />
<h1 className="text-3xl font-bold text-slate-900 dark:text-white">
{t('pages.blog.title')}
</h1>
</div>
<p className="text-lg text-slate-600 dark:text-slate-400">
{t('pages.blog.subtitle')}
</p>
</div>
<div className="space-y-6">
{BLOG_POSTS.map((post) => (
<article
key={post.slug}
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-800"
>
<div className="mb-3 flex items-center gap-3">
<span className="rounded-full bg-primary-100 px-3 py-1 text-xs font-medium text-primary-700 dark:bg-primary-900/30 dark:text-primary-300">
{post.category}
</span>
<span className="flex items-center gap-1 text-sm text-slate-500 dark:text-slate-400">
<Calendar className="h-3.5 w-3.5" />
{post.date}
</span>
</div>
<h2 className="mb-2 text-xl font-semibold text-slate-900 dark:text-white">
{t(post.titleKey)}
</h2>
<p className="mb-4 text-slate-600 dark:text-slate-400 leading-relaxed">
{t(post.excerptKey)}
</p>
<Link
to={`/blog/${post.slug}`}
className="inline-flex items-center gap-1 text-sm font-medium text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
>
{t('pages.blog.readMore')} <ArrowRight className="h-4 w-4" />
</Link>
</article>
))}
</div>
{/* Coming Soon */}
<div className="mt-10 rounded-xl border-2 border-dashed border-slate-300 bg-slate-50 p-8 text-center dark:border-slate-600 dark:bg-slate-800/50">
<p className="text-lg font-medium text-slate-600 dark:text-slate-400">
{t('pages.blog.comingSoon')}
</p>
</div>
</div>
</>
);
}

View File

@@ -0,0 +1,221 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import SEOHead from '@/components/seo/SEOHead';
import { generateWebPage } from '@/utils/seo';
import { Check, X, Zap, Crown } from 'lucide-react';
interface PlanFeature {
key: string;
free: boolean | string;
pro: boolean | string;
}
const FEATURES: PlanFeature[] = [
{ key: 'webRequests', free: '50/month', pro: '500/month' },
{ key: 'apiAccess', free: false, pro: true },
{ key: 'apiRequests', free: '—', pro: '1,000/month' },
{ key: 'maxFileSize', free: '50 MB', pro: '100 MB' },
{ key: 'historyRetention', free: '25 files', pro: '250 files' },
{ key: 'allTools', free: true, pro: true },
{ key: 'aiTools', free: true, pro: true },
{ key: 'priorityProcessing', free: false, pro: true },
{ key: 'noAds', free: false, pro: true },
{ key: 'emailSupport', free: false, pro: true },
];
export default function PricingPage() {
const { t } = useTranslation();
function renderValue(val: boolean | string) {
if (val === true) return <Check className="mx-auto h-5 w-5 text-green-500" />;
if (val === false) return <X className="mx-auto h-5 w-5 text-slate-300 dark:text-slate-600" />;
return <span className="text-sm font-medium text-slate-700 dark:text-slate-300">{val}</span>;
}
return (
<>
<SEOHead
title={t('pages.pricing.title', 'Pricing')}
description={t('pages.pricing.metaDescription', 'Compare Free and Pro plans for SaaS-PDF. Get more file processing power, API access, and priority support.')}
path="/pricing"
jsonLd={generateWebPage({
name: t('pages.pricing.title', 'Pricing'),
description: t('pages.pricing.metaDescription', 'Compare Free and Pro plans for SaaS-PDF.'),
url: `${window.location.origin}/pricing`,
})}
/>
<div className="mx-auto max-w-5xl">
{/* Header */}
<div className="mb-12 text-center">
<h1 className="mb-4 text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-4xl">
{t('pages.pricing.title', 'Simple, Transparent Pricing')}
</h1>
<p className="mx-auto max-w-2xl text-lg text-slate-600 dark:text-slate-400">
{t('pages.pricing.subtitle', 'Start free with all tools. Upgrade when you need more power.')}
</p>
</div>
{/* Plan Cards */}
<div className="mb-16 grid gap-8 md:grid-cols-2">
{/* Free Plan */}
<div className="relative rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-800">
<div className="mb-6 flex items-center gap-3">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-700">
<Zap className="h-6 w-6 text-slate-600 dark:text-slate-300" />
</div>
<div>
<h2 className="text-xl font-bold text-slate-900 dark:text-white">
{t('pages.pricing.freePlan', 'Free')}
</h2>
<p className="text-sm text-slate-500 dark:text-slate-400">
{t('pages.pricing.freeDesc', 'For personal use')}
</p>
</div>
</div>
<div className="mb-6">
<span className="text-4xl font-extrabold text-slate-900 dark:text-white">$0</span>
<span className="text-slate-500 dark:text-slate-400"> / {t('pages.pricing.month', 'month')}</span>
</div>
<ul className="mb-8 space-y-3">
{FEATURES.filter((f) => f.free !== false).map((f) => (
<li key={f.key} className="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
<Check className="h-4 w-4 shrink-0 text-green-500" />
{t(`pages.pricing.features.${f.key}`, f.key)}
{typeof f.free === 'string' && (
<span className="ml-auto text-xs font-medium text-slate-500">({f.free})</span>
)}
</li>
))}
</ul>
<Link
to="/"
className="block w-full rounded-xl border border-slate-300 bg-white py-3 text-center text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600"
>
{t('pages.pricing.getStarted', 'Get Started Free')}
</Link>
</div>
{/* Pro Plan */}
<div className="relative rounded-2xl border-2 border-primary-500 bg-white p-8 shadow-lg dark:bg-slate-800">
<div className="absolute -top-3 right-6 rounded-full bg-primary-600 px-4 py-1 text-xs font-bold text-white">
{t('pages.pricing.popular', 'MOST POPULAR')}
</div>
<div className="mb-6 flex items-center gap-3">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900/30">
<Crown className="h-6 w-6 text-primary-600 dark:text-primary-400" />
</div>
<div>
<h2 className="text-xl font-bold text-slate-900 dark:text-white">
{t('pages.pricing.proPlan', 'Pro')}
</h2>
<p className="text-sm text-slate-500 dark:text-slate-400">
{t('pages.pricing.proDesc', 'For professionals & teams')}
</p>
</div>
</div>
<div className="mb-6">
<span className="text-4xl font-extrabold text-slate-900 dark:text-white">$9</span>
<span className="text-slate-500 dark:text-slate-400"> / {t('pages.pricing.month', 'month')}</span>
</div>
<ul className="mb-8 space-y-3">
{FEATURES.map((f) => (
<li key={f.key} className="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
<Check className="h-4 w-4 shrink-0 text-primary-500" />
{t(`pages.pricing.features.${f.key}`, f.key)}
{typeof f.pro === 'string' && (
<span className="ml-auto text-xs font-medium text-primary-600 dark:text-primary-400">({f.pro})</span>
)}
</li>
))}
</ul>
<button
disabled
className="block w-full rounded-xl bg-primary-600 py-3 text-center text-sm font-semibold text-white transition-colors hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60"
>
{t('pages.pricing.comingSoon', 'Coming Soon')}
</button>
<p className="mt-2 text-center text-xs text-slate-500 dark:text-slate-400">
{t('pages.pricing.stripeNote', 'Stripe payment integration coming soon')}
</p>
</div>
</div>
{/* Comparison Table */}
<div className="mb-16 overflow-hidden rounded-2xl border border-slate-200 dark:border-slate-700">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/50">
<th className="px-6 py-4 text-left font-semibold text-slate-700 dark:text-slate-200">
{t('pages.pricing.feature', 'Feature')}
</th>
<th className="px-6 py-4 text-center font-semibold text-slate-700 dark:text-slate-200">
{t('pages.pricing.freePlan', 'Free')}
</th>
<th className="px-6 py-4 text-center font-semibold text-primary-600 dark:text-primary-400">
{t('pages.pricing.proPlan', 'Pro')}
</th>
</tr>
</thead>
<tbody>
{FEATURES.map((f, idx) => (
<tr
key={f.key}
className={`border-b border-slate-100 dark:border-slate-700/50 ${
idx % 2 === 0 ? 'bg-white dark:bg-slate-800' : 'bg-slate-50/50 dark:bg-slate-800/30'
}`}
>
<td className="px-6 py-3 text-slate-700 dark:text-slate-300">
{t(`pages.pricing.features.${f.key}`, f.key)}
</td>
<td className="px-6 py-3 text-center">{renderValue(f.free)}</td>
<td className="px-6 py-3 text-center">{renderValue(f.pro)}</td>
</tr>
))}
</tbody>
</table>
</div>
{/* FAQ */}
<div className="mx-auto max-w-2xl text-center">
<h2 className="mb-8 text-2xl font-bold text-slate-900 dark:text-white">
{t('pages.pricing.faqTitle', 'Frequently Asked Questions')}
</h2>
<div className="space-y-6 text-left">
<div>
<h3 className="mb-2 font-semibold text-slate-900 dark:text-white">
{t('pages.pricing.faq1q', 'Is the Free plan really free?')}
</h3>
<p className="text-sm text-slate-600 dark:text-slate-400">
{t('pages.pricing.faq1a', 'Yes! All 32+ tools are available for free with generous monthly limits. No credit card required.')}
</p>
</div>
<div>
<h3 className="mb-2 font-semibold text-slate-900 dark:text-white">
{t('pages.pricing.faq2q', 'Can I cancel the Pro plan anytime?')}
</h3>
<p className="text-sm text-slate-600 dark:text-slate-400">
{t('pages.pricing.faq2a', 'Absolutely. Cancel anytime — no questions asked. Your account reverts to the Free plan.')}
</p>
</div>
<div>
<h3 className="mb-2 font-semibold text-slate-900 dark:text-white">
{t('pages.pricing.faq3q', 'What payment methods do you accept?')}
</h3>
<p className="text-sm text-slate-600 dark:text-slate-400">
{t('pages.pricing.faq3a', 'We will support credit/debit cards and PayPal via Stripe. Payment integration is launching soon.')}
</p>
</div>
</div>
</div>
</div>
</>
);
}

View File

@@ -12,6 +12,18 @@ const GA_MEASUREMENT_ID = (import.meta.env.VITE_GA_MEASUREMENT_ID || '').trim();
const PLAUSIBLE_DOMAIN = (import.meta.env.VITE_PLAUSIBLE_DOMAIN || '').trim();
const PLAUSIBLE_SRC = (import.meta.env.VITE_PLAUSIBLE_SRC || 'https://plausible.io/js/script.js').trim();
let initialized = false;
let consentGiven = false;
function checkStoredConsent(): boolean {
try {
const raw = localStorage.getItem('cookie_consent');
if (!raw) return false;
const parsed = JSON.parse(raw);
return parsed?.state === 'accepted';
} catch {
return false;
}
}
// ─── Google Analytics ────────────────────────────────────────────
@@ -75,15 +87,21 @@ function injectSearchConsoleVerification() {
export function initAnalytics() {
if (initialized || typeof window === 'undefined') return;
// Google Analytics
if (GA_MEASUREMENT_ID) {
ensureGtagShim();
loadGaScript();
window.gtag?.('js', new Date());
window.gtag?.('config', GA_MEASUREMENT_ID, { send_page_view: false });
}
consentGiven = checkStoredConsent();
// Plausible
// Listen for consent changes at runtime
window.addEventListener('cookie-consent', ((e: CustomEvent<{ accepted: boolean }>) => {
consentGiven = e.detail.accepted;
if (consentGiven) {
loadGaIfConsented();
loadPlausibleScript();
}
}) as EventListener);
// Google Analytics — only load if consent given
loadGaIfConsented();
// Plausible (privacy-friendly, no cookies by default — safe to load)
loadPlausibleScript();
// Search Console
@@ -92,9 +110,17 @@ export function initAnalytics() {
initialized = true;
}
function loadGaIfConsented() {
if (!consentGiven || !GA_MEASUREMENT_ID) return;
ensureGtagShim();
loadGaScript();
window.gtag?.('js', new Date());
window.gtag?.('config', GA_MEASUREMENT_ID, { send_page_view: false });
}
export function trackPageView(path: string) {
// GA4
if (window.gtag) {
// GA4 — only if consent given
if (consentGiven && window.gtag) {
window.gtag('event', 'page_view', {
page_path: path,
page_location: `${window.location.origin}${path}`,

View File

@@ -7,13 +7,15 @@ export interface ToolSeoData {
description: string;
url: string;
category?: string;
ratingValue?: number;
ratingCount?: number;
}
/**
* Generate WebApplication JSON-LD structured data for a tool page.
*/
export function generateToolSchema(tool: ToolSeoData): object {
return {
const schema: Record<string, unknown> = {
'@context': 'https://schema.org',
'@type': 'WebApplication',
name: tool.name,
@@ -26,8 +28,20 @@ export function generateToolSchema(tool: ToolSeoData): object {
priceCurrency: 'USD',
},
description: tool.description,
inLanguage: ['en', 'ar'],
inLanguage: ['en', 'ar', 'fr'],
};
if (tool.ratingValue && tool.ratingCount && tool.ratingCount > 0) {
schema.aggregateRating = {
'@type': 'AggregateRating',
ratingValue: tool.ratingValue,
ratingCount: tool.ratingCount,
bestRating: 5,
worstRating: 1,
};
}
return schema;
}
/**