updated popup

This commit is contained in:
2026-03-17 11:46:25 +05:00
parent 0deba80c60
commit ac68f093b3
2 changed files with 31 additions and 11 deletions
@@ -0,0 +1,3 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.0376 5.40479V15.9644H31.8853C31.4541 15.9684 31.0264 15.9896 30.604 16.0269C22.3877 16.7514 15.9448 23.6421 15.9448 32.0356C15.9448 40.8417 23.0365 47.9935 31.8276 48.106C31.8967 48.1068 31.9664 48.1079 32.0356 48.1079C39.065 48.1079 45.0425 43.6068 47.2349 37.3335H42.0356V26.7739H58.1694C58.1761 26.8447 58.182 26.9158 58.188 26.9868C58.5021 28.6216 58.6675 30.3094 58.6675 32.0356C58.6675 46.7435 46.728 58.6664 32.0005 58.6665C17.2728 58.6665 5.3335 46.7436 5.3335 32.0356C5.33352 17.3277 17.2729 5.40479 32.0005 5.40479H32.0376ZM58.2729 15.9644L52.3413 21.4771H42.0903V11.2397L47.6274 5.3335H58.2729V15.9644Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 746 B

+28 -11
View File
@@ -57,8 +57,9 @@ export default function ResultsPopup() {
gap: resultsPopupState === "expanded" ? "1.389vw" : "0vw",
}}
onClick={handlePopupClick}
className="fixed bottom-0 md:right-10 right-[calc((100vw-350px)/2)] z-[100] lg:p-[1.111vw] md:p-[2.083vw] p-[4.444vw] lg:rounded-[1.111vw] md:rounded-[2.083vw] rounded-2xl -gradient bg-[#37393B99] flex flex-col overflow-hidden"
className="fixed bottom-0 md:right-10 right-[calc((100vw-350px)/2)] z-[100] lg:p-[1.111vw] md:p-[2.083vw] p-[4.444vw] lg:rounded-[1.111vw] md:rounded-[2.083vw] rounded-2xl bg-[#37393B99] flex flex-col overflow-hidden"
>
{/* Gradient */}
<motion.div
style={{
background:
@@ -78,23 +79,40 @@ export default function ResultsPopup() {
className="absolute bottom-0 left-0 w-full h-full object-cover z-[-1] overflow-hidden"
/>
{/* Content closed */}
<motion.div
animate={{ gap: resultsPopupState === "expanded" ? "1rem" : "0vw" }}
className="flex items-center justify-center"
className="flex flex-col items-start "
>
<div>
<div
className={`flex ${
resultsPopupState === "expanded" ? "flex-row" : "flex-col"
} items-center justify-center `}
>
<img
src="/img/pages/results/popup.png"
src="/img/pages/results/popup_regular.svg"
alt="result"
className="lg:size-[6.528vw] md:size-[12.24vw] size-[20.778vw] object-cover"
className={` ${
resultsPopupState === "expanded"
? "lg:size-[2.778vw] md:size-[5.208vw] size-[11.111vw]"
: "lg:size-[4.444vw] md:size-[9.44vw] size-[17.778vw]"
} object-cover`}
/>
{resultsPopupState === "collapsed" && (
<p className="text-white btnm text-center mt-[0.556vw]">
<p className="text-white btnm text-center mt-[0.278vw]">
Итоги 2025
</p>
)}
{resultsPopupState === "expanded" && (
<p className="lg:text-[1.389vw] headline2 font-light leading-[135%] tracking-[0em] lg:ml-[0.833vw] md:ml-[1.563vw] ml-[1.563vw]">
Итоги года GRAFF.estate
</p>
)}
</div>
{/* Content expanded */}
<motion.div
initial={{
opacity: resultsPopupState === "expanded" ? 1 : 0,
@@ -108,12 +126,9 @@ export default function ResultsPopup() {
}}
className="overflow-hidden whitespace-nowrap"
>
<p className="headline2 md:headline1 heading2 lg:mb-[0.556vw] md:mb-[1.042vw] mb-[2.222vw]">
Итоги года <br /> GRAFF.estate
</p>
<p className="lg:text-[0.972vw] text1 font-light leading-[135%] tracking-[0em] ">
Рассказываем о том,
<br /> как прошел 2025 год <br /> для нас и наших партнеров
Рассказываем о том, как прошел 2025 год <br /> для нас и наших
партнеров
</p>
</motion.div>
</motion.div>
@@ -121,11 +136,13 @@ export default function ResultsPopup() {
<motion.div
initial={{
height: resultsPopupState === "expanded" ? "auto" : 0,
width: resultsPopupState === "expanded" ? "auto" : 0,
opacity: resultsPopupState === "expanded" ? 1 : 0,
gap: resultsPopupState === "expanded" ? "0.5rem" : "0",
}}
animate={{
height: resultsPopupState === "expanded" ? "auto" : 0,
width: resultsPopupState === "expanded" ? "auto" : 0,
opacity: resultsPopupState === "expanded" ? 1 : 0,
gap: resultsPopupState === "expanded" ? "0.5rem" : "0",
}}