responsive base v1
This commit is contained in:
hamid zarghami
+32
-30
@@ -6,14 +6,14 @@ import { FC } from 'react'
|
||||
|
||||
const Footer: FC = () => {
|
||||
return (
|
||||
<div className='mt-24 bg-[#F5F5F5] p-20 flex gap-20'>
|
||||
<div className='bg-[#F2F2F2] max-w-[450px] p-7 rounded-2xl border border-border'>
|
||||
<div className='mt-12 sm:mt-16 md:mt-24 bg-[#F5F5F5] p-4 sm:p-8 md:p-20 flex flex-col lg:flex-row gap-8 sm:gap-12 md:gap-20'>
|
||||
<div className='bg-[#F2F2F2] w-full lg:max-w-[450px] p-4 sm:p-6 md:p-7 rounded-2xl border border-border'>
|
||||
<div>LOGO</div>
|
||||
<div className='mt-6 text-sm text-[#383E43] '>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
|
||||
</div>
|
||||
|
||||
<div className='mt-20 text-[#383E43] text-sm'>
|
||||
<div className='mt-8 sm:mt-12 md:mt-20 text-[#383E43] text-sm'>
|
||||
<div className='flex gap-3'>
|
||||
<Call color='#383E43' size={20} />
|
||||
<div>تلفن: 67341</div>
|
||||
@@ -33,49 +33,51 @@ const Footer: FC = () => {
|
||||
|
||||
</div>
|
||||
|
||||
<div className='mt-14 flex justify-end'>
|
||||
<div className='mt-8 sm:mt-10 md:mt-14 flex justify-end'>
|
||||
<div className='size-10 bg-amber-200'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-[72px] flex items-center justify-between px-6'>
|
||||
<div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-auto sm:h-[72px] flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 sm:px-6 sm:py-0 gap-3 sm:gap-0'>
|
||||
<div className='text-[#383E43]'>
|
||||
دانلود اپلیکیشن
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='flex gap-2 flex-wrap'>
|
||||
<Image
|
||||
width={132}
|
||||
height={48}
|
||||
alt='download from app store'
|
||||
src='/images/appstore.png'
|
||||
className='w-24 sm:w-[132px] h-auto'
|
||||
/>
|
||||
<Image
|
||||
width={142}
|
||||
height={48}
|
||||
alt='download from google play'
|
||||
src='/images/googleplay.png'
|
||||
className='w-24 sm:w-[142px] h-auto'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-[72px] flex items-center justify-between px-6 mt-6'>
|
||||
<div className='text-[#383E43]'>
|
||||
<div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-auto sm:h-[72px] flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 sm:px-6 sm:py-0 gap-3 sm:gap-0 mt-4 sm:mt-6'>
|
||||
<div className='text-[#383E43] text-sm sm:text-base'>
|
||||
با ثبت ایمیل از آخرین تخفیف ها با خبر شوید
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='bg-[#E5E5E5] h-12 flex gap-3 items-center px-3 rounded-[8px]'>
|
||||
<div className='flex gap-2 w-full sm:w-auto'>
|
||||
<div className='bg-[#E5E5E5] h-12 flex gap-3 items-center px-3 rounded-[8px] flex-1 sm:flex-none'>
|
||||
<Sms size={20} color='#383E43' />
|
||||
<Separator className='bg-[#C9C9C9]' style={{ height: 15 }} orientation='vertical' />
|
||||
<input placeholder='آدرس ایمیل' className='bg-transparent outline-none text-sm' />
|
||||
<input placeholder='آدرس ایمیل' className='bg-transparent outline-none text-sm w-full' />
|
||||
</div>
|
||||
<Button className='h-12 w-[72px]'>
|
||||
<Button className='h-12 w-[72px] flex-shrink-0'>
|
||||
ثبت
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-[72px] flex items-center justify-between px-6 mt-6'>
|
||||
<div className='text-[#383E43]'>
|
||||
<div className='w-full rounded-xl bg-[#F2F2F2] border border-border h-auto sm:h-[72px] flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 sm:px-6 sm:py-0 gap-3 sm:gap-0 mt-4 sm:mt-6'>
|
||||
<div className='text-[#383E43] text-sm sm:text-base'>
|
||||
ما را در شبکه های اجتماعی دنبال کنید
|
||||
</div>
|
||||
|
||||
@@ -92,29 +94,29 @@ const Footer: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-20 flex justify-between'>
|
||||
<div className='mt-8 sm:mt-12 md:mt-20 flex flex-col sm:flex-row justify-between gap-6 sm:gap-0'>
|
||||
<div>
|
||||
<div>همراه با سندس کالا</div>
|
||||
<ul className='flex mt-6 flex-col gap-4 font-light'>
|
||||
<li className='text-[#878787]'>تماس با ما</li>
|
||||
<li className='text-[#878787]'>درباره سندس کالا</li>
|
||||
<li className='text-[#878787]'>فروش در سندس کالا</li>
|
||||
<div className='text-sm sm:text-base font-medium'>همراه با سندس کالا</div>
|
||||
<ul className='flex mt-4 sm:mt-6 flex-col gap-3 sm:gap-4 font-light'>
|
||||
<li className='text-[#878787] text-sm sm:text-base'>تماس با ما</li>
|
||||
<li className='text-[#878787] text-sm sm:text-base'>درباره سندس کالا</li>
|
||||
<li className='text-[#878787] text-sm sm:text-base'>فروش در سندس کالا</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div>راهنمای خرید از سندس کالا</div>
|
||||
<ul className='flex mt-6 flex-col gap-4 font-light'>
|
||||
<li className='text-[#878787]'>نحوه ثبت سفارش</li>
|
||||
<li className='text-[#878787]'>قوانین مرجوعی کالا</li>
|
||||
<li className='text-[#878787]'>پاسخ به پرسش ها متداول</li>
|
||||
<div className='text-sm sm:text-base font-medium'>راهنمای خرید از سندس کالا</div>
|
||||
<ul className='flex mt-4 sm:mt-6 flex-col gap-3 sm:gap-4 font-light'>
|
||||
<li className='text-[#878787] text-sm sm:text-base'>نحوه ثبت سفارش</li>
|
||||
<li className='text-[#878787] text-sm sm:text-base'>قوانین مرجوعی کالا</li>
|
||||
<li className='text-[#878787] text-sm sm:text-base'>پاسخ به پرسش ها متداول</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div>خدمات مشتریان</div>
|
||||
<ul className='flex mt-6 flex-col gap-4 font-light'>
|
||||
<li className='text-[#878787]'>حساب کاربری من</li>
|
||||
<li className='text-[#878787]'>سبد خرید</li>
|
||||
<li className='text-[#878787]'>حریم حصوصی</li>
|
||||
<div className='text-sm sm:text-base font-medium'>خدمات مشتریان</div>
|
||||
<ul className='flex mt-4 sm:mt-6 flex-col gap-3 sm:gap-4 font-light'>
|
||||
<li className='text-[#878787] text-sm sm:text-base'>حساب کاربری من</li>
|
||||
<li className='text-[#878787] text-sm sm:text-base'>سبد خرید</li>
|
||||
<li className='text-[#878787] text-sm sm:text-base'>حریم حصوصی</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+76
-14
@@ -1,47 +1,109 @@
|
||||
'use client'
|
||||
import Input from '@/components/Input'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { DocumentText, Home, Profile, ShoppingCart } from 'iconsax-react'
|
||||
import { FC, Fragment } from 'react'
|
||||
import { DocumentText, Home, Profile, ShoppingCart, HambergerMenu } from 'iconsax-react'
|
||||
import { FC, Fragment, useState } from 'react'
|
||||
import Menu from './components/Menu'
|
||||
|
||||
const Header: FC = () => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className='fixed top-0 bg-white w-full z-[9998] pb-4'>
|
||||
<div className='flex items-center justify-between px-6 py-[18px]'>
|
||||
<div className='flex gap-[30px] items-center'>
|
||||
<div>LOGO</div>
|
||||
<Input className='w-[500px]' variant='search' placeholder='جستجو' />
|
||||
<div className='fixed top-0 bg-white w-full z-[9998] border-b border-gray-100 max-w-full overflow-hidden'>
|
||||
{/* بخش بالایی هدر */}
|
||||
<div className='flex items-center justify-between px-3 sm:px-4 md:px-6 py-3 sm:py-4'>
|
||||
{/* منوی همبرگری موبایل */}
|
||||
<div className='md:hidden'>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className='p-2 rounded-lg hover:bg-gray-50'
|
||||
>
|
||||
<HambergerMenu size={24} color='#333333' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-6'>
|
||||
<div className='h-10 border border-border py-3 px-4 rounded-[12px] flex items-center gap-2.5'>
|
||||
<div className='flex gap-2 sm:gap-4 md:gap-[30px] items-center flex-1 md:flex-none'>
|
||||
<div className='text-base sm:text-lg font-bold text-purple-600'>LOGO</div>
|
||||
<Input
|
||||
className='hidden md:block w-[300px] lg:w-[500px]'
|
||||
variant='search'
|
||||
placeholder='جستجو'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-1 sm:gap-2 md:gap-6'>
|
||||
<div className='hidden md:flex h-10 border border-border py-3 px-4 rounded-[12px] items-center gap-2.5'>
|
||||
<Profile size={20} color='#333333' />
|
||||
<div className='text-sm text-[#333333]'>حساب کاربری</div>
|
||||
</div>
|
||||
|
||||
<Separator style={{ height: 25 }} orientation='vertical' />
|
||||
<div className='md:hidden'>
|
||||
<Profile size={24} color='#333333' />
|
||||
</div>
|
||||
|
||||
<Separator className='hidden md:block' style={{ height: 25 }} orientation='vertical' />
|
||||
|
||||
<div className='h-10 p-3 rounded-[12px] border border-border flex items-center gap-2.5'>
|
||||
<ShoppingCart size={20} color='#333333' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-7 text-sm px-6 flex items-center gap-7'>
|
||||
|
||||
{/* نوار جستجو موبایل */}
|
||||
<div className='md:hidden px-3 sm:px-4 pb-3 sm:pb-4'>
|
||||
<Input
|
||||
className='w-full'
|
||||
variant='search'
|
||||
placeholder='جستجو'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* بخش پایینی هدر - فقط دسکتاپ */}
|
||||
<div className='hidden md:flex mt-2 text-sm px-6 pb-4 items-center gap-7'>
|
||||
<Menu />
|
||||
<Separator style={{ height: 20 }} orientation='vertical' />
|
||||
|
||||
<div className='flex items-center gap-2.5'>
|
||||
<div className='flex items-center gap-2.5 cursor-pointer hover:text-purple-600 transition-colors'>
|
||||
<Home size={20} color='#333333' />
|
||||
<div className='text-[#333333]'>صفحه نخست</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2.5'>
|
||||
<div className='flex items-center gap-2.5 cursor-pointer hover:text-purple-600 transition-colors'>
|
||||
<DocumentText size={20} color='#333333' />
|
||||
<div className='text-[#333333]'>مجله</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* منوی موبایل */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className='md:hidden bg-white border-t border-gray-100'>
|
||||
<div className='px-4 py-4 space-y-4'>
|
||||
<div className='flex items-center gap-3 py-3 border-b border-gray-100'>
|
||||
<Profile size={20} color='#333333' />
|
||||
<span className='text-sm text-gray-800'>حساب کاربری</span>
|
||||
</div>
|
||||
|
||||
<div className='space-y-3'>
|
||||
<div className='flex items-center gap-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg px-2'>
|
||||
<Home size={20} color='#333333' />
|
||||
<span className='text-sm text-gray-800'>صفحه نخست</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg px-2'>
|
||||
<DocumentText size={20} color='#333333' />
|
||||
<span className='text-sm text-gray-800'>مجله</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='pt-4 border-t border-gray-100'>
|
||||
<Menu />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='h-[140px]'></div>
|
||||
|
||||
{/* فضای خالی برای جبران ارتفاع fixed header */}
|
||||
<div className={`${isMobileMenuOpen ? 'h-[280px] sm:h-[260px] md:h-[140px]' : 'h-[100px] sm:h-[120px] md:h-[140px]'}`}></div>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@ const Menu: FC = () => {
|
||||
|
||||
const renderCategoryLevel = (categories: Category[], level: number) => {
|
||||
return (
|
||||
<div className='w-64 border-l border-gray-200 last:border-l-0 flex flex-col min-h-0'>
|
||||
<div className='w-48 md:w-64 border-l border-gray-200 last:border-l-0 flex flex-col min-h-0'>
|
||||
<div className='p-2 overflow-y-auto max-h-[calc(100vh-200px)]'>
|
||||
{categories.map((category) => (
|
||||
<div
|
||||
@@ -80,12 +80,13 @@ const Menu: FC = () => {
|
||||
onMouseEnter={() => setIsOpen(true)}
|
||||
>
|
||||
<HambergerMenu size={24} color='#333333' />
|
||||
<div className='text-[#333333]'>دسته بندی کالاها</div>
|
||||
<div className='text-[#333333] hidden md:block'>دسته بندی کالاها</div>
|
||||
<div className='text-[#333333] md:hidden text-xs'>دستهها</div>
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<div
|
||||
className='absolute top-full right-0 mt-2 bg-white rounded-xl shadow-lg border border-gray-200 z-[9999] flex max-w-[90vw] max-h-screen overflow-hidden'
|
||||
className='absolute top-full right-0 mt-2 bg-white rounded-xl shadow-lg border border-gray-200 z-[9999] flex max-w-[90vw] md:max-w-none max-h-screen overflow-hidden'
|
||||
onMouseLeave={() => {
|
||||
setIsOpen(false)
|
||||
setHoveredPath([])
|
||||
@@ -93,7 +94,7 @@ const Menu: FC = () => {
|
||||
>
|
||||
{/* دستههای اصلی (سطح اول) */}
|
||||
{isLoading ? (
|
||||
<div className='w-64 border-l border-gray-200 flex items-center justify-center h-40'>
|
||||
<div className='w-48 md:w-64 border-l border-gray-200 flex items-center justify-center h-40'>
|
||||
<div className='text-gray-500'>در حال بارگذاری...</div>
|
||||
</div>
|
||||
) : parentCategories.length > 0 ? (
|
||||
@@ -113,7 +114,7 @@ const Menu: FC = () => {
|
||||
})}
|
||||
</>
|
||||
) : (
|
||||
<div className='w-64 border-l border-gray-200 flex items-center justify-center h-40'>
|
||||
<div className='w-48 md:w-64 border-l border-gray-200 flex items-center justify-center h-40'>
|
||||
<div className='text-gray-500'>دستهبندیای یافت نشد</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user