feat: Implement core application pages and reusable UI components.

Author: Devasy

web/components/ui/Button.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
-import { useTheme } from '../../contexts/ThemeContext';
 import { THEMES } from '../../constants';
+import { useTheme } from '../../contexts/ThemeContext';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
   size?: 'sm' | 'md' | 'lg';
 }
 
-export const Button: React.FC<ButtonProps> = ({ 
-  children, 
-  variant = 'primary', 
-  size = 'md', 
-  className = '', 
-  ...props 
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  className = '',
+  ...props
 }) => {
   const { style } = useTheme();
 
   const baseStyles = "transition-all duration-200 font-bold flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed";
-  
+
   const sizeStyles = {
     sm: "px-3 py-1.5 text-sm",
     md: "px-5 py-2.5 text-base",
@@ -27,8 +27,8 @@ export const Button: React.FC<ButtonProps> = ({
   let themeStyles = "";
 
   if (style === THEMES.NEOBRUTALISM) {
-    themeStyles = "border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none rounded-none uppercase tracking-wider";
-    
+    themeStyles = "border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none rounded-none uppercase tracking-wider font-mono";
+
     if (variant === 'primary') themeStyles += " bg-neo-main text-white";
     if (variant === 'secondary') themeStyles += " bg-neo-second text-black";
     if (variant === 'danger') themeStyles += " bg-red-500 text-white";
@@ -37,15 +37,15 @@ export const Button: React.FC<ButtonProps> = ({
   } else {
     // Glassmorphism
     themeStyles = "rounded-xl backdrop-blur-md border border-white/20 shadow-lg hover:shadow-xl active:scale-95";
-    
+
     if (variant === 'primary') themeStyles += " bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-blue-500/30";
     if (variant === 'secondary') themeStyles += " bg-white/10 text-white hover:bg-white/20";
     if (variant === 'danger') themeStyles += " bg-gradient-to-r from-red-500 to-pink-600 text-white shadow-red-500/30";
     if (variant === 'ghost') themeStyles += " bg-transparent border-none shadow-none hover:bg-white/10 text-current";
   }
 
   return (
-    <button 
+    <button
       className={`${baseStyles} ${sizeStyles[size]} ${themeStyles} ${className}`}
       {...props}
     >

web/components/ui/Modal.tsx

@@ -1,8 +1,8 @@
+import { AnimatePresence, motion, Variants } from 'framer-motion';
+import { X } from 'lucide-react';
 import React from 'react';
-import { motion, AnimatePresence, Variants } from 'framer-motion';
-import { useTheme } from '../../contexts/ThemeContext';
 import { THEMES } from '../../constants';
-import { X } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
 
 interface ModalProps {
   isOpen: boolean;
@@ -22,20 +22,20 @@ export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children,
 
   const modalVariants: Variants = style === THEMES.NEOBRUTALISM ? {
     hidden: { y: '100%', rotate: -5, opacity: 0 },
-    visible: { 
-      y: 0, 
-      rotate: 0, 
+    visible: {
+      y: 0,
+      rotate: 0,
       opacity: 1,
-      transition: { type: 'spring', damping: 15, stiffness: 200 } 
+      transition: { type: 'spring', damping: 15, stiffness: 200 }
     },
     exit: { y: '100%', rotate: 5, opacity: 0 }
   } : {
     hidden: { scale: 0.8, opacity: 0, backdropFilter: 'blur(0px)' },
-    visible: { 
-      scale: 1, 
-      opacity: 1, 
+    visible: {
+      scale: 1,
+      opacity: 1,
       backdropFilter: 'blur(10px)',
-      transition: { type: 'spring', damping: 20, stiffness: 300 } 
+      transition: { type: 'spring', damping: 20, stiffness: 300 }
     },
     exit: { scale: 0.8, opacity: 0 }
   };
@@ -58,8 +58,8 @@ export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children,
             animate="visible"
             exit="exit"
             className={`relative w-full max-w-lg overflow-hidden flex flex-col max-h-[90vh] 
-              ${style === THEMES.NEOBRUTALISM 
-                ? 'bg-white border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]' 
+              ${style === THEMES.NEOBRUTALISM
+                ? 'bg-white border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] rounded-none'
                 : 'bg-gray-900/80 border border-white/20 rounded-3xl shadow-2xl text-white'}`}
           >
             {/* Header */}