PrivyDrop/frontend/components/web/KeyFeatures.tsx

import Image from "next/image";
import type { Messages } from "@/types/messages";

interface PageContentProps {
  messages: Messages;
}

export default function KeyFeatures({ messages }: PageContentProps) {
  return (
    <section className="mb-12">
      <h2 className="text-3xl font-semibold mb-6">
        {messages.text.KeyFeatures.h2}
      </h2>
      <div className="space-y-6">
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image src="/lock.png" alt="Icon" width={80} height={80} />
            <span className="ml-6">{messages.text.KeyFeatures.h3_1}</span>
          </h3>
          <p>{messages.text.KeyFeatures.h3_1_P}</p>
        </div>
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image src="/teamwork.png" alt="Icon" width={80} height={80} />
            <span className="ml-6">{messages.text.KeyFeatures.h3_2}</span>
          </h3>
          <p>{messages.text.KeyFeatures.h3_2_P}</p>
        </div>
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image src="/rocket.png" alt="Icon" width={80} height={80} />
            <span className="ml-6">{messages.text.KeyFeatures.h3_3}</span>
          </h3>
          <p>{messages.text.KeyFeatures.h3_3_P}</p>
        </div>
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image src="/fresh-air.png" alt="Icon" width={80} height={80} />
            <span className="ml-6">{messages.text.KeyFeatures.h3_4}</span>
          </h3>
          <p>{messages.text.KeyFeatures.h3_4_P}</p>
        </div>
        <div>
          <h3 className="text-xl font-semibold mb-2 flex items-center">
            <Image src="/planet-earth.png" alt="Icon" width={80} height={80} />
            <span className="ml-6">{messages.text.KeyFeatures.h3_5}</span>
          </h3>
          <p>{messages.text.KeyFeatures.h3_5_P}</p>
        </div>
      </div>
    </section>
  );
}