fix(blog): stack mobile newsletter input and submit button inside container cleanly

This commit is contained in:
parsa aghaei 2026-07-22 15:59:03 +03:30
parent 1a1d828358
commit 54ef14f006

View File

@ -299,17 +299,17 @@ export default function BlogPage({ blogs = [] }: { blogs: BlogPost[] }) {
{/* Main Interactive Floating Input Bar */}
<div className="w-full max-w-xl">
<form onSubmit={(e) => { e.preventDefault(); toast.success("عضویت شما در خبرنامه علمی با موفقیت ثبت شد!"); }} className="w-full bg-white/15 backdrop-blur-xl border border-white/25 p-2 rounded-2xl sm:rounded-full flex items-center gap-3 shadow-2xl hover:border-canina-gold/40 transition-all group">
<form onSubmit={(e) => { e.preventDefault(); toast.success("عضویت شما در خبرنامه علمی با موفقیت ثبت شد!"); }} className="w-full bg-white/15 backdrop-blur-xl border border-white/25 p-2 rounded-2xl sm:rounded-full flex flex-col-reverse sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 shadow-2xl hover:border-canina-gold/40 transition-all group">
<input
type="email"
required
dir="ltr"
placeholder="آدرس ایمیل شما (e.g. name@domain.com)..."
className="flex-1 bg-transparent border-none text-xs sm:text-sm outline-none text-white placeholder:text-white/45 px-4 font-sans text-left"
placeholder="آدرس ایمیل شما (name@domain.com)..."
className="flex-1 bg-transparent border-none text-xs sm:text-sm outline-none text-white placeholder:text-white/45 px-3 sm:px-4 py-2.5 sm:py-0 font-sans text-left"
/>
<button
type="submit"
className="bg-canina-gold hover:bg-white text-canina-dark px-8 py-3.5 rounded-xl sm:rounded-full font-black text-xs sm:text-sm transition-all duration-300 whitespace-nowrap shadow-xl hover:scale-105 flex items-center gap-2 font-vazir cursor-pointer"
className="bg-canina-gold hover:bg-white text-canina-dark px-6 sm:px-8 py-3.5 rounded-xl sm:rounded-full font-black text-xs sm:text-sm transition-all duration-300 whitespace-nowrap shadow-xl hover:scale-105 flex items-center justify-center gap-2 font-vazir cursor-pointer flex-shrink-0"
>
<span>عضویت آنی</span>
<Mail className="w-4 h-4" />