cinqcinqdev-seo 0.1.55 → 0.1.57

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.1.55",
+  "version": "0.1.57",
   "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 }">
+  <section :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
 
     <!-- ── CENTERED ─────────────────────────────────────────────── -->
     <div v-if="layout === 'centered'" :class="[sectionPad]">
@@ -140,7 +140,11 @@ const props = defineProps({
   radius: { type: String, default: "rounded" },
   textDirection: { type: String, default: "ltr" },
   contentWidth: { type: String, default: "narrow" },
-  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: "" }
 });
 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]");
@@ -150,4 +154,13 @@ const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base
 const alignText = computed(() => ({ left: "text-left", center: "text-center", right: "text-right" })[props.textAlign] || "text-center");
 const alignFlex = computed(() => ({ left: "justify-start", center: "justify-center", right: "justify-end" })[props.textAlign] || "justify-center");
 const alignProse = computed(() => ({ left: "max-w-2xl", center: "max-w-2xl mx-auto", right: "max-w-2xl ml-auto" })[props.textAlign] || "max-w-2xl mx-auto");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
 
     <!-- CENTERED -->
     <div v-if="layout === 'centered'" :class="[containerClass, 'text-center']">
@@ -81,11 +81,24 @@ 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: "" }
 });
 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");
 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 titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.3rem,2vw,1.8rem)", lg: "clamp(2.5rem,8vw,5.5rem)" })[props.textSize] || "clamp(1.3rem,2vw,1.8rem)");
 const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
     <div :class="[containerClass]">
 
       <!-- Header -->
@@ -238,7 +238,11 @@ 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: "" }
 });
 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");
@@ -261,4 +265,13 @@ const gridCols = computed(() => {
   if (n === 4) return "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4";
   return "grid-cols-1 md:grid-cols-3";
 });
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
     <div :class="[containerClass]">
 
       <!-- SPLIT layout -->
@@ -112,6 +112,10 @@ const props = defineProps({
   textDirection: { type: String, default: "ltr" },
   contentWidth: { type: String, default: "normal" },
   textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
   fields: {
     type: Array,
     default: () => [
@@ -145,4 +149,13 @@ const handleSubmit = async () => {
     sent.value = false;
   }, 4e3);
 };
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
     <div :class="[containerClass]">
 
       <!-- Header row: title + search -->
@@ -204,4 +204,13 @@ const gridCols = computed(() => {
   if (n <= 3) return "grid-cols-1 md:grid-cols-2";
   return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
 });
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :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>
@@ -42,7 +42,11 @@ const props = defineProps({
   radius: { type: String, default: "rounded" },
   textDirection: { type: String, default: "ltr" },
   contentWidth: { type: String, default: "narrow" },
-  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: "" }
 });
 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]");
@@ -53,4 +57,13 @@ const openIndex = ref(null);
 const toggle = (index) => {
   openIndex.value = openIndex.value === index ? null : index;
 };
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad, 'overflow-hidden']" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad, 'overflow-hidden']" :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>
@@ -41,11 +41,24 @@ 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: "" }
 });
 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]");
 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 titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.3rem,2vw,1.8rem)", lg: "clamp(2.5rem,7vw,6rem)" })[props.textSize] || "clamp(1.3rem,2vw,1.8rem)");
 const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="relative overflow-hidden" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section class="relative overflow-hidden" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
 
     <!-- CENTERED -->
     <div v-if="layout === 'centered'" class="px-6 md:px-12 pt-20 pb-16 text-center">
@@ -134,9 +134,22 @@ 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: "" }
 });
 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");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  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 }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
 
     <!-- CENTERED -->
     <div v-if="layout === 'centered'" :class="[containerClass, 'text-center']">
@@ -66,11 +66,24 @@ 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: "" }
 });
 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");
 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-5xl mx-auto");
 const titleFontSize = computed(() => ({ sm: "clamp(0.9rem,1.2vw,1.1rem)", md: "clamp(1.1rem,1.8vw,1.6rem)", lg: "clamp(2.2rem,6vw,4.5rem)" })[props.textSize] || "clamp(1.1rem,1.8vw,1.6rem)");
 const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :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">
@@ -102,7 +102,11 @@ 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: "" }
 });
 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,4 +119,13 @@ const allFeatures = computed(() => {
   return [...set];
 });
 const planHasFeature = (plan, feat) => (plan.features || []).some((f) => (typeof f === "object" ? f.fr || JSON.stringify(f) : f) === (typeof feat === "object" ? feat.fr || JSON.stringify(feat) : feat));
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :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'">
@@ -95,11 +95,24 @@ 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: "" }
 });
 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");
 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 titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.3rem,2vw,1.8rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.3rem,2vw,1.8rem)");
 const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
 
     <!-- CENTERED -->
     <div v-if="layout === 'centered'" :class="[containerClass, 'text-center']">
@@ -75,9 +75,22 @@ const props = defineProps({
   radius: { type: String, default: "rounded" },
   textDirection: { type: String, default: "ltr" },
   contentWidth: { type: String, default: "narrow" },
-  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: "" }
 });
 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");
 const quoteFontSize = computed(() => ({ sm: "clamp(0.95rem,1.2vw,1.1rem)", md: "clamp(1.1rem,1.8vw,1.6rem)", lg: "clamp(2rem,6vw,5rem)" })[props.textSize] || "clamp(1.1rem,1.8vw,1.6rem)");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
     <div :class="[containerClass]">
 
       <!-- Header -->
@@ -161,7 +161,11 @@ 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: "" }
 });
 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-3xl" })[props.radius] || "rounded-2xl");
@@ -174,4 +178,13 @@ const gridCols = computed(() => {
   if (n === 2) return "grid-cols-1 sm:grid-cols-2";
   return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
 });
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
     <div :class="maxW">
 
       <!-- Optional title -->
@@ -46,7 +46,11 @@ 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: "" }
 });
 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");
@@ -60,6 +64,15 @@ const rendered = computed(() => {
   if (typeof props.content === "object") return props.content.fr || "";
   return props.content;
 });
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>
 
 <style scoped>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :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'">
@@ -97,11 +97,24 @@ 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: "" }
 });
 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");
 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 titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.3rem,2vw,1.8rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.3rem,2vw,1.8rem)");
 const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
     <div :class="[containerClass]">
 
       <div v-if="title || description" class="mb-12 max-w-xl">
@@ -95,11 +95,24 @@ 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: "" }
 });
 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");
 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 titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.3rem,2vw,1.8rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.3rem,2vw,1.8rem)");
 const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :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' : '']">
@@ -101,4 +101,13 @@ const imageContainerClass = computed(() => {
   const styles = { rounded: `aspect-[4/3] ${r}`, square: "aspect-square rounded-xl", circle: "aspect-square rounded-full max-w-[360px] mx-auto", portrait: `aspect-[3/4] ${r} max-w-sm mx-auto` };
   return styles[props.imageStyle] ?? styles.rounded;
 });
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  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];
+  return s;
+});
 </script>

package/dist/runtime/composables/useAdminSections.js

@@ -48,6 +48,29 @@ const textSizeOptions = [
   { value: "md", label: "Normal", icon: "M" },
   { value: "lg", label: "Large", icon: "L" }
 ];
+const paddingOptions = [
+  { value: "", label: "Auto" },
+  { value: "none", label: "None (0)" },
+  { value: "xs", label: "XS (8px)" },
+  { value: "sm", label: "SM (24px)" },
+  { value: "md", label: "MD (48px)" },
+  { value: "lg", label: "LG (80px)" },
+  { value: "xl", label: "XL (128px)" }
+];
+const marginOptions = [
+  { value: "", label: "Auto" },
+  { value: "none", label: "None (0)" },
+  { value: "xs", label: "XS (8px)" },
+  { value: "sm", label: "SM (24px)" },
+  { value: "md", label: "MD (48px)" },
+  { value: "lg", label: "LG (80px)" },
+  { value: "xl", label: "XL (128px)" },
+  { value: "-xs", label: "-XS (-8px)" },
+  { value: "-sm", label: "-SM (-24px)" },
+  { value: "-md", label: "-MD (-48px)" },
+  { value: "-lg", label: "-LG (-80px)" },
+  { value: "-xl", label: "-XL (-128px)" }
+];
 const i18n0 = (fr = "") => ({ fr, ar: "", en: "" });
 export const DEFAULT_SECTIONS = {
   HeroSection: {
@@ -72,7 +95,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     groups: [
       { key: "design", label: "Design" },
@@ -105,7 +132,11 @@ 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 },
-      animation: { type: "cards", label: "Animation", group: "animation", options: animationOptions }
+      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 },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   TextVisual: {
@@ -130,7 +161,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -165,7 +200,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   ServiceGrid: {
@@ -187,7 +226,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -215,7 +258,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   Features: {
@@ -230,7 +277,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       title: { type: "text", label: "Section Title", i18n: true },
@@ -244,7 +295,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   FAQ: {
@@ -259,7 +314,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "narrow",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       title: { type: "text", label: "Title", i18n: true },
@@ -273,7 +332,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   Process: {
@@ -292,7 +355,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -317,7 +384,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   Testimonials: {
@@ -336,7 +407,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -363,7 +438,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   Pricing: {
@@ -382,7 +461,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -409,7 +492,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   ContactForm: {
@@ -427,7 +514,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -445,7 +536,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   // ── Blog sections ─────────────────────────────────────────────────────────
@@ -470,7 +565,11 @@ export const DEFAULT_SECTIONS = {
       textDirection: "ltr",
       contentWidth: "narrow",
       textSize: "md",
-      textAlign: "center"
+      textAlign: "center",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -498,7 +597,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   RichText: {
@@ -516,7 +619,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Width", options: [
@@ -536,7 +643,11 @@ export const DEFAULT_SECTIONS = {
       spacing: { type: "cards", label: "Espacement", options: spacingOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   CallToAction: {
@@ -557,7 +668,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -578,7 +693,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   Quote: {
@@ -595,7 +714,11 @@ export const DEFAULT_SECTIONS = {
       spacing: "normal",
       textDirection: "ltr",
       contentWidth: "narrow",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -612,7 +735,11 @@ export const DEFAULT_SECTIONS = {
       spacing: { type: "cards", label: "Espacement", options: spacingOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   DataTable: {
@@ -650,7 +777,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -692,7 +823,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   Comparison: {
@@ -718,7 +853,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -753,7 +892,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   RelatedPages: {
@@ -775,7 +918,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -800,7 +947,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   },
   Newsletter: {
@@ -820,7 +971,11 @@ export const DEFAULT_SECTIONS = {
       radius: "rounded",
       textDirection: "ltr",
       contentWidth: "normal",
-      textSize: "md"
+      textSize: "md",
+      paddingTop: "",
+      paddingBottom: "",
+      marginTop: "",
+      marginBottom: ""
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -840,7 +995,11 @@ export const DEFAULT_SECTIONS = {
       radius: { type: "cards", label: "Arrondis", options: radiusOptions },
       textDirection: { type: "cards", label: "Direction", options: directionOptions },
       contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
-      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions },
+      paddingTop: { type: "select", label: "Padding Top", options: paddingOptions },
+      paddingBottom: { type: "select", label: "Padding Bottom", options: paddingOptions },
+      marginTop: { type: "select", label: "Margin Top", options: marginOptions },
+      marginBottom: { type: "select", label: "Margin Bottom", options: marginOptions }
     }
   }
 };

package/package.json

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