Skip to content

Commit 48c1b61

Browse files
author
sangam14
committed
update popup
1 parent 6d944df commit 48c1b61

File tree

1 file changed

+36
-153
lines changed

1 file changed

+36
-153
lines changed

‎src/components/JoinCommunityPopup.jsx‎

Lines changed: 36 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,13 @@ import { X } from 'lucide-react';
33

44
const JoinCommunityPopup = () => {
55
const [isOpen, setIsOpen] = useState(false);
6-
const [email, setEmail] = useState('');
7-
const [isSubmitting, setIsSubmitting] = useState(false);
8-
const [isSuccess, setIsSuccess] = useState(false);
9-
const [error, setError] = useState('');
106

117
useEffect(() => {
12-
// Check if the user has previously closed the popup or subscribed
8+
// Check if the user has previously closed the popup
139
const hasClosedPopup = localStorage.getItem('communityPopupClosed');
14-
const hasSubscribed = localStorage.getItem('communitySubscribed');
1510

16-
// Show popup after 5 seconds if they haven't closed it before or subscribed
17-
if (!hasClosedPopup && !hasSubscribed) {
11+
// Show popup after 5 seconds if they haven't closed it before
12+
if (!hasClosedPopup) {
1813
const timer = setTimeout(() => {
1914
setIsOpen(true);
2015
}, 5000);
@@ -31,52 +26,10 @@ const JoinCommunityPopup = () => {
3126
localStorage.removeItem('communityPopupClosed');
3227
}, 7 * 24 * 60 * 60 * 1000); // 7 days in milliseconds
3328
};
34-
35-
const handleEmailChange = (e) => {
36-
setEmail(e.target.value);
37-
// Clear any previous errors when user starts typing
38-
if (error) setError('');
39-
};
4029

41-
const handleSubmit = async (e) => {
42-
e.preventDefault();
43-
44-
// Basic validation
45-
if (!email) {
46-
setError('Please enter your email address');
47-
return;
48-
}
49-
50-
// Email format validation
51-
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
52-
if (!emailRegex.test(email)) {
53-
setError('Please enter a valid email address');
54-
return;
55-
}
56-
57-
setIsSubmitting(true);
58-
setError('');
59-
60-
try {
61-
// Here you would typically make an API call to your backend
62-
// For demonstration, we'll simulate a successful submission
63-
await new Promise(resolve => setTimeout(resolve, 1500));
64-
65-
// Success handling
66-
setIsSuccess(true);
67-
localStorage.setItem('communitySubscribed', 'true');
68-
69-
// Close popup after showing success message
70-
setTimeout(() => {
71-
setIsOpen(false);
72-
}, 3000);
73-
74-
} catch (err) {
75-
setError('Something went wrong. Please try again later.');
76-
console.error('Subscription error:', err);
77-
} finally {
78-
setIsSubmitting(false);
79-
}
30+
const joinDiscord = () => {
31+
window.open('https://discord.gg/aUD4hkYYGt', '_blank');
32+
closePopup();
8033
};
8134

8235
if (!isOpen) return null;
@@ -95,111 +48,41 @@ const JoinCommunityPopup = () => {
9548
{/* Blue header */}
9649
<div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white">
9750
<h3 className="text-xl font-bold">Join Our Security Community</h3>
98-
<p className="mt-1 text-blue-100">Stay updated with the latest in cloud security</p>
51+
<p className="mt-1 text-blue-100">Connect with cloud security professionals</p>
9952
</div>
10053

10154
{/* Content */}
10255
<div className="p-6">
103-
{isSuccess ? (
104-
<div className="py-8 text-center">
105-
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
106-
<svg className="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
107-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
108-
</svg>
109-
</div>
110-
<h4 className="text-xl font-medium text-gray-900 dark:text-white mb-2">Thank You!</h4>
111-
<p className="text-gray-600 dark:text-gray-300">
112-
You've successfully joined our security community. We'll keep you updated with the latest security insights.
113-
</p>
56+
<div className="text-center">
57+
<div className="w-20 h-20 mx-auto mb-4">
58+
<svg className="w-full h-full text-indigo-600" fill="currentColor" viewBox="0 0 24 24">
59+
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3847-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
60+
</svg>
11461
</div>
115-
) : (
116-
<>
117-
<p className="text-gray-600 dark:text-gray-300 mb-4">
118-
Get exclusive access to security tips, tools, and event invitations by joining our community today.
119-
</p>
120-
121-
<form onSubmit={handleSubmit} className="space-y-4">
122-
<div>
123-
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
124-
Email
125-
</label>
126-
<input
127-
type="email"
128-
placeholder="[email protected]"
129-
className={`w-full px-3 py-2 border rounded-md dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 ${
130-
error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600'
131-
}`}
132-
value={email}
133-
onChange={handleEmailChange}
134-
required
135-
/>
136-
{error && (
137-
<p className="mt-1 text-sm text-red-500">{error}</p>
138-
)}
139-
</div>
140-
141-
<div className="flex items-start">
142-
<input
143-
type="checkbox"
144-
id="consent"
145-
className="mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded"
146-
required
147-
/>
148-
<label htmlFor="consent" className="ml-2 block text-xs text-gray-500 dark:text-gray-400">
149-
I agree to receive security updates and community news. You can unsubscribe anytime.
150-
</label>
151-
</div>
152-
153-
<div className="pt-2">
154-
<button
155-
type="submit"
156-
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors flex justify-center items-center"
157-
disabled={isSubmitting}
158-
>
159-
{isSubmitting ? (
160-
<>
161-
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
162-
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
163-
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
164-
</svg>
165-
Joining...
166-
</>
167-
) : (
168-
'Join Community'
169-
)}
170-
</button>
171-
172-
<button
173-
type="button"
174-
onClick={closePopup}
175-
className="w-full mt-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 text-sm font-medium py-2"
176-
>
177-
Maybe later
178-
</button>
179-
</div>
180-
</form>
181-
182-
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 text-center">
183-
<div className="flex justify-center space-x-4">
184-
<a href="https://github.com/cloudseccorner" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
185-
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
186-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
187-
</svg>
188-
</a>
189-
<a href="https://twitter.com/cloudseccorner" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
190-
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
191-
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
192-
</svg>
193-
</a>
194-
<a href="https://discord.gg/aUD4hkYYGt" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
195-
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
196-
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3847-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
197-
</svg>
198-
</a>
199-
</div>
200-
</div>
201-
</>
202-
)}
62+
63+
<h4 className="text-xl font-medium text-gray-900 dark:text-white mb-3">Join our Discord Community</h4>
64+
<p className="text-gray-600 dark:text-gray-300 mb-6">
65+
Get exclusive access to security tips, tools, and connect with security professionals.
66+
</p>
67+
68+
<button
69+
onClick={joinDiscord}
70+
className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-md transition-colors flex justify-center items-center"
71+
>
72+
<svg className="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
73+
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3847-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
74+
</svg>
75+
Join Discord
76+
</button>
77+
78+
<button
79+
type="button"
80+
onClick={closePopup}
81+
className="w-full mt-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 text-sm font-medium py-2"
82+
>
83+
Maybe later
84+
</button>
85+
</div>
20386
</div>
20487
</div>
20588
</div>

0 commit comments

Comments
 (0)