kit-ui/components/Logo.tsx

'use client';

import { motion } from 'framer-motion';

export default function Logo({ className = '', size = 120 }: { className?: string; size?: number }) {
  return (
    <motion.svg
      width={size}
      height={size}
      viewBox="0 0 200 200"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      initial={{ opacity: 0, scale: 0.5, rotate: -180 }}
      animate={{ opacity: 1, scale: 1, rotate: 0 }}
      transition={{ duration: 1, ease: 'easeOut' }}
    >
      {/* Toolbox base */}
      <motion.rect
        x="40"
        y="80"
        width="120"
        height="80"
        rx="8"
        stroke="url(#gradient1)"
        strokeWidth="4"
        fill="rgba(139, 92, 246, 0.1)"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
        transition={{ duration: 1.5, ease: 'easeInOut' }}
      />

      {/* Toolbox handle */}
      <motion.path
        d="M 80 80 Q 100 40, 120 80"
        stroke="url(#gradient1)"
        strokeWidth="4"
        fill="none"
        strokeLinecap="round"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
        transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
      />

      {/* Wrench */}
      <motion.g
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 0.8 }}
      >
        <path
          d="M 70 110 L 70 130"
          stroke="url(#gradient2)"
          strokeWidth="5"
          strokeLinecap="round"
        />
        <circle cx="70" cy="105" r="6" fill="url(#gradient2)" />
      </motion.g>

      {/* Pencil */}
      <motion.g
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 1 }}
      >
        <path
          d="M 100 110 L 100 135"
          stroke="url(#gradient3)"
          strokeWidth="5"
          strokeLinecap="round"
        />
        <path
          d="M 95 110 L 100 105 L 105 110"
          fill="url(#gradient3)"
        />
      </motion.g>

      {/* Brush */}
      <motion.g
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 1.2 }}
      >
        <rect
          x="127"
          y="110"
          width="6"
          height="20"
          fill="url(#gradient4)"
          rx="1"
        />
        <path
          d="M 125 110 L 130 105 L 135 110"
          fill="url(#gradient4)"
        />
      </motion.g>

      {/* Gradient definitions */}
      <defs>
        <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#8b5cf6" />
          <stop offset="100%" stopColor="#6366f1" />
        </linearGradient>
        <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#2dd4bf" />
          <stop offset="100%" stopColor="#06b6d4" />
        </linearGradient>
        <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#f59e0b" />
          <stop offset="100%" stopColor="#ef4444" />
        </linearGradient>
        <linearGradient id="gradient4" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#10b981" />
          <stop offset="100%" stopColor="#14b8a6" />
        </linearGradient>
      </defs>
    </motion.svg>
  );
}