cinqcinqdev-seo 0.1.71 → 0.1.73

package/dist/runtime/components/sections/{Features.vue → cinqcinq/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 → cinqcinq/HeroSection.vue}

@@ -193,6 +193,7 @@ const props = defineProps({
   paddingBottom: { type: String, default: "" },
   marginTop: { type: String, default: "" },
   marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" },
   overlay: { type: String, default: "auto" },
   overlayDirection: { type: String, default: "to top" },
   overlayStrength: { type: String, default: "medium" },
@@ -250,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 → cinqcinq/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 → cinqcinq/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 → cinqcinq/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 → cinqcinq/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>

package/dist/runtime/components/sections/{RichText.vue → cinqcinq/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 → cinqcinq/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 → cinqcinq/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 → cinqcinq/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>

package/dist/runtime/components/sections/swiss-style/BlogHero.d.vue.ts

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