page.tsx

Go to the documentation of this file.

"use client";
 
import Link from "next/link";
import { useState } from 'react';
import Image from "next/image";
 
export default function LandingPage() {
  const [imageLoaded, setImageLoaded] = useState(false);
  const [imageError, setImageError] = useState(false);
 
  return (
    <div className="relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-gradient-to-br from-green-800 via-green-700 to-green-600">
      {/* 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 transition-opacity duration-1000"
          priority
          quality={85}
          onLoad={() => setImageLoaded(true)}
          onError={() => setImageError(true)}
          style={{
            opacity: imageLoaded && !imageError ? 1 : 0
          }}
        />
        
        {/* Fallback gradient background when image fails to load */}
        {!imageLoaded && (
          <div className="absolute inset-0 bg-gradient-to-br from-emerald-600 via-green-700 to-teal-800" />
        )}
        
        {/* 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-blue-500/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 z-10 bg-black/5" />
      
      {/* 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 logo-glow">
          <Image 
            src="/images/everyday-pos-logo.png" 
            alt="Everyday POS" 
            width={400} 
            height={120} 
            className="drop-shadow-2xl" 
            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-blue-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>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>
    </div>
  );
}