From b884352eb4f179b50e74d69932c7f7e97cbee935 Mon Sep 17 00:00:00 2001
From: VaishuSidhu <svvaishnavy@gmail.com>
Date: Sat, 19 Oct 2024 10:10:32 +0530
Subject: [PATCH] login button, navi, news letter in the footer, navigation
 background, Added Terms and condition,

---
 frontend/src/App.jsx                          |   7 +-
 frontend/src/components/Footer.jsx            | 182 ++++++------------
 frontend/src/components/Navbar.jsx            |   2 +-
 .../pages/login_signup_page/SignupPage.jsx    |   2 +
 .../TermsAndConditionsPage.jsx                |  93 ++++++++-
 5 files changed, 155 insertions(+), 131 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index aa3c43f..63945de 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -34,7 +34,7 @@ function App() {
         <Routes>
           <Route path="/" element={<HomePage />} />
           <Route path="/alldoctors" element={<AllDoctorsPage />} />
-          {/* <Route path="/appointment" element={<Appointment />} /> */}
+          {<Route path="/appointment" element={<Appointment />} /> }
 
           <Route path="/specialities" element={<SpecialitiesPage />} />
 
@@ -52,14 +52,13 @@ function App() {
 
           <Route path="/login" element={<LoginPage />} />
           <Route path="/signup" element={<SignupPage />} />
+          <Route path="/termsandconditions" element={<TermsAndConditionsPage />} />
 
           <Route path="/*" element={<ErrorPage />} />
           <Route path="/faqs" element={<FaqsPage />} />
           <Route path="/aboutus" element={<AboutUsPage />} />
           <Route path="/privacypolicy" element={<PrivacyPolicyPage />} />
-          <Route
-            path="/termsandconditions"
-            element={<TermsAndConditionsPage />}
+          <Route path="/termsandconditions" element={<TermsAndConditionsPage />}
           />
         </Routes>
         <Bot />
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 3cc3234..41cac22 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -1,114 +1,71 @@
-import React from "react";
+import React, { useState } from "react";
 import { axios } from "../import-export/ImportExport";
 import { NavLink } from "react-router-dom";
-import { useState } from "react";
-
 import { toast } from "react-toastify";
-// icons
-import { FaInstagram } from "react-icons/fa";
-import { FaLinkedin } from "react-icons/fa";
+import { FaInstagram, FaLinkedin } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
 
 function Footer() {
   const navLinks = [
-    {
-      path: "/",
-      display: "Home",
-    },
-    {
-      path: "/aboutus",
-      display: "About Us",
-    },
-    {
-      path: "/privacypolicy",
-      display: "Privacy Policy",
-    },
-    {
-      path: "/termsandconditions",
-      display: "Terms and Conditions",
-    },
+    { path: "/", display: "Home" },
+    { path: "/aboutus", display: "About Us" },
+    { path: "/privacypolicy", display: "Privacy Policy" },
+    { path: "/termsandconditions", display: "Terms and Conditions" },
   ];
 
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
+  const [newsletterEmail, setNewsletterEmail] = useState("");
 
-  const handleMessage = async (e) => {
+  const handleNewsletterSubscription = async (e) => {
     e.preventDefault();
+    // Dummy validation check
+    if (!newsletterEmail.includes("@")) {
+      toast.error("Please enter a valid email address.");
+      return;
+    }
     try {
-      await axios
-        .post(
-          "/message/send",
-          { email, message },
-          {
-            withCredentials: true,
-            headers: { "Content-Type": "application/json" },
-          }
-        )
-        .then((res) => {
-          toast.success(res.data.message);
-          setEmail("");
-          setMessage("");
-        });
+      await axios.post("/newsletter/subscribe", { email: newsletterEmail });
+      toast.success("Subscribed successfully!");
+      setNewsletterEmail("");
     } catch (error) {
-      toast.error(error.response.data.message);
+      toast.error("Failed to subscribe. Please try again.");
     }
   };
 
   return (
-    <div className="bg-light_theme w-full  text-center">
+    <div className="bg-light_theme w-full text-center">
       <div className="max-w-screen-2xl mx-auto flex flex-col items-center justify-center px-3 space-y-9 pt-8">
         {/* footer top */}
         <div className="w-full grid grid-cols-1 md:grid-cols-12 gap-6">
           {/* Title */}
           <div className="cols-span-1 md:col-span-4 text-left">
-            <h1 className="text-lg lg:text-xl font-bold text-black/80 mb-6">
-              MediHub
-            </h1>
-            {/* desc */}
-            <p className="text-md lg:text-lg  text-black/70 font-medium">
-              MediHub is a web-based platform facilitating seamless management
-              of healthcare services, including appointments, patient records,
-              and doctor interactions.
+            <h1 className="text-lg lg:text-xl font-bold text-black/80 mb-6">MediHub</h1>
+            <p className="text-md lg:text-lg text-black/70 font-medium">
+              MediHub is a web-based platform facilitating seamless management of healthcare services.
             </p>
-            {/* icons */}
             <div className="flex items-center gap-4 mt-10">
-              <div className=" border border-white/70 rounded-full px-2 py-2 hover:bg-slate-700/30 cursor-pointer">
-                <a
-                  href="https://www.linkedin.com/in/itsmohit097/"
-                  target="_blank"
-                >
-                  <FaInstagram />
-                </a>
-              </div>
-              <div className=" border border-white/70 rounded-full px-2 py-2 hover:bg-slate-700/30 cursor-pointer">
-                <a
-                  href="https://www.linkedin.com/in/itsmohit097/"
-                  target="_blank"
-                >
-                  <FaLinkedin />
-                </a>
-              </div>
-              <div className=" border border-white/70 rounded-full px-2 py-2 hover:hover:bg-slate-700/30 cursor-pointer">
-                <a
-                  href="https://www.linkedin.com/in/itsmohit097/"
-                  target="_blank"
-                >
-                  <FaXTwitter />
-                </a>
-              </div>
+              <a href="https://www.instagram.com" target="_blank" className="border border-white/70 rounded-full px-2 py-2 hover:bg-slate-700/30 cursor-pointer">
+                <FaInstagram />
+              </a>
+              <a href="https://www.linkedin.com" target="_blank" className="border border-white/70 rounded-full px-2 py-2 hover:bg-slate-700/30 cursor-pointer">
+                <FaLinkedin />
+              </a>
+              <a href="https://www.twitter.com" target="_blank" className="border border-white/70 rounded-full px-2 py-2 hover:bg-slate-700/30 cursor-pointer">
+                <FaXTwitter />
+              </a>
             </div>
           </div>
+
           {/* Quick links */}
           <div className="cols-span-1 md:col-span-3">
-            <h1 className="text-lg text-left md:text-center lg:text-xl font-semibold mb-6">
-              Quick Links
-            </h1>
-            <ul className="flex flex-col justify-between gap-3 md:items-center text-md font-semibold md:gap-y-4  text-left">
+            <h1 className="text-lg text-left md:text-center lg:text-xl font-semibold mb-6">Quick Links</h1>
+            <ul className="flex flex-col justify-between gap-3 md:items-center text-md font-semibold md:gap-y-4 text-left">
               {navLinks.map((link, index) => (
                 <li key={index}>
                   <NavLink
                     to={link.path}
-                    className="text-black/70 text-md relative cursor-pointer before:block before:absolute before:bottom-[-4px] before:left-0 before:w-0 before:h-0.5 before:rounded-full before:bg-main_theme before:transition-all before:delay-150 before:ease-in-out hover:before:w-full hover:text-black"
+                    className="text-black/70 text-md relative cursor-pointer hover:before:w-full hover:text-black"
                   >
                     {link.display}
                   </NavLink>
@@ -116,58 +73,35 @@ function Footer() {
               ))}
             </ul>
           </div>
-          {/* Contact US */}
-          {/* <form
-            onSubmit={handleMessage}
-            className="cols-span-1 md:col-span-5 grid gap-y-5"
-          >
-            <h1 className="text-left text-xl font-bold text-black/80">
-              Contact Us
-            </h1>
-            <div className="relative flex justify-left space-y-7">
-              <label
-                htmlFor="email"
-                className="text-md font-normal absolute top-0 left-0"
-              >
-                Email
-              </label>
-              <input
-                type="text"
-                placeholder="Enter you email address"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="px-3 py-3 rounded-md  grow"
-              />
-            </div>
-            <div className="relative flex justify-left space-y-7">
-              <label
-                htmlFor="message"
-                className="text-md font-normal absolute top-0 left-0"
-              >
-                Message
-              </label>
-              <textarea
-                rows={7}
-                placeholder="Write Your Message Here"
-                value={message}
-                onChange={(e) => setMessage(e.target.value)}
-                className="px-3 py-3 rounded-md grow"
-              />
-            </div>
-            <button
-              type="submit"
-              className="grow bg-main_theme text-white py-3 rounded-md"
-            >
-              Send Message
-            </button>
-          </form> */}
+
+          {/* Newsletter Section */}
+          <div className="cols-span-1 md:col-span-5">
+            <h1 className="text-left text-xl font-bold text-black/80">Subscribe to our Newsletter</h1>
+            <form onSubmit={handleNewsletterSubscription} className="grid gap-y-5">
+              <div className="relative flex flex-col justify-left space-y-3">
+                <label htmlFor="newsletter-email" className="text-md font-normal">
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  id="newsletter-email"
+                  placeholder="Enter your email"
+                  value={newsletterEmail}
+                  onChange={(e) => setNewsletterEmail(e.target.value)}
+                  className="px-3 py-3 rounded-md grow"
+                />
+              </div>
+              <button type="submit" className="grow bg-main_theme text-white py-3 rounded-md">
+                Subscribe
+              </button>
+            </form>
+          </div>
         </div>
 
         {/* footer bottom */}
         <div className="w-full py-4">
-          {/* copyright */}
           <p className="text-sm lg:text-[1rem] font-medium text-center">
-            © {new Date().getFullYear()} Mohit kumar. All rights reserved.
+            © {new Date().getFullYear()} Your Company. All rights reserved.
           </p>
         </div>
       </div>
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 4b2fe8c..821fa2b 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -88,7 +88,7 @@ function Navbar() {
   ];
 
   return (
-    <div className="w-full h-[8vh] sticky top-0 z-50">
+    <div className="w-full h-[8vh] sticky top-0 z-50 bg-[#333]">
       <div className="max-w-7xl mx-auto flex items-center justify-between px-3 md:px-4 h-full">
         {/* logo */}
         <NavLink to="/">
diff --git a/frontend/src/pages/login_signup_page/SignupPage.jsx b/frontend/src/pages/login_signup_page/SignupPage.jsx
index 9f46876..9299d63 100644
--- a/frontend/src/pages/login_signup_page/SignupPage.jsx
+++ b/frontend/src/pages/login_signup_page/SignupPage.jsx
@@ -20,6 +20,7 @@ function SignupPage() {
     password: "",
     cpassword: "",
   });
+  const[showDropdown, setShowDrowdown] = useState(true);
 
   const handleInputChange = (e) => {
     const { name, value } = e.target;
@@ -29,6 +30,7 @@ function SignupPage() {
     }));
   };
 
+  
   const handleSignup = async (e) => {
     e.preventDefault();
     const { password, cpassword, ...data } = formData;
diff --git a/frontend/src/pages/terms_&_conditions_page/TermsAndConditionsPage.jsx b/frontend/src/pages/terms_&_conditions_page/TermsAndConditionsPage.jsx
index 6acb234..8e750ad 100644
--- a/frontend/src/pages/terms_&_conditions_page/TermsAndConditionsPage.jsx
+++ b/frontend/src/pages/terms_&_conditions_page/TermsAndConditionsPage.jsx
@@ -1,7 +1,96 @@
 import React from "react";
+import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
 
+// Home Page Component
+function HomePage() {
+  return (
+    <div>
+      <h1>Welcome to Our Website</h1>
+      <p>This is the home page. Please explore the content or visit our Terms and Conditions page for more details.</p>
+    </div>
+  );
+}
+
+// Terms and Conditions Page Component
 function TermsAndConditionsPage() {
-  return <div>Terms and Conditions</div>;
+  return (
+    <div style={{ padding: "20px" }}>
+      <h1>Terms and Conditions</h1>
+      <p>Welcome to our website. These terms and conditions outline the rules and regulations for the use of our website.</p>
+
+      <h2>1. Acceptance of Terms</h2>
+      <p>
+        By accessing this website, we assume you accept these terms and conditions. Do not continue to use the website if you do not agree to all the terms and conditions stated on this page.
+      </p>
+
+      <h2>2. Cookies</h2>
+      <p>
+        We employ the use of cookies. By using this website, you consent to the use of cookies in accordance with our privacy policy.
+      </p>
+
+      <h2>3. License</h2>
+      <p>
+        Unless otherwise stated, we own the intellectual property rights for all material on the website. All intellectual property rights are reserved.
+      </p>
+
+      <h2>4. User Obligations</h2>
+      <ul>
+        <li>Do not republish material from the website without proper credit.</li>
+        <li>Do not sell, rent, or sub-license material from the website.</li>
+        <li>Do not reproduce, duplicate or copy material from the website.</li>
+      </ul>
+
+      <h2>5. Limitation of Liability</h2>
+      <p>
+        We shall not be held responsible for any loss, damage, or injury caused by using our website, as far as applicable law permits.
+      </p>
+
+      <h2>6. Changes to Terms</h2>
+      <p>
+        We reserve the right to modify these terms and conditions at any time. Users will be notified of changes and updates as they occur.
+      </p>
+
+      <p>If you have any questions or concerns about these Terms, please contact us.</p>
+    </div>
+  );
+}
+
+// Footer Component with Link to Terms & Conditions
+function Footer() {
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleSubscribe = () => {
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Simple email validation
+    if (emailPattern.test(email)) {
+      // Simulate a successful subscription
+      setMessage("Successfully subscribed to the newsletter!");
+      setEmail(""); // Clear the input field
+    } else {
+      setMessage("Please enter a valid email address.");
+    }
+  };
+
+  return (
+    <footer className="footer">
+      {/* Other existing footer content */}
+      <div className="newsletter-section">
+        <h2>Subscribe to Our Newsletter</h2>
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="Enter your email"
+          required
+          className="email-input"
+        />
+        <button onClick={handleSubscribe} className="subscribe-button">
+          Subscribe
+        </button>
+        {message && <p className="message">{message}</p>}
+      </div>
+    </footer>
+  );
 }
 
-export default TermsAndConditionsPage;
+export default Footer;
\ No newline at end of file