Work in progress 'Why not Essential' texts, only available in develop…

…ment environment; not translated

components/NumberedList.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col gap-4" v-for="(item, index) in data">
+    <div class="flex flex-row gap-2 items-center">
+      <span class="internalFont text-4xl sm:text-5xl tracking-[-1rem]">
+        {{ index + 1 }}.
+      </span>
+      <span class="text-4xl sm:text-5xl font-bold"> {{ item.title }} </span>
+    </div>
+    <span class="text-xl" v-for="paragraph in item.body">
+      {{ paragraph }}
+    </span>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  data: Array,
+})
+</script>

nuxt.config.ts

@@ -71,4 +71,11 @@ export default defineNuxtConfig({
   css: ["~/assets/css/fonts.css"],
 
   compatibilityDate: "2024-07-13",
+
+  runtimeConfig: {
+    public: {
+      dev: process.env.NODE_ENV === "production" ? false : true,
+      reasonsFlag: false,
+    },
+  },
 })

package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@crowdin/cli": "^4.0.0",
     "@nuxtjs/i18n": "^8.3.1",
     "vue": "^3.4.19",
     "vue-router": "^4.2.5"

pages/alternatives.vue

@@ -39,7 +39,7 @@ const alternatives = {
   Modpacks: {
     Vital: {
       description: texts.modpacks.vital,
-      icon: "https://cdn.modrinth.com/data/Fecmmdly/48f79c02d315b13bddad245b7a3acd439586fd2d.png",
+      icon: "https://cdn.modrinth.com/data/Fecmmdly/1a31487f238f354268d34d5f51ced1c1900d0106.png",
       links: {
         Modrinth: "https://modrinth.com/modpack/vital",
       },

pages/experiments.vue

@@ -29,6 +29,13 @@
           </option>
         </NESelect>
       </div>
+      <div
+        class="flex flex-col gap-2 border-2 rounded-xl p-5 border-[var(--text-colour)]"
+      >
+        <span class="flex items-center gap-2 font-bold text-lg">
+          <LucideShieldQuestion /> Why not Essential?
+        </span>
+      </div>
     </div>
   </div>
 </template>

pages/index.vue

@@ -11,15 +11,34 @@
     </span>
     <!-- THE WORD 'MINECRAFT' AND THE 'NOTESSENTIAL' NAME SHOULD NOT BE LOCALISED. -->
 
-    <Link to="/" show-icon>test.com</Link>
-
     <p class="text-2xl">
       {{ $t("landing.reason") }}
     </p>
 
     <NEButton class="w-fit sm:px-20 px-15 py-8" to="/alternatives">
       <LucideArrowUpRight /> {{ $t("landing.buttons.alternatives") }}
     </NEButton>
+
+    <PageHero
+      v-if="runtimeConfig.public.dev === true"
+      title="WHY?"
+      subTitle="Many people wonder why not to use Essential. We hope to make the reasons
+      clear."
+    />
+
+    <NumberedList v-if="runtimeConfig.public.dev === true" :data="reasonsWhy" />
+
+    <span v-if="runtimeConfig.public.dev === true">
+      In case it wasn't clear, don't harrass any people affiliated with
+      Essential. We simply find that the flaws with Essential make it
+      undesirable in most modded Minecraft circumstances. We do not have any
+      conflicts with anybody at Essential.
+    </span>
+
+    <span v-if="runtimeConfig.public.dev === true" class="flex flex-row gap-2"
+      >with<LucideHeart class="stroke-[var(--brand-blue)]" /> from all at the
+      NotEssential team
+    </span>
   </div>
 </template>
 
@@ -30,6 +49,33 @@ if (Math.floor(Math.random() * 10000) === 0) {
   minecraftText.value = "MINCERAFT"
 }
 
+const runtimeConfig = useRuntimeConfig()
+
+const reasonsWhy = [
+  {
+    title: "Incompatibilty",
+    body: [
+      "Essential's large-sweeping modifications to the game cause many side effects, mainly incompatibility with other mods.",
+      "While Essential's desision to go source-available (not the same as open-source) may help improve compatibility issues, it's too soon to tell.",
+    ],
+  },
+  {
+    title: "Cluttered Interface",
+    body: [
+      "Essential's interface has many options and buttons. These tend to lead to severe clutter in certain parts of the game.",
+      "Staying on the default configuration, the amount of screen space taken up by Essential makes the game cumbersome to navigate.",
+    ],
+  },
+  {
+    title: "Security and Privacy",
+    body: [],
+  },
+  {
+    title: "Microtransactions",
+    body: [],
+  },
+]
+
 useSeoMeta({
   title: "Home",
   description: