cinqcinqdev-seo 0.1.70 → 0.1.72

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sec-in' : 'sec-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
     <div :class="maxW">
 
       <!-- Optional title -->
@@ -32,7 +32,7 @@ const ca = (c, h) => {
   const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
   return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
 };
-import { computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 const props = defineProps({
   layout: { type: String, default: "article" },
   titleTag: { type: String, default: "h2" },
@@ -50,7 +50,25 @@ const props = defineProps({
   paddingTop: { type: String, default: "" },
   paddingBottom: { type: String, default: "" },
   marginTop: { type: String, default: "" },
-  marginBottom: { type: String, default: "" }
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(
+    ([e]) => {
+      if (e.isIntersecting) {
+        isVisible.value = true;
+        obs.disconnect();
+      }
+    },
+    { threshold: 0.06 }
+  );
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
 });
 const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
 const cardRound = computed(() => ({ sharp: "rounded-lg", rounded: "rounded-xl", pill: "rounded-full" })[props.radius] || "rounded-xl");
@@ -81,10 +99,20 @@ const spacingStyle = computed(() => {
   if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
   if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
   if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
   return s;
 });
 </script>
 
 <style scoped>
-.prose-content :deep(h1){font-size:1.9em;font-weight:900;letter-spacing:-.03em;margin:1.6em 0 .5em}.prose-content :deep(h2){font-size:1.4em;font-weight:900;letter-spacing:-.02em;margin:1.5em 0 .5em}.prose-content :deep(h3){font-size:1.15em;font-weight:800;margin:1.2em 0 .4em}.prose-content :deep(h4){font-size:1em;font-weight:700;margin:1em 0 .3em}.prose-content :deep(p){margin-bottom:1em}.prose-content :deep(ul){list-style:disc;margin-bottom:1em;padding-left:1.6em}.prose-content :deep(ol){list-style:decimal;margin-bottom:1em;padding-left:1.6em}.prose-content :deep(li){margin-bottom:.35em}.prose-content :deep(strong){font-weight:700}.prose-content :deep(em){font-style:italic}.prose-content :deep(u){text-decoration:underline}.prose-content :deep(a){opacity:.75;text-decoration:underline}.prose-content :deep(blockquote){border-left:3px solid;font-style:italic;margin:1.2em 0;opacity:.65;padding-left:1em}
+.sec-out{opacity:0;transform:translateY(20px)}.sec-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.prose-content :deep(h1){font-size:1.9em;font-weight:900;letter-spacing:-.03em;margin:1.6em 0 .5em}.prose-content :deep(h2){font-size:1.4em;font-weight:900;letter-spacing:-.02em;margin:1.5em 0 .5em}.prose-content :deep(h3){font-size:1.15em;font-weight:800;margin:1.2em 0 .4em}.prose-content :deep(h4){font-size:1em;font-weight:700;margin:1em 0 .3em}.prose-content :deep(p){margin-bottom:1em}.prose-content :deep(ul){list-style:disc;margin-bottom:1em;padding-left:1.6em}.prose-content :deep(ol){list-style:decimal;margin-bottom:1em;padding-left:1.6em}.prose-content :deep(li){margin-bottom:.35em}.prose-content :deep(strong){font-weight:700}.prose-content :deep(em){font-style:italic}.prose-content :deep(u){text-decoration:underline}.prose-content :deep(a){opacity:.75;text-decoration:underline}.prose-content :deep(blockquote){border-left:3px solid;font-style:italic;margin:1.2em 0;opacity:.65;padding-left:1em}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sec-in' : 'sec-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
     <div :class="[containerClass]">
 
       <div v-if="title || description" class="mb-12" :class="headerAlign === 'center' ? 'text-center max-w-2xl mx-auto' : 'max-w-xl'">
@@ -80,7 +80,7 @@ const ca = (c, h) => {
   const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
   return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
 };
-import { computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 const props = defineProps({
   layout: { type: String, default: "grid" },
   title: { type: String, default: "Our Services" },
@@ -101,7 +101,25 @@ const props = defineProps({
   paddingTop: { type: String, default: "" },
   paddingBottom: { type: String, default: "" },
   marginTop: { type: String, default: "" },
-  marginBottom: { type: String, default: "" }
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(
+    ([e]) => {
+      if (e.isIntersecting) {
+        isVisible.value = true;
+        obs.disconnect();
+      }
+    },
+    { threshold: 0.06 }
+  );
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
 });
 const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
 const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
@@ -115,6 +133,20 @@ const spacingStyle = computed(() => {
   if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
   if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
   if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
   return s;
 });
 </script>
+
+<style scoped>
+.sec-out{opacity:0;transform:translateY(20px)}.sec-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sec-in' : 'sec-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
     <div :class="[containerClass]">
 
       <div v-if="title || description" class="mb-12 max-w-xl">
@@ -81,7 +81,7 @@ const ca = (c, h) => {
   const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
   return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
 };
-import { computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 const props = defineProps({
   layout: { type: String, default: "grid" },
   title: { type: String, default: "What our clients say" },
@@ -99,7 +99,25 @@ const props = defineProps({
   paddingTop: { type: String, default: "" },
   paddingBottom: { type: String, default: "" },
   marginTop: { type: String, default: "" },
-  marginBottom: { type: String, default: "" }
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(
+    ([e]) => {
+      if (e.isIntersecting) {
+        isVisible.value = true;
+        obs.disconnect();
+      }
+    },
+    { threshold: 0.06 }
+  );
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
 });
 const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
 const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
@@ -113,6 +131,20 @@ const spacingStyle = computed(() => {
   if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
   if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
   if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
   return s;
 });
 </script>
+
+<style scoped>
+.sec-out{opacity:0;transform:translateY(20px)}.sec-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sec-in' : 'sec-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
 
     <!-- SPLIT -->
     <div v-if="layout === 'split'" :class="[containerClass, 'flex flex-col md:flex-row gap-12 items-center', reverse ? 'md:flex-row-reverse' : '']">
@@ -69,7 +69,7 @@ const ca = (c, h) => {
   const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
   return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
 };
-import { computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 const props = defineProps({
   layout: { type: String, default: "split" },
   title: { type: String, default: "Our Vision" },
@@ -89,7 +89,29 @@ const props = defineProps({
   radius: { type: String, default: "rounded" },
   textDirection: { type: String, default: "ltr" },
   contentWidth: { type: String, default: "normal" },
-  textSize: { type: String, default: "md" }
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(
+    ([e]) => {
+      if (e.isIntersecting) {
+        isVisible.value = true;
+        obs.disconnect();
+      }
+    },
+    { threshold: 0.06 }
+  );
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
 });
 const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
 const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
@@ -108,6 +130,20 @@ const spacingStyle = computed(() => {
   if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
   if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
   if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
   return s;
 });
 </script>
+
+<style scoped>
+.sec-out{opacity:0;transform:translateY(20px)}.sec-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
+</style>