Function Features

components/Features.tsx:152–208

()

);

export const Features = () => {
  return (
    <div className="relative z-10 bg-rainbow-gradient">
      <div className="absolute top-0 left-0 w-full overflow-hidden leading-none z-20">
        <svg
          className="relative block w-[110%] -left-[5%] h-[60px] md:h-[120px] text-gleam-dark fill-current rotate-180"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 1200 120"
          preserveAspectRatio="none"
          aria-hidden="true"
        >
          <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"></path>
        </svg>
      </div>

      <div className="pt-24 pb-32 border-t border-white/5 relative z-10">
        <div className="max-w-7xl mx-auto">
          <FeatureRow
            title="Small."
            description="Smaller images mean faster load times. Reduce file size by up to 80% without losing quality."
            graphic={<SizeGraphic />}
            align="left"
            colorClass="text-pink-400"
          />

          <FeatureRow
            title="Simple."
            description="Drag, drop, done. Process hundreds of images at once in seconds."
            graphic={<BatchGraphic />}
            align="right"
            colorClass="text-violet-400"
          />

          <FeatureRow
            title="Private."
            description="Your photos never leave your device. No servers, no clouds, no tracking."
            graphic={<PrivacyGraphic />}
            align="left"
            colorClass="text-emerald-400"
          />
        </div>
      </div>

      <div className="absolute bottom-0 left-0 w-full overflow-hidden leading-none z-20">
        <svg
          className="relative block w-[110%] -left-[5%] h-[50px] md:h-[80px] text-gleam-dark fill-current opacity-10"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 1200 120"
          preserveAspectRatio="none"
          aria-hidden="true"
        >
          <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z"></path>
        </svg>
      </div>
    </div>
  );
};