File size: 4,263 Bytes
1445dff | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import React from 'react';
import { Search, Library, Sparkles, BookOpen, GraduationCap } from 'lucide-react';
export const Home = ({ onStartResearch, onExploreLibrary, t }) => {
return (
<div className="max-w-5xl mx-auto space-y-12 py-8">
{/* Hero Section */}
<section className="text-center space-y-6">
<div className="inline-block p-3 bg-emerald-100 rounded-full mb-4">
<Sparkles className="w-8 h-8 text-emerald-700" />
</div>
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight">
{t.heroTitle || "المكتبة المريدية العالمية"}
</h1>
<p className="text-xl text-slate-600 max-w-2xl mx-auto">
{t.heroSubtitle || "منصة رقمية متطورة للبحث في تراث الشيخ أحمدو بمبا وعلوم المريدية"}
</p>
</section>
{/* Action Cards */}
<div className="grid md:grid-cols-2 gap-8 mt-12">
{/* Card 1: Smart Researcher */}
<div
onClick={onStartResearch}
className="group cursor-pointer bg-white p-8 rounded-2xl border border-slate-200 shadow-sm hover:shadow-xl hover:border-emerald-500 transition-all duration-300"
>
<div className="w-14 h-14 bg-emerald-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<Search className="w-7 h-7 text-white" />
</div>
<h2 className="text-2xl font-bold text-slate-900 mb-3">{t.navSmartResearcher}</h2>
<p className="text-slate-600 mb-6 leading-relaxed">
استخدم الذكاء الاصطناعي لاستخراج الدرر من المتون والقصائد والحصول على إجابات موثقة.
</p>
<div className="flex items-center text-emerald-600 font-semibold">
<span>{t.startResearch || "ابدأ البحث الآن"}</span>
<span className="mx-2">←</span>
</div>
</div>
{/* Card 2: Library */}
<div
onClick={onExploreLibrary}
className="group cursor-pointer bg-white p-8 rounded-2xl border border-slate-200 shadow-sm hover:shadow-xl hover:border-blue-500 transition-all duration-300"
>
<div className="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<Library className="w-7 h-7 text-white" />
</div>
<h2 className="text-2xl font-bold text-slate-900 mb-3">{t.navLibrary}</h2>
<p className="text-slate-600 mb-6 leading-relaxed">
تصفح الأرشيف الكامل للمؤلفات والقصائد المصنفة حسب الموضوع والمنهج.
</p>
<div className="flex items-center text-blue-600 font-semibold">
<span>{t.exploreLibrary || "تصفح المكتبة"}</span>
<span className="mx-2">←</span>
</div>
</div>
</div>
{/* Features Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-12 border-t">
<div className="flex gap-4 items-start">
<BookOpen className="w-6 h-6 text-emerald-600 shrink-0" />
<div>
<h3 className="font-bold text-slate-900">مصادر موثوقة</h3>
<p className="text-sm text-slate-500">متون محققة ومراجعة علمياً.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<GraduationCap className="w-6 h-6 text-emerald-600 shrink-0" />
<div>
<h3 className="font-bold text-slate-900">منهج أكاديمي</h3>
<p className="text-sm text-slate-500">أدوات بحث تناسب الباحثين والمريدين.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<Sparkles className="w-6 h-6 text-emerald-600 shrink-0" />
<div>
<h3 className="font-bold text-slate-900">ذكاء اصطناعي</h3>
<p className="text-sm text-slate-500">تحليل عرفاني وبحث ذكي متطور.</p>
</div>
</div>
</div>
</div>
);
}; |