Basic Template Add + Navbar Edited + Pricing Page Bottom Margin Enhanced

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
@@ -22,6 +23,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
+    "tailwindcss": "^3.4.3",
     "vite": "^4.4.0"
   }
 }

src/App.css

@@ -1,5 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root{
     --bgColor:#063ab9;
 }

src/App.jsx

@@ -1,14 +1,18 @@
 import React from 'react'
 import './App.css'
+import './output.css'
 import HomePage from './components/HomePage'
 import PricingPage from './components/PricingPage'
-
+import Auth from './components/Authentication/Auth'
 import { Route, Routes } from "react-router-dom"
+
+
 function App() {
   return (
     <Routes>
       <Route path="" element={<HomePage />} />
       <Route path="/pricing" element={<PricingPage />} />
+      <Route path="/signin" element={<Auth />} />
     </Routes>
   )
 }

src/components/Authentication/Auth.jsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react'
+import Navbar from '../Navbar/Navbar'
+import { Link } from 'react-router-dom'
+import { Toaster } from 'react-hot-toast'
+import InputBox from './Input';
+
+function Auth() {
+
+    const [type, settype] = useState("sign-in");
+
+    useEffect(() => {
+
+    }, [])
+
+
+
+    return (
+
+        <>
+
+            <Navbar />
+
+            <section className="h-cover flex items-center justify-center">
+                <Toaster />
+                <form id="formElement" className="w-[80%] max-w-[400px]">
+                    <h1 className="text-4xl font-gelasio capitalize text-center mb-24">
+                        {type == "sign-in" ? "Welcome back" : "Join us today" }
+                    </h1>
+
+                    {
+                        type != "sign-in" ?
+                        <InputBox
+                            name="fullname"
+                            type="text"
+                            placeholder="Full Name"
+                            icon="fi-rr-user"
+                        />
+                        : ""
+                    }
+
+                    <InputBox
+                        name="email"
+                        type="email"
+                        placeholder="Email"
+                        icon="fi-rr-envelope"
+                    />
+
+                    <InputBox
+                        name="password"
+                        type="password"
+                        placeholder="Password"
+                        icon="fi-rr-key"
+                    />
+
+                    {
+                        type == "sign-in" ?
+                            <Link to="/forget-password">Forgot Password ?</Link>
+                            : ""
+                    }
+
+                    <button
+                        className="btn-dark center mt-10"
+                        type="submit"
+                    >   
+                        { type.replace("-", " ") }
+                    </button>
+
+                    <div className="relative w-full flex items-center gap-2 my-10 opacity-10 uppercase text-black font-bold">
+                        <hr className="w-1/2 border-black" />
+                        <p>or</p>
+                        <hr className="w-1/2 border-black" />
+                    </div>
+
+                    <button className="btn-dark flex items-center justify-center gap-4 w-[90%] center">
+                        {/* <img src={googleIcon} className="w-5" /> */}
+                        continue with google
+                    </button>
+
+                    {
+
+                        type == "sign-in" ?
+                        <p className="mt-6 text-dark-grey text-xl text-center">
+                        Don't have an account ?
+                        <Link to="/signup" className="underline text-black text-xl ml-1" >
+                            Join us today
+                        </Link>  
+                        </p>
+                        :
+                        <p className="mt-6 text-dark-grey text-xl text-center">
+                        Already a member ?
+                        <Link to="/signin" className="underline text-black text-xl ml-1" >
+                            Sign in here.
+                        </Link>  
+                        </p>
+
+                    }
+
+                </form>
+            </section>
+
+        </>
+
+    )
+
+}
+
+export default Auth

src/components/Authentication/Input.jsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+const InputBox = ({ name, type, id, value, placeholder, icon, disable = false }) => {
+
+    const [ passwordVisible, setPasswordVisible ] = useState(false);
+
+    return (
+        <div className="relative w-[100%] mb-4">
+            <input 
+                name={name}
+                type={ type == "password" ? passwordVisible ? "text" : "password" : type }
+                placeholder={placeholder}
+                defaultValue={value}
+                id={id}
+                disabled={disable}
+                className="input-box"
+            />
+
+            <i className={"fi " + icon + " input-icon"}></i>
+
+            {
+
+                type == "password" ?
+                <i className={"fi fi-rr-eye" + (!passwordVisible ? "-crossed" : "")  + " input-icon left-[auto] right-4 cursor-pointer"}
+                onClick={() => setPasswordVisible(currentVal => !currentVal)}
+                ></i>
+                : ""
+            }
+
+        </div>
+    )
+}
+
+export default InputBox;

src/components/Navbar/Navbar.css

@@ -18,6 +18,7 @@ nav .logo img {
   display: inline-block;
   width: 210px;
   height: 65px;
+  transition: all 500ms;
 }
 nav .logo img:hover {
   scale: 1.1;

src/components/Navbar/Navbar.jsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from "react";
-import { NavLink, useLocation } from "react-router-dom";
+import { NavLink, Navigate, useLocation, useNavigate } from "react-router-dom";
 import "./Navbar.css";
 
 const Navbar = () => {
   const [navlinksvalue, setnavlinks] = useState("nav-links");
   const [navbuttonsvlue, setnavbuttons] = useState("nav-buttons");
 
+  const Navigate = useNavigate();
+
   const location = useLocation();
   const [url, setUrl] = useState(null);
   useEffect(() => {
@@ -53,21 +55,24 @@ const Navbar = () => {
             } to="/pricing">
             Pricing
           </NavLink>
-          <NavLink className={({ isActive, isPending }) =>
+
+          {/* <NavLink className={({ isActive, isPending }) =>
               isPending ? "active " : isActive ? "activepage" : ""
             } to="/">
             Solution
-          </NavLink>
+          </NavLink> */}
+
           <a
             className="active"
+            target="_blank"
             href="https://github.com/bishalde/Qr-Code-Generator"
           >
             Github
           </a>
         </div>
 
         <div className={navbuttonsvlue}>
-          <button className="btn">Sign In</button>
+          <button onClick={(e) => {Navigate("/signin")}} className="btn">Sign In</button>
           <button className="btn btn-secondary">Sign Up</button>
         </div>
       </nav>

src/components/Pricing/Pricing.jsx

@@ -46,6 +46,7 @@ const Pricing = () => {
             </ul>
         </div>
     </section>
+    <br /><br /><br /><br /><br /><br />
     </>
   )
 }