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/home/components/BestSellerCategories.tsx
+10 -10
View File
@@ -32,20 +32,20 @@ const CategoryTile: FC<CategoryTileProps> = ({ title, image, featured }) => {
return (
<div
className={cn(
"relative overflow-hidden rounded-[40px]",
featured ? "col-span-2 row-span-2" : "aspect-square",
"relative overflow-hidden rounded-[24px] sm:rounded-[40px]",
featured ? "col-span-2 row-span-2 min-h-[220px] sm:min-h-0" : "aspect-square",
)}
>
<Image src={image} alt={title} fill className="object-cover" sizes={featured ? "50vw" : "25vw"} />
<Image src={image} alt={title} fill className="object-cover" sizes={featured ? "(max-width: 768px) 100vw, 50vw" : "(max-width: 768px) 50vw, 25vw"} />
<div
className={cn(
"absolute inset-x-4 bottom-4 flex items-center justify-between rounded-3xl bg-[#0A1B2C]/60 backdrop-blur-[2px]",
featured ? "px-6 py-3.5" : "px-5 py-3",
"absolute inset-x-3 bottom-3 sm:inset-x-4 sm:bottom-4 flex items-center justify-between rounded-2xl sm:rounded-3xl bg-[#0A1B2C]/60 backdrop-blur-[2px]",
featured ? "px-4 py-3 sm:px-6 sm:py-3.5" : "px-3 py-2.5 sm:px-5 sm:py-3",
)}
>
<div className={cn("text-white font-bold", featured ? "text-lg" : "text-base")}>{title}</div>
<div className={cn("text-white font-bold", featured ? "text-base sm:text-lg" : "text-sm sm:text-base")}>{title}</div>
<div className="flex items-center gap-1.5 text-white">
<span className={cn("font-bold", featured ? "text-sm" : "text-xs")}>مشاهده</span>
<span className={cn("font-bold", featured ? "text-xs sm:text-sm" : "text-xs")}>مشاهده</span>
<ArrowLeft size={featured ? 20 : 18} color="currentColor" />
</div>
</div>
@@ -55,10 +55,10 @@ const CategoryTile: FC<CategoryTileProps> = ({ title, image, featured }) => {
const BestSellerCategories: FC = () => {
return (
<div className="mt-[120px] px-[120px]">
<div className="font-bold text-2xl">دسته بندی های پرفروش</div>
<div className="mt-12 px-4 sm:mt-16 sm:px-8 lg:mt-[120px] lg:px-[120px]">
<div className="font-bold text-lg sm:text-2xl">دسته بندی های پرفروش</div>
<div className="mt-12 grid grid-cols-4 gap-10">
<div className="mt-8 sm:mt-12 grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-10">
{categories.map((category) => (
<CategoryTile key={category.title} title={category.title} image={category.image} featured={category.featured} />
))}