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/Header.tsx
+34 -15
View File
@@ -8,33 +8,51 @@ import HeaderMenu from "./components/HeaderMenu";
const Header = () => {
return (
<div>
<div className="h-12 bg-secondary flex items-center justify-between px-[120px]">
<div className="flex gap-2 items-center">
<span className="text-primary flex items-center gap-2">
<Truck size={24} color="currentColor" />
<div className="text-[#3A4147] text-sm font-bold">ارسال رایگان برای خرید بالای ۱۰۰ میلیون تومان</div>
<div className="min-h-12 bg-secondary flex items-center justify-between gap-3 px-4 sm:px-8 lg:px-[120px] py-2">
<div className="flex gap-2 items-center min-w-0">
<span className="text-primary flex items-center gap-2 min-w-0">
<Truck size={20} color="currentColor" className="shrink-0 sm:size-6" />
<div className="text-[#3A4147] text-xs sm:text-sm font-bold truncate">ارسال رایگان برای خرید بالای ۱۰۰ میلیون تومان</div>
</span>
</div>
<div className="flex text-sm font-bold gap-2 items-center">
<div className="hidden md:flex text-sm font-bold gap-2 items-center shrink-0">
<span className="text-primary">20%</span>
<span>تخفیف برای اولین سفارش خود دریافت کنید |</span>
<span className="hidden lg:inline">تخفیف برای اولین سفارش خود دریافت کنید |</span>
<span>
کد تخفیف : <span className="text-primary">FIRSTORDER</span>
</span>
</div>
<div className="flex gap-2 items-center">
<Profile className="text-primary" size={24} color="currentColor" />
<div>سلام حمید</div>
<div className="flex gap-2 items-center shrink-0">
<Profile className="text-primary" size={20} color="currentColor" />
<div className="hidden sm:block text-sm">سلام حمید</div>
</div>
</div>
<div className="bg-white h-[120px] flex gap-16 items-center border border-secondary px-[120px]">
<Image src={logo} alt="logo" width={116} height={72} />
<div className="flex-1">
<div className="bg-white flex flex-col gap-4 lg:flex-row lg:gap-16 lg:items-center lg:h-[120px] border border-secondary px-4 sm:px-8 lg:px-[120px] py-4 lg:py-0">
<div className="flex items-center justify-between gap-4 lg:contents">
<Image src={logo} alt="logo" width={116} height={72} className="h-12 w-auto sm:h-[72px] shrink-0" />
<div className="flex gap-4 items-center lg:hidden">
<button type="button" aria-label="پیگیری سفارش" className="text-[#6C7680]">
<TruckFast variant="Bold" color="currentColor" size={22} />
</button>
<button type="button" aria-label="تماس" className="text-[#6C7680]">
<Call variant="Bold" color="currentColor" size={22} />
</button>
<div className="relative">
<ShoppingCart variant="Bold" color="black" size={22} />
<div className="absolute -top-1.5 -right-1.5 bg-primary text-white text-xs font-medium rounded-full size-4 flex items-center justify-center">0</div>
</div>
</div>
</div>
<div className="flex-1 w-full">
<Input variant="search" placeholder="جستجوی محصول" />
</div>
<div className="flex gap-8 items-center">
<div className="hidden lg:flex gap-8 items-center shrink-0">
<div className="flex gap-2 items-center">
<TruckFast variant="Bold" color="black" />
<div className="text-[#6C7680] text-sm">پیگیری سفارش</div>
@@ -44,7 +62,7 @@ const Header = () => {
<div className="flex gap-2 items-center">
<Call variant="Bold" color="black" />
<div className="text-[#6C7680] text-sm">(30 خط) 02134782000</div>
<div className="text-[#6C7680] text-sm whitespace-nowrap">(30 خط) 02134782000</div>
</div>
<Seprator className="h-5 w-px" />
@@ -55,6 +73,7 @@ const Header = () => {
</div>
</div>
</div>
<HeaderMenu />
</div>
);