cinqcinqdev-seo 0.1.70 → 0.1.72

package/dist/module.json

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

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

@@ -1,5 +1,5 @@
 <template>
-  <section :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+  <section ref="sectionEl" :class="isVisible ? 'sec-in' : 'sec-out'" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
 
     <!-- ── CENTERED ─────────────────────────────────────────────── -->
     <div v-if="layout === 'centered'" :class="[sectionPad]">
@@ -121,7 +121,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: "centered" },
   titleTag: { type: String, default: "h1" },
@@ -144,7 +144,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-[24px]", pill: "rounded-[36px]" })[props.radius] || "rounded-[24px]");
@@ -161,6 +179,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/CallToAction.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]">
 
     <!-- CENTERED -->
     <div v-if="layout === 'centered'" :class="[containerClass, 'text-center']">
@@ -65,7 +65,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: "centered" },
   badge: { type: String, default: "" },
@@ -85,7 +85,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-2xl", pill: "rounded-full" })[props.radius] || "rounded-2xl");
@@ -99,6 +117,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/ContactForm.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]">
 
       <!-- SPLIT layout -->
@@ -100,7 +100,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 { ref, reactive, computed } from "vue";
+import { ref, reactive, computed, onMounted } from "vue";
 const props = defineProps({
   layout: { type: String, default: "split" },
   title: { type: String, default: "Contactez-nous" },
@@ -116,6 +116,7 @@ const props = defineProps({
   paddingBottom: { type: String, default: "" },
   marginTop: { type: String, default: "" },
   marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" },
   fields: {
     type: Array,
     default: () => [
@@ -130,6 +131,23 @@ const props = defineProps({
   spacing: { type: String, default: "normal" },
   radius: { type: String, default: "rounded" }
 });
+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 emit = defineEmits(["submit"]);
 const submitting = ref(false);
 const sent = ref(false);
@@ -156,6 +174,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/FAQ.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 class="text-center mb-16">
         <component :is="titleTag" class="font-black uppercase tracking-tighter italic" :style="{ fontSize: titleFontSize }">{{ title }}</component>
@@ -31,7 +31,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 { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 const props = defineProps({
   title: { type: String, default: "FAQ" },
   titleTag: { type: String, default: "h2" },
@@ -46,7 +46,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-[24px]", pill: "rounded-[36px]" })[props.radius] || "rounded-[24px]");
@@ -64,6 +82,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/Features.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad, 'overflow-hidden']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+  <section ref="sectionEl" :class="[sectionPad, 'overflow-hidden', isVisible ? 'sec-in' : 'sec-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
     <div :class="[containerClass]">
       <div class="mb-16 md:mb-20">
         <component :is="titleTag" class="font-black uppercase tracking-tighter leading-none italic" :style="{ fontSize: titleFontSize }">{{ title }}</component>
@@ -29,7 +29,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({
   title: { type: String, default: "Why choose us?" },
   titleTag: { type: String, default: "h2" },
@@ -45,7 +45,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-[32px]", pill: "rounded-[48px]" })[props.radius] || "rounded-[32px]");
@@ -59,6 +77,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/HeroSection.vue

@@ -193,9 +193,11 @@ const props = defineProps({
   paddingBottom: { type: String, default: "" },
   marginTop: { type: String, default: "" },
   marginBottom: { type: String, default: "" },
-  overlay: { default: null },
+  paddingX: { type: String, default: "" },
+  overlay: { type: String, default: "auto" },
   overlayDirection: { type: String, default: "to top" },
-  overlayStrength: { type: String, default: "medium" }
+  overlayStrength: { type: String, default: "medium" },
+  overlayColor: { type: String, default: "" }
 });
 const sectionEl = ref(null);
 const isVisible = ref(false);
@@ -225,13 +227,13 @@ const as_ = (n) => {
   return { animationDelay: `${n * 0.1}s`, animationFillMode: "both" };
 };
 const showOverlay = computed(() => {
-  if (props.overlay === false) return false;
-  if (props.overlay === true) return true;
+  if (props.overlay === "off") return false;
+  if (props.overlay === "on") return true;
   return ["fullscreen", "parallax", "video", "magazine"].includes(props.layout);
 });
 const overlayStyle = computed(() => {
   const dir = props.overlayDirection || "to top";
-  const c = props.bgColor;
+  const c = props.overlayColor || 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%)`,
@@ -249,6 +251,16 @@ 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>

package/dist/runtime/components/sections/Newsletter.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]">
 
     <!-- CENTERED -->
     <div v-if="layout === 'centered'" :class="[containerClass, 'text-center']">
@@ -51,7 +51,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: "centered" },
   badge: { type: String, default: "" },
@@ -70,7 +70,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");
@@ -84,6 +102,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/Pricing.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 text-center max-w-2xl mx-auto">
@@ -88,7 +88,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: "cards" },
   title: { type: String, default: "Our Pricing" },
@@ -106,7 +106,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");
@@ -126,6 +144,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/Process.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="['horizontal','cards'].includes(layout) ? '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: "steps" },
   title: { type: String, default: "How it works" },
@@ -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/Quote.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]">
 
     <!-- CENTERED -->
     <div v-if="layout === 'centered'" :class="[containerClass, 'text-center']">
@@ -62,7 +62,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: "centered" },
   quote: { type: String, default: "" },
@@ -79,7 +79,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 containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-5xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-3xl mx-auto");
@@ -91,6 +109,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>