+ {/* Left Side: Hero Image (Hidden on Mobile) */}
+
+ );
+};
+
+export default Login;
diff --git a/apps/web/src/features/auth/authSlice.ts b/apps/web/src/features/auth/authSlice.ts
new file mode 100644
index 00000000..797479ec
--- /dev/null
+++ b/apps/web/src/features/auth/authSlice.ts
@@ -0,0 +1,141 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { loginWithEmail, logout, getCurrentUser } from "../../services/authService";
+import type { User } from "firebase/auth";
+
+export interface AuthUser {
+ uid: string;
+ email: string | null;
+ displayName: string | null;
+ photoURL: string | null;
+ role?: string;
+}
+
+interface AuthState {
+ user: AuthUser | null;
+ isAuthenticated: boolean;
+ status: "idle" | "loading" | "succeeded" | "failed";
+ error: string | null;
+}
+
+const initialState: AuthState = {
+ user: null,
+ isAuthenticated: false,
+ status: "idle",
+ error: null,
+};
+
+/**
+ * Async thunk for user login
+ */
+export const loginUser = createAsyncThunk(
+ "auth/loginUser",
+ async ({ email, password }: { email: string; password: string }, { rejectWithValue }) => {
+ const result = await loginWithEmail(email, password);
+
+ if (!result.success) {
+ return rejectWithValue(result.error);
+ }
+
+ const firebaseUser = result.user as User;
+ return {
+ uid: firebaseUser.uid,
+ email: firebaseUser.email,
+ displayName: firebaseUser.displayName,
+ photoURL: firebaseUser.photoURL,
+ };
+ }
+);
+
+/**
+ * Async thunk for user logout
+ */
+export const logoutUser = createAsyncThunk("auth/logoutUser", async (_, { rejectWithValue }) => {
+ const result = await logout();
+
+ if (!result.success) {
+ return rejectWithValue(result.error);
+ }
+
+ return null;
+});
+
+/**
+ * Async thunk to check if user is already logged in
+ */
+export const checkAuthStatus = createAsyncThunk("auth/checkAuthStatus", async () => {
+ const currentUser = getCurrentUser();
+
+ if (currentUser) {
+ return {
+ uid: currentUser.uid,
+ email: currentUser.email,
+ displayName: currentUser.displayName,
+ photoURL: currentUser.photoURL,
+ };
+ }
+
+ return null;
+});
+
+const authSlice = createSlice({
+ name: "auth",
+ initialState,
+ reducers: {
+ clearError: (state) => {
+ state.error = null;
+ },
+ setRole: (state, action: PayloadAction
+ 
+ {/* Cinematic Overlay */}
+
+
+
+ {/* Top Left Logo */}
+
+
+ {/* Right Side: Login Form */}
+
+ 
+
+
+
+
+ Streamline your workforce
+
+
+ Streamline your workforce
with{" "}
+
+ KROW
+
+
+ + The all-in-one platform for managing staff, orders, and professional + relationships with precision and ease. +
+
+
+
+ {/* Logo / Branding */}
+
+
+
+
+
+
+
+ {/* Helper for MVP Testing / Demo purposes */}
+
+
+ + Welcome Back +
++ Please enter your details to sign in +
+
+
+ + Quick Login (Development) +
+
+ {[
+ { label: "Admin", email: "admin@krow.com" },
+ { label: "Client", email: "client@krow.com" },
+ { label: "Vendor", email: "vendor@krow.com" },
+ ].map((cred) => (
+
+ ))}
+
+ Dashboard
+ )
+}
+
+export default Dashboard
\ No newline at end of file
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index f1d8c73c..c5d95a9b 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1 +1,162 @@
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');
@import "tailwindcss";
+
+@theme {
+ --color-background: hsl(var(--background));
+ --color-foreground: hsl(var(--foreground));
+
+ --color-card: hsl(var(--card));
+ --color-card-foreground: hsl(var(--card-foreground));
+
+ --color-popover: hsl(var(--popover));
+ --color-popover-foreground: hsl(var(--popover-foreground));
+
+ --color-primary: hsl(var(--primary));
+ --color-primary-foreground: hsl(var(--primary-foreground));
+
+ --color-secondary: hsl(var(--secondary));
+ --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+ --color-muted: hsl(var(--muted));
+ --color-muted-foreground: hsl(var(--muted-foreground));
+
+ --color-accent: hsl(var(--accent));
+ --color-accent-foreground: hsl(var(--accent-foreground));
+
+ --color-destructive: hsl(var(--destructive));
+ --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+ --color-border: hsl(var(--border));
+ --color-input: hsl(var(--input));
+ --color-ring: hsl(var(--ring));
+
+ --color-primary-text: hsl(var(--text-primary));
+ --color-secondary-text: hsl(var(--text-secondary));
+ --color-muted-text: hsl(var(--text-muted));
+
+ --radius-lg: var(--radius);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-sm: calc(var(--radius) - 4px);
+
+ --animate-accordion-down: accordion-down 0.2s ease-out;
+ --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+
+@layer base {
+ :root {
+ --background: 220 20% 98%;
+ --foreground: 226 30% 12%;
+ --card: 220 20% 98%;
+ --card-foreground: 226 30% 10%;
+ --popover: 220 20% 98%;
+ --popover-foreground: 226 30% 10%;
+ --primary: 226 91% 45%;
+ --primary-foreground: 210 40% 98%;
+ --secondary: 220 15% 95%;
+ --secondary-foreground: 226 30% 25%;
+ --muted: 220 15% 95%;
+ --muted-foreground: 220 9% 45%;
+ --accent: 53 94% 62%;
+ --accent-foreground: 53 94% 15%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 220 15% 90%;
+ --input: 220 15% 90%;
+ --ring: 226 91% 45%;
+ --radius: 0.75rem;
+
+ --text-primary: 226 30% 12%;
+ --text-secondary: 226 20% 35%;
+ --text-muted: 226 15% 55%;
+ }
+
+ .dark {
+ --background: 226 30% 5%;
+ --foreground: 210 40% 98%;
+ --card: 226 30% 7%;
+ --card-foreground: 210 40% 98%;
+ --popover: 226 30% 5%;
+ --popover-foreground: 210 40% 98%;
+ --primary: 226 91% 55%;
+ --primary-foreground: 220 20% 10%;
+ --secondary: 226 30% 15%;
+ --secondary-foreground: 210 40% 98%;
+ --muted: 226 30% 15%;
+ --muted-foreground: 220 9% 65%;
+ --accent: 53 94% 62%;
+ --accent-foreground: 53 94% 15%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+ --border: 226 30% 15%;
+ --input: 226 30% 15%;
+ --ring: 226 91% 55%;
+
+ --text-primary: 210 40% 98%;
+ --text-secondary: 220 9% 80%;
+ --text-muted: 220 9% 65%;
+ }
+}
+
+@layer base {
+ * {
+ border-color: hsl(var(--border));
+ }
+
+ body {
+ background-color: hsl(var(--background));
+ color: hsl(var(--foreground));
+ font-family: 'Instrument Sans', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+}
+
+@layer utilities {
+ .glass {
+ background: rgba(255, 255, 255, 0.5);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ }
+
+ .dark .glass {
+ background: rgba(0, 0, 0, 0.3);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ }
+
+ .animate-in {
+ animation: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+ }
+
+ .animate-in-slide-up {
+ animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+ }
+
+ @keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+ }
+
+ @keyframes slide-up {
+ from {
+ opacity: 0;
+ transform: translateY(15px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+}
+
+.transition-premium {
+ transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
\ No newline at end of file
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
new file mode 100644
index 00000000..74c715a6
--- /dev/null
+++ b/apps/web/src/lib/utils.ts
@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+/**
+ * Utility function to merge Tailwind CSS classes conditionally.
+ * Combines clsx for conditional logic and tailwind-merge to handle conflicts.
+ *
+ * @param inputs - List of class values (strings, objects, arrays)
+ * @returns Merged class string
+ */
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
\ No newline at end of file
diff --git a/apps/web/src/routes.tsx b/apps/web/src/routes.tsx
new file mode 100644
index 00000000..ff41ebd5
--- /dev/null
+++ b/apps/web/src/routes.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import Login from './features/auth/Login';
+import Dashboard from './features/dashboard/Dashboard';
+
+
+/**
+ * AppRoutes Component
+ * Defines the main routing structure of the application.
+ * Groups routes by Layout (Public vs App).
+ */
+const AppRoutes: React.FC = () => {
+ return (
+