falak-app-duo 1.1.2 → 1.1.3

package/bin/falak-app-duo

@@ -13,13 +13,76 @@ import gradient from "gradient-string";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const TEMPLATE_DIR = path.join(__dirname, "..", "templates", "default");
 
+const LANGUAGE_CHOICES = [
+  { title: "العربية (Arabic) \u2014 the RTL default", value: "ar", selected: true },
+  { title: "Español (Spanish)", value: "es" },
+  { title: "Deutsch (German)", value: "de" },
+  { title: "Français (French)", value: "fr" },
+  { title: "Русский (Russian)", value: "ru" },
+  { title: "Italiano (Italian)", value: "it" },
+];
+
+const LOCALE_LABELS = {
+  en: "English",
+  ar: "العربية",
+  es: "Español",
+  de: "Deutsch",
+  fr: "Français",
+  ru: "Русский",
+  it: "Italiano",
+};
+
+const EXTRA_LOCALE_FILES = ["ar.json", "de.json", "es.json", "fr.json", "it.json", "ru.json"];
+
+function buildI18nModule(locales, defaultLocale) {
+  const ordered = ["ar", "en", "es", "de", "fr", "ru", "it"].filter((c) => locales.includes(c));
+  const lines = [];
+  lines.push('import { createI18n } from "vue-i18n";');
+  for (const code of ordered) {
+    lines.push(`import ${code} from "./locales/${code}.json";`);
+  }
+  lines.push("");
+  lines.push("export const SUPPORTED_LOCALES = [");
+  for (const code of ordered) {
+    lines.push(`  { code: "${code}", label: "${LOCALE_LABELS[code]}" },`);
+  }
+  lines.push("];");
+  lines.push("");
+  lines.push('const STORAGE_KEY = "falak_locale";');
+  lines.push("const stored = localStorage.getItem(STORAGE_KEY);");
+  lines.push(
+    `const savedLocale = SUPPORTED_LOCALES.some((l) => l.code === stored) ? stored : "${defaultLocale}";`
+  );
+  lines.push("");
+  lines.push("const i18n = createI18n({");
+  lines.push("  legacy: false,");
+  lines.push("  locale: savedLocale,");
+  lines.push('  fallbackLocale: "en",');
+  lines.push(`  messages: { ${ordered.join(", ")} },`);
+  lines.push("});");
+  lines.push("");
+  lines.push("export function setLocale(locale) {");
+  lines.push("  i18n.global.locale.value = locale;");
+  lines.push("  localStorage.setItem(STORAGE_KEY, locale);");
+  lines.push("  document.documentElement.lang = locale;");
+  lines.push('  document.documentElement.dir = locale === "ar" ? "rtl" : "ltr";');
+  lines.push("}");
+  lines.push("");
+  lines.push("// Apply on load");
+  lines.push("setLocale(savedLocale);");
+  lines.push("");
+  lines.push("export default i18n;");
+  lines.push("");
+  return lines.join("\n");
+}
+
 const program = new Command();
 program
   .name("falak-app")
   .description("Scaffold a Vue 3 app with Ably, Brevo, AES-256 and a Laravel API client baked in.")
   .argument("[project-name]", "Directory to create the project in")
   .option("-y, --yes", "Skip prompts and use defaults (all services enabled)")
-  .option("--no-rtl", "Disable Arabic/RTL default (English/LTR) instead")
+  .option("--no-rtl", "Exclude Arabic/RTL (English or your chosen LTR languages only)")
   .parse(process.argv);
 
 const [argProjectName] = program.args;
@@ -48,7 +111,7 @@ async function printBanner() {
   const art = (await figlet("Falak Duo", { font: "ANSI Shadow" }).catch(() => null)) || "Falak Duo";
   console.log("\n" + gradient("#a78bfa", "#22d3ee", "#2dd4bf")(art));
   console.log(
-    chalk.gray("  Vue 3 boilerplate \u2014 Ably \u00b7 Brevo \u00b7 AES-256 \u00b7 Arabic/RTL")
+    chalk.gray("  Vue 3 boilerplate \u2014 Ably \u00b7 Brevo \u00b7 AES-256 \u00b7 Multilingual / RTL")
   );
   console.log("\n");
 }
@@ -60,8 +123,8 @@ async function main() {
     ? {
         projectName: argProjectName || "falak-app-duo",
         services: ["ably", "brevo"],
+        languages: ["ar"],
         apiBaseUrl: "http://localhost:8000/api",
-        rtl: opts.rtl,
       }
     : await prompts(
         [
@@ -81,27 +144,34 @@ async function main() {
             ],
             hint: "Space to toggle, Enter to confirm",
           },
+          {
+            type: "multiselect",
+            name: "languages",
+            message: "Which languages should the app ship with? (English is always included)",
+            choices: LANGUAGE_CHOICES.map((c) =>
+              c.value === "ar" && !opts.rtl ? { ...c, selected: false } : c
+            ),
+            hint: "Space to toggle, Enter to confirm",
+          },
           {
             type: "text",
             name: "apiBaseUrl",
             message: "Laravel API base URL:",
             initial: "http://localhost:8000/api",
           },
-          ...(opts.rtl
-            ? [
-                {
-                  type: "confirm",
-                  name: "rtl",
-                  message: "Enable Arabic / RTL by default?",
-                  initial: true,
-                },
-              ]
-            : []),
         ],
         { onCancel: () => process.exit(1) }
       );
 
-  const rtlEnabled = opts.yes ? answers.rtl : opts.rtl ? answers.rtl : false;
+  // The set of locales the app ships: English is always bundled, plus the
+  // languages the user picked. `--no-rtl` forces Arabic out (LTR only).
+  let locales = ["en", ...(answers.languages || [])];
+  locales = [...new Set(locales)];
+  if (!opts.rtl) {
+    locales = locales.filter((l) => l !== "ar");
+  }
+  const hasRtl = locales.includes("ar");
+  const defaultLocale = hasRtl ? "ar" : "en";
 
   const projectName = argProjectName || answers.projectName;
   const services = answers.services || [];
@@ -138,49 +208,39 @@ async function main() {
     }
   }
 
-  // RTL off: strip Arabic/RTL out of the copied app — English/LTR only.
-  // The template is RTL by default, so this must also remove the locale
-  // toggle and the Arabic bundle or the app would still "support RTL".
-  if (!rtlEnabled) {
-    const htmlPath = path.join(targetDir, "index.html");
-    const html = await fs.readFile(htmlPath, "utf-8");
-    await fs.writeFile(htmlPath, html.replace('<html lang="ar" dir="rtl">', '<html lang="en" dir="ltr">'));
-
-    const i18nPath = path.join(targetDir, "src", "i18n", "index.js");
-    await fs.writeFile(
-      i18nPath,
-      [
-        'import { createI18n } from "vue-i18n";',
-        'import en from "./locales/en.json";',
-        "",
-        "export default createI18n({",
-        '  legacy: false,',
-        '  locale: "en",',
-        '  fallbackLocale: "en",',
-        "  messages: { en },",
-        "});",
-        "",
-      ].join("\n")
-    );
-    await fs.remove(path.join(targetDir, "src", "i18n", "locales", "ar.json"));
+  // Wire i18n to exactly the selected languages: rewrite index.html lang/dir,
+  // regenerate src/i18n/index.js, and drop unselected locale bundles. The
+  // template ships Arabic+RTL by default; --no-rtl (or deselecting Arabic)
+  // yields an LTR-only app.
+  const htmlPath = path.join(targetDir, "index.html");
+  const html = await fs.readFile(htmlPath, "utf-8");
+  const htmlTag = hasRtl ? '<html lang="ar" dir="rtl">' : '<html lang="en" dir="ltr">';
+  await fs.writeFile(htmlPath, html.replace('<html lang="ar" dir="rtl">', htmlTag));
+
+  const i18nPath = path.join(targetDir, "src", "i18n", "index.js");
+  await fs.writeFile(i18nPath, buildI18nModule(locales, defaultLocale));
+
+  for (const file of EXTRA_LOCALE_FILES) {
+    if (!locales.includes(file.replace(".json", ""))) {
+      await fs.remove(path.join(targetDir, "src", "i18n", "locales", file));
+    }
+  }
 
+  // English-only app: strip the language switcher (and its setup) from App.vue.
+  if (locales.length === 1) {
     const appPath = path.join(targetDir, "src", "App.vue");
     let app = await fs.readFile(appPath, "utf-8");
-    app = app.replace('import { setLocale } from "@/i18n";\n', "");
+    app = app.replace('import { setLocale, SUPPORTED_LOCALES } from "@/i18n";\n', "");
     app = app.replace("const { t, locale } = useI18n();", "const { t } = useI18n();");
-    app = app.replace(
-      'function toggleLocale() {\n  setLocale(locale.value === "ar" ? "en" : "ar");\n}\n',
-      ""
-    );
-    app = app.replace(
-      /\n        <button @click="toggleLocale" class="text-sm px-2 py-1 border rounded">\n          \{\{ locale === "ar" \? "EN" : "AR" \}\}\n        <\/button>/,
-      ""
-    );
+    app = app.replace("const locales = SUPPORTED_LOCALES;\n", "");
+    app = app.replace(/\n\s*<select\s*v-if="locales\.length > 1"[\s\S]*?<\/select>/, "");
     await fs.writeFile(appPath, app);
-
-    console.log(chalk.gray("  RTL disabled \u2014 English/LTR only, no Arabic or AR/EN toggle."));
   }
 
+  console.log(
+    chalk.gray(`  Languages wired: ${locales.map((l) => LOCALE_LABELS[l]).join(", ")}${hasRtl ? " (RTL default)" : ""}`)
+  );
+
   // Generate a real .env from .env.example with a fresh encryption key
   const envExamplePath = path.join(targetDir, ".env.example");
   let envContent = await fs.readFile(envExamplePath, "utf-8");
@@ -235,7 +295,11 @@ async function main() {
   await runInProject(targetDir, "npm", ["run", "dev"]).catch(() => {});
 }
 
-main().catch((err) => {
-  console.error(chalk.red(err));
-  process.exit(1);
-});
+if (process.argv[1] && path.resolve(fileURLToPath(import.meta.url)) === path.resolve(process.argv[1])) {
+  main().catch((err) => {
+    console.error(chalk.red(err));
+    process.exit(1);
+  });
+}
+
+export { buildI18nModule };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "falak-app-duo",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Vue 3 boilerplate scaffolder — Ably (realtime), Brevo, AES-256, Arabic/RTL, and a Laravel API client (API key + user token auth). No Firebase, no Groq/Paymob on the frontend (Groq is backend-only; Paymob dropped).",
   "type": "module",
   "bin": {
@@ -32,8 +32,5 @@
     "ably",
     "realtime"
   ],
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
+  "license": "MIT"
 }

package/templates/default/src/App.vue

@@ -1,36 +1,98 @@
 <script setup>
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import { setLocale } from "@/i18n";
+import { useRoute, useRouter, RouterLink, RouterView } from "vue-router";
+import { setLocale, SUPPORTED_LOCALES } from "@/i18n";
 import { useAuthStore } from "@/stores/auth";
-import { RouterLink, RouterView } from "vue-router";
+import AppBackdrop from "@/components/AppBackdrop.vue";
 
 const { t, locale } = useI18n();
+const locales = SUPPORTED_LOCALES;
 const auth = useAuthStore();
+const route = useRoute();
+const router = useRouter();
 
-function toggleLocale() {
-  setLocale(locale.value === "ar" ? "en" : "ar");
+// Auth pages hide the app chrome and go full-screen.
+const authPageNames = ["login", "register", "forgot-password"];
+const isAuthPage = computed(() => authPageNames.includes(route.name));
+
+const links = computed(() => [
+  { to: "/profile", label: t("nav.profile") },
+  { to: "/settings", label: t("nav.settings") },
+]);
+
+async function logout() {
+  await auth.logout();
+  router.push({ name: "home" });
 }
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-50 text-gray-900">
-    <nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
-      <span class="font-bold text-lg">{{ t("app.name") }}</span>
-      <div class="flex items-center gap-4">
-        <RouterLink to="/" class="hover:underline">{{ t("nav.home") }}</RouterLink>
-        <RouterLink v-if="!auth.userToken" to="/login" class="hover:underline">{{
-          t("nav.login")
-        }}</RouterLink>
-        <button v-else @click="auth.logout()" class="text-sm text-red-600 hover:underline">
-          {{ t("nav.login") === "Login" ? "Logout" : "خروج" }}
-        </button>
-        <button @click="toggleLocale" class="text-sm px-2 py-1 border rounded">
-          {{ locale === "ar" ? "EN" : "AR" }}
-        </button>
-      </div>
-    </nav>
-    <main class="p-6">
-      <RouterView />
-    </main>
+  <div class="relative min-h-screen">
+    <AppBackdrop />
+
+    <div class="relative z-10 flex min-h-screen flex-col">
+      <header
+        v-if="!isAuthPage"
+        class="sticky top-0 z-30 border-b border-white/10 bg-[#0b0f19]/70 backdrop-blur-xl"
+      >
+        <nav class="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-x-6 gap-y-3 px-4 py-3 sm:px-6">
+          <RouterLink to="/" class="group flex items-center gap-2.5">
+            <span
+              class="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-emerald-400 to-teal-500 text-base font-black text-emerald-950 shadow-lg shadow-emerald-500/20 transition group-hover:shadow-emerald-400/40"
+            >
+              F
+            </span>
+            <span class="text-lg font-bold text-white">{{ t("app.name") }}</span>
+          </RouterLink>
+
+          <div class="flex flex-1 flex-wrap items-center justify-end gap-1.5 text-sm">
+            <RouterLink
+              to="/"
+              class="rounded-full px-3 py-1.5 font-medium transition"
+              :class="route.name === 'home' ? 'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-300/30' : 'text-gray-300 hover:bg-white/5 hover:text-white'"
+            >
+              {{ t("nav.home") }}
+            </RouterLink>
+            <template v-if="auth.userToken">
+              <RouterLink
+                v-for="link in links"
+                :key="link.to"
+                :to="link.to"
+                class="rounded-full px-3 py-1.5 font-medium transition"
+                :class="route.path === link.to ? 'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-300/30' : 'text-gray-300 hover:bg-white/5 hover:text-white'"
+              >
+                {{ link.label }}
+              </RouterLink>
+            </template>
+          </div>
+
+          <div class="flex items-center gap-2.5">
+            <RouterLink
+              v-if="!auth.userToken"
+              to="/login"
+              class="btn-primary !px-4 !py-2"
+            >
+              {{ t("nav.login") }}
+            </RouterLink>
+            <button v-else @click="logout" class="btn-ghost !px-4 !py-2 !text-rose-300 hover:!bg-rose-500/10 hover:!text-rose-200">
+              {{ t("nav.logout") }}
+            </button>
+            <select
+              v-if="locales.length > 1"
+              :value="locale"
+              @change="setLocale($event.target.value)"
+              class="rounded-full border border-white/15 bg-white/5 px-2.5 py-1.5 text-sm font-medium text-gray-300 outline-none transition hover:bg-white/10 hover:text-white"
+            >
+              <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.label }}</option>
+            </select>
+          </div>
+        </nav>
+      </header>
+
+      <main class="flex-1">
+        <RouterView />
+      </main>
+    </div>
   </div>
-</template>
+</template>

package/templates/default/src/assets/main.css

@@ -2,7 +2,146 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
-body {
-  font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif;
+/* Registered once for the animated gradient-border effect (Tailwind v3 has no
+   @property in config, so it lives here in plain CSS next to the keyframes). */
+@property --tw-border-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
 }
+
+@keyframes border-spin {
+  to {
+    --tw-border-angle: 360deg;
+  }
+}
+
+@keyframes ripple-expand {
+  to {
+    transform: translate(-50%, -50%) scale(20);
+    opacity: 0;
+  }
+}
+
+@layer base {
+  html,
+  body {
+    font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif;
+    background-color: #0b0f19;
+  }
+  body {
+    color: rgb(243 244 246 / 1);
+  }
+  ::selection {
+    background: rgb(16 185 129 / 0.35);
+    color: #fff;
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(255 255 255 / 0.14) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  *::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background: rgb(255 255 255 / 0.14);
+  }
+}
+
+@layer components {
+  /* Reusable glass surfaces — the app's core visual language */
+  .glass-card {
+    @apply relative rounded-2xl border border-white/10 bg-white/[0.05] shadow-2xl shadow-black/30 backdrop-blur-xl backdrop-saturate-150;
+  }
+  .glass-card-hover {
+    @apply transition-all duration-300 ease-out hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.08] hover:shadow-emerald-500/10;
+  }
+
+  /* Fine hairline top highlight so glass reads as "lit" from above */
+  .glass-highlight {
+    @apply relative overflow-hidden;
+  }
+  .glass-highlight::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(
+      180deg,
+      rgb(255 255 255 / 0.08) 0%,
+      rgb(255 255 255 / 0) 32%
+    );
+    pointer-events: none;
+  }
+
+  .glass-input {
+    @apply w-full rounded-xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm text-gray-100 placeholder-gray-500 outline-none ring-1 ring-transparent transition focus:border-emerald-400/50 focus:bg-white/[0.08] focus:ring-2 focus:ring-emerald-400/20;
+  }
+  .glass-select {
+    @apply glass-input appearance-none pe-10;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.9rem center;
+    background-size: 1.1rem;
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 bg-[length:200%_200%] px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 ring-1 ring-white/10 transition-all duration-200 hover:brightness-110 hover:shadow-emerald-400/40 hover:ring-white/20 animate-gradient-pan motion-reduce:animate-none disabled:cursor-not-allowed disabled:opacity-50 active:translate-y-px;
+  }
+
+  .btn-ghost {
+    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-2.5 text-sm font-semibold text-gray-200 shadow-sm backdrop-blur transition-all duration-200 hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  /* Bright brand accent button — CTA on auth/settings pages */
+  .btn-accent {
+    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-amber-400 via-orange-400 to-rose-400 bg-[length:200%_200%] px-4 py-2.5 text-sm font-semibold text-amber-950 shadow-lg shadow-amber-500/25 transition-all duration-200 hover:brightness-110 hover:shadow-amber-400/40 animate-gradient-pan motion-reduce:animate-none disabled:cursor-not-allowed disabled:opacity-50 active:translate-y-px;
+  }
+
+  /* Ripple-ready fill button (JS spawns the span, classes live here) */
+  .btn-ripple {
+    @apply relative isolate overflow-hidden;
+  }
+  .ripple {
+    @apply pointer-events-none absolute rounded-full bg-white/40;
+    transform: translate(-50%, -50%) scale(0);
+    animation: ripple-expand 0.6s ease-out forwards;
+  }
+
+  .field-label {
+    @apply mb-1.5 block text-sm font-medium text-gray-300;
+  }
+  .field-hint {
+    @apply mt-1 block text-xs text-gray-500;
+  }
+
+  /* Two-stop gradient headline text (2 stops only — 3+ reads muddy at text size) */
+  .text-gradient {
+    @apply bg-gradient-to-r from-emerald-300 via-teal-200 to-cyan-300 bg-clip-text text-transparent;
+  }
+  .text-gradient-warm {
+    @apply bg-gradient-to-r from-amber-200 via-orange-300 to-rose-300 bg-clip-text text-transparent;
+  }
+
+  /* Small pill / chip */
+  .chip {
+    @apply inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-gray-300;
+  }
+
+  /* Section heading with gradient marker bar */
+  .section-head {
+    @apply flex items-center gap-3;
+  }
+  .section-head::before {
+    content: "";
+    @apply h-5 w-1 rounded-full bg-gradient-to-b from-emerald-400 to-cyan-400;
+  }
+
+  /* Fine dotted grid used by the backdrop and hero */
+  .bg-grid {
+    background-image: radial-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px);
+    background-size: 26px 26px;
+  }
+}

package/templates/default/src/components/AppBackdrop.vue

@@ -0,0 +1,43 @@
+<script setup>
+// Full-screen dynamic background: dark base + animated aurora mesh of blurred
+// blobs + a fine dotted grid + film grain. Palette deliberately avoids
+// purple/blue gradients (emerald / teal / cyan / rose / amber).
+defineOptions({ name: "AppBackdrop" });
+</script>
+
+<template>
+  <div
+    aria-hidden="true"
+    class="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-[#0b0f19]"
+  >
+    <!-- Aurora mesh base -->
+    <div
+      class="absolute inset-0 bg-[radial-gradient(circle_at_16%_10%,rgba(16,185,129,0.18),transparent_42%),radial-gradient(circle_at_84%_16%,rgba(251,113,133,0.13),transparent_40%),radial-gradient(circle_at_48%_88%,rgba(251,191,36,0.11),transparent_45%),radial-gradient(circle_at_76%_60%,rgba(45,212,191,0.14),transparent_42%),radial-gradient(circle_at_6%_70%,rgba(34,211,238,0.08),transparent_45%)]"
+    ></div>
+
+    <!-- Dotted grid, faint -->
+    <div class="absolute inset-0 bg-grid opacity-70 [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]"></div>
+
+    <!-- Morphing blobs -->
+    <div
+      class="absolute -start-32 -top-32 h-[34rem] w-[34rem] rounded-full bg-emerald-500/25 blur-[130px] animate-mesh-drift-a motion-reduce:animate-none"
+    ></div>
+    <div
+      class="absolute -end-24 top-1/3 h-[28rem] w-[28rem] rounded-full bg-rose-500/20 blur-[120px] animate-mesh-drift-b motion-reduce:animate-none"
+    ></div>
+    <div
+      class="absolute -bottom-40 start-1/4 h-[36rem] w-[36rem] rounded-full bg-amber-400/15 blur-[140px] animate-mesh-drift-a motion-reduce:animate-none"
+      style="animation-delay: -7s"
+    ></div>
+    <div
+      class="absolute start-[42%] top-12 h-[22rem] w-[22rem] rounded-full bg-teal-400/15 blur-[110px] animate-blob-morph motion-reduce:animate-none"
+    ></div>
+    <div
+      class="absolute start-[10%] top-1/2 hidden h-[18rem] w-[18rem] rounded-full bg-cyan-400/10 blur-[100px] animate-blob-morph motion-reduce:animate-none lg:block"
+      style="animation-delay: -4s"
+    ></div>
+
+    <!-- Vignette so content keeps contrast -->
+    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_55%,rgba(5,8,15,0.55))]"></div>
+  </div>
+</template>