fix(catalog,footer): resolve catalog footer white gap, refine mobile footer layout and improve micro-scrollbar contrast
This commit is contained in:
parsa aghaei
parent
c5d975e0c7
commit
49eb1e5ff3
@ -175,7 +175,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
|
||||
onSearch={handleSearch}
|
||||
onB2BOpen={() => setB2BPortalOpen(true)}
|
||||
/>
|
||||
<main className="min-h-screen">
|
||||
<main className={`min-h-screen ${pathname === '/catalog' ? 'bg-slate-950' : ''}`}>
|
||||
{children}
|
||||
</main>
|
||||
<Footer onNavigate={handleNavigate} onShopNavigate={navigateToShop} onB2BOpen={() => setB2BPortalOpen(true)} />
|
||||
|
||||
@ -36,5 +36,9 @@ export default function CatalogClient() {
|
||||
);
|
||||
}
|
||||
|
||||
return <FlipbookCatalog products={products} />;
|
||||
return (
|
||||
<div className="w-full min-h-screen bg-slate-950">
|
||||
<FlipbookCatalog products={products} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -140,6 +140,28 @@
|
||||
background: var(--color-canina-blue);
|
||||
}
|
||||
|
||||
/* Micro horizontal scrollbar for dark backgrounds (catalog etc.) */
|
||||
.micro-hscroll-dark {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #f59e0b rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.micro-hscroll-dark::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
.micro-hscroll-dark::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 9999px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.micro-hscroll-dark::-webkit-scrollbar-thumb {
|
||||
background: #f59e0b;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
|
||||
}
|
||||
.micro-hscroll-dark::-webkit-scrollbar-thumb:hover {
|
||||
background: #fbbf24;
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
|
||||
@ -206,9 +206,9 @@ export default function Footer({
|
||||
{/* Location & Contact */}
|
||||
<div className="space-y-4 sm:space-y-8 lg:col-span-2">
|
||||
<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 grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-8">
|
||||
<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 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="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-8">
|
||||
<div className="flex flex-col sm:space-y-6 gap-2.5 sm:gap-0">
|
||||
<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.04] sm:bg-transparent p-3 sm:p-0 rounded-xl sm:rounded-none border border-white/5 sm:border-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-4 h-4 sm:w-6 sm:h-6" />
|
||||
</div>
|
||||
@ -217,7 +217,7 @@ export default function Footer({
|
||||
<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>
|
||||
</a>
|
||||
<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">
|
||||
<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.04] sm:bg-transparent p-3 sm:p-0 rounded-xl sm:rounded-none border border-white/5 sm:border-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-4 h-4 sm:w-6 sm:h-6" />
|
||||
</div>
|
||||
@ -228,7 +228,7 @@ export default function Footer({
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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="flex items-start gap-2.5 sm:gap-4 group bg-white/[0.04] sm:bg-transparent p-3 sm:p-0 rounded-xl sm:rounded-none border border-white/5 sm:border-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-4 h-4 sm:w-6 sm:h-6" />
|
||||
</div>
|
||||
@ -239,18 +239,19 @@ export default function Footer({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-2.5 sm:gap-4 min-w-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">
|
||||
{/* Trust and Verification Banner */}
|
||||
<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-col sm:flex-row items-center justify-between gap-3.5 sm:gap-6 text-center sm:text-right">
|
||||
<div className="flex items-center gap-2.5 sm:gap-4 w-full sm:w-auto">
|
||||
<div className="w-9 h-9 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-4 h-4 sm:w-6 sm:h-6" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-right min-w-0 flex-1">
|
||||
<h3 className="text-xs sm:text-sm font-bold text-white truncate">{getText('footer_auth_title', "اصالت کالا تضمین میشود")}</h3>
|
||||
<p className="text-[9px] sm:text-[10px] text-slate-400 font-bold line-clamp-1 sm:line-clamp-none">{getText('footer_auth_desc', "تمامی محصولات دارای لیبل اصالت سازمان دامپزشکی و نماد اعتماد الکترونیکی هستند.")}</p>
|
||||
<p className="text-[10px] text-slate-400 font-bold leading-relaxed">{getText('footer_auth_desc', "تمامی محصولات دارای لیبل اصالت سازمان دامپزشکی و نماد اعتماد الکترونیکی هستند.")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
|
||||
<div className="flex items-center justify-center gap-3 shrink-0 pt-2 sm:pt-0 border-t border-white/10 sm:border-0 w-full sm:w-auto">
|
||||
{/* Official eNamad Clickable Seal */}
|
||||
<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 [&_img]:!w-[48px] [&_img]:!h-[48px] sm:[&_img]:!w-[65px] sm:[&_img]:!h-[65px]"
|
||||
|
||||
@ -770,12 +770,12 @@ export default function FlipbookCatalog({ products }: FlipbookCatalogProps) {
|
||||
</div>
|
||||
|
||||
{/* ========================================================================= */}
|
||||
{/* 3. BOTTOM SLIDER & CATEGORY JUMP BAR - Fixed Height */}
|
||||
{/* 3. BOTTOM SLIDER & CATEGORY JUMP BAR - Responsive & Clean */}
|
||||
{/* ========================================================================= */}
|
||||
<div className="max-w-4xl w-full mx-auto h-14 shrink-0 bg-slate-900/95 border border-slate-800 backdrop-blur-xl rounded-2xl px-3 sm:px-4 flex items-center justify-between gap-3 shadow-xl z-30 print:hidden">
|
||||
<div className="max-w-4xl w-full mx-auto shrink-0 bg-slate-900/95 border border-slate-800 backdrop-blur-xl rounded-2xl p-2.5 sm:px-4 sm:h-14 flex flex-col sm:flex-row items-center justify-between gap-2.5 sm:gap-4 shadow-xl z-30 print:hidden">
|
||||
|
||||
{/* Page Slider */}
|
||||
<div className="flex items-center gap-2.5 flex-1 max-w-xs sm:max-w-sm">
|
||||
<div className="flex items-center gap-2.5 w-full sm:w-auto sm:flex-1 sm:max-w-sm shrink-0">
|
||||
<span className="text-[11px] font-black text-amber-300 shrink-0 font-mono">
|
||||
{currentPage === 1 ? "جلد ۱" : `صفحه ${currentPage}-${Math.min(currentPage + 1, TOTAL_PAGES)}`}
|
||||
</span>
|
||||
@ -795,17 +795,17 @@ export default function FlipbookCatalog({ products }: FlipbookCatalogProps) {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Category Jump Pills with Micro Scrollbar */}
|
||||
<div className="flex items-center gap-1.5 overflow-x-auto max-w-full py-1 micro-hscroll select-none touch-pan-x">
|
||||
{/* Category Jump Pills with Golden Micro Scrollbar */}
|
||||
<div className="flex items-center gap-1.5 overflow-x-auto w-full sm:w-auto sm:max-w-full pb-1 pt-0.5 micro-hscroll-dark select-none touch-pan-x">
|
||||
<button
|
||||
onClick={() => handleJumpToPage(1)}
|
||||
className="px-2 py-1 rounded-lg text-[10px] font-black bg-slate-800 text-white hover:bg-slate-700 transition-all shrink-0 cursor-pointer"
|
||||
className="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-800 text-white hover:bg-slate-700 transition-all shrink-0 cursor-pointer"
|
||||
>
|
||||
جلد
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleJumpToPage(2)}
|
||||
className="px-2 py-1 rounded-lg text-[10px] font-black bg-slate-800 text-white hover:bg-slate-700 transition-all shrink-0 cursor-pointer"
|
||||
className="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-800 text-white hover:bg-slate-700 transition-all shrink-0 cursor-pointer"
|
||||
>
|
||||
فهرست
|
||||
</button>
|
||||
@ -813,7 +813,7 @@ export default function FlipbookCatalog({ products }: FlipbookCatalogProps) {
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => handleJumpToPage(cat.startPage)}
|
||||
className="px-2 py-1 rounded-lg text-[10px] font-black text-white transition-all shrink-0 hover:scale-105 cursor-pointer shadow-xs"
|
||||
className="px-2.5 py-1 rounded-lg text-[10px] font-black text-white transition-all shrink-0 hover:scale-105 cursor-pointer shadow-xs"
|
||||
style={{ backgroundColor: cat.color }}
|
||||
>
|
||||
{cat.name.split(" ")[0]}
|
||||
|
||||
2
graphify-out/cache/stat-index.json
vendored
2
graphify-out/cache/stat-index.json
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user