improved login and sign up pages

package-lock.json

@@ -8,6 +8,7 @@
       "name": "habit-tracker-fullstack",
       "version": "1.0.0",
       "dependencies": {
+        "framer-motion": "^11.11.17",
         "lucide-react": "^0.344.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -2952,6 +2953,31 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.17",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.17.tgz",
+      "integrity": "sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -4618,8 +4644,7 @@
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
-      "dev": true
     },
     "node_modules/type-check": {
       "version": "0.4.0",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^11.11.17",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/Login.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import { useThemeContext } from '../contexts/ThemeContext';
+import { motion } from 'framer-motion';
+import { Circle } from 'lucide-react';
 
 export function Login({ onSwitchToSignUp }: { onSwitchToSignUp: () => void }) {
   const [email, setEmail] = useState('');
@@ -14,53 +16,138 @@ export function Login({ onSwitchToSignUp }: { onSwitchToSignUp: () => void }) {
     try {
       setError('');
       await signIn(email, password);
-    } catch (error) {
+    } catch {
       setError('Failed to sign in');
     }
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
+    <div className="min-h-screen w-full flex">
-      <div className={`max-w-md w-full p-6 rounded-lg shadow-lg ${theme.cardBackground}`}>
+      {/* Left Panel - Visual Elements */}
-        <h2 className={`text-2xl font-bold mb-6 ${theme.text}`}>Log In</h2>
+      <div className="hidden md:flex md:w-1/2 bg-black p-12 flex-col justify-center relative overflow-hidden">
-        {error && <div className="text-red-500 mb-4">{error}</div>}
+        {/* Background Decoration */}
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="absolute inset-0 flex items-center justify-center opacity-20">
-          <div>
+          <motion.div 
-            <input
+            className="absolute w-96 h-96"
-              type="email"
+            animate={{ 
-              value={email}
+              rotate: 360,
-              onChange={(e) => setEmail(e.target.value)}
+              scale: [1, 1.2, 1],
-              placeholder="Email"
+            }}
-              className={`w-full px-4 py-2 rounded-lg ${theme.input}`}
+            transition={{ 
-              required
+              duration: 15,
-            />
+              repeat: Infinity,
-          </div>
+              ease: "linear" 
-          <div>
+            }}
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Password"
-              className={`w-full px-4 py-2 rounded-lg ${theme.input}`}
-              required
-            />
-          </div>
-          <button
-            type="submit"
-            className={`w-full py-2 rounded-lg ${theme.button.primary}`}
           >
-            Log In
+            <Circle className="w-full h-full text-white" />
-          </button>
+          </motion.div>
-        </form>
+        </div>
-        <p className={`mt-4 text-center ${theme.text}`}>
+
-          Don't have an account?{' '}
+        {/* Content */}
-          <button
+        <div className="relative z-10">
-            onClick={onSwitchToSignUp}
+          <h1 className="text-white text-4xl font-bold mb-6">
-            className="text-blue-500 hover:underline"
+            welcome<br />back.
+          </h1>
+          <p className="text-gray-400 text-lg">
+            Continue your journey to better habits.
+          </p>
+        </div>
+      </div>
+
+      {/* Right Panel - Form */}
+      <div className={`w-full md:w-1/2 flex items-center justify-center p-6 md:p-24 relative ${theme.background}`}>
+        {/* Mobile Header - Added */}
+        <div className="absolute top-0 left-0 w-full p-6 md:hidden">
+          <h1 className="text-3xl font-bold mb-2">welcome back.</h1>
+          <p className={`text-gray-600 dark:text-gray-400`}>
+            Continue your journey to better habits.
+          </p>
+        </div>
+
+        {/* Mobile Background Decoration - Updated */}
+        <div className="absolute inset-0 md:hidden overflow-hidden">
+          <motion.div 
+            className="absolute top-[-30%] right-[-20%] w-[80%] h-[80%] opacity-[0.07]"
+            animate={{ 
+              rotate: 360,
+              scale: [1, 1.1, 1],
+            }}
+            transition={{ 
+              duration: 12,
+              repeat: Infinity,
+              ease: "linear" 
+            }}
           >
-            Sign Up
+            <Circle className="w-full h-full" />
-          </button>
+          </motion.div>
-        </p>
+          <motion.div 
+            className="absolute bottom-[-40%] left-[-30%] w-[90%] h-[90%] opacity-[0.05]"
+            animate={{ 
+              rotate: -360,
+              scale: [1, 1.2, 1],
+            }}
+            transition={{ 
+              duration: 15,
+              repeat: Infinity,
+              ease: "linear" 
+            }}
+          >
+            <Circle className="w-full h-full" />
+          </motion.div>
+        </div>
+
+        {/* Form Container - Updated */}
+        <div className="w-full max-w-md relative mt-24 md:mt-0">
+          <div className={`w-full p-6 md:p-8 rounded-2xl backdrop-blur-sm ${theme.cardBackground} relative z-10 
+            border border-gray-100 dark:border-gray-800 shadow-xl`}>
+            <h2 className={`text-2xl font-bold mb-6 ${theme.text} md:block hidden`}>Log In</h2>
+            {error && (
+              <div className="bg-red-50 dark:bg-red-900/30 text-red-500 px-4 py-2 rounded-lg mb-4">
+                {error}
+              </div>
+            )}
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Email"
+                  className={`w-full px-4 py-3 rounded-xl ${theme.input} transition-all duration-200 
+                    focus:ring-2 focus:ring-black dark:focus:ring-white border-gray-200 dark:border-gray-700`}
+                  required
+                />
+              </div>
+              <div>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Password"
+                  className={`w-full px-4 py-3 rounded-xl ${theme.input} transition-all duration-200 
+                    focus:ring-2 focus:ring-black dark:focus:ring-white border-gray-200 dark:border-gray-700`}
+                  required
+                />
+              </div>
+              <button
+                type="submit"
+                className={`w-full py-3 rounded-xl bg-black text-white hover:bg-gray-800 
+                  transition-all duration-200 shadow-lg hover:shadow-xl`}
+              >
+                Log In
+              </button>
+            </form>
+            <p className={`mt-6 text-center ${theme.text}`}>
+              Don't have an account?{' '}
+              <button
+                onClick={onSwitchToSignUp}
+                className="text-black dark:text-white hover:underline font-medium"
+              >
+                Sign Up
+              </button>
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/SignUp.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import { useThemeContext } from '../contexts/ThemeContext';
+import { motion } from 'framer-motion';
+import { Circle } from 'lucide-react';
 
 export function SignUp({ onSwitchToLogin }: { onSwitchToLogin: () => void }) {
   const [email, setEmail] = useState('');
@@ -14,53 +16,131 @@ export function SignUp({ onSwitchToLogin }: { onSwitchToLogin: () => void }) {
     try {
       setError('');
       await signUp(email, password);
-    } catch (error) {
+    } catch {
       setError('Failed to create an account');
     }
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
+    <div className="min-h-screen w-full flex">
-      <div className={`max-w-md w-full p-6 rounded-lg shadow-lg ${theme.cardBackground}`}>
+      <div className="hidden md:flex md:w-1/2 bg-black p-12 flex-col justify-center relative overflow-hidden">
-        <h2 className={`text-2xl font-bold mb-6 ${theme.text}`}>Sign Up</h2>
+        <div className="absolute inset-0 flex items-center justify-center opacity-20">
-        {error && <div className="text-red-500 mb-4">{error}</div>}
+          <motion.div 
-        <form onSubmit={handleSubmit} className="space-y-4">
+            className="absolute w-96 h-96"
-          <div>
+            animate={{ 
-            <input
+              rotate: 360,
-              type="email"
+              scale: [1, 1.2, 1],
-              value={email}
+            }}
-              onChange={(e) => setEmail(e.target.value)}
+            transition={{ 
-              placeholder="Email"
+              duration: 15,
-              className={`w-full px-4 py-2 rounded-lg ${theme.input}`}
+              repeat: Infinity,
-              required
+              ease: "linear" 
-            />
+            }}
-          </div>
-          <div>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Password"
-              className={`w-full px-4 py-2 rounded-lg ${theme.input}`}
-              required
-            />
-          </div>
-          <button
-            type="submit"
-            className={`w-full py-2 rounded-lg ${theme.button.primary}`}
           >
-            Sign Up
+            <Circle className="w-full h-full text-white" />
-          </button>
+          </motion.div>
-        </form>
+        </div>
-        <p className={`mt-4 text-center ${theme.text}`}>
+
-          Already have an account?{' '}
+        <div className="relative z-10">
-          <button
+          <h1 className="text-white text-4xl font-bold mb-6">
-            onClick={onSwitchToLogin}
+            track<br />your habit.
-            className="text-blue-500 hover:underline"
+          </h1>
+          <p className="text-gray-400 text-lg">
+            Build better habits, one day at a time.
+          </p>
+        </div>
+      </div>
+
+      <div className={`w-full md:w-1/2 flex items-center justify-center p-6 md:p-24 relative ${theme.background}`}>
+        <div className="absolute top-0 left-0 w-full p-6 md:hidden">
+          <h1 className="text-3xl font-bold mb-2">track your habit.</h1>
+          <p className={`text-gray-600 dark:text-gray-400`}>
+            Build better habits, one day at a time.
+          </p>
+        </div>
+
+        <div className="absolute inset-0 md:hidden overflow-hidden">
+          <motion.div 
+            className="absolute top-[-30%] right-[-20%] w-[80%] h-[80%] opacity-[0.07]"
+            animate={{ 
+              rotate: 360,
+              scale: [1, 1.1, 1],
+            }}
+            transition={{ 
+              duration: 12,
+              repeat: Infinity,
+              ease: "linear" 
+            }}
           >
-            Log In
+            <Circle className="w-full h-full" />
-          </button>
+          </motion.div>
-        </p>
+          <motion.div 
+            className="absolute bottom-[-40%] left-[-30%] w-[90%] h-[90%] opacity-[0.05]"
+            animate={{ 
+              rotate: -360,
+              scale: [1, 1.2, 1],
+            }}
+            transition={{ 
+              duration: 15,
+              repeat: Infinity,
+              ease: "linear" 
+            }}
+          >
+            <Circle className="w-full h-full" />
+          </motion.div>
+        </div>
+
+        <div className="w-full max-w-md relative mt-24 md:mt-0">
+          <div className={`w-full p-6 md:p-8 rounded-2xl backdrop-blur-sm ${theme.cardBackground} relative z-10 
+            border border-gray-100 dark:border-gray-800 shadow-xl`}>
+            <h2 className={`text-2xl font-bold mb-6 ${theme.text} md:block hidden`}>Sign Up</h2>
+            {error && (
+              <div className="bg-red-50 dark:bg-red-900/30 text-red-500 px-4 py-2 rounded-lg mb-4">
+                {error}
+              </div>
+            )}
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Email"
+                  className={`w-full px-4 py-3 rounded-xl ${theme.input} transition-all duration-200 
+                    focus:ring-2 focus:ring-black dark:focus:ring-white border-gray-200 dark:border-gray-700`}
+                  required
+                />
+              </div>
+              <div>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Password"
+                  className={`w-full px-4 py-3 rounded-xl ${theme.input} transition-all duration-200 
+                    focus:ring-2 focus:ring-black dark:focus:ring-white border-gray-200 dark:border-gray-700`}
+                  required
+                />
+              </div>
+              <button
+                type="submit"
+                className={`w-full py-3 rounded-xl bg-black text-white hover:bg-gray-800 
+                  transition-all duration-200 shadow-lg hover:shadow-xl`}
+              >
+                Create Account
+              </button>
+            </form>
+            <p className={`mt-6 text-center ${theme.text}`}>
+              Already have an account?{' '}
+              <button
+                onClick={onSwitchToLogin}
+                className="text-black dark:text-white hover:underline font-medium"
+              >
+                Log In
+              </button>
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   );