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

fix(blog): stack newsletter icon/title, description, and horizontal pill input vertically with clean space

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

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

@ -261,26 +261,25 @@ export default function BlogPage({ blogs = [] }: { blogs: BlogPost[] }) {
<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 className="flex flex-col gap-6 relative z-10 text-right max-w-3xl">
{/* Line 1: Icon + Title */}
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center text-white font-black text-xl italic border border-white/20 shadow-inner flex-shrink-0">
C
</div>
<p className="text-white/80 font-medium text-xs sm:text-sm font-vazir leading-relaxed text-right">
ماهانه یک ایمیل حاوی مهم‌ترین نکات سلامت پت‌ها، دستاوردهای پژوهشی کانینا آلمان و کدهای تخفیف اختصاصی دریافت کنید.
</p>
<h3 className="text-2xl sm:text-3xl font-black font-vazir text-white leading-tight">
مشترک خبرنامه علمی شوید
</h3>
</div>
{/* 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">
{/* Line 2: Natural Text Flow */}
<p className="text-white/80 font-medium text-xs sm:text-base font-vazir leading-relaxed text-right max-w-2xl">
ماهانه یک ایمیل حاوی مهم‌ترین نکات سلامت پت‌ها، دستاوردهای پژوهشی کانینا آلمان و کدهای تخفیف اختصاصی دریافت کنید.
</p>
{/* Line 3: Input Field and Submit Button */}
<div className="pt-2">
<div className="w-full sm:w-[460px] 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>
@ -288,7 +287,7 @@ export default function BlogPage({ blogs = [] }: { blogs: BlogPost[] }) {
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"
className="flex-1 bg-transparent border-none text-xs outline-none text-white placeholder:text-white/40 px-4 font-sans text-left"
/>
</div>
</div>