nuxt-og-image 5.1.13 → 6.0.0-beta.2

package/dist/runtime/app/components/Templates/Community/Brutalist.satori.d.vue.ts

@@ -0,0 +1,14 @@
+/**
+ * Neo-brutalist design with bold typography and raw aesthetics
+ */
+type __VLS_Props = {
+    title?: string;
+    subtitle?: string;
+    accent?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    accent: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/Brutalist.satori.vue

@@ -0,0 +1,51 @@
+<script setup>
+defineProps({
+  title: { type: String, required: false, default: "title" },
+  subtitle: { type: String, required: false },
+  accent: { type: String, required: false, default: "#facc15" }
+});
+</script>
+
+<template>
+  <div class="h-full w-full flex relative overflow-hidden bg-stone-100">
+    <!-- Offset shadow box -->
+    <div
+      class="absolute bg-black"
+      style="top: 28px; left: 28px; right: 52px; bottom: 52px;"
+    />
+
+    <!-- Main card -->
+    <div
+      class="absolute bg-white border-4 border-black flex flex-col justify-between"
+      style="top: 40px; left: 40px; right: 40px; bottom: 40px; padding: 48px;"
+    >
+      <!-- Accent bar -->
+      <div
+        class="absolute w-32 hidden lg:flex"
+        :style="{ background: accent, top: '-2px', right: '-4px', bottom: '-4px' }"
+      />
+
+      <!-- Corner marks -->
+      <div class="absolute top-3 left-3 w-4 h-4 border-l-4 border-t-4 border-black" />
+      <div class="absolute bottom-3 left-3 w-4 h-4 border-l-4 border-b-4 border-black" />
+
+      <div class="relative z-10 max-w-[85%]">
+        <p v-if="subtitle" class="text-lg font-mono uppercase tracking-[0.3em] text-black/60 mb-4">
+          {{ subtitle }}
+        </p>
+        <h1
+          class="text-[76px] font-black text-black leading-[0.95] tracking-tighter uppercase"
+          style="display: block; line-clamp: 3; text-overflow: ellipsis;"
+        >
+          {{ title }}
+        </h1>
+      </div>
+
+      <!-- Bottom marker -->
+      <div class="flex items-center gap-4 relative z-10">
+        <div class="w-12 h-1 bg-black" />
+        <div class="w-3 h-3 bg-black" style="transform: rotate(45deg);" />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/Templates/Community/Brutalist.satori.vue.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Neo-brutalist design with bold typography and raw aesthetics
+ */
+type __VLS_Props = {
+    title?: string;
+    subtitle?: string;
+    accent?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    accent: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/{Frame.vue.d.ts → Frame.satori.d.vue.ts}

@@ -14,8 +14,8 @@ type __VLS_Props = {
         icon: string;
     }[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     bg: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/Templates/Community/Frame.satori.vue

@@ -0,0 +1,71 @@
+<script setup>
+defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  bg: { type: String, required: false, default: "linear-gradient(145deg, #1c1c1c 0%, #0d0d0d 100%)" },
+  icon: { type: String, required: false },
+  logo: { type: String, required: false },
+  image: { type: String, required: false },
+  username: { type: String, required: false },
+  socials: { type: Array, required: false }
+});
+</script>
+
+<template>
+  <div
+    class="relative h-full w-full flex items-center justify-center text-white overflow-hidden"
+    :style="{ backgroundImage: bg }"
+  >
+    <!-- Inner frame with refined border -->
+    <div class="absolute inset-4 border border-white/20 rounded-sm" />
+    <div class="absolute inset-5 border border-white/10 rounded-sm" />
+
+    <!-- Background image with better treatment -->
+    <div
+      v-if="image"
+      class="absolute inset-0 w-full h-full bg-cover bg-center opacity-[0.07]"
+      :style="{ backgroundImage: `url(${image})` }"
+    />
+
+    <!-- Subtle corner accents -->
+    <div class="absolute top-4 left-4 w-8 h-8 border-l-2 border-t-2 border-white/30" />
+    <div class="absolute top-4 right-4 w-8 h-8 border-r-2 border-t-2 border-white/30" />
+    <div class="absolute bottom-4 left-4 w-8 h-8 border-l-2 border-b-2 border-white/30" />
+    <div class="absolute bottom-4 right-4 w-8 h-8 border-r-2 border-b-2 border-white/30" />
+
+    <div class="flex flex-col items-center text-center px-8 lg:px-20 relative z-10">
+      <h1 class="flex items-center gap-5 text-[72px] font-bold leading-tight tracking-tight" style="display: block; line-clamp: 2; text-overflow: ellipsis; text-shadow: 0 4px 30px rgba(0,0,0,0.5);">
+        <Icon
+          v-if="icon"
+          :name="icon"
+          class="opacity-90"
+        />
+        {{ title }}
+      </h1>
+      <p v-if="description" class="text-[28px] max-w-[800px] text-white/70 mt-4 leading-relaxed" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
+        {{ description }}
+      </p>
+    </div>
+
+    <img
+      v-if="logo"
+      :src="logo"
+      class="absolute bottom-6 left-6"
+      style="height: 100px; width: auto; opacity: 0.9; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
+    >
+    <div class="absolute bottom-6 right-6 flex items-center gap-4">
+      <div
+        v-if="username"
+        class="text-white/60 font-medium text-lg mr-2"
+      >
+        {{ username }}
+      </div>
+      <Icon
+        v-for="social of socials"
+        :key="social.name"
+        :name="social.icon"
+        class="w-6 h-6 text-white/50"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/Templates/Community/{Frame.d.vue.ts → Frame.satori.vue.d.ts}

@@ -14,8 +14,8 @@ type __VLS_Props = {
         icon: string;
     }[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     bg: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/Templates/Community/Newspaper.satori.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title?: string;
+    category?: string;
+    publication?: string;
+    date?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    publication: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/Newspaper.satori.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  title: { type: String, required: false, default: "title" },
+  category: { type: String, required: false },
+  publication: { type: String, required: false, default: "The Daily" },
+  date: { type: String, required: false }
+});
+const formattedDate = computed(() => {
+  if (props.date)
+    return props.date;
+  return (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+});
+</script>
+
+<template>
+  <div class="h-full w-full flex flex-col relative overflow-hidden" style="background: #faf9f7;">
+    <!-- Paper texture -->
+    <div class="absolute inset-0 opacity-[0.4]" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27noise%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23noise)%27/%3E%3C/svg%3E');" />
+
+    <!-- Top rule -->
+    <div class="w-full h-1 bg-black" />
+    <div class="w-full h-[2px] bg-black mt-1" />
+
+    <!-- Masthead -->
+    <div class="px-12 pt-6 pb-4 border-b-2 border-black">
+      <div class="flex items-end justify-between">
+        <p class="text-sm leading-1.5 tracking-[0.2em] uppercase text-black/60">
+          {{ formattedDate }}
+        </p>
+        <h2 class="text-4xl leading-1 font-black tracking-tight text-black uppercase" style="font-style: italic; line-height: 20px;">
+          {{ publication }}
+        </h2>
+        <p v-if="category" class="text-sm leading-1.5 tracking-[0.2em] uppercase text-black/60">
+          {{ category }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Thin decorative line -->
+    <div class="w-full h-[1px] bg-black/20" />
+
+    <!-- Main headline -->
+    <div class="flex-1 flex items-center px-16 py-12">
+      <h1
+        class="text-[72px] font-black text-black leading-[1.05] tracking-tight text-center w-full"
+        style="display: block; line-clamp: 3; text-overflow: ellipsis; font-variant-ligatures: discretionary-ligatures;"
+      >
+        {{ title }}
+      </h1>
+    </div>
+
+    <!-- Bottom rules -->
+    <div class="px-16 pb-12">
+      <div class="flex items-center gap-6">
+        <div class="flex-1 h-[1px] bg-black/30" />
+        <div class="w-2 h-2 bg-black" style="transform: rotate(45deg);" />
+        <div class="flex-1 h-[1px] bg-black/30" />
+      </div>
+    </div>
+
+    <div class="w-full h-[2px] bg-black" />
+    <div class="w-full h-1 bg-black mt-1" />
+  </div>
+</template>

package/dist/runtime/app/components/Templates/Community/Newspaper.satori.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title?: string;
+    category?: string;
+    publication?: string;
+    date?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    publication: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/Nuxt.satori.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    headline?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    headline: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/{Nuxt.vue → Nuxt.satori.vue}

@@ -39,11 +39,11 @@ const description = computed(() => (props.description || "").slice(0, 200));
       </defs>
     </svg>
 
-    <div class="w-[600px] pl-[100px]">
+    <div class="max-w-[700px] pl-6 lg:pl-[100px]">
       <p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
         {{ headline }}
       </p>
-      <h1 v-if="title" class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
+      <h1 v-if="title" class="m-0 text-[75px] font-semibold mb-4 text-white" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
         {{ title }}
       </h1>
       <p v-if="description" class="text-[32px] text-[#E4E4E7] leading-tight" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
@@ -51,7 +51,7 @@ const description = computed(() => (props.description || "").slice(0, 200));
       </p>
     </div>
     <svg
-      class="absolute top-[160px] right-[90px]"
+      class="absolute top-[160px] right-[90px] hidden lg:flex"
       width="340"
       height="340"
       viewBox="0 0 340 340"

package/dist/runtime/app/components/Templates/Community/Nuxt.satori.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    headline?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    headline: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/NuxtSeo.satori.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    colorMode?: 'dark' | 'light';
+    title?: string;
+    description?: string;
+    isPro?: boolean;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    colorMode: "dark" | "light";
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/NuxtSeo.satori.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  colorMode: { type: String, required: false, default: "light" },
+  title: { type: String, required: false, default: "title" },
+  description: { type: String, required: false },
+  isPro: { type: Boolean, required: false }
+});
+const themeColor = computed(() => props.isPro ? "124, 58, 237" : "34, 197, 94");
+</script>
+
+<template>
+  <div
+    class="w-full h-full flex flex-col justify-center items-center relative p-[60px]"
+    :class="[
+  colorMode === 'light' ? ['bg-white', 'text-neutral-900'] : ['bg-neutral-900', 'text-neutral-50']
+]"
+  >
+    <!-- Gradient background -->
+    <div
+      class="absolute inset-0" :style="{
+  backgroundImage: `radial-gradient(ellipse at bottom right, rgba(${themeColor}, 0.15) 0%, transparent 60%)`
+}"
+    />
+    <div
+      class="absolute inset-0" :style="{
+  backgroundImage: `radial-gradient(ellipse at top left, rgba(${themeColor}, 0.1) 0%, transparent 50%)`
+}"
+    />
+
+    <div class="relative flex flex-col items-center text-center gap-8">
+      <!-- Logo -->
+      <div class="flex items-center gap-3">
+        <svg viewBox="0 0 64 64" class="w-16 h-16">
+          <defs>
+            <linearGradient :id="isPro ? 'nsLine2' : 'nsLine1'" x1="0%" y1="100%" x2="100%" y2="0%">
+              <stop offset="0%" :stop-color="isPro ? '#7c3aed' : '#22c55e'" />
+              <stop offset="100%" :stop-color="isPro ? '#c4b5fd' : '#86efac'" />
+            </linearGradient>
+            <linearGradient :id="isPro ? 'nsFill2' : 'nsFill1'" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" :stop-color="isPro ? '#7c3aed' : '#22c55e'" stop-opacity="0.6" />
+              <stop offset="100%" :stop-color="isPro ? '#7c3aed' : '#22c55e'" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+          <path d="M8 52 Q20 48 24 36 T40 20 T56 12 L56 56 L8 56 Z" :fill="`url(#${isPro ? 'nsFill2' : 'nsFill1'})`" />
+          <path d="M8 52 Q20 48 24 36 T40 20 T56 12" fill="none" :stroke="`url(#${isPro ? 'nsLine2' : 'nsLine1'})`" stroke-width="4" stroke-linecap="round" />
+          <circle cx="56" cy="12" r="6" :fill="`url(#${isPro ? 'nsLine2' : 'nsLine1'})`" />
+        </svg>
+        <span class="text-[42px] font-bold tracking-tight">
+          Nuxt<span :class="isPro ? 'text-violet-500' : 'text-green-500'" class="ml-2">SEO{{ isPro ? " Pro" : "" }}</span>
+        </span>
+      </div>
+
+      <!-- Title -->
+      <h1 class="text-[80px] font-bold m-0 leading-tight max-w-[1000px]">
+        {{ title }}
+      </h1>
+
+      <!-- Description -->
+      <p v-if="description" class="text-[32px] opacity-70 max-w-[900px] leading-relaxed">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style>
+:root{font-family:Hubot Sans}
+</style>

package/dist/runtime/app/components/Templates/Community/NuxtSeo.satori.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    colorMode?: 'dark' | 'light';
+    title?: string;
+    description?: string;
+    isPro?: boolean;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    colorMode: "dark" | "light";
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/Pergel.satori.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    headline?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    headline: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/{Pergel.vue → Pergel.satori.vue}

@@ -9,35 +9,38 @@ const title = computed(() => props.title.slice(0, 60));
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col justify-center bg-[#212121]">
+  <div class="w-full h-full flex flex-col justify-center relative overflow-hidden" style="background: linear-gradient(145deg, #262626 0%, #1a1a1a 100%);">
+    <!-- Subtle noise texture -->
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 256 256%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27noise%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23noise)%27/%3E%3C/svg%3E');" />
+
     <svg class="absolute top-0 right-0" width="1200" height="675" viewBox="0 0 1200 675" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g style="mix-blend-mode:overlay" opacity="0.7" filter="url(#filter0_f_448_25)">
-        <circle cx="901.5" cy="45.5" r="199.5" fill="#FFA7A7" />
-        <circle cx="600.5" cy="216.5" r="199.5" fill="#FFCC49" />
-        <circle cx="179.5" cy="317.5" r="199.5" fill="#FFA149" />
+      <g style="mix-blend-mode:overlay" opacity="0.6" filter="url(#filter0_f_448_25)">
+        <circle cx="950" cy="30" r="220" fill="#FF9B9B" />
+        <circle cx="620" cy="200" r="200" fill="#FFD166" />
+        <circle cx="200" cy="340" r="180" fill="#FF9F43" />
       </g>
       <defs>
         <filter id="filter0_f_448_25" x="-240" y="-374" width="1561" height="1111" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
           <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-          <feGaussianBlur stdDeviation="110" result="effect1_foregroundBlur_448_25" />
+          <feGaussianBlur stdDeviation="120" result="effect1_foregroundBlur_448_25" />
         </filter>
       </defs>
     </svg>
 
-    <div class="w-[600px] pl-[100px]">
-      <p v-if="headline" class="uppercase text-[24px] text-[#FEC476] mb-4 font-semibold">
+    <div class="max-w-full lg:max-w-[60%] pl-8 lg:pl-16 pr-8 relative z-10">
+      <p v-if="headline" class="uppercase text-[22px] text-amber-400 mb-3 font-semibold tracking-wider">
         {{ headline }}
       </p>
-      <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
+      <h1 class="m-0 text-[68px] font-bold mb-5 text-white leading-[1.1] tracking-tight" style="display: block; line-clamp: 2; text-overflow: ellipsis; text-shadow: 0 4px 30px rgba(0,0,0,0.3);">
         {{ title }}
       </h1>
-      <p class="text-[32px] text-[#E4E4E7] leading-tight" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
+      <p v-if="description" class="text-[30px] text-neutral-400 leading-[1.4]" style="display: block; line-clamp: 3; text-overflow: ellipsis;">
         {{ description }}
       </p>
     </div>
 
-    <svg class="absolute top-[250px] right-[190px]" width="241" height="184" viewBox="0 0 241 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg class="absolute top-[250px] right-[190px] hidden lg:flex" width="241" height="184" viewBox="0 0 241 184" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g filter="url(#filter0_ddd_563_6)">
         <path d="M204.852 126.822C204.852 127.098 204.677 128.114 202.583 129.748C200.551 131.335 197.276 133.034 192.613 134.687C183.325 137.979 169.872 140.62 153.875 142.19C137.92 143.755 120.334 144.166 103.363 143.367C86.3776 142.566 70.8801 140.594 58.8213 137.738C52.7901 136.31 47.8449 134.713 44.0617 133.037C40.1988 131.325 37.891 129.679 36.7621 128.335C36.2309 127.702 36.0703 127.267 36.0227 127.035C35.9829 126.842 35.9842 126.629 36.1192 126.305C36.459 125.488 37.6413 124.038 40.7165 122.28C46.7614 118.823 57.5073 115.641 71.9244 113.359C86.2251 111.096 103.109 109.879 120.426 109.879" stroke="url(#paint0_angular_563_6)" stroke-width="8" />
       </g>

package/dist/runtime/app/components/Templates/Community/Pergel.satori.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    headline?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    headline: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/Retro.satori.d.vue.ts

@@ -0,0 +1,12 @@
+/**
+ * Retro-futuristic synthwave/CRT aesthetic
+ */
+type __VLS_Props = {
+    title?: string;
+    tagline?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/Retro.satori.vue

@@ -0,0 +1,64 @@
+<script setup>
+defineProps({
+  title: { type: String, required: false, default: "title" },
+  tagline: { type: String, required: false }
+});
+</script>
+
+<template>
+  <div class="h-full w-full flex flex-col justify-end relative overflow-hidden" style="background: linear-gradient(180deg, #0a0a0a 0%, #1a0a2e 40%, #2d1b4e 70%, #1a0a2e 100%);">
+    <!-- Gradient glow at top -->
+    <div class="absolute" style="width: 100%; height: 300px; top: 0; left: 0; background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,107,157,0.3) 0%, rgba(196,69,105,0.15) 40%, transparent 70%);" />
+
+    <!-- Grid floor -->
+    <svg class="absolute bottom-0 left-0 right-0" style="height: 280px;" viewBox="0 0 1200 280" preserveAspectRatio="none">
+      <defs>
+        <linearGradient id="gridFade" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" style="stop-color:#ff2a6d;stop-opacity:0.8" />
+          <stop offset="100%" style="stop-color:#05d9e8;stop-opacity:0.3" />
+        </linearGradient>
+      </defs>
+      <!-- Horizontal lines with perspective -->
+      <line x1="0" y1="20" x2="1200" y2="20" stroke="url(#gridFade)" stroke-width="1" opacity="0.3" />
+      <line x1="0" y1="50" x2="1200" y2="50" stroke="url(#gridFade)" stroke-width="1" opacity="0.4" />
+      <line x1="0" y1="90" x2="1200" y2="90" stroke="url(#gridFade)" stroke-width="1" opacity="0.5" />
+      <line x1="0" y1="140" x2="1200" y2="140" stroke="url(#gridFade)" stroke-width="1.5" opacity="0.6" />
+      <line x1="0" y1="200" x2="1200" y2="200" stroke="url(#gridFade)" stroke-width="2" opacity="0.7" />
+      <line x1="0" y1="280" x2="1200" y2="280" stroke="url(#gridFade)" stroke-width="2" opacity="0.8" />
+      <!-- Vertical lines converging to horizon -->
+      <line x1="600" y1="0" x2="600" y2="280" stroke="url(#gridFade)" stroke-width="1" opacity="0.5" />
+      <line x1="600" y1="0" x2="0" y2="280" stroke="url(#gridFade)" stroke-width="1" opacity="0.4" />
+      <line x1="600" y1="0" x2="1200" y2="280" stroke="url(#gridFade)" stroke-width="1" opacity="0.4" />
+      <line x1="600" y1="0" x2="200" y2="280" stroke="url(#gridFade)" stroke-width="1" opacity="0.3" />
+      <line x1="600" y1="0" x2="1000" y2="280" stroke="url(#gridFade)" stroke-width="1" opacity="0.3" />
+      <line x1="600" y1="0" x2="400" y2="280" stroke="url(#gridFade)" stroke-width="1" opacity="0.35" />
+      <line x1="600" y1="0" x2="800" y2="280" stroke="url(#gridFade)" stroke-width="1" opacity="0.35" />
+      <line x1="600" y1="0" x2="-200" y2="280" stroke="url(#gridFade)" stroke-width="1" opacity="0.2" />
+      <line x1="600" y1="0" x2="1400" y2="280" stroke="url(#gridFade)" stroke-width="1" opacity="0.2" />
+    </svg>
+
+    <!-- Scanlines overlay -->
+    <div class="absolute inset-0 pointer-events-none opacity-[0.03]" style="background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px);" />
+
+    <!-- Content -->
+    <div class="relative z-10 px-16 pb-20" style="margin-top: auto;">
+      <p
+        v-if="tagline"
+        class="text-xl font-mono uppercase tracking-[0.4em] mb-4"
+        style="color: #05d9e8; text-shadow: 0 0 20px #05d9e8, 0 0 40px #05d9e8;"
+      >
+        {{ tagline }}
+      </p>
+      <h1
+        class="text-[80px] font-black uppercase leading-[0.9] tracking-tight"
+        style="color: #fff; text-shadow: 0 0 20px #ff2a6d, 0 0 40px #ff2a6d, 0 0 60px #ff2a6d, 2px 2px 0 #05d9e8; display: block; line-clamp: 2; text-overflow: ellipsis;"
+      >
+        {{ title }}
+      </h1>
+    </div>
+
+    <!-- Corner chrome accents -->
+    <div class="absolute top-6 left-6 w-16 h-16 border-l-2 border-t-2" style="border-color: #05d9e8; opacity: 0.6;" />
+    <div class="absolute top-6 right-6 w-16 h-16 border-r-2 border-t-2" style="border-color: #ff2a6d; opacity: 0.6;" />
+  </div>
+</template>

package/dist/runtime/app/components/Templates/Community/Retro.satori.vue.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Retro-futuristic synthwave/CRT aesthetic
+ */
+type __VLS_Props = {
+    title?: string;
+    tagline?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Templates/Community/SaaS.satori.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title?: string;
+    icon?: string;
+    siteName?: string;
+    theme?: string;
+    image?: string;
+};
+declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    theme: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;