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/Footer.tsx
+8 -8
View File
@@ -15,8 +15,8 @@ const categoryLinks = ["چاپ جعبه و بسته‌بندی", "جعبه ها
const Footer: FC = () => {
return (
<footer className="mt-auto border-t border-[#E9EEF2] bg-[#F7F9FB]">
<div className="px-[120px] pt-12 pb-6">
<div className="flex justify-between gap-8">
<div className="px-4 sm:px-8 lg:px-[120px] pt-8 sm:pt-12 pb-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:flex xl:justify-between gap-8 xl:gap-6">
<FooterContact />
<FooterLinkColumn title="راهنمای خرید" links={guideLinks} />
<FooterLinkColumn title="خدمات مشتریان" links={serviceLinks} />
@@ -25,19 +25,19 @@ const Footer: FC = () => {
<FooterTrustValues />
</div>
<Seprator className="my-8 h-px w-full" />
<Seprator className="my-6 sm:my-8 h-px w-full" />
<div className="flex items-center justify-between gap-8">
<div className="flex flex-col lg:flex-row items-center lg:items-start justify-between gap-8">
<FooterSocial />
<Seprator className="h-16 w-px shrink-0" />
<Seprator className="hidden lg:block h-16 w-px shrink-0" />
<FooterTrustBadges />
<Seprator className="h-16 w-px shrink-0" />
<Seprator className="hidden lg:block h-16 w-px shrink-0" />
<FooterNewsletter />
</div>
<Seprator className="my-8 h-px w-full" />
<Seprator className="my-6 sm:my-8 h-px w-full" />
<p className="text-center text-xs text-[#6C7680]">تمامی حقوق برای سایت نیکوپکجینگ بوده و با ذکر نام لینک به منبع مجاز می‌باشد.</p>
<p className="text-center text-xs text-[#6C7680] leading-5 px-2">تمامی حقوق برای سایت نیکوپکجینگ بوده و با ذکر نام لینک به منبع مجاز می‌باشد.</p>
</div>
</footer>
);
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>
);
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>
app/shared/components/FooterContact.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ const ContactItem: FC<ContactItemProps> = ({ icon, children }) => {
const FooterContact: FC = () => {
return (
<div className="flex max-w-[280px] flex-col gap-5">
<div className="flex max-w-none sm:max-w-[280px] flex-col gap-5">
<ContactItem icon={<Location size={18} color="currentColor" variant="Linear" />}>
جاده خاوران، شریف آباد، شهرک صنعتی شنزار، بعد از میدان چهارم، خیابان بوستان پنجم، خیابان گلبهار، پلاک ۱۲۲
</ContactItem>
app/shared/components/FooterNewsletter.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { type FC } from "react";
const FooterNewsletter: FC = () => {
return (
<div className="flex max-w-[360px] flex-col gap-4">
<div className="flex w-full max-w-[360px] flex-col gap-4 lg:ms-auto">
<p className="text-sm leading-6 font-bold text-[#0A1B2C]">برای دریافت آخرین پیشنهادها، اخبار و مطالب الهام‌بخش، در خبرنامه ما عضو شوید.</p>
<form className="relative" action="#">
<input
app/shared/components/FooterSocial.tsx
+2 -2
View File
@@ -62,9 +62,9 @@ const socialLinks: SocialLink[] = [
const FooterSocial: FC = () => {
return (
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-4 items-center lg:items-start text-center lg:text-right">
<h3 className="text-sm font-bold text-[#0A1B2C]">ما را در شبکه‌های اجتماعی دنبال کنید</h3>
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 flex-wrap justify-center lg:justify-start">
{socialLinks.map((item) => (
<a key={item.label} href={item.href} aria-label={item.label} className={`flex size-9 items-center justify-center rounded-full ${item.bg}`}>
{item.icon}
app/shared/components/FooterTrustBadges.tsx
+2 -2
View File
@@ -6,9 +6,9 @@ const FooterTrustBadges: FC = () => {
return (
<div className="flex flex-col items-center gap-4">
<h3 className="text-sm font-bold text-[#0A1B2C]">نماد های اعتماد</h3>
<div className="flex items-center gap-4">
<div className="flex items-center gap-3 sm:gap-4 flex-wrap justify-center">
{badges.map((badge) => (
<div key={badge} className="flex size-16 items-center justify-center rounded-full border border-[#E9EEF2] bg-white text-center text-[10px] font-bold text-[#6C7680]">
<div key={badge} className="flex size-14 sm:size-16 items-center justify-center rounded-full border border-[#E9EEF2] bg-white text-center text-[10px] font-bold text-[#6C7680]">
{badge}
</div>
))}
app/shared/components/HeaderMenu.tsx
+5 -5
View File
@@ -36,21 +36,21 @@ const HeaderMenu: FC = () => {
}, [isAllProductsOpen]);
return (
<div ref={containerRef} className="relative h-[72px] w-full flex-1 px-[120px]">
<div className="flex h-full items-center justify-center gap-8">
<div ref={containerRef} className="relative h-14 sm:h-[72px] w-full flex-1 px-4 sm:px-8 lg:px-[120px]">
<div className="flex h-full items-center gap-4 sm:gap-6 lg:gap-8 overflow-x-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden lg:justify-center">
<button
type="button"
className={cn("flex items-center gap-2 font-bold transition-colors", isAllProductsOpen && "text-primary")}
className={cn("flex items-center gap-2 font-bold transition-colors shrink-0 text-sm sm:text-base", isAllProductsOpen && "text-primary")}
onClick={() => setIsAllProductsOpen((open) => !open)}
aria-expanded={isAllProductsOpen}
aria-haspopup="true"
>
<HamburgerMenu size={24} color="currentColor" />
<HamburgerMenu size={22} color="currentColor" />
<span>همه محصولات</span>
</button>
{menuItems.map((item) => (
<div key={item} className="font-bold">
<div key={item} className="font-bold shrink-0 whitespace-nowrap text-sm sm:text-base">
{item}
</div>
))}