diff --git a/app/globals.css b/app/globals.css index c31cca3..0ec7160 100644 --- a/app/globals.css +++ b/app/globals.css @@ -232,4 +232,74 @@ body { body { @apply bg-background text-foreground antialiased; } + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + } + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } +} + + + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } } diff --git a/components/ui/sign-in.tsx b/components/ui/sign-in.tsx new file mode 100644 index 0000000..7ad9430 --- /dev/null +++ b/components/ui/sign-in.tsx @@ -0,0 +1,321 @@ +import React, { useState, useEffect } from 'react'; +import { Eye, EyeOff, LogIn } from 'lucide-react'; + +const AnimatedSignIn: React.FC = () => { + const [theme, setTheme] = useState<'light' | 'dark'>('light'); + const [showPassword, setShowPassword] = useState(false); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [isLoading, setIsLoading] = useState(false); + const [mounted, setMounted] = useState(false); + + // Animation states + const [formVisible, setFormVisible] = useState(false); + + useEffect(() => { + setMounted(true); + setTimeout(() => setFormVisible(true), 300); + }, []); + + const toggleTheme = () => { + setTheme(theme === 'light' ? 'dark' : 'light'); + }; + + const handleSignIn = (e: React.FormEvent) => { + e.preventDefault(); + setIsLoading(true); + + // Simulate API call + setTimeout(() => { + console.log('Sign in attempt with:', { email, password }); + setIsLoading(false); + }, 1500); + }; + + // Only show the component once mounted to avoid hydration issues + if (!mounted) return null; + + return ( +
+
+
+ + {/* Theme toggle */} + + +
+ {/* Left side - Statistics and Images Collage */} +
+
+ {/* Top left - Person working */} +
+ Person working +
+ + {/* Top right - Orange stat */} +
+

41%

+

of recruiters say entry-level positions are the hardest to fill.

+
+ + {/* Middle left - Person at computer */} +
+ Person at computer +
+ + {/* Middle right - Office space */} +
+ Office space +
+ + {/* Bottom left - Green stat */} +
+

76%

+

of hiring managers admit attracting the right job candidates is their greatest challenge.

+
+ + {/* Bottom right - Library */} +
+ Desk setup +
+
+
+ + {/* Right side - Sign in form */} +
+
+

+ Don't have an account? + + Sign up + +

+
+ +
+

+ Sign in to Jobsly +

+

+ Welcome to Jobsly, please enter your login details below to using the app. +

+
+ +
+
+ +
+ setEmail(e.target.value)} + className={`block w-full rounded-md border py-3 px-4 focus:outline-none focus:ring-2 sm:text-sm ${ + theme === 'dark' + ? 'bg-slate-700 border-slate-600 text-white placeholder:text-gray-400 focus:ring-blue-500' + : 'bg-white border-gray-300 text-gray-900 placeholder:text-gray-400 focus:ring-blue-500' + }`} + placeholder="your.email@example.com" + required + /> +
+
+ +
+ +
+ setPassword(e.target.value)} + className={`block w-full rounded-md border py-3 px-4 pr-10 focus:outline-none focus:ring-2 sm:text-sm ${ + theme === 'dark' + ? 'bg-slate-700 border-slate-600 text-white placeholder:text-gray-400 focus:ring-blue-500' + : 'bg-white border-gray-300 text-gray-900 placeholder:text-gray-400 focus:ring-blue-500' + }`} + placeholder="••••••••" + required + /> + +
+
+ + + + + +
+
+ OR +
+
+ + +
+
+
+
+
+
+ ); +}; + +export { AnimatedSignIn }; diff --git a/tailwind.config.ts b/tailwind.config.ts index f297955..8dfd3b5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,7 +1,7 @@ import type { Config } from 'tailwindcss' const config: Config = { - darkMode: 'class', + darkMode: ['class', 'class'], content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}',