page.tsx

Go to the documentation of this file.

"use client";
import Link from "next/link";
import Image from "next/image";
 
export default function LandingPage() {
  return (
    <div className="relative min-h-screen w-full 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="Landing Background" 
          fill
          className="object-cover"
          priority
          quality={85}
        />
        
        {/* Animated floating elements overlay */}
        <div className="absolute inset-0 overflow-hidden">
          {/* Colorful floating elements to add movement */}
          <div className="floating-element large absolute top-20 left-10 w-24 h-16 bg-brand/15 rounded-full animate-float-slow blur-sm"></div>
          <div className="floating-element large absolute top-40 right-20 w-20 h-20 bg-green-500/15 rounded-lg animate-float-medium rotate-12 blur-sm"></div>
          <div className="floating-element large absolute bottom-32 left-1/4 w-28 h-12 bg-purple-500/15 rounded-full animate-float-slow blur-sm"></div>
          <div className="floating-element large absolute bottom-20 right-1/3 w-16 h-16 bg-cyan-500/15 rounded-lg animate-float-fast rotate-45 blur-sm"></div>
          
          {/* Medium floating elements */}
          <div className="floating-element medium absolute top-60 left-1/3 w-14 h-10 bg-yellow-500/20 rounded-lg animate-float-medium blur-sm"></div>
          <div className="floating-element medium absolute top-80 right-1/4 w-12 h-12 bg-red-500/20 rounded-full animate-float-slow blur-sm"></div>
          <div className="floating-element medium absolute bottom-60 left-1/2 w-16 h-8 bg-indigo-500/20 rounded-lg animate-float-fast rotate-12 blur-sm"></div>
          
          {/* Small floating elements */}
          <div className="floating-element small absolute top-32 left-2/3 w-8 h-8 bg-orange-500/25 rounded-full animate-float-medium blur-sm"></div>
          <div className="floating-element small absolute top-72 left-1/6 w-6 h-6 bg-pink-500/25 rounded-full animate-float-fast blur-sm"></div>
          <div className="floating-element small absolute bottom-48 right-1/6 w-10 h-6 bg-teal-500/25 rounded-lg animate-float-slow rotate-45 blur-sm"></div>
        </div>
      </div>
 
      {/* Very light overlay for text readability */}
      <div className="absolute inset-0 bg-black/10" />
      
      {/* Main content */}
      <main className="relative z-20 flex flex-col items-center justify-center w-full h-full text-center px-4 max-w-6xl mx-auto">
        {/* Everyday POS Logo */}
        <div className="mb-8">
          <Image 
            src="/images/everyday-pos-logo.png" 
            alt="Everyday POS" 
            width={400} 
            height={120} 
            className="logo-glow" 
            priority
          />
        </div>
 
        {/* Hero Text */}
        <h1 className="text-5xl lg:text-6xl font-extrabold text-white mb-6 drop-shadow-2xl leading-tight">
          <span className="bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
            Power Your Print Business
          </span>
        </h1>
        
        <p className="text-xl lg:text-2xl text-white mb-8 max-w-3xl mx-auto drop-shadow-lg leading-relaxed font-light">
          Professional POS system designed for cartridge retailers, print shops, and office supply stores. 
          Streamline sales, manage inventory, and grow your business.
        </p>
 
        {/* Feature highlights */}
        <div className="flex flex-wrap justify-center gap-6 mb-8 text-white/90">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-green-500/80 rounded-full flex items-center justify-center">
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
              </svg>
            </div>
            <span>Inventory Management</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-brand/80 rounded-full flex items-center justify-center">
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
              </svg>
            </div>
            <span>Fast Sales Processing</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-purple-500/80 rounded-full flex items-center justify-center">
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
              </svg>
            </div>
            <span>Customer Management</span>
          </div>
        </div>
 
        {/* CTA Button */}
        <Link href="/pages/login">
          <button className="group relative px-8 py-4 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-bold rounded-full text-lg shadow-2xl transition-all duration-300 transform hover:scale-105 hover:shadow-blue-500/25">
            <span className="relative z-10">Get Started Now</span>
            {/* Button glow effect */}
            <div className="absolute inset-0 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 opacity-0 group-hover:opacity-50 blur transition-opacity duration-300"></div>
          </button>
        </Link>
        
        <p className="text-white/70 text-sm mt-4">No setup fees • 30-day free trial</p>
      </main>
 
      {/* Custom CSS for animations */}
      <style jsx>{`
        @keyframes float-slow {
          0%, 100% { transform: translateY(0px) rotate(0deg); }
          50% { transform: translateY(-20px) rotate(5deg); }
        }
        
        @keyframes float-medium {
          0%, 100% { transform: translateY(0px) rotate(0deg); }
          33% { transform: translateY(-15px) rotate(3deg); }
          66% { transform: translateY(-5px) rotate(-2deg); }
        }
        
        @keyframes float-fast {
          0%, 100% { transform: translateY(0px) rotate(0deg); }
          25% { transform: translateY(-10px) rotate(2deg); }
          50% { transform: translateY(-5px) rotate(-1deg); }
          75% { transform: translateY(-15px) rotate(3deg); }
        }
        
        .animate-float-slow {
          animation: float-slow 8s ease-in-out infinite;
        }
        
        .animate-float-medium {
          animation: float-medium 6s ease-in-out infinite;
        }
        
        .animate-float-fast {
          animation: float-fast 4s ease-in-out infinite;
        }
        
        .logo-glow {
          filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3));
        }
        
        .floating-element {
          backdrop-filter: blur(1px);
        }
        
        .floating-element.large {
          animation-delay: 0s;
        }
        
        .floating-element.medium {
          animation-delay: 1s;
        }
        
        .floating-element.small {
          animation-delay: 2s;
        }
        
        /* Responsive adjustments */}
      `}</style>
    </div>
  );
}