responsive sidebar and footer reponsive and home responsive
This commit is contained in:
hamid zarghami
+22
-18
@@ -17,22 +17,24 @@ const Home: FC = () => {
|
||||
return (
|
||||
<div className='w-full flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
<Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
|
||||
<Carousel prevArrow={() => null} nextArrow={() => null} autoplay={false} className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
|
||||
<div className='relative drtl'>
|
||||
<img src={BannerImage} className='w-full rounded-3xl' />
|
||||
<div className='absolute size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
|
||||
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
</button>
|
||||
<div className='absolute size-full top-0 right-0 xl:py-6 py-4 xl:px-8 px-4 flex flex-col xl:justify-between'>
|
||||
<div className='sm:flex hidden justify-end w-full'>
|
||||
<button className="xl:px-8 px-4 w-fit xl:py-1.5 py-1 bg-white bg-opacity-10 text-white xl:text-sm text-xs rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
|
||||
<div>
|
||||
<div className='xl:tetx-base leading-7 text-xs truncate xl:overflow-auto'>
|
||||
سفارش نرمافزار اختصاصی: سرمایهای برای آینده یا فقط هزینهای برای امروز؟
|
||||
</div>
|
||||
<div className='mt-3 text-border text-xs'>
|
||||
<div className='xl:mt-3 mt-2 text-border text-xs'>
|
||||
۸ دقیقه مطالعه
|
||||
</div>
|
||||
<button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
|
||||
<button className='xl:mt-3 mt-2 xl:px-4 px-2 xl:h-9 h-6 flex gap-2 items-center xl:text-xs text-[10px] xl:rounded-2.5 rounded-lg bg-black text-white'>
|
||||
<div>
|
||||
{t('home.study')}
|
||||
</div>
|
||||
@@ -43,19 +45,21 @@ const Home: FC = () => {
|
||||
</div>
|
||||
<div className='relative drtl'>
|
||||
<img src={BannerImage} className='w-full rounded-3xl' />
|
||||
<div className='absolute size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
|
||||
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
</button>
|
||||
<div className='absolute size-full top-0 right-0 xl:py-6 py-4 xl:px-8 px-4 flex flex-col xl:justify-between'>
|
||||
<div className='sm:flex hidden justify-end w-full'>
|
||||
<button className="xl:px-8 px-4 w-fit xl:py-1.5 py-1 bg-white bg-opacity-10 text-white xl:text-sm text-xs rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='max-w-[340px] font-medium text-white text-lg leading-10'>
|
||||
<div>
|
||||
<div className='xl:tetx-base leading-7 text-xs truncate xl:overflow-auto'>
|
||||
سفارش نرمافزار اختصاصی: سرمایهای برای آینده یا فقط هزینهای برای امروز؟
|
||||
</div>
|
||||
<div className='mt-3 text-border text-xs'>
|
||||
<div className='xl:mt-3 mt-2 text-border text-xs'>
|
||||
۸ دقیقه مطالعه
|
||||
</div>
|
||||
<button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
|
||||
<button className='xl:mt-3 mt-2 xl:px-4 px-2 xl:h-9 h-6 flex gap-2 items-center xl:text-xs text-[10px] xl:rounded-2.5 rounded-lg bg-black text-white'>
|
||||
<div>
|
||||
{t('home.study')}
|
||||
</div>
|
||||
@@ -66,7 +70,7 @@ const Home: FC = () => {
|
||||
</div>
|
||||
</Carousel>
|
||||
|
||||
<div className='mt-8 text-sm flex gap-6 items-center'>
|
||||
<div className='mt-8 flex-wrap text-sm flex gap-6 items-center'>
|
||||
<ItemDashboard
|
||||
title={t('home.myservice')}
|
||||
icon={<Element3 size={20} color='black' />}
|
||||
@@ -105,8 +109,8 @@ const Home: FC = () => {
|
||||
<TitleLine title={t('home.access')} />
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex gap-6 items-center'>
|
||||
<div className='flex-1 h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
|
||||
<div className='mt-8 flex flex-wrap gap-6 items-center'>
|
||||
<div className='flex-1 min-w-[40%] xl:min-w-[20%] h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
|
||||
<img src={AccessbilityImage} className='w-10' />
|
||||
<div className='text-xs'>
|
||||
{t('home.add_access')}
|
||||
|
||||
@@ -14,7 +14,7 @@ const BoxNewAccessbility: FC = () => {
|
||||
<>
|
||||
<div
|
||||
onClick={() => setOpen(true)}
|
||||
className="flex-1 flex justify-center items-center h-[160px]"
|
||||
className="flex-1 min-w-[40%] xl:min-w-[20%] flex justify-center items-center h-[160px]"
|
||||
style={{
|
||||
position: 'relative',
|
||||
}}
|
||||
|
||||
@@ -9,7 +9,7 @@ const DanakLearning: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-xs hidden xl:block h-fit px-5 py-7 rounded-3xl'>
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('home.danak_learning')}
|
||||
|
||||
@@ -11,7 +11,7 @@ type Props = {
|
||||
const ItemDashboard: FC<Props> = (props: Props) => {
|
||||
|
||||
return (
|
||||
<div className='p-6 flex-1 h-[178px] bg-white rounded-3xl'>
|
||||
<div className='p-6 min-w-[40%] xl:min-w-[20%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl'>
|
||||
<div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
|
||||
{props.icon}
|
||||
</div>
|
||||
|
||||
@@ -70,8 +70,8 @@ const OtherServices: FC = () => {
|
||||
<TitleLine title={t('service.selected_danak')} />
|
||||
</div>
|
||||
|
||||
<div className='flex gap-6 items-center mt-8'>
|
||||
<div className='flex-1 bg-white rounded-3xl p-6'>
|
||||
<div className='flex flex-wrap gap-6 items-center mt-8'>
|
||||
<div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
|
||||
<div>
|
||||
@@ -96,7 +96,7 @@ const OtherServices: FC = () => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 bg-white rounded-3xl p-6'>
|
||||
<div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
|
||||
<div>
|
||||
@@ -121,7 +121,7 @@ const OtherServices: FC = () => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-1 bg-white rounded-3xl p-6'>
|
||||
<div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user