Skip to content

Commit 13dd4be

Browse files
WilliamRagstadWilliamRagstad
committed
Improve modal
1 parent 46900db commit 13dd4be

File tree

1 file changed

+83
-82
lines changed

1 file changed

+83
-82
lines changed

‎src/components/InvitationModal.jsx

Lines changed: 83 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -2,90 +2,91 @@ import { motion, AnimatePresence } from "framer-motion";
22

33
import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
44
import { CloseIcon } from "../assets/icons/CloseIcon";
5-
import { TailcastLogo } from "../assets/logos/TailcastLogo";
5+
// import { TailcastLogo } from "../assets/logos/TailcastLogo";
6+
import { WebXBlueLogo } from "../assets/logos/WebXBlueLogo";
67

78
export const InvitationModal = ({ setIsOpen }) => (
8-
<AnimatePresence>
9-
<motion.div
10-
initial={{ opacity: 0, zIndex: 50 }}
11-
animate={{ opacity: 1, zIndex: 50 }}
12-
transition={{ duration: 0.1 }}
13-
exit={{ opacity: 0 }}
14-
>
15-
<div
16-
className="w-full h-full bg-bgDarkTransparentDarker fixed top-0 left-0 flex z-50 justify-center items-center"
17-
onClick={() => setIsOpen(false)}
18-
>
19-
<div
20-
className="w-full h-screen sm:h-auto sm:w-3/4 md:w-3/5 lg:w-[1000px] xl:w-[1100px] sm:rounded-2xl bg-bgDarkTransparentLighter main-border-gray-darker py-12 px-8 sm:px-16 backdrop-blur-xl fixed sm:mb-8 fixed mx-auto z-50"
21-
onClick={(e) => e.stopPropagation()}
22-
>
23-
<div className="flex relative">
24-
<div className="w-1/2 hidden lg:inline">
25-
<h2 className="mt-6 mb-2 text-5xl font-bold tracking-normal text-primaryText">
26-
Subscribe Now
27-
</h2>
28-
<h2 className="text-5xl font-bold tracking-normal text-secondaryColor">
29-
Winter is coming
30-
</h2>
9+
<AnimatePresence>
10+
<motion.div
11+
initial={{ opacity: 0, zIndex: 50 }}
12+
animate={{ opacity: 1, zIndex: 50 }}
13+
transition={{ duration: 0.1 }}
14+
exit={{ opacity: 0 }}
15+
>
16+
<div
17+
className="w-full h-full bg-bgDarkTransparentDarker fixed top-0 left-0 flex z-50 justify-center items-center"
18+
onClick={() => setIsOpen(false)}
19+
>
20+
<div
21+
className="w-full h-screen sm:h-auto sm:w-3/4 md:w-3/5 lg:w-[1000px] xl:w-[1100px] sm:rounded-2xl bg-bgDarkTransparentLighter main-border-gray-darker py-12 px-8 sm:px-16 backdrop-blur-xl fixed sm:mb-8 fixed mx-auto z-50"
22+
onClick={(e) => e.stopPropagation()}
23+
>
24+
<div className="flex relative">
25+
<div className="w-1/2 hidden lg:inline">
26+
<h2 className="mt-6 mb-2 text-5xl font-bold tracking-normal text-primaryText">
27+
Subscribe Now
28+
</h2>
29+
<h2 className="text-5xl font-bold tracking-normal text-secondaryColor">
30+
Web is awaiting
31+
</h2>
3132

32-
<ul className="mb-6 text-primaryText mt-12">
33-
<li className="mb-4 flex">
34-
<CheckArrowIcon />
35-
<span>Vestibulum viverra</span>
36-
</li>
37-
<li className="mb-4 flex">
38-
<CheckArrowIcon />
39-
<span>Morbi mollis metus pretium</span>
40-
</li>
41-
<li className="mb-4 flex">
42-
<CheckArrowIcon />
43-
<span>Etiam lectus nunc, commodo</span>
44-
</li>
45-
</ul>
46-
</div>
47-
<div className="w-full lg:w-1/2 flex items-center flex-col justify-center pt-24 sm:pt-0">
48-
<div className="flex inline lg:hidden justify-start items-center grow basis-0 mb-8 pr-6">
49-
<div className="text-white mr-2 text-8xl">
50-
<TailcastLogo />
51-
</div>
52-
<div className="text-white font-['Inter'] font-bold text-3xl">
53-
Tailcast
54-
</div>
55-
</div>
33+
<ul className="mb-6 text-primaryText mt-12">
34+
<li className="mb-4 flex">
35+
<CheckArrowIcon />
36+
<span>Latest updates and news</span>
37+
</li>
38+
<li className="mb-4 flex">
39+
<CheckArrowIcon />
40+
<span>High-quality tips and tricks</span>
41+
</li>
42+
<li className="mb-4 flex">
43+
<CheckArrowIcon />
44+
<span>Exclusive insights</span>
45+
</li>
46+
</ul>
47+
</div>
48+
<div className="w-full lg:w-1/2 flex items-center flex-col justify-center pt-24 sm:pt-0">
49+
<div className="flex inline lg:hidden justify-start items-center grow basis-0 mb-8 pr-6">
50+
<div className="text-white text-8xl">
51+
<WebXBlueLogo />
52+
</div>
53+
</div>
5654

57-
<h3 className="mb-7 text-2xl text-primaryText font-bold leading-snug text-center">
58-
Join 3,953 other developers
59-
</h3>
60-
<div className="flex flex-wrap -m-2">
61-
<div className="w-full sm:w-4/5 p-2 mx-auto">
62-
<input
63-
className="px-4 py-4 w-full text-gray-500 font-medium text-center placeholder-gray-500 outline-none border bg-gray-300 border-gray-300 rounded-lg focus:ring focus:ring-indigo-300"
64-
id="newsletterInput3-1"
65-
type="text"
66-
placeholder="Your email address"
67-
/>
68-
</div>
69-
<div className="w-full sm:w-4/5 p-2 mt-4 mx-auto">
70-
<button
71-
className="py-4 px-6 w-full text-primaryText font-semibold rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-primaryColor hover:bg-[#7274f3] transition ease-in-out duration-200"
72-
type="button"
73-
aria-label="Join now"
74-
>
75-
Join Now
76-
</button>
77-
</div>
78-
</div>
79-
</div>
80-
<div
81-
className="fixed top-6 right-6 z-50 w-5 h-5 cursor-pointer text-[rgb(255,255,255,0.7)] hover:text-white transition"
82-
onClick={() => setIsOpen(false)}
83-
>
84-
<CloseIcon />
85-
</div>
86-
</div>
87-
</div>
88-
</div>
89-
</motion.div>
90-
</AnimatePresence>
55+
<h3 className="mb-7 text-2xl text-primaryText font-bold leading-snug text-center">
56+
Join thousands of other developers!
57+
</h3>
58+
<p className="mb-10 text-secondaryText leading-loose text-center">
59+
Subscribe to our newsletter and get the latest updates and news about Web X. Tips- tricks and exclusive insights 🚀
60+
</p>
61+
<div className="flex flex-wrap -m-2">
62+
<div className="w-full sm:w-4/5 p-2 mx-auto">
63+
<input
64+
className="px-4 py-4 w-full text-gray-500 font-medium text-center placeholder-gray-500 outline-none border bg-gray-300 border-gray-300 rounded-lg focus:ring focus:ring-indigo-300"
65+
id="newsletterInput3-1"
66+
type="text"
67+
placeholder="Your email address"
68+
/>
69+
</div>
70+
<div className="w-full sm:w-4/5 p-2 mt-4 mx-auto">
71+
<button
72+
className="py-4 px-6 w-full text-primaryText font-semibold rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-primaryColor hover:bg-[#7274f3] transition ease-in-out duration-200"
73+
type="button"
74+
aria-label="Join now"
75+
>
76+
Join Now
77+
</button>
78+
</div>
79+
</div>
80+
</div>
81+
<div
82+
className="fixed top-6 right-6 z-50 w-5 h-5 cursor-pointer text-[rgb(255,255,255,0.7)] hover:text-white transition"
83+
onClick={() => setIsOpen(false)}
84+
>
85+
<CloseIcon />
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</motion.div>
91+
</AnimatePresence>
9192
);

0 commit comments

Comments
 (0)