From c945736f4beaadbb90da6b0818b3a4fa0efe2475 Mon Sep 17 00:00:00 2001
From: OmkumarMangukiya <ommangukiya8+github@gmail.com>
Date: Sun, 20 Oct 2024 17:06:31 +0530
Subject: [PATCH] improved ui for Fulltack->React+Nodejs

---
 .../client/src/App.jsx                        |   6 +
 .../client/src/components/Footer.jsx          |  54 ++-----
 .../client/src/components/Header.jsx          |  95 ++++++++----
 .../client/src/components/card.tsx            |  48 ------
 .../client/src/components/ui/Button.jsx       |  19 +++
 .../client/src/components/ui/Card.jsx         |  14 ++
 .../client/src/components/ui/HoverEffect.tsx  | 114 --------------
 .../client/src/components/ui/Input.jsx        |  17 +++
 .../client/src/index.css                      |  66 ++++++++-
 .../client/src/pages/ContactUs.jsx            |  89 +++++++++++
 .../client/src/pages/Home.jsx                 |  54 ++++++-
 .../client/src/pages/PrivacyPolicy.jsx        |  16 ++
 .../client/src/pages/Signin.jsx               | 136 +++++++----------
 .../client/src/pages/Signup.jsx               | 139 ++++++------------
 .../client/src/pages/TermsOfService.jsx       |  16 ++
 15 files changed, 474 insertions(+), 409 deletions(-)
 delete mode 100644 template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/card.tsx
 create mode 100644 template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Button.jsx
 create mode 100644 template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Card.jsx
 delete mode 100644 template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/HoverEffect.tsx
 create mode 100644 template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Input.jsx
 create mode 100644 template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/ContactUs.jsx
 create mode 100644 template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/PrivacyPolicy.jsx
 create mode 100644 template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/TermsOfService.jsx

diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/App.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/App.jsx
index 29fbd43..f57548a 100644
--- a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/App.jsx
+++ b/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>
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Footer.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Footer.jsx
index 2cda621..c4b25d0 100644
--- a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Footer.jsx
+++ b/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;
\ No newline at end of file
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Header.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Header.jsx
index 86e3df1..2a4e282 100644
--- a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/Header.jsx
+++ b/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;
\ No newline at end of file
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/card.tsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/card.tsx
deleted file mode 100644
index 0a79d44..0000000
--- a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/card.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from "react";
-import { HoverEffect } from "./ui/HoverEffect";
-
-export function CardHoverEffectDemo() {
-  return (
-    <div className="max-w-5xl mx-auto px-8">
-      <HoverEffect items={projects} />
-    </div>
-  );
-}
-export const projects = [
-  {
-    title: "Stripe",
-    description:
-      "A technology company that builds economic infrastructure for the internet.",
-    link: "https://stripe.com",
-  },
-  {
-    title: "Netflix",
-    description:
-      "A streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices.",
-    link: "https://netflix.com",
-  },
-  {
-    title: "Google",
-    description:
-      "A multinational technology company that specializes in Internet-related services and products.",
-    link: "https://google.com",
-  },
-  {
-    title: "Meta",
-    description:
-      "A technology company that focuses on building products that advance Facebook's mission of bringing the world closer together.",
-    link: "https://meta.com",
-  },
-  {
-    title: "Amazon",
-    description:
-      "A multinational technology company focusing on e-commerce, cloud computing, digital streaming, and artificial intelligence.",
-    link: "https://amazon.com",
-  },
-  {
-    title: "Microsoft",
-    description:
-      "A multinational technology company that develops, manufactures, licenses, supports, and sells computer software, consumer electronics, personal computers, and related services.",
-    link: "https://microsoft.com",
-  },
-];
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Button.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Button.jsx
new file mode 100644
index 0000000..48e92ac
--- /dev/null
+++ b/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;
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Card.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Card.jsx
new file mode 100644
index 0000000..bbc0e46
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/HoverEffect.tsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/HoverEffect.tsx
deleted file mode 100644
index 6e3da46..0000000
--- a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/HoverEffect.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useState } from "react";
-import { cn } from "../../lib/utils.ts";
-import { AnimatePresence, motion } from "framer-motion";
-import { useNavigate } from "react-router-dom";
-
-export const HoverEffect = ({
-  items,
-  className,
-}: {
-  items: {
-    title: string;
-    description: string;
-    link: string;
-  }[];
-  className?: string;
-}) => {
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-  const navigate = useNavigate();
-
-  return (
-    <div
-      className={cn(
-        "grid grid-cols-1 md:grid-cols-2  lg:grid-cols-3  py-10",
-        className
-      )}
-    >
-      {items.map((item, idx) => (
-        <div
-          key={item.link}
-          className="relative group block p-2 h-full w-full"
-          onMouseEnter={() => setHoveredIndex(idx)}
-          onMouseLeave={() => setHoveredIndex(null)}
-          onClick={() => navigate(`/${item.link}`)}
-        >
-          <AnimatePresence>
-            {hoveredIndex === idx && (
-              <motion.span
-                className="absolute inset-0 h-full w-full bg-neutral-200 dark:bg-slate-800/[0.8] block rounded-3xl"
-                layoutId="hoverBackground"
-                initial={{ opacity: 0 }}
-                animate={{
-                  opacity: 1,
-                  transition: { duration: 0.15 },
-                }}
-                exit={{
-                  opacity: 0,
-                  transition: { duration: 0.15, delay: 0.2 },
-                }}
-              />
-            )}
-          </AnimatePresence>
-          <Card>
-            <CardTitle>{item.title}</CardTitle>
-            <CardDescription>{item.description}</CardDescription>
-          </Card>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export const Card = ({
-  className,
-  children,
-}: {
-  className?: string;
-  children: React.ReactNode;
-}) => {
-  return (
-    <div
-      className={cn(
-        "rounded-2xl h-full w-full p-4 overflow-hidden bg-black border border-transparent dark:border-white/[0.2] group-hover:border-slate-700 relative z-50",
-        className
-      )}
-    >
-      <div className="relative z-50">
-        <div className="p-4">{children}</div>
-      </div>
-    </div>
-  );
-};
-
-export const CardTitle = ({
-  className,
-  children,
-}: {
-  className?: string;
-  children: React.ReactNode;
-}) => {
-  return (
-    <h4 className={cn("text-zinc-100 font-bold tracking-[1px] mt-4 uppercase", className)}>
-      {children}
-    </h4>
-  );
-};
-
-export const CardDescription = ({
-  className,
-  children,
-}: {
-  className?: string;
-  children: React.ReactNode;
-}) => {
-  return (
-    <p
-      className={cn(
-        "mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm text-center",
-        className
-      )}
-    >
-      {children}
-    </p>
-  );
-};
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Input.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Input.jsx
new file mode 100644
index 0000000..9e6c0cb
--- /dev/null
+++ b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/components/ui/Input.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+
+const Input= ({ type, placeholder, onChange }) => {
+    return (
+        <div className='relative rounded-lg  bg-white p-1 shadow-md transition-all duration-300 ease-in-out border-2 border-gray-700 hover:shadow-lg focus-within:ring-1 focus-within:ring-black '>
+            <input
+                type={type}
+                placeholder={placeholder}
+                onChange={onChange}
+                className="w-full px-4 py-2 bg-transparent text-black placeholder-gray-700 border-none focus:outline-none focus:ring-0"
+            />
+        </div>
+    );
+}
+
+export default Input;
\ No newline at end of file
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/index.css b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/index.css
index bd6213e..c81f4af 100644
--- a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/index.css
+++ b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/index.css
@@ -1,3 +1,67 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+.typewriter {
+  overflow: hidden; /* Ensures the text doesn't overflow */
+  white-space: nowrap; /* Prevents the text from wrapping */
+  border-right: 3px solid white; /* The caret */
+  animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite;
+  animation-fill-mode: forwards; /* Retain the end state of typing */
+}
+
+/* Typewriter effect */
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+/* Blinking caret effect */
+@keyframes blink-caret {
+  0%, 100% {
+    border-color: transparent; /* Hide at the start and end */
+  }
+  50% {
+    border-color: white; /* Show caret in the middle */
+  }
+}
+
+/* Hide caret after typing */
+.typewriter-complete {
+  border-right: none; /* Remove the caret after typing */
+}
+.typewriter {
+  overflow: hidden; /* Ensures the text doesn't overflow */
+  white-space: nowrap; /* Prevents the text from wrapping */
+  border-right: 3px solid white; /* The caret */
+  animation: typing 3.5s steps(40, end) forwards, blink-caret 0.75s step-end infinite; /* Animation chaining */
+}
+
+/* Typewriter effect */
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%; /* Fully type the text */
+  }
+}
+
+/* Blinking caret effect */
+@keyframes blink-caret {
+  0%, 100% {
+    border-color: transparent; /* Hide at the start and end */
+  }
+  50% {
+    border-color: white; /* Show caret in the middle */
+  }
+}
+
+/* Hide caret after typing */
+.typewriter-complete {
+  border-right: none; /* Remove the caret after typing */
+  animation: none; /* Stop any further animations */
+}
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/ContactUs.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/ContactUs.jsx
new file mode 100644
index 0000000..5e83b5f
--- /dev/null
+++ b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/ContactUs.jsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import Input from '../components/ui/Input';
+import Button from '../components/ui/Button';
+
+const ContactUs = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle form submission logic here
+    // For now, we'll just display a success message
+    setSuccessMessage('Thank you for contacting us!');
+    setErrorMessage('');
+  };
+
+  return (
+    <div className='flex justify-center min-h-56 p-[11px]'>
+      <div className="relative z-20 w-full max-w-md bg-[#040b18] bg-opacity-90 px-8 py-10 rounded-lg shadow-lg backdrop-blur-md">
+        <h2 className="text-center text-3xl font-bold text-white mb-4  ">Contact Us</h2>
+
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label htmlFor="name" className="block text-white font-medium mb-2">Name</label>
+            <Input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              placeholder="Name"
+              className="w-full p-4 border border-[#C5C6C7] rounded-lg text-[#0B0C10] focus:ring-2 focus:ring-[#45A29E]"
+              required
+            />
+          </div>
+
+          <div className="mb-4">
+            <label htmlFor="email" className="block text-white font-medium mb-2">Email</label>
+            <Input
+              type="email"
+              id="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              placeholder="Email"
+              className="w-full p-4 border border-[#C5C6C7] rounded-lg text-[#0B0C10] focus:ring-2 focus:ring-[#45A29E]"
+              required
+            />
+          </div>
+
+          <div className="mb-6">
+            <label htmlFor="message" className="block text-white font-medium mb-2">Message</label>
+            <textarea
+              id="message"
+              name="message"
+              value={formData.message}
+              onChange={handleChange}
+              placeholder="Message"
+              className="w-full p-4 border border-[#C5C6C7] rounded-lg text-[#0B0C10] focus:ring-2 focus:ring-[#45A29E]"
+              rows="5"
+              required
+            ></textarea>
+          </div>
+
+          <Button
+            name="Send Message"
+            type="submit"
+            className="w-full bg-[#eeeeee] hover:bg-[#3B82F6] hover:shadow-sm hover:shadow-gray-400 font-semibold p-4 rounded-lg hover:text-white transition duration-400"
+          />
+
+          {successMessage && <p className="text-green-500 mt-4">{successMessage}</p>}
+          {errorMessage && <p className="text-red-500 mt-4">{errorMessage}</p>}
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ContactUs;
\ No newline at end of file
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Home.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Home.jsx
index 3dd5bb6..db42eb5 100644
--- a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Home.jsx
+++ b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Home.jsx
@@ -1,10 +1,56 @@
-import React from 'react'
-import { CardHoverEffectDemo } from '../components/card';
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import Card from '../components/ui/Card';
+import '../index.css'; // Import the CSS file
 
 export default function Home() {
+  const [completed, setCompleted] = useState(false);
+
+  useEffect(() => {
+    // Timer to remove the caret after the typing animation completes
+    const timer = setTimeout(() => {
+      setCompleted(true); // Set completed to true after the typing duration
+    }, 3600); // Match the duration of typing animation
+
+    return () => clearTimeout(timer); // Cleanup timer
+  }, []);
+
   return (
     <div>
-      < CardHoverEffectDemo />
+      <section className="relative py-12 md:py-20 px-4 bg-gradient-to-b from-black to-gray-900">
+        <div className="container mx-auto text-center">
+          <div className="relative inline-block">
+            {/* Typewriter Animation */}
+            <h1 className={`text-4xl md:text-6xl font-bold mb-6 text-white typewriter ${completed ? 'typewriter-complete' : ''}`}>
+              Welcome To Your Webiste 
+            </h1>
+            <span className="absolute inset-0 animate-spin-slow"></span>
+          </div>
+          <p className="text-xl md:text-2xl mb-8 text-gray-400">
+            Your catchy headline goes here. Make it <span className="text-white">impactful!</span>
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+          <Link to="/signup" className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg text-lg font-semibold transition duration-200 no-underline">
+  Get Started
+</Link>
+<Link to="/about" className="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg text-lg font-semibold transition duration-200 no-underline">
+  Learn More
+</Link>
+
+          </div>
+        </div>
+      </section>
+
+      <section className="py-12 md:py-20 bg-gray-100">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Our Features</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {[1, 2, 3].map((item) => (
+              <Card key={item} item={item} />
+            ))}
+          </div>
+        </div>
+      </section>
     </div>
-  )
+  );
 }
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/PrivacyPolicy.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/PrivacyPolicy.jsx
new file mode 100644
index 0000000..79f7cc5
--- /dev/null
+++ b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/PrivacyPolicy.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const PrivacyPolicy = () => {
+  return (
+    <div className='flex justify-center min-h-56 p-[11px]'>
+      <div className="relative z-20 w-full max-w-md bg-[#040b18] bg-opacity-90 px-8 py-10 rounded-lg shadow-lg backdrop-blur-md">
+        <h2 className="text-center text-3xl font-bold text-white mb-4">Privacy Policy</h2>
+        <p className="text-white">
+          This is a dummy Privacy Policy page. You can add your privacy policy content here.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default PrivacyPolicy;
\ No newline at end of file
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Signin.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Signin.jsx
index fd01b4d..b1b1c4f 100644
--- a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Signin.jsx
+++ b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Signin.jsx
@@ -1,30 +1,26 @@
 import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+import Input from '../components/ui/Input';
+import Button from '../components/ui/Button';
 
 const Signin = () => {
-  const [formData, setFormData] = useState({
-  });
-
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({ username: '', password: '' });
   const [errors, setErrors] = useState({});
   const [serverError, setServerError] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
   const [loading, setLoading] = useState(false);
-  const navigate = useNavigate();
 
   const handleChange = (e) => {
-    setFormData({ ...formData, [e.target.id]: e.target.value });
+    const { id, value } = e.target;
+    setFormData({ ...formData, [id]: value });
   };
 
   const validate = () => {
     const errors = {};
 
-
-    if (!formData.emailid.trim()) {
-      errors.emailid = 'Email is required';
-    } else if (
-      !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(formData.emailid)
-    ) {
-      errors.emailid = 'Email address is invalid';
+    if (!formData.username.trim()) {
+      errors.username = 'Username is required';
     }
 
     if (!formData.password) {
@@ -45,6 +41,8 @@ const Signin = () => {
       return;
     }
 
+    setLoading(true);
+
     try {
       const res = await fetch('http://localhost:3000/api/auth/signin', {
         method: 'POST',
@@ -53,107 +51,77 @@ const Signin = () => {
         },
         body: JSON.stringify(formData),
       });
-    
-      // Check if the response is not successful
+
       setLoading(false);
+
       if (!res.ok) {
         throw new Error('Failed to sign in');
-      } else if (res.ok) {
-        navigate('/');
       }
-    
+
       const data = await res.json();
-      if (!data.success === false) {
-        return setErrorMessage(data.message);
+      if (!data.success) {
+        setServerError(data.message);
+        return;
       }
+      
       setSuccessMessage('Signin successful!');
       setServerError('');
+      navigate('/');
     } catch (error) {
-      setServerError(error.message || 'An error occurred during signup');
+      setServerError(error.message || 'An error occurred during signin');
       setSuccessMessage('');
     }
   };
 
   return (
-    <div className="flex items-center justify-center min-h-screen">
-      <div className="w-full max-w-md p-8 space-y-6 bg-white border-4 border-black-800 rounded-lg shadow-xl">
-        <h2 className="text-3xl font-bold text-center">Log In</h2>
-        <form className="space-y-5" onSubmit={handleSubmit}>
-
-          {/* Email */}
-          <div>
-            <label
-              htmlFor="emailid"
-              className="block mb-2 text-sm font-medium"
-            >
-              Email Address
-            </label>
-            <input
-              type="email"
-              name="emailid"
-              id="emailid"
-              value={formData.emailid}
+    <div className='flex justify-center min-h-56 p-[160px]'>
+      <div className="relative z-20 w-full max-w-md bg-[#040b18] bg-opacity-90 px-8 py-14 rounded-lg shadow-lg backdrop-blur-md">
+        <h2 className="text-center text-3xl font-bold text-white mb-16">Sign In</h2>
+
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <Input
               onChange={handleChange}
-              className={`w-full px-4 py-2 text-sm border-2 rounded-md focus:outline-none focus:ring-2 ${
-                errors.emailid ? 'border-red-500' : ''
-              }`}
-              placeholder="Enter your email"
+              placeholder="Username"
+              type="text"
+              id="username"
+              value={formData.username}
+              className="w-full p-4 border border-[#C5C6C7] rounded-lg text-[#0B0C10] focus:ring-2 focus:ring-[#45A29E]"
             />
-            {errors.emailid && (
-              <p className="mt-2 text-sm text-red-500">{errors.emailid}</p>
-            )}
+            {errors.username && <p className="text-red-500">{errors.username}</p>}
           </div>
 
-          {/* Password */}
-          <div>
-            <label
-              htmlFor="password"
-              className="block mb-2 text-sm font-medium"
-            >
-              Password
-            </label>
-            <input
+          <div className="mb-6">
+            <Input
+              onChange={handleChange}
+              placeholder="Password"
               type="password"
-              name="password"
               id="password"
               value={formData.password}
-              onChange={handleChange}
-              className={`w-full px-4 py-2 text-sm border-2 rounded-md focus:outline-none focus:ring-2 ${
-                errors.password ? 'border-red-500' : ''
-              }`}
-              placeholder="Enter your password"
+              className="w-full p-4 border border-[#C5C6C7] rounded-lg text-[#0B0C10] focus:ring-2 focus:ring-[#45A29E]"
             />
-            {errors.password && (
-              <p className="mt-2 text-sm text-red-500">{errors.password}</p>
-            )}
+            {errors.password && <p className="text-red-500">{errors.password}</p>}
           </div>
 
-          {/* Server Error */}
-          {serverError && (
-            <p className="mt-2 text-sm text-red-500">{serverError}</p>
-          )}
+          <Button
+            name="Sign in"
+            type="submit"
+            className="w-full bg-[#eeeeee] hover:bg-[#3B82F6] hover:shadow-sm hover:shadow-gray-400 font-semibold p-4 rounded-lg hover:text-white transition duration-400"
+          />
 
-          {/* Success Message */}
-          {successMessage && (
-            <p className="mt-2 text-sm text-green-500">{successMessage}</p>
-          )}
+          {serverError && <p className="text-red-500 mt-4">{serverError}</p>}
+          {successMessage && <p className="text-green-500 mt-4">{successMessage}</p>}
+        </form>
 
-          {/* Submit Button */}
+        <div className="mt-6 text-center text-[#C5C6C7]">
+          <span>Don't have an account?</span>
           <button
-            type="submit"
-            className="w-full px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-green-400 to-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2"
+            onClick={() => navigate('/signup')}
+            className="text-white hover:underline ml-2"
           >
-            Sign In
+            <span className='hover:text-blue-400'>Signup Now</span>
           </button>
-        </form>
-
-        {/* Additional Links */}
-        <p className="text-sm text-center text-gray-600">
-          Don't have an account?{' '}
-          <a href="/signup" className="text-blue-500 hover:underline">
-            Sign Up
-          </a>
-        </p>
+        </div>
       </div>
     </div>
   );
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Signup.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Signup.jsx
index 070294c..0d96818 100644
--- a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Signup.jsx
+++ b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/Signup.jsx
@@ -1,9 +1,10 @@
 import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import Input from '../components/ui/Input';
+import Button from '../components/ui/Button';
 
 const Signup = () => {
   const [formData, setFormData] = useState({});
-
   const [errors, setErrors] = useState({});
   const [serverError, setServerError] = useState("");
   const [successMessage, setSuccessMessage] = useState("");
@@ -23,9 +24,7 @@ const Signup = () => {
 
     if (!formData.emailid.trim()) {
       errors.emailid = "Email is required";
-    } else if (
-      !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(formData.emailid)
-    ) {
+    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(formData.emailid)) {
       errors.emailid = "Email address is invalid";
     }
 
@@ -47,6 +46,8 @@ const Signup = () => {
       return;
     }
 
+    setLoading(true);
+
     try {
       const res = await fetch("http://localhost:3000/api/auth/signup", {
         method: "POST",
@@ -55,15 +56,14 @@ const Signup = () => {
         },
         body: JSON.stringify(formData),
       });
+      setLoading(false);
       const data = await res.json();
       if (data.success === false) {
         return setErrorMessage(data.message);
       }
-      setLoading(false);
       if (res.ok) {
         navigate("/signin");
       }
-      // Check if the response is not successful
       if (!res.ok) {
         throw new Error("Failed to sign up");
       }
@@ -76,105 +76,62 @@ const Signup = () => {
   };
 
   return (
-    <div className="flex items-center justify-center min-h-screen">
-      <div className="w-full max-w-md p-8 space-y-6 bg-white border-4 border-black-800 rounded-lg shadow-xl">
-        <h2 className="text-3xl font-bold text-center">Create an Account</h2>
-        <form className="space-y-5" onSubmit={handleSubmit}>
-          {/* Username */}
-          <div>
-            <label
-              htmlFor="username"
-              className="block mb-2 text-sm font-medium"
-            >
-              Username
-            </label>
-            <input
-              type="text"
-              name="username"
+    <div className='flex justify-center min-h-56 p-[160px]'>
+      <div className="relative z-20 w-full max-w-md bg-[#040b18] bg-opacity-90 px-8 py-14 rounded-lg shadow-lg backdrop-blur-md">
+        <h2 className="text-center text-3xl font-bold text-white mb-16">Create an Account</h2>
+
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <Input 
+              onChange={handleChange} 
+              placeholder="Username" 
+              type="text" 
               id="username"
-              value={formData.username}
-              onChange={handleChange}
-              className={`w-full px-4 py-2 text-sm border-2 rounded-md focus:outline-none focus:ring-2 ${
-                errors.username ? "border-red-500" : ""
-              }`}
-              placeholder="Enter your username"
+              className="w-full p-4 border border-[#C5C6C7] rounded-lg text-[#0B0C10] focus:ring-2 focus:ring-[#45A29E]"
             />
-            {errors.username && (
-              <p className="mt-2 text-sm text-red-500">{errors.username}</p>
-            )}
+            {errors.username && <p className="text-red-500">{errors.username}</p>}
           </div>
 
-          {/* Email */}
-          <div>
-            <label htmlFor="emailid" className="block mb-2 text-sm font-medium">
-              Email Address
-            </label>
-            <input
-              type="email"
-              name="emailid"
+          <div className="mb-4">
+            <Input 
+              onChange={handleChange} 
+              placeholder="Email Address" 
+              type="email" 
               id="emailid"
-              value={formData.emailid}
-              onChange={handleChange}
-              className={`w-full px-4 py-2 text-sm border-2 rounded-md focus:outline-none focus:ring-2 ${
-                errors.emailid ? "border-red-500" : ""
-              }`}
-              placeholder="Enter your email"
+              className="w-full p-4 border border-[#C5C6C7] rounded-lg text-[#0B0C10] focus:ring-2 focus:ring-[#45A29E]"
             />
-            {errors.emailid && (
-              <p className="mt-2 text-sm text-red-500">{errors.emailid}</p>
-            )}
+            {errors.emailid && <p className="text-red-500">{errors.emailid}</p>}
           </div>
 
-          {/* Password */}
-          <div>
-            <label
-              htmlFor="password"
-              className="block mb-2 text-sm font-medium"
-            >
-              Password
-            </label>
-            <input
-              type="password"
-              name="password"
+          <div className="mb-6">
+            <Input 
+              onChange={handleChange} 
+              placeholder="Password" 
+              type="password" 
               id="password"
-              value={formData.password}
-              onChange={handleChange}
-              className={`w-full px-4 py-2 text-sm border-2 rounded-md focus:outline-none focus:ring-2 ${
-                errors.password ? "border-red-500" : ""
-              }`}
-              placeholder="Enter your password"
+              className="w-full p-4 border border-[#C5C6C7] rounded-lg text-[#0B0C10] focus:ring-2 focus:ring-[#45A29E]"
             />
-            {errors.password && (
-              <p className="mt-2 text-sm text-red-500">{errors.password}</p>
-            )}
+            {errors.password && <p className="text-red-500">{errors.password}</p>}
           </div>
 
-          {/* Server Error */}
-          {serverError && (
-            <p className="mt-2 text-sm text-red-500">{serverError}</p>
-          )}
-
-          {/* Success Message */}
-          {successMessage && (
-            <p className="mt-2 text-sm text-green-500">{successMessage}</p>
-          )}
-
-          {/* Submit Button */}
-          <button
+          <Button 
+            name="Sign Up" 
             type="submit"
-            className="w-full px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-green-400 to-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2"
-          >
-            Sign Up
-          </button>
+            className="w-full bg-[#eeeeee] hover:bg-[#3B82F6] hover:shadow-sm hover:shadow-gray-400 font-semibold p-4 rounded-lg hover:text-white transition duration-400"
+          />
+
+          {serverError && <p className="text-red-500 mt-4">{serverError}</p>}
+          {successMessage && <p className="text-green-500 mt-4">{successMessage}</p>}
         </form>
 
-        {/* Additional Links */}
-        <p className="text-sm text-center text-gray-600">
-          Already have an account?{" "}
-          <a href="/signin" className="text-blue-500 hover:underline">
-            Sign in
-          </a>
-        </p>
+        <div className="mt-6 text-center text-[#C5C6C7]">
+          <span>Already have an account?</span>
+          <button 
+            onClick={() => navigate('/signin')} 
+            className="text-white hover:underline ml-2">
+            <span className='hover:text-blue-400'>Sign in</span>
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/TermsOfService.jsx b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/TermsOfService.jsx
new file mode 100644
index 0000000..85cdfe0
--- /dev/null
+++ b/template/FullStack/React(Frontend)+Nodejs(Backend)/client/src/pages/TermsOfService.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const TermsOfService = () => {
+  return (
+    <div className='flex justify-center min-h-56 p-[11px]'>
+      <div className="relative z-20 w-full max-w-md bg-[#040b18] bg-opacity-90 px-8 py-10 rounded-lg shadow-lg backdrop-blur-md">
+        <h2 className="text-center text-3xl font-bold text-white mb-4">Terms of Service</h2>
+        <p className="text-white">
+          This is a dummy Terms of Service page. You can add your terms of service content here.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default TermsOfService;
\ No newline at end of file