From 6ecb29eb5e19c83b6c582ed9e910cd56bd92f612 Mon Sep 17 00:00:00 2001
From: evgeniywas <evgeniywas@gmail.com>
Date: Sun, 27 Aug 2023 15:43:32 +0100
Subject: [PATCH] RC-12: create registration popup component

---
 .../popups/RegistrationPopup.js               | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/app/main/shared-components/popups/RegistrationPopup.js

diff --git a/src/app/main/shared-components/popups/RegistrationPopup.js b/src/app/main/shared-components/popups/RegistrationPopup.js
new file mode 100644
index 0000000..e908d66
--- /dev/null
+++ b/src/app/main/shared-components/popups/RegistrationPopup.js
@@ -0,0 +1,72 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { memo } from 'react';
+import { Link } from 'react-router-dom';
+import BasicPopup from './BasicPopup';
+
+const bullets = [
+  'Lorem ipsum rci egestas. Tortor nulla ac est nulla nisl ut.',
+  'Lorem ipsum dolor sit amet consectetur.',
+  'Lorem ipsum rci egestas. Tortor nulla ac est nulla nisl ut.',
+  'Lorem ipsum dolor sit amet consectetur.',
+  'Lorem ipsum dolor sit amet consectetur.',
+  'Lorem ipsum dt amet consectetur. Duis massa vel estas. Tortor nulla ac est nulla nisl ut.',
+  'Lorem ipsum dolor sit amet consectetur.',
+];
+
+function RegistrationPopup({ open, onClose }) {
+  return (
+    <BasicPopup
+      className="flex max-w-[76vw] w-full h-[66vh] min-h-[600px] rounded-20"
+      open={open}
+      onClose={onClose}
+    >
+      <Box
+        className="relative hidden md:flex flex-auto items-center justify-center h-full p-64 lg:px-112 overflow-hidden max-w-[45vw] w-full"
+        sx={{ backgroundColor: 'common.layout' }}
+      >
+        <svg
+          className="absolute inset-0 pointer-events-none"
+          viewBox="0 0 960 540"
+          width="100%"
+          height="100%"
+          preserveAspectRatio="xMidYMax slice"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Box
+            component="g"
+            sx={{ color: 'primary.light' }}
+            className="opacity-20"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="100"
+          >
+            <circle r="234" cx="266" cy="23" />
+            <circle r="234" cx="790" cy="551" />
+          </Box>
+        </svg>
+      </Box>
+      <Box
+        className="flex flex-col items-center px-60 pt-56"
+        sx={{ backgroundColor: 'background.paper' }}
+      >
+        <Typography variant="h4" className="mb-52 text-4xl font-semibold">
+          Lorem ipsum dolor sit amet consetur
+        </Typography>
+        <ul className="flex flex-col gap-10 mb-68">
+          {bullets.map((bullet) => (
+            <li className="bullet">{bullet}</li>
+          ))}
+        </ul>
+        <Link
+          className="w-full py-20 text-center text-xl text-primary-light font-semibold tracking-widest rounded-2xl bg-secondary-main shadow hover:shadow-hover hover:shadow-secondary-main ease-in-out duration-300"
+          to="/sign-up"
+        >
+          Try for free
+        </Link>
+      </Box>
+    </BasicPopup>
+  );
+}
+
+export default memo(RegistrationPopup);