zojgame/graff.estate-nextjs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix adaptive reviews

Browse Source
This commit is contained in:
zojgame
2024-05-31 13:10:06 +05:00
parent e4de297c3d
commit 1b2f5ba211
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Reviews.tsx
+7 -7
View File
@@ -45,9 +45,9 @@ function Reviews() {
return (
<div
ref={ref}
className="container mx-auto xl:max-w-screen-2xl sm:mb-[120px] mb-20"
className="container mx-auto xl:max-w-screen-2xl sm:mb-[120px] mb-20 xl:mt-0 lg:mt-[620px] sm:mt-[340px] mt-[220px]"
>
<div className="flex 2xl:h-[594px] xl:h-[484px] xl:border-b border-b-[#3D425C]">
<div className="flex 2xl:h-[594px] xl:h-[484px] xl:border-b border-b-[#3D425C] h-[484px] xl:flex-row flex-col-reverse">
<div className="mx-auto flex gap-2 min-h-2 sm:hidden mt-4">
{reviews.map((video, index) => (
<div
@@ -61,7 +61,7 @@ function Reviews() {
/>
))}
</div>
<div className="left 2xl:min-w-[496px] xl:min-w-[395px] flex flex-col justify-between gap-7 sm:pb-10 2xl:pr-10 xl:pr-8">
<div className="left 2xl:min-w-[496px] xl:min-w-[395px] flex flex-col justify-between gap-7 sm:pb-10 2xl:pr-10 xl:pr-8 ">
<div className="">
<h2 className="font-medium 2xl:text-[64px] xl:text-5xl text-[40px] sm:mb-10 mb-6 font-gilroy leading-10 xl:block hidden">
<p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
@@ -72,7 +72,7 @@ function Reviews() {
<div className="relative block sm:auto sm:bg-transparent h-[108px] bg-[#212431] p-4 sm:p-8 xl:p-0">
<div className="absolute flex xl:flex-col">
<div
className={`transition-opacity xl:w-[368px] sm:min-w-[354px] min-w-[328px] duration-300 pr-10 flex items-start gap-6`}
className={`transition-opacity xl:w-[368px] sm:min-w-[354px] min-w-[328px] duration-300 pr-10 flex items-start gap-6`}
>
<img
src={reviews[selectedImageIndex].avatar}
@@ -92,7 +92,7 @@ function Reviews() {
</div>
</div>
<p
className={`font-normal 2xl:text-[16px] text-sm sm:block hidden w-1/2 xl:w-[363px]`}
className={`font-normal 2xl:text-[16px] text-sm sm:block w-1/2 xl:w-[363px] hidden`}
>
{reviews[selectedImageIndex].desc}
</p>
@@ -125,7 +125,7 @@ function Reviews() {
{reviews.map((video, index) => (
<div
key={video.id}
className={`relative aspect-video bg-black transition-transform duration-300 h-full w-auto flex items-center justify-center`}
className={`relative aspect-video bg-black transition-transform duration-300 h-full xl:w-auto flex items-center justify-center min-w-[100vw] xl:min-w-0`}
style={{
transform: `translateX(-${
imageWidth * selectedImageIndex + 16 * selectedImageIndex
@@ -142,7 +142,7 @@ function Reviews() {
))}
</div>
<div className="flex justify-between xl:hidden pb-8">
<div className="flex justify-between xl:hidden pb-8 items-start w-full">
<h2 className="font-medium 2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy leading-10 flex gap-2 xl:flex-col sm:flex-row flex-col">
<p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
Отзывы