Add Enterprise App Protection (EAP) section to navigation and translations

- Introduced a new navigation link for "Enterprise App Protection" with corresponding translations in English, French, Dutch, and German.
- Added detailed descriptions, features, and troubleshooting information for the EAP feature to enhance user understanding and accessibility.

src/pages/[lang]/eap.astro

@@ -0,0 +1,122 @@
+---
+export const prerender = true;
+
+import Layout from '~/layouts/PageLayout.astro';
+import { getTranslation, supportedLanguages } from '~/i18n/translations';
+
+export async function getStaticPaths() {
+  return supportedLanguages.map((lang) => ({
+    params: { lang },
+  }));
+}
+
+const { lang } = Astro.params;
+if (!supportedLanguages.includes(lang)) {
+  return Astro.redirect('/en/eap');
+}
+
+const t = getTranslation(lang);
+const eap = t.eap;
+
+const metadata = {
+  title: eap.title,
+  description: eap.intro,
+};
+---
+
+<Layout metadata={metadata}>
+  <div class="max-w-3xl mx-auto px-4 py-8">
+    <h1 class="text-3xl font-bold mb-4">{eap.title}</h1>
+    <p class="mb-6 text-lg">{eap.intro}</p>
+
+    <h2 class="text-2xl font-semibold mb-4">{eap.whatItDoes.title}</h2>
+    <ul class="list-disc list-inside mb-4 space-y-2">
+      {eap.whatItDoes.items.map((item) => (
+        <li class="text-gray-700">{item}</li>
+      ))}
+    </ul>
+    <figure class="mb-8">
+      <img src={eap.screenshots.mainImg} alt={eap.whatItDoes.screenshot} class="rounded shadow-lg border border-gray-200 mx-auto" />
+      <figcaption class="text-center text-gray-500 text-sm mt-2">{eap.whatItDoes.screenshot}</figcaption>
+    </figure>
+
+    <h2 class="text-2xl font-semibold mb-4">{eap.howItWorks.title}</h2>
+    <ol class="list-decimal list-inside mb-8 space-y-2">
+      {eap.howItWorks.steps.map((step) => (
+        <li>{step}</li>
+      ))}
+    </ol>
+
+    <h2 class="text-2xl font-semibold mb-4">{eap.privacy.title}</h2>
+    <ul class="list-disc list-inside mb-8 space-y-2">
+      {eap.privacy.items.map((item) => (
+        <li>{item}</li>
+      ))}
+    </ul>
+
+    <h2 class="text-2xl font-semibold mb-4">{eap.notDo.title}</h2>
+    <ul class="list-disc list-inside mb-8 space-y-2">
+      {eap.notDo.items.map((item) => (
+        <li>{item}</li>
+      ))}
+    </ul>
+
+    <h2 class="text-2xl font-semibold mb-4">{eap.trustedBlocked.title}</h2>
+    <ol class="list-decimal list-inside mb-8 space-y-2">
+      {eap.trustedBlocked.steps.map((step) => (
+        <li>{step}</li>
+      ))}
+    </ol>
+
+    <h2 class="text-2xl font-semibold mb-4">{eap.safeBrowsing.title}</h2>
+    <p class="mb-2">{eap.safeBrowsing.content}</p>
+    <a href={eap.safeBrowsing.reportLink} target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">{eap.safeBrowsing.report}</a>
+
+    <h2 class="text-2xl font-semibold mb-4">{eap.audience.title}</h2>
+    <ul class="list-disc list-inside mb-8 space-y-2">
+      {eap.audience.items.map((item) => (
+        <li>{item}</li>
+      ))}
+    </ul>
+
+    <h2 class="text-2xl font-semibold mb-4">{eap.requirements.title}</h2>
+    <ul class="list-disc list-inside mb-8 space-y-2">
+      {eap.requirements.items.map((item) => (
+        <li>{item}</li>
+      ))}
+    </ul>
+
+    <h2 class="text-2xl font-semibold mb-4">{eap.troubleshooting.title}</h2>
+    <strong>{eap.troubleshooting.notFlagged}</strong>
+    <ul class="list-disc list-inside mb-4 ml-4">
+      {eap.troubleshooting.notFlaggedReasons.map((item) => (
+        <li>{item}</li>
+      ))}
+    </ul>
+    <strong>{eap.troubleshooting.falsePositive}</strong>
+    <ul class="list-disc list-inside mb-8 ml-4">
+      {eap.troubleshooting.falsePositiveReasons.map((item) => (
+        <li>{item}</li>
+      ))}
+    </ul>
+
+    <h2 class="text-2xl font-semibold mb-4">{eap.updates.title}</h2>
+    <ul class="list-disc list-inside mb-8 space-y-2">
+      {eap.updates.features.map((item) => (
+        <li>{item}</li>
+      ))}
+    </ul>
+
+    <h2 class="text-2xl font-semibold mb-4">Screenshots</h2>
+    <div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
+      <figure>
+        <img src={eap.screenshots.settingsImg} alt={eap.screenshots.settings} class="rounded shadow-lg border border-gray-200 mx-auto" />
+        <figcaption class="text-center text-gray-500 text-sm mt-2">{eap.screenshots.settings}</figcaption>
+      </figure>
+      <figure>
+        <img src={eap.screenshots.popupImg} alt={eap.screenshots.popup} class="rounded shadow-lg border border-gray-200 mx-auto" />
+        <figcaption class="text-center text-gray-500 text-sm mt-2">{eap.screenshots.popup}</figcaption>
+      </figure>
+    </div>
+  </div>
+</Layout>