Merge branch 'develop'
Some checks failed
E2E Playwright Tests / Run Full E2E & Security Suites (push) Waiting to run
Deploy Canina / deploy (push) Has been cancelled

This commit is contained in:
parsa aghaei 2026-09-06 11:32:11 +03:30
commit 3294583862
3 changed files with 719 additions and 705 deletions

View File

@ -48,29 +48,43 @@ export default function Footer({
}; };
return ( return (
<footer className="bg-medical-gray-900 text-white pt-24 pb-36 sm:pb-12 font-shabnam relative" dir="rtl"> <footer className="bg-medical-gray-900 text-white pt-10 sm:pt-24 pb-28 sm:pb-12 font-shabnam relative" dir="rtl">
{/* Floating Back-to-Top Button */} {/* Floating Back-to-Top Button */}
{showScroll && ( {showScroll && (
<button <button
onClick={scrollToTop} onClick={scrollToTop}
className="fixed bottom-24 left-6 sm:bottom-8 sm:left-8 z-40 bg-canina-blue text-white p-3 rounded-full shadow-2xl hover:bg-canina-dark hover:scale-110 transition-all border border-white/20 group flex items-center gap-2 font-vazir text-xs font-black" className="fixed bottom-20 left-4 sm:bottom-8 sm:left-8 z-40 bg-canina-blue text-white p-2.5 sm:p-3 rounded-full shadow-2xl hover:bg-canina-dark hover:scale-110 transition-all border border-white/20 group flex items-center gap-2 font-vazir text-xs font-black"
title="بازگشت به بالای صفحه" title="بازگشت به بالای صفحه"
> >
<ArrowUp className="w-5 h-5 group-hover:-translate-y-1 transition-transform" /> <ArrowUp className="w-4 h-4 sm:w-5 sm:h-5 group-hover:-translate-y-1 transition-transform" />
<span className="hidden sm:inline">بازگشت به بالا</span> <span className="hidden sm:inline">بازگشت به بالا</span>
</button> </button>
)} )}
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 mb-20"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 sm:gap-16 mb-8 sm:mb-20">
{/* Brand Presence */} {/* Brand Presence */}
<div className="space-y-8"> <div className="space-y-4 sm:space-y-8">
<BrandLogo isDarkBackground size="lg" /> <div className="flex items-center justify-between">
<p className="text-sm text-slate-300 leading-relaxed font-medium"> <BrandLogo isDarkBackground size="lg" />
<div className="flex gap-2.5 sm:hidden">
{getText('contact_instagram', '') && (
<a href={getText('contact_instagram', '#')} target="_blank" rel="noopener noreferrer" aria-label="صفحه اینستاگرام رسمی کنینا ایران" className="w-9 h-9 bg-white/10 rounded-xl flex items-center justify-center hover:bg-canina-blue hover:text-white transition-all text-slate-300">
<Instagram className="w-4 h-4" />
</a>
)}
{getText('contact_telegram', '') && (
<a href={getText('contact_telegram', '#')} target="_blank" rel="noopener noreferrer" aria-label="کانال تلگرام رسمی کنینا ایران" className="w-9 h-9 bg-white/10 rounded-xl flex items-center justify-center hover:bg-canina-blue hover:text-white transition-all text-slate-300">
<Globe className="w-4 h-4" />
</a>
)}
</div>
</div>
<p className="text-xs sm:text-sm text-slate-300 leading-relaxed font-medium">
{getText('footer_brand_desc', "تدارک هوشمندانه سلامت برای همراهان وفادار شما. واردکننده انحصاری مکمل‌های درمانی با گرید دارویی اختصاصی از آلمان با سابقه ۴۰ سال نوآوری.")} {getText('footer_brand_desc', "تدارک هوشمندانه سلامت برای همراهان وفادار شما. واردکننده انحصاری مکمل‌های درمانی با گرید دارویی اختصاصی از آلمان با سابقه ۴۰ سال نوآوری.")}
</p> </p>
<div className="flex gap-4"> <div className="hidden sm:flex gap-4">
{getText('contact_instagram', '') && ( {getText('contact_instagram', '') && (
<a href={getText('contact_instagram', '#')} target="_blank" rel="noopener noreferrer" aria-label="صفحه اینستاگرام رسمی کنینا ایران" className="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center hover:bg-canina-blue hover:text-white transition-all text-slate-300"> <a href={getText('contact_instagram', '#')} target="_blank" rel="noopener noreferrer" aria-label="صفحه اینستاگرام رسمی کنینا ایران" className="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center hover:bg-canina-blue hover:text-white transition-all text-slate-300">
<Instagram className="w-5 h-5" /> <Instagram className="w-5 h-5" />
@ -85,69 +99,69 @@ export default function Footer({
</div> </div>
{/* Quick Links / Menu Column 1 */} {/* Quick Links / Menu Column 1 */}
<div className="space-y-8"> <div className="space-y-4 sm:space-y-8">
<h3 className="text-xl font-bold text-white border-b-2 border-canina-blue pb-2 max-w-max font-lalezar">{getText('footer_links_title', "دسترسی سریع")}</h3> <h3 className="text-base sm:text-xl font-bold text-white border-b-2 border-canina-blue pb-1.5 sm:pb-2 max-w-max font-lalezar">{getText('footer_links_title', "دسترسی سریع")}</h3>
<ul className="space-y-4 text-sm font-bold text-slate-300"> <ul className="grid grid-cols-2 sm:grid-cols-1 gap-x-3 gap-y-2.5 sm:gap-y-4 text-xs sm:text-sm font-bold text-slate-300">
{footerCol1.length > 0 ? ( {footerCol1.length > 0 ? (
footerCol1.map((item) => ( footerCol1.map((item) => (
<li key={item.id || item.href}> <li key={item.id || item.href}>
<Link href={item.href} className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group"> <Link href={item.href} className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group">
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" /> <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
{item.label} <span className="truncate">{item.label}</span>
</Link> </Link>
</li> </li>
)) ))
) : ( ) : (
<> <>
<li> <li>
<Link href="/shop" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group"> <Link href="/shop" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group">
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" /> <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
{getText('footer_link_products', "محصولات تخصصی ۲۰۲۴")} <span className="truncate">{getText('footer_link_products', "محصولات تخصصی ۲۰۲۴")}</span>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/blog" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group"> <Link href="/blog" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group">
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" /> <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
{getText('footer_link_blog', "مجله سلامت پت (وبلاگ)")} <span className="truncate">{getText('footer_link_blog', "مجله سلامت پت (وبلاگ)")}</span>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/profile" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group"> <Link href="/profile" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group">
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" /> <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
{getText('footer_link_profiles', "شناسنامه پت‌ها")} <span className="truncate">{getText('footer_link_profiles', "شناسنامه پت‌ها")}</span>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/wiki" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group"> <Link href="/wiki" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group">
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" /> <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
{getText('footer_link_wiki', "دانشنامه ترکیبات")} <span className="truncate">{getText('footer_link_wiki', "دانشنامه ترکیبات")}</span>
</Link> </Link>
</li> </li>
</> </>
)} )}
<li> <li className="col-span-2 sm:col-span-1">
<Link <Link
href="/trust-seals" href="/trust-seals"
className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group text-emerald-400" className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group text-emerald-400"
> >
<ShieldCheck className="w-4 h-4 text-emerald-400" /> <ShieldCheck className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-emerald-400 flex-shrink-0" />
<span>نمادهای اعتماد و مجوزهای رسمی</span> <span>نمادهای اعتماد و مجوزهای رسمی</span>
</Link> </Link>
</li> </li>
<li> <li className="col-span-2 sm:col-span-1">
<Link <Link
href="/catalog" href="/catalog"
className="inline-flex items-center justify-center gap-2.5 px-5 py-3 bg-canina-blue hover:bg-blue-600 text-white rounded-2xl text-xs font-black transition-all shadow-lg shadow-canina-blue/30 hover:scale-[1.02] border border-blue-400/30 group cursor-pointer" className="w-full inline-flex items-center justify-center gap-2 px-3 py-2 sm:px-5 sm:py-3 bg-canina-blue hover:bg-blue-600 text-white rounded-xl sm:rounded-2xl text-[11px] sm:text-xs font-black transition-all shadow-md shadow-canina-blue/30 hover:scale-[1.02] border border-blue-400/30 group cursor-pointer"
> >
<Download className="w-4 h-4 text-amber-300 group-hover:-translate-y-0.5 transition-transform" /> <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-amber-300 group-hover:-translate-y-0.5 transition-transform" />
<span>مشاهده و دانلود کاتالوگ آنلاین محصولات</span> <span>مشاهده و دانلود کاتالوگ آنلاین محصولات</span>
</Link> </Link>
</li> </li>
{isB2BEnabled && ( {isB2BEnabled && (
<li> <li className="col-span-2 sm:col-span-1">
<Link href="/b2b" className="hover:text-canina-blue hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group text-blue-200"> <Link href="/b2b" className="hover:text-canina-blue hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-1.5 sm:gap-2 group text-blue-200">
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" /> <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all flex-shrink-0" />
{getText('footer_link_b2b', "همکاری با کلینیک‌ها و پت‌شاپ‌ها (B2B)")} <span>{getText('footer_link_b2b', "همکاری با کلینیک‌ها و پت‌شاپ‌ها (B2B)")}</span>
</Link> </Link>
</li> </li>
)} )}
@ -155,63 +169,63 @@ export default function Footer({
</div> </div>
{/* Location & Contact */} {/* Location & Contact */}
<div className="space-y-8 lg:col-span-2"> <div className="space-y-4 sm:space-y-8 lg:col-span-2">
<h3 className="text-xl font-bold text-white border-b-2 border-canina-blue pb-2 max-w-max font-lalezar">{getText('footer_contact_title', "اطلاعات تماس نمایندگی")}</h3> <h3 className="text-base sm:text-xl font-bold text-white border-b-2 border-canina-blue pb-1.5 sm:pb-2 max-w-max font-lalezar">{getText('footer_contact_title', "اطلاعات تماس نمایندگی")}</h3>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-8">
<div className="space-y-6"> <div className="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-6">
<a href={getText('contact_phone_link', `tel:${getText('contact_phone', '02188884444').replace(/[^0-9+]/g, '')}`)} className="flex gap-4 group hover:opacity-90 transition-opacity"> <a href={getText('contact_phone_link', `tel:${getText('contact_phone', '02188884444').replace(/[^0-9+]/g, '')}`)} className="flex items-center sm:items-start gap-2.5 sm:gap-4 group hover:opacity-90 transition-opacity bg-white/[0.03] sm:bg-transparent p-2.5 sm:p-0 rounded-xl sm:rounded-none">
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0"> <div className="w-9 h-9 sm:w-12 sm:h-12 bg-white/5 rounded-xl sm:rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
<Phone className="w-6 h-6" /> <Phone className="w-4 h-4 sm:w-6 sm:h-6" />
</div> </div>
<div> <div className="min-w-0">
<p className="text-[11px] text-slate-400 font-extrabold uppercase mb-1">{getText('footer_phone_label', "خط ویژه فروش")}</p> <p className="text-[10px] sm:text-[11px] text-slate-400 font-extrabold uppercase mb-0.5">{getText('footer_phone_label', "خط ویژه فروش")}</p>
<p className="text-lg font-extrabold tracking-widest text-left text-slate-200" dir="ltr">{getText('contact_phone', "۰۲۱-۸۸۸۸۴۴۴۴")}</p> <p className="text-xs sm:text-lg font-extrabold tracking-wider sm:tracking-widest text-left text-slate-200" dir="ltr">{getText('contact_phone', "۰۲۱-۸۸۸۸۴۴۴۴")}</p>
</div> </div>
</a> </a>
<a href={`mailto:${getText('contact_email', 'info@canina.ir')}`} className="flex gap-4 group hover:opacity-90 transition-opacity"> <a href={`mailto:${getText('contact_email', 'info@canina.ir')}`} className="flex items-center sm:items-start gap-2.5 sm:gap-4 group hover:opacity-90 transition-opacity bg-white/[0.03] sm:bg-transparent p-2.5 sm:p-0 rounded-xl sm:rounded-none">
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0"> <div className="w-9 h-9 sm:w-12 sm:h-12 bg-white/5 rounded-xl sm:rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
<Mail className="w-6 h-6" /> <Mail className="w-4 h-4 sm:w-6 sm:h-6" />
</div> </div>
<div> <div className="min-w-0">
<p className="text-[11px] text-slate-400 font-extrabold uppercase mb-1">{getText('footer_email_label', "مکاتبات رسمی")}</p> <p className="text-[10px] sm:text-[11px] text-slate-400 font-extrabold uppercase mb-0.5">{getText('footer_email_label', "مکاتبات رسمی")}</p>
<p className="text-sm font-bold text-slate-300">{getText('contact_email', "info@canina.ir")}</p> <p className="text-xs sm:text-sm font-bold text-slate-300 truncate">{getText('contact_email', "info@canina.ir")}</p>
</div> </div>
</a> </a>
</div> </div>
<div className="flex gap-4 group"> <div className="flex items-start gap-2.5 sm:gap-4 group bg-white/[0.03] sm:bg-transparent p-2.5 sm:p-0 rounded-xl sm:rounded-none">
<div className="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0"> <div className="w-9 h-9 sm:w-12 sm:h-12 bg-white/5 rounded-xl sm:rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-transform flex-shrink-0">
<MapPin className="w-6 h-6" /> <MapPin className="w-4 h-4 sm:w-6 sm:h-6" />
</div> </div>
<div> <div className="min-w-0">
<p className="text-[11px] text-slate-400 font-extrabold uppercase mb-1">{getText('footer_address_label', "دفتر مرکزی")}</p> <p className="text-[10px] sm:text-[11px] text-slate-400 font-extrabold uppercase mb-0.5">{getText('footer_address_label', "دفتر مرکزی")}</p>
<p className="text-sm font-bold leading-relaxed text-slate-300">{getText('contact_address', "تهران، جردن، خیابان سعیدی، ساختمان کنینا، طبقه ۵، واحد ۱۹")}</p> <p className="text-xs sm:text-sm font-bold leading-relaxed text-slate-300">{getText('contact_address', "تهران، جردن، خیابان سعیدی، ساختمان کنینا، طبقه ۵، واحد ۱۹")}</p>
</div> </div>
</div> </div>
</div> </div>
<div className="mt-10 p-6 bg-white/5 rounded-[2rem] border border-white/10 flex flex-col sm:flex-row items-center justify-between gap-6"> <div className="mt-4 sm:mt-10 p-3.5 sm:p-6 bg-white/5 rounded-2xl sm:rounded-[2rem] border border-white/10 flex flex-row items-center justify-between gap-3 sm:gap-6">
<div className="flex items-center gap-4"> <div className="flex items-center gap-2.5 sm:gap-4 min-w-0">
<div className="w-10 h-10 bg-green-500/20 text-green-500 rounded-full flex items-center justify-center flex-shrink-0"> <div className="w-8 h-8 sm:w-10 sm:h-10 bg-green-500/20 text-green-500 rounded-full flex items-center justify-center flex-shrink-0">
<ShieldCheck className="w-6 h-6" /> <ShieldCheck className="w-4 h-4 sm:w-6 sm:h-6" />
</div> </div>
<div> <div className="min-w-0">
<h3 className="text-sm font-bold text-white">{getText('footer_auth_title', "اصالت کالا تضمین می‌شود")}</h3> <h3 className="text-xs sm:text-sm font-bold text-white truncate">{getText('footer_auth_title', "اصالت کالا تضمین می‌شود")}</h3>
<p className="text-[10px] text-slate-400 font-bold">{getText('footer_auth_desc', "تمامی محصولات دارای لیبل اصالت سازمان دامپزشکی و نماد اعتماد الکترونیکی هستند.")}</p> <p className="text-[9px] sm:text-[10px] text-slate-400 font-bold line-clamp-1 sm:line-clamp-none">{getText('footer_auth_desc', "تمامی محصولات دارای لیبل اصالت سازمان دامپزشکی و نماد اعتماد الکترونیکی هستند.")}</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
{/* Official eNamad Clickable Seal */} {/* Official eNamad Clickable Seal */}
<div <div
className="bg-white p-2 rounded-xl shadow-md flex items-center justify-center flex-shrink-0 hover:scale-105 transition-transform" className="bg-white p-1 sm:p-2 rounded-lg sm:rounded-xl shadow-md flex items-center justify-center flex-shrink-0 hover:scale-105 transition-transform [&_img]:!w-[48px] [&_img]:!h-[48px] sm:[&_img]:!w-[65px] sm:[&_img]:!h-[65px]"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: getText('ENAMAD_HTML_CODE', `<a referrerpolicy='origin' target='_blank' href='https://trustseal.enamad.ir/?id=765218&Code=dOdphRTqZwp3Kep5m07XwaqA0DTFh5ny'><img referrerpolicy='origin' src='https://trustseal.enamad.ir/logo.aspx?id=765218&Code=dOdphRTqZwp3Kep5m07XwaqA0DTFh5ny' alt='اینماد رسمی کنینا' style='cursor:pointer; width: 65px; height: 65px;' code='dOdphRTqZwp3Kep5m07XwaqA0DTFh5ny'></a>`) __html: getText('ENAMAD_HTML_CODE', `<a referrerpolicy='origin' target='_blank' href='https://trustseal.enamad.ir/?id=765218&Code=dOdphRTqZwp3Kep5m07XwaqA0DTFh5ny'><img referrerpolicy='origin' src='https://trustseal.enamad.ir/logo.aspx?id=765218&Code=dOdphRTqZwp3Kep5m07XwaqA0DTFh5ny' alt='اینماد رسمی کنینا' style='cursor:pointer; width: 65px; height: 65px;' code='dOdphRTqZwp3Kep5m07XwaqA0DTFh5ny'></a>`)
}} }}
/> />
{/* Official Zibal IPG Trust Seal */} {/* Official Zibal IPG Trust Seal */}
<div className="bg-white p-2 rounded-xl shadow-md flex items-center justify-center flex-shrink-0 hover:scale-105 transition-transform"> <div className="bg-white p-1 sm:p-2 rounded-lg sm:rounded-xl shadow-md flex items-center justify-center flex-shrink-0 hover:scale-105 transition-transform">
<a <a
href="https://gateway.zibal.ir/trustMe/canina.ir" href="https://gateway.zibal.ir/trustMe/canina.ir"
target="_blank" target="_blank"
@ -225,7 +239,7 @@ export default function Footer({
width={65} width={65}
height={65} height={65}
unoptimized unoptimized
className="max-w-[65px] h-[65px] object-contain" className="max-w-[48px] h-[48px] sm:max-w-[65px] sm:h-[65px] object-contain"
/> />
</a> </a>
</div> </div>
@ -235,7 +249,7 @@ export default function Footer({
</div> </div>
<div className="pt-12 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-6 text-[10px] font-bold uppercase tracking-[0.3em] font-shabnam"> <div className="pt-6 sm:pt-12 border-t border-white/5 flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-6 text-[10px] font-bold uppercase tracking-[0.2em] sm:tracking-[0.3em] font-shabnam text-center sm:text-right">
<div className="text-slate-400 font-shabnam">{getText('footer_copyright', "© ۲۰۲۶ کنینا ایران. تمامی حقوق محفوظ است.")}</div> <div className="text-slate-400 font-shabnam">{getText('footer_copyright', "© ۲۰۲۶ کنینا ایران. تمامی حقوق محفوظ است.")}</div>
<div className="flex gap-4 sm:gap-8 font-shabnam text-slate-400 items-center"> <div className="flex gap-4 sm:gap-8 font-shabnam text-slate-400 items-center">
<Link href="/about" className="font-extrabold hover:text-white transition-colors whitespace-nowrap">{getText('footer_about', "درباره ما")}</Link> <Link href="/about" className="font-extrabold hover:text-white transition-colors whitespace-nowrap">{getText('footer_about', "درباره ما")}</Link>

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff