From 5b07ddbf8f495fc2bdc272b372b6d80e47713e1e Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Wed, 22 Jul 2026 15:48:18 +0330
Subject: [PATCH] refactor(blog): rebuild science newsletter section with RTL
 text flow, Brand C logo badge, and integrated horizontal pill input

---
 frontend/application/components/BlogPage.tsx | 52 +++++++++++---------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/frontend/application/components/BlogPage.tsx b/frontend/application/components/BlogPage.tsx
index c608b2e..3b79c19 100644
--- a/frontend/application/components/BlogPage.tsx
+++ b/frontend/application/components/BlogPage.tsx
@@ -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>