fix: Remove framer-motion from UI components for TypeScript compatibility

- Replace motion components with CSS transitions
- Fix TypeScript errors in Button and Card components
- Use Tailwind scale utilities for hover/active states

Author: ishansasika

src/App.tsx

@@ -17,7 +17,7 @@ const pageVariants = {
 };
 
 const pageTransition = {
-  type: 'tween',
+  type: 'tween' as const,
   duration: 0.3,
 };
 

src/app/components/ui/button/Button.tsx

@@ -1,5 +1,4 @@
 import { ButtonHTMLAttributes, forwardRef } from 'react';
-import { motion } from 'framer-motion';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
@@ -9,7 +8,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant = 'primary', size = 'md', isLoading, className = '', children, ...props }, ref) => {
-    const baseStyles = 'inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
+    const baseStyles = 'inline-flex items-center justify-center font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none hover:scale-[1.02] active:scale-[0.98]';
 
     const variants = {
       primary: 'bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700 focus:ring-blue-500',
@@ -26,10 +25,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     };
 
     return (
-      <motion.button
+      <button
         ref={ref}
-        whileHover={{ scale: 1.02 }}
-        whileTap={{ scale: 0.98 }}
         className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
         disabled={isLoading}
         {...props}
@@ -61,7 +58,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ) : (
           children
         )}
-      </motion.button>
+      </button>
     );
   }
 );

src/app/components/ui/card/Card.tsx

@@ -1,5 +1,4 @@
 import { HTMLAttributes, forwardRef } from 'react';
-import { motion } from 'framer-motion';
 
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
   hover?: boolean;
@@ -10,20 +9,14 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
     const baseStyles = 'bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden';
     const hoverStyles = hover ? 'transition-all duration-300 hover:shadow-2xl hover:-translate-y-1' : '';
 
-    const Component = hover ? motion.div : 'div';
-    const motionProps = hover
-      ? { whileHover: { y: -4, transition: { duration: 0.2 } } }
-      : {};
-
     return (
-      <Component
+      <div
         ref={ref}
         className={`${baseStyles} ${hoverStyles} ${className}`}
-        {...(hover ? motionProps : {})}
         {...props}
       >
         {children}
-      </Component>
+      </div>
     );
   }
 );

tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/app/components/footer/footer.tsx","./src/app/components/footer/index.ts","./src/app/components/header/header.tsx","./src/app/components/header/index.ts","./src/app/pages/about/about.tsx","./src/app/pages/about/index.ts","./src/app/pages/contact/contact.tsx","./src/app/pages/contact/index.ts","./src/app/pages/home/home.tsx","./src/app/pages/home/index.ts","./src/app/pages/services/services.tsx","./src/app/pages/services/index.ts"],"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/app/components/footer/footer.tsx","./src/app/components/footer/index.ts","./src/app/components/header/header.tsx","./src/app/components/header/index.ts","./src/app/components/ui/badge/badge.tsx","./src/app/components/ui/badge/index.ts","./src/app/components/ui/button/button.tsx","./src/app/components/ui/button/index.ts","./src/app/components/ui/card/card.tsx","./src/app/components/ui/card/index.ts","./src/app/components/ui/modal/modal.tsx","./src/app/components/ui/modal/index.ts","./src/app/pages/about/about.tsx","./src/app/pages/about/index.ts","./src/app/pages/contact/contact.tsx","./src/app/pages/contact/index.ts","./src/app/pages/home/home.tsx","./src/app/pages/home/index.ts","./src/app/pages/not-found/notfound.tsx","./src/app/pages/not-found/index.ts","./src/app/pages/services/services.tsx","./src/app/pages/services/index.ts"],"version":"5.9.3"}