fixed, made it working

2026-04-17 22:01:45 +00:00 · 2026-02-15 06:01:51 +05:30
parent a80228f697
commit 530eb0d5a9
18 changed files with 406 additions and 252 deletions
--- a/src/components/DiscordPopup.jsx
+++ b/src/components/DiscordPopup.jsx
@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from "react";
+import { X } from "lucide-react";
+import { FaDiscord, FaTelegram } from "react-icons/fa";
+
+const DiscordPopup = () => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [shouldRender, setShouldRender] = useState(false);
+
+    useEffect(() => {
+        // Check if the user has opted out of seeing the popup
+        const isHidden = localStorage.getItem("hideDiscordPopup");
+        if (isHidden) return;
+
+        // Set a timer for 2 minutes (120,000 ms)
+        const timer = setTimeout(() => {
+            setShouldRender(true);
+            // Brief delay to trigger entrance animation
+            setTimeout(() => setIsVisible(true), 10);
+        }, 60000);
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    const handleClose = () => {
+        setIsVisible(false);
+        // Wait for animation to finish before removing from DOM
+        setTimeout(() => setShouldRender(false), 300);
+    };
+
+    const handleNeverShowAgain = () => {
+        localStorage.setItem("hideDiscordPopup", "true");
+        handleClose();
+    };
+
+    if (!shouldRender) return null;
+
+    return (
+        <div
+            className={`fixed inset-0 z-[9999] flex items-center justify-center p-4 transition-all duration-300 ease-in-out ${isVisible ? "opacity-100 backdrop-blur-md pointer-events-auto" : "opacity-0 backdrop-blur-none pointer-events-none"
+                }`}
+        >
+            <div
+                className={`bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl shadow-[0_0_50px_-12px_rgba(0,0,0,0.8)] overflow-hidden max-w-sm w-full transition-all duration-300 transform ${isVisible ? "scale-100 translate-y-0" : "scale-95 translate-y-4"
+                    }`}
+            >
+                {/* Header */}
+                <div className="flex items-center justify-between p-5 border-b border-[#2a2a2a] bg-[#1a1a1a]">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2.5 bg-[#5865F2] text-white rounded-xl shadow-md">
+                            <FaDiscord className="text-xl" />
+                        </div>
+                        <div className="flex flex-col">
+                            <span className="font-bold text-white text-[15px] leading-tight">Join Our Community</span>
+                            <span className="text-[10px] text-gray-400 uppercase tracking-widest font-bold mt-0.5">Discord & Telegram</span>
+                        </div>
+                    </div>
+                    <button
+                        onClick={handleClose}
+                        className="p-1.5 hover:bg-[#2a2a2a] rounded-full transition-colors text-gray-400 hover:text-white"
+                    >
+                        <X size={18} />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-6 bg-[#1a1a1a]">
+                    <p className="text-[13px] text-gray-400 leading-relaxed font-medium">
+                        Join our official channels for early updates, announcements, and to connect with other fans!
+                    </p>
+
+                    <div className="mt-6 flex flex-col gap-3">
+                        <a
+                            href="https://discord.gg/your-invite-link"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center justify-center gap-2 w-full bg-[#5865F2] hover:bg-[#4759d8] text-white py-2.5 px-4 rounded-xl font-bold transition-all transform active:scale-[0.97] shadow-lg"
+                        >
+                            <FaDiscord className="text-lg" />
+                            JOIN DISCORD
+                        </a>
+
+                        <a
+                            href="https://tinyurl.com/JustAnimeZone"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center justify-center gap-2 w-full bg-[#26A5E4] hover:bg-[#2295ce] text-white py-2.5 px-4 rounded-xl font-bold transition-all transform active:scale-[0.97] shadow-lg"
+                        >
+                            <FaTelegram className="text-lg" />
+                            JOIN TELEGRAM
+                        </a>
+                    </div>
+
+                    <button
+                        onClick={handleNeverShowAgain}
+                        className="mt-5 w-full text-[11px] text-gray-500 hover:text-white underline-offset-4 hover:underline transition-colors py-1 font-semibold tracking-wide"
+                    >
+                        NEVER SHOW AGAIN
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DiscordPopup;