From f186080a96409afcab99fc6e1b58767a4a50dd27 Mon Sep 17 00:00:00 2001
From: Yazdan Haider <yazdanhaider007@gmail.com>
Date: Wed, 16 Oct 2024 23:09:24 +0530
Subject: [PATCH] Added login page and reduce header text size

---
 Frontend/src/App.jsx               |  2 +
 Frontend/src/components/Header.jsx | 34 ++++++------
 Frontend/src/components/Login.jsx  | 89 ++++++++++++++++++++++++++++++
 3 files changed, 108 insertions(+), 17 deletions(-)
 create mode 100644 Frontend/src/components/Login.jsx

diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index e21f458..b00efdf 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -15,6 +15,7 @@ import PrivacyPolicy from './pages/PrivacyPolicy';
 import TermsOfService from './pages/TermsOfService';
 import ContactUs from './pages/ContactUs';
 import SignUp from './components/SignUp';
+import Login from './components/Login';
 import { useState } from 'react';
 
 function App() {
@@ -45,6 +46,7 @@ function App() {
             <Route path="/terms-of-service" element={<TermsOfService />} />
             <Route path="/contact-us" element={<ContactUs />} />
             <Route path="/signup" element={<SignUp />} />
+            <Route path="/login" element={<Login />} />
             <Route path="*" element={<NotFound />} />
           </Routes>
         </main>
diff --git a/Frontend/src/components/Header.jsx b/Frontend/src/components/Header.jsx
index 6e0e070..d406e1d 100644
--- a/Frontend/src/components/Header.jsx
+++ b/Frontend/src/components/Header.jsx
@@ -23,20 +23,20 @@ const Header = () => {
     ];
 
     return (
-        <header className="bg-gradient-to-r from-primary to-secondary py-4 px-6">
+        <header className="bg-gradient-to-r from-primary to-secondary py-3 px-4">
             <div className="container mx-auto">
                 <div className="flex justify-between items-center">
                     <Link to="/" className="flex items-center space-x-2">
-                        <img src={Logo} alt="Health Nest Logo" className="h-12 w-auto" />
-                        <span className="text-3xl font-bold text-accent">Health Nest</span>
+                        <img src={Logo} alt="Health Nest Logo" className="h-10 w-auto" />
+                        <span className="text-2xl font-bold text-accent">Health Nest</span>
                     </Link>
 
-                    <nav className="hidden md:flex space-x-2">
+                    <nav className="hidden md:flex space-x-1">
                         {navItems.map((item) => (
                             <Link
                                 key={item.path}
                                 to={item.path}
-                                className={`relative px-4 py-2 text-xl font-medium text-light hover:text-accent transition-colors duration-300 ${
+                                className={`relative px-3 py-2 text-base font-medium text-light hover:text-accent transition-colors duration-300 ${
                                     activeItem === item.path ? 'text-accent' : ''
                                 }`}
                             >
@@ -53,12 +53,12 @@ const Header = () => {
                         ))}
                     </nav>
 
-                    <div className="hidden md:flex items-center space-x-4">
-                        <Link to="/signup" className="bg-accent text-primary px-5 py-2 rounded-full hover:bg-light transition duration-300 text-lg font-medium">
-                            <FaUser className="inline-block mr-2" />Sign Up
+                    <div className="hidden md:flex items-center space-x-3">
+                        <Link to="/signup" className="bg-accent text-primary px-4 py-1.5 rounded-full hover:bg-light transition duration-300 text-sm font-medium">
+                            <FaUser className="inline-block mr-1" />Sign Up
                         </Link>
-                        <Link to="/login" className="bg-light text-primary px-5 py-2 rounded-full hover:bg-accent transition duration-300 text-lg font-medium">
-                            <FaSignInAlt className="inline-block mr-2" />Log In
+                        <Link to="/login" className="bg-light text-primary px-4 py-1.5 rounded-full hover:bg-accent transition duration-300 text-sm font-medium">
+                            <FaSignInAlt className="inline-block mr-1" />Log In
                         </Link>
                     </div>
 
@@ -66,7 +66,7 @@ const Header = () => {
                         className="md:hidden text-light focus:outline-none"
                         onClick={() => setIsMenuOpen(!isMenuOpen)}
                     >
-                        {isMenuOpen ? <FaTimes size={28} /> : <FaBars size={28} />}
+                        {isMenuOpen ? <FaTimes size={24} /> : <FaBars size={24} />}
                     </button>
                 </div>
 
@@ -77,13 +77,13 @@ const Header = () => {
                             animate={{ opacity: 1, y: 0 }}
                             exit={{ opacity: 0, y: -20 }}
                             transition={{ duration: 0.3 }}
-                            className="md:hidden mt-4"
+                            className="md:hidden mt-3"
                         >
                             {navItems.map((item) => (
                                 <Link
                                     key={item.path}
                                     to={item.path}
-                                    className={`block py-2 px-4 text-lg font-medium text-light hover:text-accent transition duration-300 ${
+                                    className={`block py-2 px-3 text-base font-medium text-light hover:text-accent transition duration-300 ${
                                         activeItem === item.path ? 'text-accent' : ''
                                     }`}
                                     onClick={() => setIsMenuOpen(false)}
@@ -93,17 +93,17 @@ const Header = () => {
                             ))}
                             <Link
                                 to="/signup"
-                                className="block py-2 px-4 text-lg font-medium text-light hover:text-accent transition duration-300"
+                                className="block py-2 px-3 text-base font-medium text-light hover:text-accent transition duration-300"
                                 onClick={() => setIsMenuOpen(false)}
                             >
-                                <FaUser className="inline-block mr-2" />Sign Up
+                                <FaUser className="inline-block mr-1" />Sign Up
                             </Link>
                             <Link
                                 to="/login"
-                                className="block py-2 px-4 text-lg font-medium text-light hover:text-accent transition duration-300"
+                                className="block py-2 px-3 text-base font-medium text-light hover:text-accent transition duration-300"
                                 onClick={() => setIsMenuOpen(false)}
                             >
-                                <FaSignInAlt className="inline-block mr-2" />Log In
+                                <FaSignInAlt className="inline-block mr-1" />Log In
                             </Link>
                         </motion.div>
                     )}
diff --git a/Frontend/src/components/Login.jsx b/Frontend/src/components/Login.jsx
new file mode 100644
index 0000000..33012ac
--- /dev/null
+++ b/Frontend/src/components/Login.jsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { FaEnvelope, FaLock, FaSignInAlt } from 'react-icons/fa';
+
+const Login = () => {
+    const [formData, setFormData] = useState({
+        email: '',
+        password: '',
+    });
+
+    const handleChange = (e) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Here you would typically send the form data to your backend for authentication
+        console.log('Login attempt:', formData);
+        // Reset form after submission
+        setFormData({
+            email: '',
+            password: '',
+        });
+        // You might want to redirect the user or show a success message here
+    };
+
+    return (
+        <div className="bg-light min-h-screen flex items-center justify-center p-4">
+            <motion.div
+                initial={{ opacity: 0, y: -20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full"
+            >
+                <h2 className="text-3xl font-bold text-primary mb-6 text-center">Login to Health Nest</h2>
+                <form onSubmit={handleSubmit} className="space-y-4">
+                    <div>
+                        <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                        <div className="relative">
+                            <FaEnvelope className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+                            <input
+                                type="email"
+                                id="email"
+                                name="email"
+                                value={formData.email}
+                                onChange={handleChange}
+                                className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent"
+                                placeholder="youremail@example.com"
+                                required
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                        <div className="relative">
+                            <FaLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+                            <input
+                                type="password"
+                                id="password"
+                                name="password"
+                                value={formData.password}
+                                onChange={handleChange}
+                                className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent"
+                                placeholder="••••••••"
+                                required
+                            />
+                        </div>
+                    </div>
+                    <button
+                        type="submit"
+                        className="w-full bg-accent text-primary font-bold py-2 px-4 rounded-md hover:bg-primary hover:text-accent transition duration-300 flex items-center justify-center"
+                    >
+                        <FaSignInAlt className="mr-2" />
+                        Login
+                    </button>
+                </form>
+                <p className="mt-4 text-center text-sm text-gray-600">
+                    Don't have an account?{' '}
+                    <Link to="/signup" className="text-accent hover:underline">
+                        Sign up
+                    </Link>
+                </p>
+            </motion.div>
+        </div>
+    );
+};
+
+export default Login;