cinqcinqdev-seo 0.1.69 → 0.1.70

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.1.69",
+  "version": "0.1.70",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -1,8 +1,11 @@
 <template>
   <section ref="sectionEl" class="relative overflow-hidden" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
 
+    <!-- Gradient overlay (all layouts) -->
+    <div v-if="showOverlay && !['fullscreen','parallax','video','magazine'].includes(layout)" class="absolute inset-0 pointer-events-none" style="z-index:1" :style="overlayStyle"></div>
+
     <!-- CENTERED -->
-    <div v-if="layout === 'centered'" class="px-6 md:px-12 pt-20 pb-16 text-center">
+    <div v-if="layout === 'centered'" class="relative px-6 md:px-12 pt-20 pb-16 text-center" style="z-index:2">
       <div :class="[containerClass]">
         <span v-if="badge" :class="['inline-flex items-center gap-1.5 text-[10px] font-bold tracking-[0.4em] uppercase px-4 py-1.5 rounded-full border mb-8', ac()]" :style="[{ borderColor: ca(textColor, '30'), color: ca(textColor, '80') }, as_(0)]">
           <span class="w-1.5 h-1.5 rounded-full inline-block" :style="{ backgroundColor: ca(textColor, '60') }"></span>{{ badge }}
@@ -55,7 +58,7 @@
       <div class="absolute inset-0">
         <img v-if="image" :src="image" class="w-full h-full object-cover" />
         <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '08') }"></div>
-        <div class="absolute inset-0" :style="{ background: `linear-gradient(to top, ${bgColor} 20%, ${ca(bgColor, 'cc')} 40%, ${ca(bgColor, '44')} 65%, transparent 100%)` }"></div>
+        <div v-if="showOverlay" class="absolute inset-0" :style="overlayStyle"></div>
       </div>
       <div :class="[containerClass, 'relative z-10 w-full px-6 md:px-12 pb-14']">
         <span v-if="badge" :class="['inline-block text-[9px] font-black uppercase tracking-[0.5em] opacity-40 mb-4', ac()]" :style="as_(0)">{{ badge }}</span>
@@ -89,7 +92,7 @@
     <!-- PARALLAX -->
     <div v-else-if="layout === 'parallax'" class="relative min-h-[90vh] flex flex-col justify-end">
       <div class="absolute inset-0" :style="{ backgroundImage: image ? `url(${image})` : undefined, backgroundSize: 'cover', backgroundPosition: 'center', backgroundAttachment: 'fixed', backgroundColor: !image ? ca(textColor, '08') : undefined }"></div>
-      <div class="absolute inset-0" :style="{ background: `linear-gradient(to top, ${bgColor} 20%, ${ca(bgColor, 'cc')} 45%, ${ca(bgColor, '22')} 70%, transparent 100%)` }"></div>
+      <div v-if="showOverlay" class="absolute inset-0" :style="overlayStyle"></div>
       <div :class="[containerClass, 'relative z-10 w-full px-6 md:px-12 pb-16']">
         <span v-if="badge" :class="['inline-block text-[9px] font-black uppercase tracking-[0.5em] opacity-40 mb-4', ac()]" :style="as_(0)">{{ badge }}</span>
         <component :is="titleTag" :class="['font-black uppercase tracking-tighter leading-[0.88] mb-6', ac()]" :style="[{ fontSize: 'clamp(3rem,8vw,7rem)' }, as_(badge ? 1 : 0)]">{{ title }}</component>
@@ -105,7 +108,7 @@
       <div class="absolute inset-0 overflow-hidden">
         <video v-if="videoUrl" :src="videoUrl" autoplay muted loop playsinline class="absolute inset-0 w-full h-full object-cover" />
         <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '10') }"></div>
-        <div class="absolute inset-0" :style="{ background: `linear-gradient(to top, ${bgColor} 15%, ${ca(bgColor, 'bb')} 40%, ${ca(bgColor, '33')} 65%, transparent 100%)` }"></div>
+        <div v-if="showOverlay" class="absolute inset-0" :style="overlayStyle"></div>
       </div>
       <div :class="[containerClass, 'relative z-10 w-full px-6 md:px-12 pb-14']">
         <span v-if="badge" :class="['inline-block text-[9px] font-black uppercase tracking-[0.5em] opacity-40 mb-4', ac()]" :style="as_(0)">{{ badge }}</span>
@@ -123,7 +126,8 @@
         <div :class="['col-span-12 md:col-span-7 relative overflow-hidden min-h-[360px] md:min-h-0', cardRound, ac()]" :style="as_(0)">
           <img v-if="image" :src="image" class="absolute inset-0 w-full h-full object-cover" />
           <div v-else class="absolute inset-0" :style="{ backgroundColor: ca(textColor, '10') }"></div>
-          <div class="absolute inset-0 flex flex-col justify-end p-8 md:p-10" :style="{ background: `linear-gradient(to top, ${bgColor}ee 15%, ${ca(bgColor, '88')} 45%, transparent 85%)` }">
+          <div v-if="showOverlay" class="absolute inset-0" :style="overlayStyle"></div>
+          <div class="absolute inset-0 flex flex-col justify-end p-8 md:p-10" style="z-index:1">
             <span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.5em] mb-3" :style="{ opacity: 0.5 }">{{ badge }}</span>
             <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88]" :style="{ fontSize: 'clamp(2rem,4vw,3.5rem)' }">{{ title }}</component>
           </div>
@@ -188,7 +192,10 @@ const props = defineProps({
   paddingTop: { type: String, default: "" },
   paddingBottom: { type: String, default: "" },
   marginTop: { type: String, default: "" },
-  marginBottom: { type: String, default: "" }
+  marginBottom: { type: String, default: "" },
+  overlay: { default: null },
+  overlayDirection: { type: String, default: "to top" },
+  overlayStrength: { type: String, default: "medium" }
 });
 const sectionEl = ref(null);
 const isVisible = ref(false);
@@ -217,6 +224,21 @@ const as_ = (n) => {
   if (!isVisible.value || props.animation === "none" || props.animation === "typewriter" || props.animation === "float") return {};
   return { animationDelay: `${n * 0.1}s`, animationFillMode: "both" };
 };
+const showOverlay = computed(() => {
+  if (props.overlay === false) return false;
+  if (props.overlay === true) return true;
+  return ["fullscreen", "parallax", "video", "magazine"].includes(props.layout);
+});
+const overlayStyle = computed(() => {
+  const dir = props.overlayDirection || "to top";
+  const c = props.bgColor;
+  const stops = {
+    light: `linear-gradient(${dir}, ${ca(c, "99")} 0%, ${ca(c, "44")} 40%, transparent 70%)`,
+    medium: `linear-gradient(${dir}, ${c} 15%, ${ca(c, "cc")} 40%, ${ca(c, "44")} 65%, transparent 100%)`,
+    strong: `linear-gradient(${dir}, ${c} 35%, ${ca(c, "ee")} 55%, ${ca(c, "88")} 75%, transparent 100%)`
+  };
+  return { background: stops[props.overlayStrength] || stops.medium };
+});
 const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
 const containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-6xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-6xl mx-auto");
 const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");

package/dist/runtime/composables/useAdminSections.js

@@ -103,10 +103,14 @@ export const DEFAULT_SECTIONS = {
       paddingTop: "",
       paddingBottom: "",
       marginTop: "",
-      marginBottom: ""
+      marginBottom: "",
+      overlay: null,
+      overlayDirection: "to top",
+      overlayStrength: "medium"
     },
     groups: [
       { key: "design", label: "Design" },
+      { key: "overlay", label: "Overlay" },
       { key: "animation", label: "Animation" }
     ],
     fields: {
@@ -137,6 +141,24 @@ export const DEFAULT_SECTIONS = {
       textDirection: { type: "cards", label: "Direction", group: "design", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", group: "design", options: contentWidthOptions },
       textSize: { type: "cards", label: "Text Size", group: "design", options: textSizeOptions },
+      overlay: { type: "cards", label: "Gradient Overlay", group: "overlay", options: [
+        { value: null, label: "Auto", icon: "\u2B24" },
+        { value: true, label: "On", icon: "\u2713" },
+        { value: false, label: "Off", icon: "\u2715" }
+      ] },
+      overlayDirection: { type: "select", label: "Direction", group: "overlay", options: [
+        { value: "to top", label: "Bottom \u2192 Top" },
+        { value: "to bottom", label: "Top \u2192 Bottom" },
+        { value: "to right", label: "Left \u2192 Right" },
+        { value: "to left", label: "Right \u2192 Left" },
+        { value: "to bottom right", label: "Diagonal \u2198" },
+        { value: "to bottom left", label: "Diagonal \u2199" }
+      ] },
+      overlayStrength: { type: "cards", label: "Strength", group: "overlay", options: [
+        { value: "light", label: "Light", icon: "\u25CB" },
+        { value: "medium", label: "Medium", icon: "\u25D1" },
+        { value: "strong", label: "Strong", icon: "\u25CF" }
+      ] },
       animation: { type: "cards", label: "Animation", group: "animation", options: animationOptions },
       paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
       paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },

package/package.json

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