Function SizeGraphic

components/Features.tsx:59–102

()

};

const SizeGraphic = () => (
  <div className="relative group">
    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-pink-300/30 rounded-full blur-[60px] pointer-events-none"></div>

    <div className="relative w-80 bg-white rounded-[2rem] shadow-2xl shadow-pink-200/40 border border-white p-8 flex flex-col gap-6 transform transition-transform duration-500 hover:scale-105 hover:-rotate-1 z-10">
      <div className="absolute -top-4 -right-4 z-20">
        <div className="bg-white py-2 px-4 rounded-xl shadow-lg border-2 border-slate-100 flex items-center gap-2 transform rotate-6 group-hover:rotate-12 transition-transform duration-300">
          <div className="bg-pink-50 p-1 rounded-md text-pink-400">
            <TrendingDown className="w-3.5 h-3.5" strokeWidth={3} />
          </div>
          <span className="font-bold text-slate-700 text-xs uppercase tracking-wide whitespace-nowrap">
            -65% Size
          </span>
        </div>
      </div>

      <div className="w-full aspect-video bg-pink-50/50 rounded-2xl flex items-center justify-center relative overflow-hidden">
        <ImageIcon className="w-16 h-16 text-pink-300 transition-transform group-hover:scale-110 duration-500" />
        <div className="absolute bottom-3 left-3 bg-white/80 backdrop-blur-sm px-2 py-1 rounded text-[10px] font-black uppercase tracking-wider text-pink-400 shadow-sm">
          JPG
        </div>
      </div>

      <div className="flex items-end justify-between">
        <div>
          <div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">
            Before
          </div>
          <div className="text-base font-bold text-slate-400 line-through decoration-pink-300/50 decoration-2">
            2.4 MB
          </div>
        </div>
        <div className="text-right">
          <div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider mb-1">
            After
          </div>
          <div className="text-4xl font-black text-pink-400 leading-none">
            850<span className="text-base ml-0.5 text-pink-300">KB</span>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const BatchGraphic = () => (
  <div className="relative group">