Fix: Footer Services scroll functionality

client/src/components/Footer.jsx

@@ -12,6 +12,8 @@ import {
   ExternalLink,
 } from "lucide-react";
 import { Link } from "react-router-dom";
+import { useState } from "react";
+import axios from "axios";
 
 const Footer = () => {
   // ==================== DATA & CONSTANTS ====================
@@ -25,7 +27,7 @@ const Footer = () => {
   const quickLinks = [
     { name: "Home", href: "/" },
     { name: "About Us", href: "/about" },
-    { name: "Services", href: "/services" },
+    { name: "Services", href: "#services" },
     { name: "Doctors", href: "/doctors" },
     { name: "Appointments", href: "/appointments" },
     { name: "Contact", href: "/contact" },
@@ -67,11 +69,38 @@ const Footer = () => {
     { name: "Terms of Service", href: "/terms-of-service" },
     { name: "Cookie Policy", href: "/cookie-policy" },
   ];
+  // ==================== NEWSLETTER STATE VARIABLES ====================
+  const [email, setEmail] = useState('');
+  const [confirmation, setConfirmation] = useState('');
+  const [error, setError] = useState('');
 
   // ==================== FUNCTIONS ====================
-  const handleNewsletterSubmit = (e) => {
+
+  // Function to validate email format
+  const isValidEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  // Function to handle newsletter subscription
+  const  handleNewsletterSubmit =async (e) => {
     e.preventDefault();
-    // Newsletter subscription logic can be added here
+    if (!isValidEmail(email)) {
+      setError('Please enter a valid email address.');
+      setConfirmation('');
+      return;
+    }
+     try {
+      const response = await axios.post('http://localhost:5000/api/subscribe', { email });
+      alert(response.data.message);
+      setEmail('');
+    } catch (error) {
+      console.log(error);
+
+    }
+    setError('');
+    setConfirmation('Thank you for subscribing to our newsletter!');
+    setEmail('');
   };
 
   // ==================== RENDER COMPONENTS ====================
@@ -156,29 +185,26 @@ const Footer = () => {
       </div>
 
       {/* Newsletter */}
-      <div className="text-center lg:text-left">
-        <h4 className="text-2xl font-bold text-white mb-8">Stay Updated</h4>
-        <div className="space-y-6">
-          <p className="text-gray-200 text-lg">
-            Get health tips and updates delivered to your inbox
-          </p>
-          <form onSubmit={handleNewsletterSubmit} className="space-y-4">
-            <input
-              type="email"
-              placeholder="Enter your email"
-              required
-              className="w-full px-4 py-3 bg-white/15 backdrop-blur-sm border border-white/30 rounded-xl focus:outline-none focus:border-purple-400 focus:bg-white/25 transition-all text-white placeholder-gray-300 text-lg"
-            />
-            <button
-              type="submit"
-              className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300 hover:shadow-xl hover:scale-105 flex items-center justify-center space-x-2"
-            >
-              <span>Subscribe Now</span>
-              <ExternalLink className="w-5 h-5" />
-            </button>
-          </form>
-        </div>
-      </div>
+      <div className="max-w-md mx-auto text-center">
+      <form onSubmit={handleNewsletterSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '300px' }}>
+        <input
+          type="email"
+          value={email}
+          placeholder="Enter your email"
+          onChange={(e) => setEmail(e.target.value)}
+          style={{ padding: '8px', borderRadius: '10px', border: '1px solid #ccc' , color: '#333'}}
+          required
+        />
+        <button
+          type="submit"
+          className="w-25 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center text-white transition-all duration-300 hover:scale-110 hover:shadow-xl group-hover:rotate-12"
+        >
+          Subscribe
+        </button>
+      </form>
+      {error && <p className="mt-4 text-red-400 font-medium">{error}</p>}
+      {confirmation && <p className="mt-4 text-green-400 font-medium">{confirmation}</p>}
+    </div>
     </div>
   );
 

client/src/index.css

@@ -16,9 +16,7 @@
   -moz-osx-font-smoothing: grayscale;
 } */
 
-* {
-  cursor: none !important;
-}
+
 
 body.menu-open {
   overflow: hidden !important;

server/routes/routes.js

@@ -5,10 +5,11 @@ import signUp from '../controller/user/signUp.js';
 import signIn from '../controller/user/signIn.js';
 import authtoken from "../middleware/auth.js";
 import consultation from '../controller/services/consultation.js';
-import doctorinfo from "../controller/user/doctorInfo.js';
+import doctorinfo from "../controller/user/doctorInfo.js";
 import logout from '../controller/user/logOut.js';
 import roomIdNotification from '../controller/notification/mail_roomId.js';
 import sendContactUsEmail from "../controller/notification/mail_contactUs.js";
+import subscribeController from '../controller/notification/subscribeController.js';
 
 import {
   createFeedLog,
@@ -27,6 +28,7 @@ import { careCoPilot, healthCheck } from '../controller/services/careCoPilot.js'
 router.post('/signin', signIn);
 router.post('/signup', signUp);
 router.post('/logout', logout);
+router.post('/subscribe', subscribeController);
 
 // Doctor and consultation
 router.post('/consultation', authtoken, consultation);
@@ -52,4 +54,6 @@ router.delete('/sleeplogs/:id', authtoken, deleteSleepLog);
 router.post('/care-co-pilot', careCoPilot);
 router.get('/care-co-pilot/health', healthCheck);
 
+// Newsletter subscription
+
 export default router;