cinqcinqdev-seo 0.1.13 → 0.1.15

package/dist/runtime/components/sections/TextVisual.vue

@@ -0,0 +1,89 @@
+<template>
+  <section class="py-14 px-6 md:px-12" :style="{ backgroundColor: bgColor, color: textColor }">
+
+    <!-- SPLIT -->
+    <div v-if="layout === 'split'" :class="['max-w-6xl mx-auto flex flex-col md:flex-row gap-12 items-center', reverse ? 'md:flex-row-reverse' : '']">
+      <div class="flex-1 space-y-6">
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <component :is="titleTag" class="text-3xl md:text-4xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
+        <p class="leading-relaxed text-sm max-w-md" :style="{ opacity: 0.55 }">{{ content }}</p>
+        <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
+          <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
+            class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            {{ cta.text }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+      <div :class="['flex-1 overflow-hidden relative', imageContainerClass]">
+        <img v-if="image" :src="image" :alt="imageAlt || title" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+      </div>
+    </div>
+
+    <!-- STACKED -->
+    <div v-else-if="layout === 'stacked'" class="max-w-3xl mx-auto space-y-8">
+      <div :class="['w-full overflow-hidden relative', imageContainerClass]">
+        <img v-if="image" :src="image" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+      </div>
+      <div class="space-y-5">
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <component :is="titleTag" class="text-3xl md:text-4xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
+        <p class="leading-relaxed text-sm" :style="{ opacity: 0.55 }">{{ content }}</p>
+        <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
+          <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
+            class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            {{ cta.text }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- WIDE -->
+    <div v-else :class="['max-w-6xl mx-auto flex flex-col md:flex-row gap-10 items-center', reverse ? 'md:flex-row-reverse' : '']">
+      <div :class="['md:w-2/3 w-full overflow-hidden relative', imageContainerClass]">
+        <img v-if="image" :src="image" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+      </div>
+      <div class="md:w-1/3 space-y-5">
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <component :is="titleTag" class="text-2xl md:text-3xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
+        <p class="leading-relaxed text-sm" :style="{ opacity: 0.55 }">{{ content }}</p>
+        <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
+          <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
+            class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            {{ cta.text }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "split" },
+  title: { type: String, default: "Our Vision" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "" },
+  content: { type: String, default: "" },
+  image: { type: String, default: "" },
+  imageAlt: { type: String, default: "" },
+  imageStyle: { type: String, default: "rounded" },
+  imageFit: { type: String, default: "cover" },
+  imageShadow: { type: Boolean, default: false },
+  reverse: { type: Boolean, default: false },
+  bgColor: { type: String, default: "#ffffff" },
+  textColor: { type: String, default: "#000000" },
+  ctas: { type: Array, default: () => [] }
+});
+const imageContainerClass = computed(() => {
+  const styles = { rounded: "aspect-[4/3] rounded-3xl", square: "aspect-square rounded-xl", circle: "aspect-square rounded-full max-w-[360px] mx-auto", portrait: "aspect-[3/4] rounded-3xl max-w-sm mx-auto" };
+  return styles[props.imageStyle] ?? styles.rounded;
+});
+</script>

package/dist/runtime/components/sections/TextVisual.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinqcinqdev-seo",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
   "license": "MIT",
   "module": "./dist/module.mjs",