Merge pull request #162 from OmkumarMangukiya/main

Improved ui for Fulltack->React+Nodejs

template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/App.jsx

@@ -4,6 +4,9 @@ import Home from './pages/Home'
 import Signin from './pages/Signin'
 import Signup from './pages/Signup'
 import Header from './components/Header'
+import ContactUs from './pages/ContactUs'
+import TermsOfService from './pages/TermsOfService'
+import  PrivacyPolicy from './pages/PrivacyPolicy'
 import './index.css';
 import Footer from './components/Footer'
 
@@ -15,6 +18,9 @@ export default function App() {
         <Route path="/" element={<Home />} />
         <Route path="/signin" element={<Signin />} />
         <Route path="/signup" element={<Signup />} />
+        <Route path='/contactus' element={<ContactUs/>}></Route>
+        <Route path='/terms' element={<TermsOfService/>}></Route>
+        <Route path='/privacy' element={<PrivacyPolicy/>}></Route>
       </Routes>
       <Footer />
     </BrowserRouter>

template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Footer.jsx

@@ -1,50 +1,22 @@
-import React from 'react';
+import { Link } from 'react-router-dom'; // Import Link from react-router-dom
 
 const Footer = () => {
   return (
-    <footer style={styles.footer}>
-
-      <div style={styles.textContainer}>
-        <p style={styles.copyright}>© 2024 Universal-Box</p>
+    <footer className="bg-gray-900 text-white py-[14px]">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col md:flex-row justify-between items-center">
+          <div className="mb-4 md:mb-0 pt-[40px]">
+            <p>&copy; 2024 Your Website Name. All rights reserved.</p>
+          </div>
+          <nav className="flex space-x-4 items-center ">
+            <Link to="/privacy" className="text-white hover:scale-105 no-underline transition duration-200">Privacy Policy</Link>
+            <Link to="/terms" className="text-white hover:scale-105 no-underline transition duration-200">Terms of Service</Link>
+            <Link to="/contactus" className="text-white hover:scale-105 no-underline transition duration-200">Contact Us</Link>
+          </nav>
+        </div>
       </div>
     </footer>
   );
 };
 
-const styles = {
-  footer: {
-    backgroundColor: '#f8f9fa',
-    padding: '20px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column',
-    borderTop: '1px solid #e7e7e7',
-    position: 'fixed',
-    bottom: 0,
-    width: '100%',
-  },
-  logoContainer: {
-    marginBottom: '10px',
-  },
-  logo: {
-    width: '50px',
-    height: '50px',
-  },
-  textContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '10px',
-  },
-  text: {
-    fontSize: '16px',
-    color: '#555',
-  },
-  copyright: {
-    fontSize: '16px',
-    color: '#555',
-    alignItems: 'left',
-  },
-};
-
 export default Footer;

template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Header.jsx

@@ -1,13 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom'; 
 import toast, { Toaster } from 'react-hot-toast';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import logo from '../public/logo.webp';
+import Button from './ui/Button'; // Import the custom Button component
 
 const BASE_URL = 'http://localhost:3000';
 
 function Header() {
   const [isSignedIn, setIsSignedIn] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false); 
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -39,51 +41,92 @@ function Header() {
   };
 
   const handleSignIn = () => {
+    navigate('/signin')
+    //send request here
     setIsSignedIn(true);
-    localStorage.setItem('isSignedIn', 'true');
+    localStorage.setItem('isSignedIn', 'true'); 
     toast.success('Sign in successful!');
   };
 
+  const toggleDropdown = () => {
+    setDropdownOpen(!dropdownOpen);
+  };
+
+  const closeDropdown = () => {
+    setDropdownOpen(false);
+  };
+
   return (
-    <nav className="bg-gradient-to-r from-gray-800 to-black p-4 shadow-lg">
+    <nav className="bg-black p-2 shadow-lg relative">
       <div className="container mx-auto flex items-center justify-between">
-        <div className="flex items-center space-x-3">
-          <img
-            src={logo}
-            alt="Logo"
-            className="w-12 h-12 object-cover rounded-full"
-          />
-          <span className="text-white text-2xl font-bold">Universal-Box</span>
-        </div>
         <div className="flex items-center space-x-6">
+          <Link to="/">  
+            <img
+              src={logo}
+              alt="Logo"
+              className="w-14 h-14 object-cover rounded-full transform hover:scale-110 transition-transform duration-300"
+            />
+          </Link>
+          <span className="text-white text-3xl font-extrabold tracking-wide">
+            Universal-Box
+          </span>
+        </div>
+
+        <div className="flex items-center space-x-8">
+          <Link
+            to="/"
+            className="text-white text-lg hover:scale-105 font-medium hover:text-gray-300 no-underline transition duration-200"
+          >
+            Home
+          </Link>
+
           {isSignedIn ? (
             <>
-              <button
+              <Button
                 onClick={handleSignOut}
-                className="text-white hover:text-gray-300 transition duration-200"
+                className=" bg-[#f0f0f0] hover:bg-[#ffffff] font-semibold p-4 rounded-lg transition duration-400"
               >
                 Sign Out
-              </button>
-              <img
-                src="https://via.placeholder.com/40"
-                alt="User DP"
-                className="w-10 h-10 rounded-full border-2 border-white shadow-md"
-              />
+              </Button>
+
+              <div className="relative">
+                <img
+                  src="https://via.placeholder.com/40"
+                  alt="User DP"
+                  onClick={toggleDropdown}
+                  className="w-12 h-12 rounded-full border-2 border-white shadow-lg cursor-pointer transform hover:scale-110 transition-transform duration-300"
+                />
+                {dropdownOpen && (
+                  <div
+                    className="absolute right-0 mt-2 w-48 bg-white text-black rounded-lg shadow-lg z-10"
+                    onMouseLeave={closeDropdown} 
+                  >
+                    <ul className="p-2">
+                      <li className="py-2 px-4 hover:bg-gray-200 cursor-pointer">
+                        <Link to="/profile" className="no-underline">Profile</Link>
+                      </li>
+                      <li className="py-2 px-4 hover:bg-gray-200 cursor-pointer">
+                        <Link to="/settings" className="no-underline">Settings</Link>
+                      </li>
+                      <li className="py-2 px-4 hover:bg-gray-200 cursor-pointer">
+                        <Link to="/about" className="no-underline">About</Link>
+                      </li>
+                    </ul>
+                  </div>
+                )}
+              </div>
             </>
           ) : (
-            <a
-              href="/signin"
-              className="text-white hover:text-gray-300 transition duration-200"
-              onClick={handleSignIn}
-            >
+            <Button onClick={handleSignIn} className="w-full bg-[#f0f0f0] hover:bg-[#ffffff] font-semibold p-4 rounded-lg transition duration-400">
               Sign In
-            </a>
+            </Button>
           )}
         </div>
       </div>
+
       <Toaster />
     </nav>
   );
 }
 
-export default Header;
+export default Header;

template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Button.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Button= ({ name, onClick, className, children }) => {
+    return (
+        <button 
+            onClick={onClick} 
+            className={`relative inline-flex items-center justify-center overflow-hidden  border-2 border-black py-2 px-4 rounded-lg transition duration-200 shadow-md group ${className}`}>
+
+            <span className="relative z-10">
+                {children ? children : name}
+            </span>
+
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-50 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-[700ms]"></div>
+
+        </button>
+    );
+};
+
+export default Button;

template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Card.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Card = ({ item }) => {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-lg">
+      <h3 className="text-xl font-semibold mb-4">Feature {item}</h3>
+      <p className="text-gray-600">
+        Your features details
+      </p>
+    </div>
+  );
+};
+
+export default Card;