CartridgeWorldLogo.tsx

Go to the documentation of this file.

interface CartridgeWorldLogoProps {
  className?: string;
  width?: number;
  height?: number;
}
 
export default function CartridgeWorldLogo({ 
  className = "", 
  width = 320, 
  height = 96 
}: CartridgeWorldLogoProps) {
  return (
    <div className={`relative ${className}`}>
      <svg 
        width={width} 
        height={height} 
        viewBox="0 0 320 96" 
        fill="none" 
        xmlns="http://www.w3.org/2000/svg"
        className="filter drop-shadow-lg"
      >
        {/* Background */}
        <rect 
          width="320" 
          height="96" 
          rx="12" 
          fill="url(#backgroundGradient)" 
          fillOpacity="0.95"
        />
        
        {/* Cartridge Icon */}
        <g transform="translate(16, 20)">
          {/* Cartridge body */}
          <rect x="0" y="12" width="24" height="32" rx="2" fill="url(#cartridgeGradient)" />
          {/* Cartridge top */}
          <rect x="2" y="8" width="20" height="8" rx="1" fill="#1e40af" />
          {/* Cartridge label */}
          <rect x="4" y="16" width="16" height="4" rx="1" fill="white" fillOpacity="0.8" />
          <rect x="4" y="24" width="12" height="2" rx="1" fill="white" fillOpacity="0.6" />
        </g>
        
        {/* "CARTRIDGE" text */}
        <text 
          x="60" 
          y="45" 
          fontSize="28" 
          fontWeight="bold" 
          fill="url(#textGradient1)"
          fontFamily="Arial, sans-serif"
          letterSpacing="2px"
        >
          CARTRIDGE
        </text>
        
        {/* "WORLD" text */}
        <text 
          x="60" 
          y="72" 
          fontSize="24" 
          fontWeight="bold" 
          fill="url(#textGradient2)"
          fontFamily="Arial, sans-serif"
          letterSpacing="1.5px"
        >
          WORLD
        </text>
        
        {/* "EverydayPOS" subtitle */}
        <text 
          x="210" 
          y="60" 
          fontSize="12" 
          fontWeight="normal" 
          fill="#4b5563"
          fontFamily="Arial, sans-serif"
          letterSpacing="1px"
        >
          EverydayPOS
        </text>
        
        {/* Decorative elements */}
        <circle cx="280" cy="30" r="3" fill="url(#accentGradient1)" />
        <circle cx="290" cy="40" r="2" fill="url(#accentGradient2)" />
        <circle cx="285" cy="50" r="2.5" fill="url(#accentGradient3)" />
        
        {/* Gradients */}
        <defs>
          <linearGradient id="backgroundGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#f8fafc" />
            <stop offset="100%" stopColor="#e2e8f0" />
          </linearGradient>
          
          <linearGradient id="cartridgeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#3b82f6" />
            <stop offset="100%" stopColor="#1d4ed8" />
          </linearGradient>
          
          <linearGradient id="textGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#1f2937" />
            <stop offset="100%" stopColor="#374151" />
          </linearGradient>
          
          <linearGradient id="textGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#1e40af" />
            <stop offset="100%" stopColor="#3b82f6" />
          </linearGradient>
          
          <linearGradient id="accentGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#10b981" />
            <stop offset="100%" stopColor="#047857" />
          </linearGradient>
          
          <linearGradient id="accentGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#8b5cf6" />
            <stop offset="100%" stopColor="#7c3aed" />
          </linearGradient>
          
          <linearGradient id="accentGradient3" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#f59e0b" />
            <stop offset="100%" stopColor="#d97706" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  );
}