Spaces:
Running
Running
File size: 5,356 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
import { useContext, useRef } from "react";
import { useClickAway } from "react-use";
import classNames from "classnames";
import { login } from "utils/auth";
import { Premium } from ".";
import { PremiumContext } from "./premium";
import ModalPremiumIllustration from "assets/images/premium-modal/modal-illustration.webp";
import { FormattedMessage } from "react-intl";
export const PremiumModal = () => {
const { open, setOpen } = useContext(PremiumContext);
const ref = useRef(null);
const onClose = () => setOpen(false);
useClickAway(ref, () => onClose());
return (
<div
className={classNames(
"fixed top-0 left-0 w-full h-full bg-dark-default z-30 bg-opacity-50 backdrop-blur-sm flex items-center justify-center transition-all duration-200 p-6",
{
"opacity-0 pointer-events-none": !open,
}
)}
>
<div
ref={ref}
className={classNames(
"max-w-3xl bg-dark-500 w-full rounded-2xl grid grid-cols-1 lg:grid-cols-5 overflow-hidden shadow-xl transform transition-all duration-400",
{
"opacity-0 scale-75": !open,
}
)}
>
<div className="lg:col-span-3 py-9 px-8 text-center">
<div className="flex items-center justify-center mb-3">
<Premium size={56} tooltip={false} />
</div>
<h3 className="text-white font-bold text-2xl text-center mt-1 tracking-wide">
<FormattedMessage id="freemium.modal.title" />
</h3>
<p className="text-lg text-dark-100">
<FormattedMessage
id="freemium.modal.subtitle"
values={{
span: (t) => <span className="text-white font-bold">{t}</span>,
}}
/>
</p>
<p className="text-xl text-white font-bold mt-5 flex items-center justify-center gap-2">
<FormattedMessage id="freemium.modal.step.title" />
</p>
<div className="bg-dark-default mx-auto w-full mt-4 rounded-lg">
<div className="flex items-center justify-start px-4 py-3 text-white text-opacity-60 gap-3 border-b border-dashed border-dark-300">
<span className="font-title text-white text-sm">1.</span>
<span>
<FormattedMessage
id="freemium.modal.step.1"
values={{
span: (t) => (
<span className="text-white font-medium">{t}</span>
),
}}
/>
</span>
</div>
<div className="flex items-center text-left justify-start px-4 py-3 text-white text-opacity-60 gap-3 border-b border-dashed border-dark-300">
<span className="font-title text-white text-sm">2.</span>
<span>
<FormattedMessage
id="freemium.modal.step.2"
values={{
span: (t) => (
<span className="text-white font-medium">{t}</span>
),
}}
/>
</span>
</div>
<div className="flex items-center justify-start px-4 py-3 text-white text-opacity-60 gap-3 border-b border-dashed border-dark-300">
<span className="font-title text-white text-sm">3.</span>
<span>
<FormattedMessage
id="freemium.modal.step.3"
values={{
span: (t) => (
<span className="text-white font-medium">{t}</span>
),
}}
/>
</span>
</div>
<div className="flex items-center justify-start px-4 py-3 gap-3 border-b border-dashed border-dark-300 font-semibold text-yellow">
<span className="font-title text-sm">4.</span>
<span>
<FormattedMessage id="freemium.modal.step.4" />
</span>
</div>
</div>
<button
className="bg-blue text-white rounded-lg w-full text-center px-3 py-3 mt-5 font-semibold hover:bg-opacity-80 flex items-center justify-center gap-2"
onClick={login}
>
<FormattedMessage id="freemium.modal.cta" />
<Premium size="22" tooltip={false} />
</button>
</div>
<div
style={
{
// backgroundImage: `url(${ModalPremiumIllustration.src})`,
}
}
className="w-full h-full bg-cover hidden lg:block bg-center lg:col-span-2 relative bg-blue"
>
<div
className="max-w-max absolute top-5 right-5 cursor-pointer"
onClick={onClose}
>
<svg
width={14}
height={14}
fill="none"
viewBox="0 0 123 123"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M122.443 110.277L73.625 61.459l48.695-48.694L110.081.526 61.387 49.22 12.569.402.417 12.554l48.818 48.818L.553 110.054l12.239 12.238 48.681-48.681 48.843 48.842 12.127-12.176z"
fill="#000"
/>
</svg>
</div>
</div>
</div>
</div>
);
};
|