danak/danak-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pixel perfect

Browse Source
This commit is contained in:
hamid zarghami
2026-06-29 14:47:54 +03:30
parent 4e1261f96b
commit 9f1ef506ac
4 changed files with 304 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/HeroSection.tsx
+33 -46
View File
@@ -1,52 +1,39 @@
import 'swiper/css/navigation';
import Button from '@/components/Button'
import Image from 'next/image'
import { FC } from 'react'
import { Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/react'
import { useGetLanding } from './hooks/useHomeData';
import Link from 'next/link';
import Button from "@/components/Button";
import Image from "next/image";
import Link from "next/link";
import { FC } from "react";
import "swiper/css/navigation";
import { Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import { useGetLanding } from "./hooks/useHomeData";
const HeroSection: FC = () => {
const { data } = useGetLanding();
const { data } = useGetLanding()
return (
<Swiper navigation={true} modules={[Navigation]} className="mySwiper">
{data?.data?.sliders?.map((item) => {
return (
<SwiperSlide key={item.id}>
<div className="relative">
<Image src={item.imageUrl} alt="banner" width={1920} height={1080} quality={100} className="w-full rounded-4xl object-cover mt-4 min-h-[210px] max-h-[700px]" />
return (
<Swiper navigation={true} modules={[Navigation]} className="mySwiper">
{
data?.data?.sliders?.map((item) => {
return (
<SwiperSlide key={item.id}>
<div className='relative'>
<Image
src={item.imageUrl}
alt='banner'
width={1920}
height={1080}
quality={100}
className='w-full rounded-4xl object-cover xl:mt-14 mt-8 min-h-[210px] max-h-[500px]'
/>
<div className="absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-4xl">
<div className="max-w-maxWidth flex flex-col mt-1 xl:mt-0 xl:items-start items-center w-full mx-auto px-10 xl:text-4xl text-lg text-white">
<p className="xl:text-lg text-sm">{item.title}</p>
<p className="xl:mt-5 mt-2 xl:text-2xl text-sm font-bold">{item.description}</p>
<div className='absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-4xl'>
<div className='max-w-maxWidth flex flex-col mt-1 xl:mt-0 xl:items-start items-center w-full mx-auto px-10 xl:text-4xl text-lg text-white'>
<p className='xl:text-lg text-sm'>{item.title}</p>
<p className='xl:mt-5 mt-2 xl:text-2xl text-sm font-bold'>{item.description}</p>
<Link href={item.link}>
<Button className="xl:mt-5 mt-2 w-fit! xl:px-10 px-5 h-8 xl:h-10 bg-white !text-black" label="بیشتر بدانید" />
</Link>
</div>
</div>
</div>
</SwiperSlide>
);
})}
</Swiper>
);
};
<Link href={item.link}>
<Button
className='xl:mt-5 mt-2 w-fit! xl:px-10 px-5 h-8 xl:h-10 bg-white !text-black'
label='بیشتر بدانید'
/>
</Link>
</div>
</div>
</div>
</SwiperSlide>
)
})
}
</Swiper>
)
}
export default HeroSection
export default HeroSection;