[Finshes #187354196] Sign up page

package.json

@@ -15,13 +15,19 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.6.0",
+    "@remixicon/react": "^4.2.0",
+    "clsx": "^2.1.1",
     "@reduxjs/toolkit": "^2.2.5",
     "@types/react-redux": "^7.1.33",
     "lucide-react": "^0.387.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^9.1.2",
+    "react-hook-form": "^7.51.5",
     "react-router-dom": "^6.23.1",
+    "react-redux": "^9.1.2",
+    "tailwind-merge": "^2.3.0",
+    "zod": "^3.23.8",
     "sass": "^1.77.2"
   },
   "devDependencies": {

src/App.tsx

@@ -1,26 +1,38 @@
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import Login from "./pages/Login";
-import LandingPage from "./pages/LandingPage";
+import Register from './pages/Register';
+import Success from './components/register/Success';
+import RegisterSection from './components/register/RegisterSection';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import Login from './pages/Login';
+import LandingPage from './pages/LandingPage';
 
 const App = () => {
   const router = createBrowserRouter([
     {
-      path: "/",
+      path: '/',
       children: [
         {
           index: true,
-          element: <LandingPage />
+          element: <LandingPage />,
         },
         {
-          path: "login",
-          element: <Login />
-        }
-      ]
+          path: 'login',
+          element: <Login />,
+        },
+      ],
+    },
+    {
+      path: 'register',
+      element: <Register />,
+      children: [
+        {
+          path: '/register',
+          element: <RegisterSection />,
+        },
+        { path: 'success', element: <Success /> },
+      ],
     },
-  ])
-  return (
-    <RouterProvider router={router} />
-  );
+  ]);
+  return <RouterProvider router={router} />;
 };
 
 export default App;

src/components/Button.tsx

@@ -0,0 +1,22 @@
+import { cn } from "../utils";
+
+interface ButtonProps {
+  text: string;
+  buttonId?: string;
+  type?: 'submit' | 'reset' | 'button';
+  className?: string;
+  onClick?: () => void;
+}
+const Button = ({ text, type, className, onClick }: ButtonProps) => {
+  return (
+    <button
+      type={type}
+      className={cn('p-2 rounded-lg bg-greenColor hover:bg-darkGreen transition-all text-whiteColor font-bold', className)}
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default Button;

src/components/Input.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import { cn } from '../utils';
+
+interface InputProps {
+  type: string;
+  label: string;
+  id: string;
+  placeholder: string;
+  error?: string;
+  labelClassName?: string;
+  inputClasname?: string;
+}
+
+// Use React.forwardRef to forward the ref to the input element
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ type, labelClassName, inputClasname, label, id, placeholder, error = '', ...rest }, ref) => {
+    return (
+      <label className={cn('flex flex-col gap-1 font-lg font-medium flex-1 w', labelClassName)}>
+        {label}
+        <input
+          type={type}
+          id={id}
+          placeholder={placeholder}
+          className={cn('p-1 px-3 rounded-lg border border-blackColor outline-none font-normal', inputClasname)}
+          ref={ref}
+          {...rest}
+        />
+        {error && <p className='text-redColor text-xs'>{error}</p>}
+      </label>
+    );
+  }
+);
+
+export default Input;

src/components/Select.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+
+interface SelectProps {
+  placeholder: string;
+  error?: string;
+  options: string[];
+}
+const Select = forwardRef<HTMLSelectElement, SelectProps>(({ placeholder, options,error,...rest }, ref) => {
+  return (
+    <>
+      <select ref={ref} name='role' id='role' className='p-2 outline-0 border border-blackColor flex-1 rounded-lg' {...rest}>
+        <option value=''>{placeholder}</option>
+        {options.map((option, index) => (
+          <option key={index} value={option}>
+            {option[0].toUpperCase() + option.slice(1)}
+          </option>
+        ))}
+      </select>
+      <p className='text-redColor text-xs -mt-3'>{error}</p>
+    </>
+  );
+});
+
+export default Select;

src/components/register/InfoTip.tsx

@@ -0,0 +1,27 @@
+import { RiCloseLargeFill } from '@remixicon/react';
+import { useState } from 'react';
+
+const InfoTip = () => {
+  const [InfoTipClosed, setInfoTipClosed] = useState(false);
+
+  const handleInfoTipClosing = () => {
+    setInfoTipClosed(true);
+  };
+  return (
+    <div className={`bg-blackColor w-full text-whiteColor mt-4 px-4 xl:px-0 ${InfoTipClosed ? 'h-0 hidden opacity-0 transition-all' : 'block'}`}>
+      <div className='flex flex-row justify-between items-center xl:container w-full py-2 mx-auto'>
+        <p className='w-8/12 text-lg'>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid eum accusantium reiciendis Lorem ipsum dolor
+          sit amet
+        </p>
+        <RiCloseLargeFill
+          size={24}
+          className='rounded-full p-2 border w-10 h-10 aspect-square'
+          onClick={handleInfoTipClosing}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default InfoTip;

src/components/register/Navbar.tsx

@@ -0,0 +1,29 @@
+import { RiMenu2Fill, RiPhoneLine, RiQuestionFill, RiSearch2Line } from '@remixicon/react';
+
+const Navbar = () => {
+  return (
+    <div className='flex flex-row items-center justify-between w-full px-4 xl:px-0 xl:container mt-4 '>
+      <a href='/' className='w-2/12 uppercase font-extrabold text-sm md:text-xl xl:text-3xl flex'>
+        Mavericks <span>🏀</span>
+      </a>
+
+      <span className='hidden sm:flex flex-row items-center px-3 border border-blackColor rounded-full  sm:w-7/12  md:w-4/12'>
+        <input type='text' name='' id='' className='outline-0  p-1 text-md w-full outline-none' />
+        <RiSearch2Line size={24} className=' grid place-content-center' />
+      </span>
+      <RiMenu2Fill className='sm:block md:hidden' />
+      <div className='w-3/12 md:flex flex-row justify-end gap-3  hidden'>
+        <span className='flex flex-row items-center justify-center gap-1'>
+          <RiPhoneLine />
+          +250 787 922 900
+        </span>
+        <span className='flex flex-row items-center justify-center gap-1'>
+          <RiQuestionFill />
+          Help
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;