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

refactor(blog): rebuild science newsletter section with RTL text flow, Brand C logo badge, and integrated horizontal pill input

Browse Source
This commit is contained in:
parsa aghaei 2026-07-22 15:48:18 +03:30
parent 078f9ba1f2
commit 5b07ddbf8f
1 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -258,31 +258,39 @@ export default function BlogPage({ blogs = [] }: { blogs: BlogPost[] }) {
))}
{/* Newsletter / CTA Box */}
<div className="bg-canina-blue rounded-[2.5rem] sm:rounded-[3rem] p-8 sm:p-12 text-white relative overflow-hidden font-vazir shadow-2xl">
<div className="absolute top-0 left-0 w-64 h-64 bg-white/5 rounded-full blur-3xl pointer-events-none" />
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 relative z-10">
<div className="flex items-start sm:items-center gap-4 sm:gap-6 text-right">
<div className="w-14 h-14 sm:w-16 sm:h-16 bg-white/10 backdrop-blur-md rounded-2xl sm:rounded-3xl flex items-center justify-center text-white font-black text-2xl sm:text-3xl italic shadow-inner flex-shrink-0">
C
</div>
<div>
<h3 className="text-xl sm:text-2xl lg:text-3xl font-black mb-2 font-vazir text-white leading-tight">مشترک خبرنامه علمی شوید</h3>
<p className="text-white/80 font-medium text-xs sm:text-sm font-vazir max-w-xl leading-relaxed">
ماهانه یک ایمیل حاوی مهم‌ترین نکات سلامت پت‌ها و کدهای تخفیف اختصاصی دریافت کنید.
</p>
<div className="bg-canina-blue rounded-[2.5rem] sm:rounded-[3rem] p-8 sm:p-12 text-white relative overflow-hidden font-vazir shadow-2xl" dir="rtl">
<div className="absolute top-0 right-0 w-80 h-80 bg-white/5 rounded-full blur-3xl pointer-events-none" />
<div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-8 relative z-10">
{/* Right Side: Fully Right-Aligned Titles and Long Natural Flow Paragraph */}
<div className="flex-1 text-right space-y-3 max-w-xl">
<div className="flex items-center gap-3">
<h3 className="text-2xl sm:text-3xl font-black font-vazir text-white leading-tight">
مشترک خبرنامه علمی شوید
</h3>
{/* Brand C Icon Badge positioned at top-left of title */}
<div className="w-9 h-9 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center text-white font-black text-lg italic border border-white/20 shadow-inner flex-shrink-0">
C
</div>
</div>
<p className="text-white/80 font-medium text-xs sm:text-sm font-vazir leading-relaxed text-right">
ماهانه یک ایمیل حاوی مهم‌ترین نکات سلامت پت‌ها، دستاوردهای پژوهشی کانینا آلمان و کدهای تخفیف اختصاصی دریافت کنید.
</p>
</div>
<div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto flex-shrink-0">
<input
type="email"
placeholder="آدرس ایمیل شما..."
className="bg-white/10 border border-white/20 rounded-xl sm:rounded-2xl px-4 py-3 sm:py-3.5 text-xs outline-none focus:bg-white/20 placeholder:text-white/50 text-white w-full sm:w-72 font-vazir text-right"
/>
<button className="bg-white text-canina-blue px-6 sm:px-8 py-3 sm:py-3.5 rounded-xl sm:rounded-2xl font-black text-xs hover:bg-canina-gold hover:text-canina-dark transition-all whitespace-nowrap shadow-lg">
عضویت در خبرنامه
</button>
{/* Left Side: Unified Single Horizontal Pill Container Form */}
<div className="w-full lg:w-auto flex-shrink-0 flex items-center justify-start lg:justify-end">
<div className="w-full sm:w-[420px] bg-white/10 border border-white/20 p-1.5 rounded-2xl sm:rounded-full flex items-center gap-2 shadow-2xl backdrop-blur-md">
<button className="bg-white text-canina-blue px-6 sm:px-8 py-3.5 rounded-xl sm:rounded-full font-black text-xs hover:bg-canina-gold hover:text-canina-dark transition-all whitespace-nowrap shadow-lg font-vazir flex-shrink-0">
عضویت
</button>
<input
type="email"
dir="ltr"
placeholder="you@example.com..."
className="flex-1 bg-transparent border-none text-xs outline-none text-white placeholder:text-white/40 px-3 font-sans text-left"
/>
</div>
</div>
</div>
</div>