page.tsx

Go to the documentation of this file.

"use client";
import Image from "next/image";
import dynamic from "next/dynamic";
const LoginForm = dynamic(() => import("@/components/LoginForm"), { ssr: false });
 
export default function LoginPage() {
  return (
    <div className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0 w-full h-full z-0">
        <Image 
          src="/images/landing-page-background.jpg" 
          alt="Login Background" 
          fill
          className="object-cover"
          priority
          quality={85}
        />
      </div>
      
      {/* Background Pattern */}
      <div className="absolute inset-0">
        <div className="absolute inset-0 bg-black/30" />
        <div className="absolute top-0 left-0 w-full h-full">
          <div className="absolute top-10 left-10 w-32 h-32 bg-emerald-400/10 rounded-full blur-xl animate-pulse" />
          <div className="absolute top-20 right-20 w-40 h-40 bg-teal-400/10 rounded-full blur-xl animate-pulse delay-1000" />
          <div className="absolute bottom-20 left-20 w-28 h-28 bg-green-400/10 rounded-full blur-xl animate-pulse delay-500" />
          <div className="absolute bottom-10 right-10 w-36 h-36 bg-cyan-400/10 rounded-full blur-xl animate-pulse delay-1500" />
        </div>
      </div>
      
      <main className="relative z-10 flex flex-col items-center justify-center w-full h-full px-4">
        <div className="rounded-2xl shadow-2xl max-w-md w-full p-8" style={{ background: 'white', border: '1px solid rgba(0, 0, 0, 0.1)' }}>
          {/* Logo */}
          <div className="text-center mb-8">
            <div className="mx-auto w-32 h-20 relative mb-4">
              <Image 
                src="/images/everyday-pos-logo.png" 
                alt="EverydayPOS" 
                fill
                className="object-contain"
                priority
              />
            </div>
            <h1 className="text-3xl font-extrabold mb-2" style={{ color: '#1f2937' }}>EverydayPOS</h1>
            <p style={{ color: '#6b7280' }}>Welcome back! Please sign in to continue</p>
          </div>
          <LoginForm />
        </div>
        
        {/* Footer */}
        <div className="mt-8 text-center">
          <p className="text-sm" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>© 2024 EverydayPOS. All rights reserved.</p>
          <p className="text-xs mt-2" style={{ color: 'rgba(255, 255, 255, 0.7)' }}>Powered by Fieldpine</p>
        </div>
      </main>
    </div>
  );
}