Add error handling for newsletter subscription form

Author: Shitanshukumar607

src/theme/Footer/Layout/enhanced-footer.css

@@ -1384,6 +1384,16 @@ html[data-theme='light'] .enhanced-footer {
   font-weight: 500;
 }
 
+.newsletter-input.input-error {
+  border-color: #e53e3e;
+}
+
+.error-text {
+  margin-top: 4px;
+  font-size: 0.85rem;
+  color: #e53e3e;
+}
+
 /* Responsive Design */
 @media (max-width: 1200px) {
   .footer-links-grid {

src/theme/Footer/Layout/index.tsx

@@ -30,6 +30,7 @@ export default function FooterLayout({
   const [email, setEmail] = useState('');
   const [isSubscribed, setIsSubscribed] = useState(false);
   const [showToast, setShowToast] = useState(false);
+  const [error, setError] = useState("");
 
   useEffect(() => {
     // Simulate real-time stats updates
@@ -59,21 +60,32 @@ export default function FooterLayout({
 
   const handleSubscribe = (e: React.FormEvent) => {
     e.preventDefault();
-    if (email) {
-      setIsSubscribed(true);
-      setShowToast(true);
-      
-      // Hide toast after 3 seconds
-      setTimeout(() => {
-        setShowToast(false);
-      }, 3000);
-      
-      // Reset form after 3 seconds
-      setTimeout(() => {
-        setIsSubscribed(false);
-        setEmail('');
-      }, 3000);
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    if (!email) {
+      setError("Email is required");
+      return;
+    }
+
+    if (!emailRegex.test(email)) {
+      setError("Please enter a valid email address");
+      return;
     }
+
+    setError("");
+    setIsSubscribed(true);
+    setShowToast(true);
+    
+    // Hide toast after 3 seconds
+    setTimeout(() => {
+      setShowToast(false);
+    }, 3000);
+    
+    // Reset form after 3 seconds
+    setTimeout(() => {
+      setIsSubscribed(false);
+      setEmail('');
+    }, 3000);
   };
 
   return (
@@ -355,6 +367,7 @@ export default function FooterLayout({
                 >
                   {isSubscribed ? "✓ Subscribed!" : "Subscribe Now →"}
                 </button>
+                {error && <p className="error-text">{error}</p>}
               </form>
               <div className="newsletter-stats">
                 <span className="newsletter-stat">