removed static backend uri in newsletter section.

Author: Roshansuthar1105

client/src/components/HomePageComponents/NewsLetter.jsx

@@ -4,22 +4,15 @@ import { FaPaperPlane } from "react-icons/fa";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { motion } from "framer-motion";
+import NewsletterSubscribeInput from "../NewsletterSubscribeInput";
 
 gsap.registerPlugin(ScrollTrigger);
 
 const NewsLetter = () => {
   const { theme } = useTheme();
   const isDark = theme === 'dark';
-  const [email, setEmail] = useState("");
   const sectionRef = useRef(null);
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    // Here you would typically handle the newsletter subscription
-    alert(`Thank you for subscribing with: ${email}`);
-    setEmail("");
-  };
-
   useEffect(() => {
     if (!sectionRef.current) return;
 
@@ -55,32 +48,7 @@ const NewsLetter = () => {
             Subscribe to our newsletter and never miss new courses and learning opportunities
           </p>
 
-          <form
-            onSubmit={handleSubmit}
-            className="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto"
-          >
-            <input
-              type="email"
-              placeholder="Enter your email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              className={`
-                flex-grow px-5 py-3 rounded-2xl shadow-md bg-transparent border-none outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
-                ${isDark ? 'text-dark-text-primary placeholder-dark-text-secondary' : 'text-light-text-primary placeholder-light-text-secondary'}
-                transition-all duration-300
-              `}
-            />
-            <motion.button
-              type="submit"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.98 }}
-              className="bg-primary hover:bg-primary-dark text-white py-3 px-6 rounded-xl transition-all duration-300 flex items-center justify-center gap-2 font-semibold shadow-lg"
-            >
-              <span>Subscribe</span>
-              <FaPaperPlane />
-            </motion.button>
-          </form>
+          <NewsletterSubscribeInput isDark={isDark} />
         </div>
       </div>
     </section>

client/src/components/NewsletterSubscribeInput.jsx

@@ -1,23 +1,24 @@
 import { useState } from "react";
 import PropTypes from "prop-types";
+import { useAuth } from "../store/auth";
+import { toast } from "react-toastify";
 
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 function NewsletterSubscribeInput({ isDark }) {
+  const {API}=useAuth();
   const [email, setEmail] = useState("");
-  const [status, setStatus] = useState({ type: "idle", message: "" });
   const [loading, setLoading] = useState(false);
 
   const handleSubscribe = async () => {
     if (!EMAIL_REGEX.test(email)) {
-      setStatus({ type: "error", message: "Please enter a valid email." });
+      toast.error("Please enter a valid email.");
       return;
     }
     try {
       setLoading(true);
-      setStatus({ type: "idle", message: "" });
       const res = await fetch(
-        "http://localhost:5050/api/newsletter/subscribe",
+        `${API}/api/newsletter/subscribe`,
         {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -28,13 +29,13 @@ function NewsletterSubscribeInput({ isDark }) {
       if (!res.ok || data?.success === false) {
         throw new Error(data?.message || "Subscription failed");
       }
-      setStatus({ type: "success", message: data?.message || "Subscribed!" });
+      if(data?.message=="Already subscribed")
+      toast.info(data?.message || "Subscribed!" )
+      else
+      toast.success(data?.message || "Subscribed!" )
       setEmail("");
     } catch (err) {
-      setStatus({
-        type: "error",
-        message: err.message || "Something went wrong",
-      });
+      toast.error(err?.message || "Something went wrong");
     } finally {
       setLoading(false);
     }
@@ -59,21 +60,12 @@ function NewsletterSubscribeInput({ isDark }) {
       <button
         onClick={handleSubscribe}
         disabled={loading}
-        className={`bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-lg transition-colors my-3 mx-1 shadow-md ${
+        className={`bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-lg transition-colors shadow-md ${
           loading ? "opacity-70 cursor-not-allowed" : ""
         }`}
       >
         {loading ? "Subscribing..." : "Subscribe"}
       </button>
-      {status.message && (
-        <div
-          className={`text-sm my-auto ${
-            status.type === "error" ? "text-red-500" : "text-green-500"
-          }`}
-        >
-          {status.message}
-        </div>
-      )}
     </div>
   );
 }