footer and banner

rezwanhossen · Jun 1, 2024 · 7e14ccd · 7e14ccd
1 parent 52a3f46
commit 7e14ccd
Show file tree

Hide file tree

Showing 9 changed files with 238 additions and 16 deletions.
diff --git a/src/Componente/Home.jsx b/src/Componente/Home.jsx
@@ -0,0 +1,11 @@
+import Banner from "../Pages/Home/Banner";
+
+const Home = () => {
+  return (
+    <div>
+      <Banner></Banner>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/src/Componente/LoginReg/Login.jsx b/src/Componente/LoginReg/Login.jsx
@@ -1,36 +1,43 @@
 import { Link } from "react-router-dom";
 import Social from "./Social";
+import { useForm } from "react-hook-form";
 
 const Login = () => {
+  const { register, handleSubmit } = useForm();
+  const onSubmit = (data) => console.log(data);
   return (
     <div className="w-full md:w-3/4 mx-auto p-4">
       <div className="md:flex gap-3 ">
         <div className=" flex-1">
           <img
-            className="w-full "
+            className="w-full h-[500px] "
             src="https://i.ibb.co/s3cg0Xv/images-1.jpg"
             alt=""
           />
         </div>
         <div className=" flex-1 p-4 mt-4">
           <h1 className="text-3xl font-bold text-center">Login Pleace</h1>
-          <form className=" mt-5">
+          <form onSubmit={handleSubmit(onSubmit)} className=" mt-5">
             <div>
               <input
                 type="email"
+                required
+                {...register("email")}
                 className=" input input-bordered w-full"
                 placeholder="Enter your email Adderss"
-                name=""
+                name="email"
                 id=""
               />
             </div>
             <br />
             <div>
               <input
                 type="password"
+                required
                 className=" input input-bordered w-full"
-                placeholder="Enter your email Adderss"
-                name=""
+                placeholder="Enter your password"
+                {...register("password")}
+                name="password"
                 id=""
               />
             </div>
@@ -43,7 +50,9 @@ const Login = () => {
           </form>
           <p className=" text-center mt-2">
             If you are new pleace !{" "}
-            <Link className=" text-green-700 hover:underline">Register</Link>
+            <Link to="/register" className=" text-green-700 hover:underline">
+              Register
+            </Link>
           </p>
           <Social></Social>
         </div>

diff --git a/src/Componente/LoginReg/Register.jsx b/src/Componente/LoginReg/Register.jsx
@@ -0,0 +1,73 @@
+import { useForm } from "react-hook-form";
+import { Link } from "react-router-dom";
+import Social from "./Social";
+
+const Register = () => {
+  const { register, handleSubmit } = useForm();
+  const onSubmit = (data) => console.log(data);
+  return (
+    <div>
+      <div className=" w-full md:w-3/6 mx-auto">
+        <h1 className="text-3xl font-bold text-center">Register Pleace</h1>
+        <form onSubmit={handleSubmit(onSubmit)} className=" mt-5">
+          <div>
+            <input
+              type="text"
+              className=" input input-bordered w-full"
+              placeholder="Enter your Name"
+              name="name"
+              {...register("name")}
+              required
+              id=""
+            />
+          </div>
+          <br />
+          <div>
+            <label> Your photo : </label>
+
+            <input type="file" {...register("img")} required name="img" id="" />
+          </div>
+          <br />
+          <div>
+            <input
+              type="email"
+              className=" input input-bordered w-full"
+              placeholder="Enter your email Adderss"
+              name="email"
+              {...register("email")}
+              required
+              id=""
+            />
+          </div>
+          <br />
+          <div>
+            <input
+              type="password"
+              className=" input input-bordered w-full"
+              placeholder="Enter your password"
+              name="password"
+              {...register("password")}
+              required
+              id=""
+            />
+          </div>
+          <br />
+          <input
+            type="submit"
+            className=" btn btn-outline btn-primary w-full"
+            value="Login"
+          />
+        </form>
+        <p className=" text-center mt-2">
+          your have an account pleace !
+          <Link to="/login" className=" text-green-700 hover:underline">
+            Login
+          </Link>
+        </p>
+        <Social></Social>
+      </div>
+    </div>
+  );
+};
+
+export default Register;
diff --git a/src/Componente/LoginReg/Social.jsx b/src/Componente/LoginReg/Social.jsx
@@ -1,9 +1,13 @@
+import { FaGoogle } from "react-icons/fa";
+
 const Social = () => {
   return (
     <div className=" mt-2">
       <div className=" divider"> or </div>
       <div className=" flex justify-center">
-        <button className=" btn btn-outline btn-primary">Google</button>
+        <button className=" btn text-2xl btn-outline btn-primary">
+          <FaGoogle /> Google
+        </button>
       </div>
     </div>
   );

diff --git a/src/Componente/Navbar/Navbar.jsx b/src/Componente/Navbar/Navbar.jsx
@@ -1,20 +1,24 @@
 import { Link, NavLink } from "react-router-dom";
+import { IoMdNotifications } from "react-icons/io";
 
 const Navbar = () => {
   const navbarsItem = (
     <>
-      <li>
-        <NavLink to="/">Item 1</NavLink>
+      <li className="mr-2">
+        <NavLink to="/">Home</NavLink>
       </li>
 
-      <li>
-        <a>Item 3</a>
+      <li className="mr-2">
+        <NavLink to="/meals">Meals</NavLink>
+      </li>
+      <li className="mr-2">
+        <NavLink to="upcomming">Upcoming Meals</NavLink>
       </li>
     </>
   );
   return (
     <div>
-      <div className="navbar">
+      <div className="navbar  bg-slate-200">
         <div className="navbar-start">
           <div className="dropdown">
             <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
@@ -48,9 +52,15 @@ const Navbar = () => {
           <ul className="menu menu-horizontal px-1">{navbarsItem}</ul>
         </div>
         <div className="navbar-end">
-          <Link to="/login" className=" btn btn-outline btn-primary">
-            Join Us
-          </Link>
+          <div className=" flex gap-2 items-center">
+            <p className="flex text-2xl text-red-500 ">
+              <IoMdNotifications />
+              <sup>+0</sup>
+            </p>
+            <Link to="/login" className=" btn btn-outline btn-primary">
+              Join Us
+            </Link>
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/Pages/Footer.jsx b/src/Pages/Footer.jsx
@@ -0,0 +1,71 @@
+import logo from "../../src/assets/logos.png";
+const Footer = () => {
+  return (
+    <div>
+      <footer className="footer p-10 bg-base-200 text-base-content">
+        <aside>
+          <img className=" w-28 h-20" src={logo} alt="" />
+          <h2 className="text-2xl">HostelCare</h2>
+          <p>Email : [email protected]</p>
+        </aside>
+        <nav>
+          <h6 className="footer-title">Services</h6>
+          <a className="link link-hover">Student Hostel</a>
+          <a className="link link-hover">Meals facility</a>
+          <a className="link link-hover">Member ship facility</a>
+        </nav>
+        <nav>
+          <h6 className="footer-title">Company</h6>
+          <a className="link link-hover">Home</a>
+          <a className="link link-hover">Meals</a>
+          <a className="link link-hover">Upcomming meals</a>
+        </nav>
+        <nav>
+          <h6 className="footer-title">Social</h6>
+          <div className="grid grid-flow-col gap-4">
+            <a>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                className="fill-current"
+              >
+                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
+              </svg>
+            </a>
+            <a>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                className="fill-current"
+              >
+                <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
+              </svg>
+            </a>
+            <a>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                className="fill-current"
+              >
+                <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
+              </svg>
+            </a>
+          </div>
+        </nav>
+      </footer>
+      <footer className="footer footer-center p-4 bg-base-300 text-base-content">
+        <aside>
+          <p>Copyright © 2024 - All right reserved by HostelCare </p>
+        </aside>
+      </footer>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/src/Pages/Home/Banner.jsx b/src/Pages/Home/Banner.jsx
@@ -0,0 +1,33 @@
+const Banner = () => {
+  return (
+    <div>
+      <div className="hero h-[80vh] bg-[url('https://i.ibb.co/MDsZ5Ss/ttt.jpg')]  bg-cover bg-center text-white">
+        <div className="hero-content text-center">
+          <div className="w-3/5 mx-auto">
+            <h1 className="text-3xl md:text-5xl font-bold">
+              Welcome to <span className=" text-red-600">HostelCare </span>!
+            </h1>
+            <p className="py-6">
+              Welcome to HostelCare, the comprehensive hostel management system
+              designed to streamline and simplify all aspects of hostel
+              administration for universities and educational institutions.
+            </p>
+            <div>
+              <div className=" md:flex gap-2 justify-center">
+                <input
+                  type="text"
+                  className="input input-disabled"
+                  name=""
+                  id=""
+                />
+                <button className=" btn  text-2xl btn-primary">Search</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Banner;
diff --git a/src/Root/Root.jsx b/src/Root/Root.jsx
@@ -1,11 +1,13 @@
 import { Outlet } from "react-router-dom";
 import Navbar from "../Componente/Navbar/Navbar";
+import Footer from "../Pages/Footer";
 
 const Root = () => {
   return (
     <div>
       <Navbar></Navbar>
       <Outlet></Outlet>
+      <Footer></Footer>
     </div>
   );
 };

diff --git a/src/Route/Route.jsx b/src/Route/Route.jsx
@@ -1,5 +1,7 @@
 import { createBrowserRouter } from "react-router-dom";
+import Home from "../Componente/Home";
 import Login from "../Componente/LoginReg/Login";
+import Register from "../Componente/LoginReg/Register";
 import ErrorPage from "../Pages/ErrorPage";
 import Root from "../Root/Root";
 
@@ -9,7 +11,14 @@ const router = createBrowserRouter([
     element: <Root></Root>,
     errorElement: <ErrorPage></ErrorPage>,
     children: [
-      {},
+      {
+        path: "/",
+        element: <Home></Home>,
+      },
+      {
+        path: "/register",
+        element: <Register></Register>,
+      },
       {
         path: "/login",
         element: <Login></Login>,