Index: frontend/src/global.css
===================================================================
--- frontend/src/global.css (revision d797dce91fdb18630fa8863ded6bfcbea51b4789)
+++ frontend/src/global.css (revision e13f128f19b817d19e3e9ba68a26b94d45cef00b)
@@ -93,2 +93,26 @@
min-height: 100vh;
}
+
+/* Customize scrollbar for Webkit browsers (Chrome, Safari, Edge) */
+.custom-scrollbar::-webkit-scrollbar {
+ width: .6rem;
+ height: .6rem;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+ background: #f0f0f0;
+ border-radius: 40px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+ background-color: rgba(100, 100, 100, 0.5);
+ border-radius: 4px;
+ border: 2px solid transparent;
+ background-clip: content-box;
+}
+
+/* Firefox scrollbar */
+.custom-scrollbar {
+ scrollbar-width: thin;
+ scrollbar-color: rgba(100, 100, 100, 0.5) #f0f0f0;
+}
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx (revision e13f128f19b817d19e3e9ba68a26b94d45cef00b)
+++ frontend/src/pages/Login.tsx (revision e13f128f19b817d19e3e9ba68a26b94d45cef00b)
@@ -0,0 +1,123 @@
+import ShifterLogo from "../assets/Shifter-Logo-S2W-Transparent.png"
+import React from "react";
+import {Eye, EyeOff} from "lucide-react";
+import ShifterArrow from "../assets/Shifter-Arrow-White.png"
+import { Link } from "react-router-dom";
+
+
+function Login() {
+
+ return (
+
+
+ {/* LEFT HEADER AND BACKGROUND */}
+
+ )
+}
+
+function Input(inputProps: InputProps) {
+ const [showPassword, setShowPassword] = React.useState(false);
+
+ return (
+ >, user: User, setCanContinue: React.Dispatch>}) {
+ const [showPassword, setShowPassword] = React.useState(false);
+ const [showError, setShowError] = React.useState(false);
+ const [error, setError] = React.useState("");
+
+ useEffect(() => {
+ function hasUppercase(str: string) {
+ return /[A-Z]/.test(str);
+ }
+ function hasDigit(str: string) {
+ return /\d/.test(str);
+ }
+ function hasSpecialChar(str: string) {
+ return /[^A-Za-z0-9]/.test(str);
+ }
+
+ console.log(user.password, user.passwordConfirmation);
+ if (!user.password || !user.passwordConfirmation) {
+
+ } else if (user.password && user.passwordConfirmation && user.password !== user.passwordConfirmation) {
+ setShowError(true);
+ setError("Passwords do not match");
+ setCanContinue(false);
+ } else if (!hasUppercase(user.password)) {
+ setShowError(true);
+ setError("Password must contain at least one uppercase letter");
+ setCanContinue(false);
+ } else if (!hasDigit(user.password)) {
+ setShowError(true);
+ setError("Password must contain at least one digit");
+ setCanContinue(false);
+ } else if (!hasSpecialChar(user.password)) {
+ setShowError(true);
+ setError("Password must contain at least one special character");
+ setCanContinue(false);
+ } else {
+ setError("");
+ setShowError(false);
+ setCanContinue(true);
+ }
+
+ }, [user.password, user.passwordConfirmation])
+
+ return (
+ >, user: User }) {
+ return (
+ >, user: User }) {
+ const interests = [
+ "Sales Strategies",
+ "Marketing",
+ "Leadership",
+ "Management",
+ "Digital Transformation",
+ "Business Transformation",
+ "Entrepreneurship",
+ "Startup",
+ "Sales",
+ "Negotiation",
+ "Finance For Business"
+ ]
+
+ return (
+ >, user: User }) {
+ const skills = [
+ "Strategic Thinking",
+ "Strategic Planning",
+ "Business Development",
+ "Project Management",
+ "Operation Management",
+ "Logistics",
+ "Business Model Creation",
+ "Risk Management",
+ "Startup Methodologies",
+
+ "Marketing",
+ "Digital Marketing",
+ "Traditional Marketing",
+ "Branding",
+ "Sales",
+ "Sales Techniques",
+ "B2b Tactics",
+ "B2c Tactics",
+ "Seo",
+ "Google Analytics",
+ "Ecommerce Platforms",
+
+ "Leadership",
+ "People Management",
+ "Team Building",
+ "Delegation",
+ "Conflict Resolution",
+ "Decision Making",
+ "Performance Evaluation",
+ "Change Management",
+
+ "Communication",
+ "Emotional Intelligence",
+ "Time Management",
+ "Adaptability",
+ "Critical Thinking",
+ "Creativity",
+ "Problem Solving",
+
+ "Opportunity Identification",
+ "Fundraising Capital",
+ "Innovation Management",
+
+ "Ai Tools",
+
+ "Business Law",
+ "Business Ethics"
+ ];
+
+
+ return (
+ >, user: User }) {
+ const skills = [
+ "Strategic Thinking",
+ "Strategic Planning",
+ "Business Development",
+ "Project Management",
+ "Operation Management",
+ "Logistics",
+ "Business Model Creation",
+ "Risk Management",
+ "Startup Methodologies",
+
+ "Marketing",
+ "Digital Marketing",
+ "Traditional Marketing",
+ "Branding",
+ "Sales",
+ "Sales Techniques",
+ "B2b Tactics",
+ "B2c Tactics",
+ "Seo",
+ "Google Analytics",
+ "Ecommerce Platforms",
+
+ "Leadership",
+ "People Management",
+ "Team Building",
+ "Delegation",
+ "Conflict Resolution",
+ "Decision Making",
+ "Performance Evaluation",
+ "Change Management",
+
+ "Communication",
+ "Emotional Intelligence",
+ "Time Management",
+ "Adaptability",
+ "Critical Thinking",
+ "Creativity",
+ "Problem Solving",
+
+ "Opportunity Identification",
+ "Fundraising Capital",
+ "Innovation Management",
+
+ "Ai Tools",
+
+ "Business Law",
+ "Business Ethics"
+ ];
+
+
+ return (
+ ({
+ email: "",
+ password: "",
+ passwordConfirmation: "",
+ fullName: "",
+ workPosition: "",
+ companyType: "",
+ interests: [],
+ skills: [],
+ skillsGap: [],
+ });
+
+
+ const stepsContent = [, ,
+ , ,
+ ];
+
+ const handleNext = () => {
+ setDirection(1);
+ setActiveStep((prev) => prev + 1);
+ };
+ const handleBack = () => {
+ setDirection(-1);
+ setActiveStep((prev) => prev - 1);
+ };
+ const handleReset = () => {
+ setDirection(0);
+ setActiveStep(0);
+ }
+ const variants = {
+ enter: (dir: number) => ({
+ x: dir > 0 ? 100 : -100,
+ opacity: 0,
+ }),
+ center: {
+ x: 0,
+ opacity: 1,
+ },
+ exit: (dir: number) => ({
+ x: dir > 0 ? -100 : 100,
+ opacity: 0,
+ }),
+ };
+
+
+ return (
+
+
+ {/* LEFT HEADER AND BACKGROUND */}
+
+ );
+}
+
+function Input(inputProps: InputProps) {
+
+ return (
+ >;
+ setUser: React.Dispatch>;
+ user: User;
+}
+
+interface SelectProps {
+ label: string;
+ name: string;
+ id: string;
+ options?: string[];
+ setUser: React.Dispatch>;
+ user: User;
+}
+
+type UserArrayFields = 'interests' | 'skills' | 'skillsGap';
+
+interface SliderProps {
+ label: string;
+ name: UserArrayFields;
+ id: string;
+ options?: string[];
+ setUser: React.Dispatch>;
+ user: User;
+}
+
+export default Register;
+
+
+ {/* RIGHT FORM CONTAINER */}
+
+ {/*Arrows*/}
+ 
+
+
+
+
+ Welcome Back!
+Let's unlock your next breakthrough in business!
+
+ 
+
+
+
+
+ {/*Buttons*/}
+
+
+
+
+
+ Register
+
+
+
+
+
+ )
+}
+
+interface InputProps {
+ placeholder: string;
+ label: string;
+ name: string;
+ type: string;
+ id: string;
+}
+
+export default Login;
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx (revision e13f128f19b817d19e3e9ba68a26b94d45cef00b)
+++ frontend/src/pages/Register.tsx (revision e13f128f19b817d19e3e9ba68a26b94d45cef00b)
@@ -0,0 +1,644 @@
+import React, {useEffect} from "react";
+import {Eye, EyeOff} from "lucide-react";
+import ShifterLogo from "../assets/Shifter-Logo-S2W-Transparent.png";
+import ShifterArrow from "../assets/Shifter-Arrow-White.png";
+import {
+ Stepper,
+ Step,
+ StepLabel,
+ Box,
+} from "@mui/material";
+import {CustomStepperConnector, CustomStepperStepIcon} from "../components/CustomStepper";
+import {Link} from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+
+
+function StepOne({setUser, user, setCanContinue}: { setUser: React.Dispatch
+
+
+
+
+
+ {
+ inputProps.name === "password" &&
+
+ }
+ +
+
+
+
+ {
+ showError && (
+
+ );
+}
+
+function StepTwo({setUser, user}: { setUser: React.Dispatch+ {error} +
+ ) + } +
+
+
+
+ );
+}
+
+function StepThree({setUser, user}: { setUser: React.Dispatch
+
+ )
+}
+
+function StepFour({setUser, user}: { setUser: React.Dispatch
+
+ )
+}
+
+function StepFive({setUser, user}: { setUser: React.Dispatch
+
+ )
+}
+
+
+function Register() {
+ const [activeStep, setActiveStep] = React.useState(0);
+ const [canContinue, setCanContinue] = React.useState(true);
+ const [direction, setDirection] = React.useState(0); // 1 for next, -1 for back
+ const [user, setUser] = React.useState
+
+
+ {/* RIGHT FORM CONTAINER */}
+
+ {/*Arrows*/}
+
+
+
+ Shift into Success
+Start your journey toward smarter, scalable business + growth.
+
+
+
+ {/* STEPPER */}
+
+ }
+ >
+ {stepsContent.map((_, index) => (
+
+
+ ))}
+
+
+
+
+ {/*STEPPER CONTENT*/}
+
+
+ {stepsContent[activeStep]}
+
+
+
+
+
+ {/*STEPPER BUTTONS*/}
+
+
+
+
+
+
+
+ {activeStep === stepsContent.length - 1 ? (
+
+ ) : (
+
+ )}
+
+ + Already have an account? + + {" "}Log In + +
+
+
+
+ );
+}
+
+function SelectInput(selectProps: SelectProps) {
+
+ return (
+
+
+
+
+ inputProps.setUser((prev: User) => ({
+ ...prev,
+ [inputProps.name]: e.target.value
+ }))
+ }
+ />
+
+
+ {inputProps.name.includes("password") && (
+
+ )}
+ +
+
+
+ );
+}
+
+function SliderInput(sliderProps: SliderProps) {
+
+ return (
+
+
+
+
+ +
+
+
+ );
+}
+
+interface User {
+ email: string;
+ password: string;
+ passwordConfirmation: string;
+ fullName: string;
+ workPosition: string;
+ companyType: string;
+ interests: string[];
+ skills: string[];
+ skillsGap: string[];
+}
+
+type UserStrFields = 'email' | 'password' | 'passwordConfirmation' | 'fullName' | 'workPosition' | 'companyType';
+interface InputProps {
+ placeholder: string;
+ label: string;
+ name: UserStrFields;
+ type: string;
+ id: string;
+ showPassword?: boolean;
+ setShowPassword?: React.Dispatch
+ {
+ sliderProps.options?.map((option, index) => {
+ const isSelected = sliderProps.user[sliderProps.name]?.includes(option) || false;
+
+ return (
+
+ )
+ })
+ }
+
+
+