الميزات: إضافة صفحات الأسعار والمدونة، وتفعيل ميزة تقييم الأدوات
- إضافة روابط جديدة في تذييل صفحات الأسعار والمدونة. - إنشاء مكون صفحة الأسعار لعرض تفاصيل الخطط ومقارنة الميزات. - تطوير مكون صفحة المدونة لعرض منشورات المدونة مع روابط للمقالات الفردية. - تقديم مكون تقييم الأدوات لتلقي ملاحظات المستخدمين حول الأدوات، بما في ذلك التقييم بالنجوم والتعليقات الاختيارية. - تفعيل وظيفة useToolRating لجلب وعرض تقييمات الأدوات. - تحديث أدوات تحسين محركات البحث لتضمين بيانات التقييم في البيانات المنظمة للأدوات. - تحسين ملفات i18n بترجمات للميزات والصفحات الجديدة. - دمج إدارة الموافقة على ملفات تعريف الارتباط لتتبع التحليلات.
This commit is contained in:
Your Name
124
frontend/src/pages/BlogPage.tsx
Normal file
124
frontend/src/pages/BlogPage.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
221
frontend/src/pages/PricingPage.tsx
Normal file
221
frontend/src/pages/PricingPage.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user