parsa/canina
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(blog): add breadcrumb navigation, align header text and back button neatly

Browse Source
This commit is contained in:
parsa aghaei 2026-07-22 16:02:57 +03:30
parent 13a3b1f405
commit 85b542e8b4
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/application/components/BlogPage.tsx
View File

@ -145,26 +145,34 @@ export default function BlogPage({ blogs = [] }: { blogs: BlogPost[] }) {
return (
<div className="min-h-screen bg-medical-gray-50 pt-8 pb-20 px-4 font-vazir" dir="rtl">
<div className="max-w-7xl mx-auto">
{/* Breadcrumb Navigation */}
<div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400 mb-6 font-vazir">
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => router.push('/')}>خانه</span>
<ChevronRight className="w-3 h-3 text-medical-gray-300" />
<span className="text-canina-blue font-black">مجله سلامت</span>
</div>
{/* Header */}
<div className="flex flex-col md:flex-row items-center justify-between mb-16 gap-6">
<div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6 pb-6 border-b border-medical-gray-200/60">
<div className="text-right">
<div className="inline-flex items-center gap-2 px-3 py-1 bg-canina-blue/10 text-canina-blue rounded-full text-[10px] font-black uppercase tracking-widest mb-4">
<BookOpen className="w-3 h-3" />
Canina Science Blog
<div className="inline-flex items-center gap-2 px-3 py-1 bg-canina-blue/10 text-canina-blue rounded-full text-xs font-black uppercase tracking-widest mb-3">
<BookOpen className="w-3.5 h-3.5" />
<span>Canina Science Blog</span>
</div>
<h1 className="text-4xl lg:text-6xl font-black text-medical-gray-900 italic leading-tight">
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-black text-medical-gray-900 leading-tight">
مجله تخصصی <span className="text-canina-blue">سلامت پت‌ها</span>
</h1>
<p className="text-lg text-medical-gray-500 font-medium mt-4 max-w-xl">
<p className="text-sm sm:text-base text-medical-gray-500 font-medium mt-3 max-w-xl leading-relaxed">
آخرین یافته‌های علمی محققین کانینا آلمان در مورد تغذیه و سلامت پت‌ها.
</p>
</div>
<button
onClick={() => router.push('/')}
className="px-8 py-3 bg-white border border-medical-gray-200 rounded-2xl text-medical-gray-700 shadow-sm flex items-center gap-2 font-black hover:bg-medical-gray-50 transition-all"
className="self-start md:self-auto px-5 py-2.5 bg-white border border-medical-gray-200 rounded-xl text-medical-gray-700 shadow-sm flex items-center gap-2 font-bold text-xs sm:text-sm hover:border-canina-blue hover:text-canina-blue transition-all whitespace-nowrap"
>
<ChevronRight className="w-5 h-5" />
بازگشت به خانه
<ChevronRight className="w-4 h-4" />
<span>بازگشت به خانه</span>
</button>
</div>