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

style: move full product description below the fold and increase sticky sidebar top offset to prevent header overlap

Browse Source
This commit is contained in:
parsa aghaei 2026-07-14 20:09:12 +03:30
parent f2f507723c
commit 1b0d6f5e06
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/application/components/ProductPage.tsx
View File

@ -257,13 +257,6 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
{fullProduct.shortDescription}
</p>
)}
{fullProduct.description && (
<div className="text-base text-medical-gray-500 font-medium leading-loose max-w-3xl font-vazir mt-6 space-y-4">
{fullProduct.description.split('\n').filter(Boolean).map((para, pIdx) => (
<p key={pIdx}>{para.trim()}</p>
))}
</div>
)}
</div>
</div>
</div>
@ -295,6 +288,23 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
</section>
)}
{/* Comprehensive Product Description Section (Below the fold) */}
{fullProduct.description && (
<section className="bg-white border border-medical-gray-200 rounded-[2.5rem] p-8 md:p-10 shadow-md space-y-6">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-canina-blue text-white rounded-2xl flex items-center justify-center shadow-lg">
<Info className="w-6 h-6" />
</div>
<h3 className="text-2xl font-black text-medical-gray-900 italic font-vazir">توضیحات و معرفی محصول</h3>
</div>
<div className="text-base text-medical-gray-600 font-medium leading-loose font-vazir space-y-4 pt-4 border-t border-medical-gray-100">
{fullProduct.description.split('\n').filter(Boolean).map((para, pIdx) => (
<p key={pIdx}>{para.trim()}</p>
))}
</div>
</section>
)}
{/* Smart Dosage Calculator Utility Section */}
<section className="bg-white rounded-[2.5rem] border border-medical-gray-200 p-8 md:p-10 shadow-md space-y-8">
<div className="flex items-center gap-4">
@ -495,7 +505,7 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
</div>
{/* Sticky Sidebar (Clean Buy Box) - Sticky starts at the top, level with the title */}
<div className="lg:col-span-4 lg:sticky lg:top-10 space-y-8">
<div className="lg:col-span-4 lg:sticky lg:top-28 space-y-8">
<div className="bg-white rounded-[2.5rem] border-2 border-medical-gray-100 p-8 shadow-2xl relative overflow-hidden">
<div className="absolute top-0 right-0 w-24 h-24 bg-canina-blue/5 rounded-full -mr-12 -mt-12" />