danak/mehraein-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive home page and layout

Browse Source
This commit is contained in:
hamid zarghami
2026-07-19 16:29:37 +03:30
parent 2adaac8ec4
commit cd266c057c
20 changed files with 198 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/shared/components/AllProductsMenu.tsx
+23 -21
View File
@@ -42,28 +42,30 @@ const columns: CategoryGroup[][] = [
const AllProductsMenu: FC = () => {
return (
<div className="absolute top-full right-[120px] z-50 mt-2 w-[1099px] rounded-[32px] bg-[#F9FAFB]/90 px-8 pt-8 pb-10">
<div className="flex w-full items-start justify-between">
{columns.map((groups) => (
<div key={groups[0].title} className="flex w-[228px] shrink-0 flex-col gap-6">
{groups.map((group) => (
<div key={group.title} className="flex flex-col gap-2">
<div className="flex h-10 items-center px-4 text-base font-bold text-black">{group.title}</div>
{group.items.map((item) => (
<button
key={item}
type="button"
className="flex h-6 w-full items-center px-4 text-right text-base font-medium text-[#011E3A] transition-colors hover:text-primary"
>
{item}
</button>
))}
</div>
))}
</div>
))}
<div className="absolute top-full z-50 mt-2 inset-x-4 sm:inset-x-8 lg:inset-x-auto lg:right-[120px] w-auto lg:w-[min(1099px,calc(100vw-240px))] max-h-[70vh] overflow-y-auto rounded-2xl sm:rounded-[32px] bg-[#F9FAFB]/95 backdrop-blur-sm px-4 sm:px-8 pt-6 sm:pt-8 pb-6 sm:pb-10 shadow-lg border border-[#E9EEF2]/80">
<div className="flex w-full flex-col lg:flex-row items-start justify-between gap-8">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-0 lg:contents w-full lg:w-auto">
{columns.map((groups) => (
<div key={groups[0].title} className="flex w-full lg:w-[228px] shrink-0 flex-col gap-6">
{groups.map((group) => (
<div key={group.title} className="flex flex-col gap-2">
<div className="flex h-10 items-center px-2 sm:px-4 text-sm sm:text-base font-bold text-black">{group.title}</div>
{group.items.map((item) => (
<button
key={item}
type="button"
className="flex h-6 w-full items-center px-2 sm:px-4 text-right text-sm sm:text-base font-medium text-[#011E3A] transition-colors hover:text-primary"
>
{item}
</button>
))}
</div>
))}
</div>
))}
</div>
<div className="relative h-[157px] w-[163px] shrink-0 overflow-hidden rounded-2xl">
<div className="relative mx-auto lg:mx-0 h-[140px] w-[145px] sm:h-[157px] sm:w-[163px] shrink-0 overflow-hidden rounded-2xl">
<Image src={businessCardMenu} alt="کارت ویزیت" fill className="object-cover" sizes="163px" />
</div>
</div>