From 56399520e5b8d822b2ed0cc15e224b18f8451afb Mon Sep 17 00:00:00 2001 From: Lakshay Pareek Date: Wed, 27 Aug 2025 20:08:49 +0530 Subject: [PATCH 01/21] Update mobile-swiper.style.js Signed-off-by: Lakshay Pareek Signed-off-by: Darshit Dudhaiya --- .../mobile-swiper.style.js | 224 +++++++++++++----- 1 file changed, 161 insertions(+), 63 deletions(-) diff --git a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js index b3d60b5fda6f7..22d1f202d586a 100644 --- a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js @@ -26,141 +26,211 @@ const SwiperContainer = styled.div` } .card { - /* box-shadow: rgb(38, 57, 77, 0.5) 0px 20px 30px -10px; */ - /* box-shadow: none; */ - - /* background: linear-gradient( - 266.65deg, - #00b39f 40.19%, - #477e96 74.31%, - #3c494f 92.89% - - ); */ - - height: 70vh; - padding: 1rem; + height: 75vh; + padding: 1.25rem; border-radius: 20px; display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: space-between; + gap: 1rem; } + .card img { - height: 40%; - width: 100%; - /* margin-left: 1.5rem; */ + width: 100%; /* Back to full width */ + height: auto; + max-height: 55%; + min-height: 200px; + object-fit: contain; + border: 1px solid #555555; + border-radius: 12px; + background: rgba(255, 255, 255, 0.08); + flex-shrink: 0; } + .card h2 { text-align: center; color: white; + margin: 0; + flex-shrink: 0; + font-size: 1.2rem; + line-height: 1.25; + font-weight: 600; } + .card p { text-align: center; color: white; + margin: 0; + line-height: 1.35; + font-size: 0.9rem; + flex-grow: 1; + display: flex; + align-items: center; + opacity: 0.95; } + .card a { margin-top: 1rem; color: white; } + + /* Improved responsive breakpoints with bigger images */ @media (max-width: 670px) { - width: 68vw; + width: 75vw; .card { - width: 64vw; - height: 60vh; + width: 70vw; + height: 70vh; + padding: 1.2rem; } .card img { - height: 30%; - width: auto; + max-height: 50%; + min-height: 180px; + width: 100%; + } + .card h2 { + font-size: 1.15rem; + } + .card p { + font-size: 0.88rem; } } @media (max-width: 577px) { + width: 80vw; .card { - width: 62vw; + width: 75vw; + height: 65vh; + padding: 1.1rem; } - h2 { - font-size: 1.4rem; + .card img { + max-height: 48%; + min-height: 170px; + width: 100%; } - p { - font-size: 1rem; + .card h2 { + font-size: 1.1rem; + } + .card p { + font-size: 0.85rem; } } @media (max-width: 520px) { + width: 82vw; .card { - height: 55vh; + width: 77vw; + height: 62vh; + padding: 1rem; } - h2 { - font-size: 1.2rem; + .card img { + max-height: 45%; + min-height: 160px; + width: 100%; } - p { - font-size: 0.8rem; + .card h2 { + font-size: 1.05rem; + } + .card p { + font-size: 0.82rem; + line-height: 1.3; } } + @media (max-width: 490px) { + width: 85vw; .card { - height: 55vh; + width: 80vw; + height: 60vh; padding: 1rem; } .card img { - margin-left: 0.5rem !important; + max-height: 43%; + min-height: 150px; + width: 100%; } } + @media (max-width: 448px) { - width: 70vw; + width: 88vw; .card { - height: 48vh; - width: 64vw; - padding: 0.5rem; + width: 83vw; + height: 58vh; + padding: 0.9rem; } .card img { - height: 30%; + max-height: 40%; + min-height: 140px; + width: 100%; } - p { - line-height: 19px; + .card h2 { + font-size: 1rem; + } + .card p { + font-size: 0.8rem; + line-height: 1.25; } } + @media (max-width: 404px) { + width: 90vw; .card { - width: 67vw; - padding: 0.7rem; + width: 85vw; + height: 56vh; + padding: 0.8rem; } .card img { - height: 25%; + max-height: 38%; + min-height: 130px; + width: 100%; } } + @media (max-width: 380px) { - width: 65vw; - h2 { - font-size: 0.9rem; + width: 92vw; + .card { + width: 87vw; + height: 54vh; + padding: 0.75rem; } - p { - font-size: 0.7rem; - line-height: 18px; + .card img { + max-height: 36%; + min-height: 120px; + width: 100%; } - .card { - width: 60vw; - height: 47vh; - margin: 0; - padding: 0.8rem; + .card h2 { + font-size: 0.95rem; + } + .card p { + font-size: 0.75rem; + line-height: 1.2; } } + @media (max-width: 330px) { - width: 70vw; + width: 94vw; .card { - height: 45vh; - width: 64vw; + width: 89vw; + height: 52vh; padding: 0.7rem; } - - p { - line-height: 16px; + .card img { + max-height: 34%; + min-height: 110px; + width: 100%; + } + .card h2 { + font-size: 0.9rem; + } + .card p { + font-size: 0.72rem; + line-height: 1.15; } } - margin-top: 10%; + margin-top: 5%; border-radius: 20px; - width: 57vw; + width: 70vw; text-align: center; .swiper { @@ -174,10 +244,38 @@ const SwiperContainer = styled.div` h2 { margin: 0 0 1rem 0; + font-size: 1.4rem; } h6 { margin: 10px 0 2.5rem 0; + font-size: 0.9rem; + line-height: 1.3; + } + + /* Container title responsive adjustments */ + @media (max-width: 480px) { + h2 { + font-size: 1.2rem; + margin-bottom: 0.75rem; + } + + h6 { + font-size: 0.8rem; + margin: 8px 0 2rem 0; + } + } + + @media (max-width: 360px) { + h2 { + font-size: 1.1rem; + } + + h6 { + font-size: 0.75rem; + margin: 6px 0 1.5rem 0; + } } `; + export default SwiperContainer; From e29dc2b0e4f86b72b8b3456eb54bb1d1c9f08bea Mon Sep 17 00:00:00 2001 From: Lakshay Pareek Date: Thu, 28 Aug 2025 13:04:21 +0530 Subject: [PATCH 02/21] Update mobile-swiper.style.js Signed-off-by: Lakshay Pareek Signed-off-by: Darshit Dudhaiya --- .../mobile-swiper.style.js | 221 ++++++------------ 1 file changed, 68 insertions(+), 153 deletions(-) diff --git a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js index 22d1f202d586a..966ec06364a94 100644 --- a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js @@ -26,211 +26,154 @@ const SwiperContainer = styled.div` } .card { - height: 75vh; - padding: 1.25rem; + /* box-shadow: rgb(38, 57, 77, 0.5) 0px 20px 30px -10px; */ + /* box-shadow: none; */ + + /* background: linear-gradient( + 266.65deg, + #00b39f 40.19%, + #477e96 74.31%, + #3c494f 92.89% + + ); */ + + height: 70vh; + padding: 1rem; border-radius: 20px; display: flex; flex-direction: column; align-items: center; - justify-content: space-between; - gap: 1rem; + justify-content: center; } - + .card img { - width: 100%; /* Back to full width */ - height: auto; - max-height: 55%; - min-height: 200px; - object-fit: contain; - border: 1px solid #555555; - border-radius: 12px; - background: rgba(255, 255, 255, 0.08); - flex-shrink: 0; + height: 45%; /* Increased from 40% to 45% */ + width: 100%; + /* margin-left: 1.5rem; */ } - + .card h2 { text-align: center; color: white; - margin: 0; - flex-shrink: 0; - font-size: 1.2rem; - line-height: 1.25; - font-weight: 600; } - + .card p { text-align: center; color: white; - margin: 0; - line-height: 1.35; - font-size: 0.9rem; - flex-grow: 1; - display: flex; - align-items: center; - opacity: 0.95; } - + .card a { margin-top: 1rem; color: white; } - - /* Improved responsive breakpoints with bigger images */ + @media (max-width: 670px) { - width: 75vw; + width: 68vw; .card { - width: 70vw; - height: 70vh; - padding: 1.2rem; + width: 64vw; + height: 60vh; } .card img { - max-height: 50%; - min-height: 180px; - width: 100%; - } - .card h2 { - font-size: 1.15rem; - } - .card p { - font-size: 0.88rem; + height: 35%; /* Increased from 30% to 35% */ + width: auto; } } @media (max-width: 577px) { - width: 80vw; .card { - width: 75vw; - height: 65vh; - padding: 1.1rem; - } - .card img { - max-height: 48%; - min-height: 170px; - width: 100%; + width: 62vw; } .card h2 { - font-size: 1.1rem; + font-size: 1.1rem; /* Reduced from 1.4rem */ } .card p { - font-size: 0.85rem; + font-size: 0.9rem; /* Reduced from 1rem */ } } @media (max-width: 520px) { - width: 82vw; .card { - width: 77vw; - height: 62vh; - padding: 1rem; - } - .card img { - max-height: 45%; - min-height: 160px; - width: 100%; + height: 55vh; } .card h2 { - font-size: 1.05rem; + font-size: 1rem; /* Reduced from 1.2rem */ } .card p { - font-size: 0.82rem; - line-height: 1.3; + font-size: 0.85rem; /* Increased from 0.8rem */ } } - + @media (max-width: 490px) { - width: 85vw; .card { - width: 80vw; - height: 60vh; + height: 55vh; padding: 1rem; } .card img { - max-height: 43%; - min-height: 150px; - width: 100%; + margin-left: 0.5rem !important; } } - + @media (max-width: 448px) { - width: 88vw; + width: 70vw; .card { - width: 83vw; - height: 58vh; - padding: 0.9rem; + height: 48vh; + width: 64vw; + padding: 0.5rem; } .card img { - max-height: 40%; - min-height: 140px; - width: 100%; - } - .card h2 { - font-size: 1rem; + height: 35%; /* Increased from 30% to 35% */ } - .card p { - font-size: 0.8rem; - line-height: 1.25; + p { + line-height: 19px; } } - + @media (max-width: 404px) { - width: 90vw; .card { - width: 85vw; - height: 56vh; - padding: 0.8rem; + width: 67vw; + padding: 0.7rem; } .card img { - max-height: 38%; - min-height: 130px; - width: 100%; + height: 30%; /* Increased from 25% to 30% */ } } - + @media (max-width: 380px) { - width: 92vw; - .card { - width: 87vw; - height: 54vh; - padding: 0.75rem; - } - .card img { - max-height: 36%; - min-height: 120px; - width: 100%; - } + width: 65vw; .card h2 { - font-size: 0.95rem; + font-size: 0.95rem; /* Increased from 0.9rem */ } .card p { - font-size: 0.75rem; - line-height: 1.2; + font-size: 0.75rem; /* Increased from 0.7rem */ + line-height: 18px; + } + .card { + width: 60vw; + height: 47vh; + margin: 0; + padding: 0.8rem; } } - + @media (max-width: 330px) { - width: 94vw; + width: 70vw; .card { - width: 89vw; - height: 52vh; + height: 45vh; + width: 64vw; padding: 0.7rem; } - .card img { - max-height: 34%; - min-height: 110px; - width: 100%; - } .card h2 { - font-size: 0.9rem; + font-size: 0.9rem; /* Added specific targeting */ } .card p { - font-size: 0.72rem; - line-height: 1.15; + font-size: 0.7rem; /* Added specific targeting */ + line-height: 16px; } } - margin-top: 5%; + margin-top: 10%; border-radius: 20px; - width: 70vw; + width: 57vw; text-align: center; .swiper { @@ -244,38 +187,10 @@ const SwiperContainer = styled.div` h2 { margin: 0 0 1rem 0; - font-size: 1.4rem; } h6 { margin: 10px 0 2.5rem 0; - font-size: 0.9rem; - line-height: 1.3; - } - - /* Container title responsive adjustments */ - @media (max-width: 480px) { - h2 { - font-size: 1.2rem; - margin-bottom: 0.75rem; - } - - h6 { - font-size: 0.8rem; - margin: 8px 0 2rem 0; - } - } - - @media (max-width: 360px) { - h2 { - font-size: 1.1rem; - } - - h6 { - font-size: 0.75rem; - margin: 6px 0 1.5rem 0; - } } `; - export default SwiperContainer; From 75cb3c1269391f0e1f70b10041d0d60e7f0a4396 Mon Sep 17 00:00:00 2001 From: Lakshay Pareek Date: Thu, 28 Aug 2025 16:14:42 +0530 Subject: [PATCH 03/21] Update mobile-swiper.style.js Signed-off-by: Lakshay Pareek Signed-off-by: Darshit Dudhaiya --- .../mobile-swiper.style.js | 45 +++++++------------ 1 file changed, 17 insertions(+), 28 deletions(-) diff --git a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js index 966ec06364a94..f57d20d8923f8 100644 --- a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js @@ -45,28 +45,23 @@ const SwiperContainer = styled.div` align-items: center; justify-content: center; } - .card img { - height: 45%; /* Increased from 40% to 45% */ + height: 45%; width: 100%; /* margin-left: 1.5rem; */ } - .card h2 { text-align: center; color: white; } - .card p { text-align: center; color: white; } - .card a { margin-top: 1rem; color: white; } - @media (max-width: 670px) { width: 68vw; .card { @@ -74,35 +69,33 @@ const SwiperContainer = styled.div` height: 60vh; } .card img { - height: 35%; /* Increased from 30% to 35% */ + height: 35%; width: auto; } } - @media (max-width: 577px) { .card { width: 62vw; } - .card h2 { - font-size: 1.1rem; /* Reduced from 1.4rem */ + h2 { + font-size: 1.1rem; } - .card p { - font-size: 0.9rem; /* Reduced from 1rem */ + p { + font-size: 0.9rem; } } - + @media (max-width: 520px) { .card { height: 55vh; } - .card h2 { - font-size: 1rem; /* Reduced from 1.2rem */ + h2 { + font-size: 1rem; } - .card p { - font-size: 0.85rem; /* Increased from 0.8rem */ + p { + font-size: 0.85rem; } } - @media (max-width: 490px) { .card { height: 55vh; @@ -112,7 +105,6 @@ const SwiperContainer = styled.div` margin-left: 0.5rem !important; } } - @media (max-width: 448px) { width: 70vw; .card { @@ -121,30 +113,28 @@ const SwiperContainer = styled.div` padding: 0.5rem; } .card img { - height: 35%; /* Increased from 30% to 35% */ + height: 35%; } p { line-height: 19px; } } - @media (max-width: 404px) { .card { width: 67vw; padding: 0.7rem; } .card img { - height: 30%; /* Increased from 25% to 30% */ + height: 30%; } } - @media (max-width: 380px) { width: 65vw; - .card h2 { - font-size: 0.95rem; /* Increased from 0.9rem */ + h2 { + font-size: 0.95rem; } - .card p { - font-size: 0.75rem; /* Increased from 0.7rem */ + p { + font-size: 0.75rem; line-height: 18px; } .card { @@ -154,7 +144,6 @@ const SwiperContainer = styled.div` padding: 0.8rem; } } - @media (max-width: 330px) { width: 70vw; .card { From bc8c27578efa39b2f6a3b92c252ab994bfd0d698 Mon Sep 17 00:00:00 2001 From: Lakshay Pareek Date: Thu, 28 Aug 2025 16:17:03 +0530 Subject: [PATCH 04/21] Update mobile-swiper.style.js Signed-off-by: Lakshay Pareek Signed-off-by: Darshit Dudhaiya --- .../Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js index f57d20d8923f8..f2cddd18c0297 100644 --- a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js @@ -73,6 +73,7 @@ const SwiperContainer = styled.div` width: auto; } } + @media (max-width: 577px) { .card { width: 62vw; From 9bb0aebb91022d81652976654fe0b6f6499577ab Mon Sep 17 00:00:00 2001 From: Lakshay Pareek Date: Thu, 28 Aug 2025 16:17:59 +0530 Subject: [PATCH 05/21] Update mobile-swiper.style.js Signed-off-by: Lakshay Pareek Signed-off-by: Darshit Dudhaiya --- .../Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js index f2cddd18c0297..f57d20d8923f8 100644 --- a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js @@ -73,7 +73,6 @@ const SwiperContainer = styled.div` width: auto; } } - @media (max-width: 577px) { .card { width: 62vw; From e8aa06c9f77f118529d38137b170b6bd8fbcf2c9 Mon Sep 17 00:00:00 2001 From: Lakshay Pareek Date: Thu, 28 Aug 2025 16:18:43 +0530 Subject: [PATCH 06/21] Update mobile-swiper.style.js Signed-off-by: Lakshay Pareek Signed-off-by: Darshit Dudhaiya --- .../Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js index f57d20d8923f8..d470c5bff476a 100644 --- a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js @@ -84,7 +84,6 @@ const SwiperContainer = styled.div` font-size: 0.9rem; } } - @media (max-width: 520px) { .card { height: 55vh; From 3c65d726728f9fc671f2e4d15353318188761d5a Mon Sep 17 00:00:00 2001 From: Lakshay Pareek Date: Mon, 1 Sep 2025 19:03:08 +0530 Subject: [PATCH 07/21] Update mobile-swiper.style.js Signed-off-by: Lakshay Pareek Signed-off-by: Darshit Dudhaiya --- .../mobile-swiper.style.js | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js index d470c5bff476a..175e00386e1e6 100644 --- a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js @@ -1,14 +1,11 @@ import styled from "styled-components"; - const SwiperContainer = styled.div` @media (min-width: 768px) { display: none; } - .swiper-slide { border-radius: 20px; } - .card.one { background: linear-gradient(222deg, #077165 2.76%, #1D2827 117.91%); } @@ -24,19 +21,15 @@ const SwiperContainer = styled.div` .card.four { background: linear-gradient(180deg, #202020 -32.18%, #18433F 52.35%, #0B7E71 106.65%, #00B39F 142.23%); } - .card { /* box-shadow: rgb(38, 57, 77, 0.5) 0px 20px 30px -10px; */ /* box-shadow: none; */ - /* background: linear-gradient( 266.65deg, #00b39f 40.19%, #477e96 74.31%, #3c494f 92.89% - ); */ - height: 70vh; padding: 1rem; border-radius: 20px; @@ -46,7 +39,7 @@ const SwiperContainer = styled.div` justify-content: center; } .card img { - height: 45%; + height: 50%; width: 100%; /* margin-left: 1.5rem; */ } @@ -69,7 +62,7 @@ const SwiperContainer = styled.div` height: 60vh; } .card img { - height: 35%; + height: 40%; width: auto; } } @@ -112,7 +105,7 @@ const SwiperContainer = styled.div` padding: 0.5rem; } .card img { - height: 35%; + height: 40%; } p { line-height: 19px; @@ -124,7 +117,7 @@ const SwiperContainer = styled.div` padding: 0.7rem; } .card img { - height: 30%; + height: 35%; } } @media (max-width: 380px) { @@ -158,25 +151,20 @@ const SwiperContainer = styled.div` line-height: 16px; } } - margin-top: 10%; border-radius: 20px; width: 57vw; text-align: center; - .swiper { width: 100%; height: 100%; } - h1 { text-align: center; } - h2 { margin: 0 0 1rem 0; } - h6 { margin: 10px 0 2.5rem 0; } From ce6db179bec44cccb866f836550532b0fdbbda5c Mon Sep 17 00:00:00 2001 From: Lakshay Pareek Date: Mon, 1 Sep 2025 19:07:38 +0530 Subject: [PATCH 08/21] Update mobile-swiper.style.js Signed-off-by: Lakshay Pareek Signed-off-by: Darshit Dudhaiya --- .../Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js index 175e00386e1e6..a1c81dcf30a8c 100644 --- a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js @@ -1,8 +1,10 @@ import styled from "styled-components"; + const SwiperContainer = styled.div` @media (min-width: 768px) { display: none; } + .swiper-slide { border-radius: 20px; } From b37f1098187d98b0807947ae14e9c6e836affe8b Mon Sep 17 00:00:00 2001 From: Lakshay Pareek Date: Mon, 1 Sep 2025 19:08:06 +0530 Subject: [PATCH 09/21] Update mobile-swiper.style.js Signed-off-by: Lakshay Pareek Signed-off-by: Darshit Dudhaiya --- .../Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js index a1c81dcf30a8c..175e00386e1e6 100644 --- a/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Kanvas/Kanvas-design/Kanvas_Mobile_swiper/mobile-swiper.style.js @@ -1,10 +1,8 @@ import styled from "styled-components"; - const SwiperContainer = styled.div` @media (min-width: 768px) { display: none; } - .swiper-slide { border-radius: 20px; } From 710b78eecb1b94f2c09a33f5a2cb3a2fba079caa Mon Sep 17 00:00:00 2001 From: darshitdudhaiya Date: Fri, 10 Oct 2025 03:55:59 +0530 Subject: [PATCH 10/21] Add custom styles and properties to CurrencySelect menu for improved UX Signed-off-by: Darshit Dudhaiya --- src/sections/Pricing/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js index dd28ea12e7317..6c4d962ebc1d0 100644 --- a/src/sections/Pricing/index.js +++ b/src/sections/Pricing/index.js @@ -83,6 +83,23 @@ export const CurrencySelect = ({ currency, setCurrency }) => { {Currencies[value]?.name} )} + MenuProps={{ + disablePortal: true, // Render menu inside parent so it scrolls naturally + PaperProps: { + sx: { + backgroundColor: "#1E1E1E", + color: "white", + maxHeight: 300, + overflowY: "auto", + position: "absolute", + }, + }, + anchorOrigin: { vertical: "bottom", horizontal: "left" }, + transformOrigin: { vertical: "top", horizontal: "left" }, + marginThreshold: 0, + disableScrollLock: true, + }} + > {Object.entries(Currencies).map(([code, { symbol, name }]) => ( From 64bae665cfd99dda83ce9102368e2c12bf617f00 Mon Sep 17 00:00:00 2001 From: darshitdudhaiya Date: Fri, 10 Oct 2025 04:04:40 +0530 Subject: [PATCH 11/21] fix: currency selector dropdown Signed-off-by: darshitdudhaiya Signed-off-by: Darshit Dudhaiya --- src/sections/Pricing/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js index 6c4d962ebc1d0..9f7d1675724a1 100644 --- a/src/sections/Pricing/index.js +++ b/src/sections/Pricing/index.js @@ -84,7 +84,7 @@ export const CurrencySelect = ({ currency, setCurrency }) => { )} MenuProps={{ - disablePortal: true, // Render menu inside parent so it scrolls naturally + disablePortal: true, // Render menu inside parent so it scrolls perfectly PaperProps: { sx: { backgroundColor: "#1E1E1E", From 496baba4d13d706fd5a0b5d496038febd54a31b5 Mon Sep 17 00:00:00 2001 From: darshitdudhaiya Date: Sat, 11 Oct 2025 00:48:33 +0530 Subject: [PATCH 12/21] feat: close CurrencySelect dropdown when it leaves the viewport using IntersectionObserver Signed-off-by: darshitdudhaiya Signed-off-by: Darshit Dudhaiya --- src/sections/Pricing/index.js | 81 ++++++++++++++++++++++++++++++++--- 1 file changed, 74 insertions(+), 7 deletions(-) diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js index 9f7d1675724a1..fa686b9e25ccf 100644 --- a/src/sections/Pricing/index.js +++ b/src/sections/Pricing/index.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useRef, useEffect } from "react"; import PricingWrapper from "./pricing.style"; import Comparison from "./comparison"; import FAQ from "../General/Faq"; @@ -42,8 +42,72 @@ const getCustomToggleButtonStyle = (isActive, baseStyle) => ({ }); export const CurrencySelect = ({ currency, setCurrency }) => { + const [open, setOpen] = useState(false); + + const containerRef = useRef(null); + const toggleRef = useRef(null); + + useEffect(() => { + if (!open) return; + + const el = toggleRef.current ?? containerRef.current; + if (!el) return; + + if ("IntersectionObserver" in window) { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) { + setOpen(false); + } + }); + }, + { root: null, threshold: 0.1 } + ); + + observer.observe(el); + return () => observer.disconnect(); + } + + let ticking = false; + const checkRect = () => { + const currentEl = toggleRef.current ?? containerRef.current; + if (!currentEl) return; + + const rect = currentEl.getBoundingClientRect(); + const isOutOfView = + rect.bottom < 0 || + rect.top > window.innerHeight || + rect.right < 0 || + rect.left > window.innerWidth; + + if (isOutOfView) { + setOpen(false); + } + }; + + const onScroll = () => { + if (!ticking) { + ticking = true; + window.requestAnimationFrame(() => { + checkRect(); + ticking = false; + }); + } + }; + + window.addEventListener("scroll", onScroll, { passive: true, capture: true }); + window.addEventListener("resize", checkRect, { passive: true }); + + return () => { + window.removeEventListener("scroll", onScroll, { capture: true }); + window.removeEventListener("resize", checkRect); + }; + }, [open]); + return ( { }} > Currency +