updated popup
This commit is contained in:
@@ -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 |
@@ -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",
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user