53 lines
2 KiB
JavaScript
53 lines
2 KiB
JavaScript
|
import Link from 'next/link';
|
||
|
|
|
||
|
|
export default function LoginCTA({ message = "Sign up to create your own collections and more!" }) {
|
||
|
|
return (
|
||
|
|
<div className="fixed bottom-6 right-6 z-50">
|
||
|
|
<div
|
||
|
|
className="rounded-2xl p-4 shadow-2xl border max-w-sm"
|
||
|
|
style={{
|
||
|
|
backgroundColor: 'var(--bg-primary)',
|
||
|
|
borderColor: 'var(--border)',
|
||
|
|
backdropFilter: 'blur(10px)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="flex items-start space-x-3">
|
||
|
|
<div className="flex-shrink-0">
|
||
|
|
<div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
|
||
|
|
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<p className="text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||
|
|
{message}
|
||
|
|
</p>
|
||
|
|
<div className="flex space-x-2">
|
||
|
|
<Link
|
||
|
|
href="/signup"
|
||
|
|
className="px-3 py-1.5 text-xs font-medium rounded-lg transition-all duration-200 hover:opacity-90"
|
||
|
|
style={{
|
||
|
|
backgroundColor: 'var(--accent-ember)',
|
||
|
|
color: 'white'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Sign Up Free
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href="/login"
|
||
|
|
className="px-3 py-1.5 text-xs font-medium rounded-lg border transition-all duration-200 hover:opacity-80"
|
||
|
|
style={{
|
||
|
|
color: 'var(--text-primary)',
|
||
|
|
borderColor: 'var(--border)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Sign In
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|