cinqcinqdev-seo 0.1.44 → 0.1.46

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

@@ -1,14 +1,14 @@
 <template>
-  <section class="relative overflow-hidden" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section class="relative overflow-hidden" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
 
     <!-- CENTERED -->
     <div v-if="layout === 'centered'" class="px-6 md:px-12 pt-20 pb-16 text-center">
-      <div class="max-w-4xl mx-auto">
+      <div :class="[containerClass]">
         <span v-if="badge" class="inline-flex items-center gap-1.5 text-[10px] font-bold tracking-[0.4em] uppercase px-4 py-1.5 rounded-full border mb-8" :style="{ borderColor: ca(textColor, '30'), color: ca(textColor, '80') }">
           <span class="w-1.5 h-1.5 rounded-full inline-block" :style="{ backgroundColor: ca(textColor, '60') }"></span>{{ badge }}
         </span>
         <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-6" :style="{ fontSize: titleSize === 'sm' ? 'clamp(2.5rem,5vw,4rem)' : titleSize === 'lg' ? 'clamp(3.5rem,9vw,8rem)' : 'clamp(3rem,7vw,6rem)' }">{{ title }}</component>
-        <p class="text-sm leading-relaxed max-w-lg mx-auto mb-10" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
+        <p :class="[bodyClass, 'leading-relaxed max-w-lg mx-auto mb-10']" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
         <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-8 py-3.5 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5 active:scale-95" :style="{ backgroundColor: textColor, color: bgColor }">{{ ctaText }}<span>→</span></NuxtLink>
         <div v-if="image" :class="['mt-14 mx-auto aspect-video overflow-hidden max-w-3xl', cardRound]">
           <img :src="image" class="w-full h-full object-cover" />
@@ -18,11 +18,11 @@
 
     <!-- SPLIT -->
     <div v-else-if="layout === 'split'" class="px-6 md:px-12 py-16">
-      <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 md:gap-20 items-center">
+      <div :class="[containerClass, 'grid md:grid-cols-2 gap-12 md:gap-20 items-center']">
         <div>
           <span v-if="badge" class="inline-block text-[9px] font-black tracking-[0.5em] uppercase mb-6 opacity-35">{{ badge }}</span>
           <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-6" :style="{ fontSize: 'clamp(2.2rem,5vw,4.5rem)' }">{{ title }}</component>
-          <p class="text-sm leading-relaxed mb-10 max-w-sm" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
+          <p :class="[bodyClass, 'leading-relaxed mb-10 max-w-sm']" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
           <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-7 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5 active:scale-95" :style="{ backgroundColor: textColor, color: bgColor }">{{ ctaText }}<span>→</span></NuxtLink>
         </div>
         <div :class="['aspect-[4/3] overflow-hidden', cardRound]">
@@ -34,12 +34,12 @@
 
     <!-- BENTO -->
     <div v-else-if="layout === 'bento'" class="p-3 md:p-5">
-      <div class="max-w-6xl mx-auto grid grid-cols-12 gap-3">
+      <div :class="[containerClass, 'grid grid-cols-12 gap-3']">
         <div :class="['col-span-12 md:col-span-7 p-8 md:p-10 border flex flex-col justify-between min-h-[320px]', cardRound]" :style="{ borderColor: ca(textColor, '10'), backgroundColor: ca(textColor, '04') }">
           <span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.4em] opacity-30">{{ badge }}</span>
           <div>
             <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-4" :style="{ fontSize: 'clamp(2rem,4.5vw,3.8rem)' }">{{ title }}</component>
-            <p class="text-sm leading-relaxed mb-8 max-w-xs" :style="{ opacity: 0.45 }">{{ subtitle }}</p>
+            <p :class="[bodyClass, 'leading-relaxed mb-8 max-w-xs']" :style="{ opacity: 0.45 }">{{ subtitle }}</p>
             <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-all hover:gap-5 active:scale-95" :style="{ backgroundColor: textColor, color: bgColor }">{{ ctaText }}<span>→</span></NuxtLink>
           </div>
         </div>
@@ -57,11 +57,11 @@
         <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '08') }"></div>
         <div class="absolute inset-0" :style="{ background: `linear-gradient(to top, ${bgColor} 20%, ${ca(bgColor, 'cc')} 40%, ${ca(bgColor, '44')} 65%, transparent 100%)` }"></div>
       </div>
-      <div class="relative z-10 max-w-6xl mx-auto w-full px-6 md:px-12 pb-14">
+      <div :class="[containerClass, 'relative z-10 w-full px-6 md:px-12 pb-14']">
         <span v-if="badge" class="inline-block text-[9px] font-black uppercase tracking-[0.5em] opacity-40 mb-4">{{ badge }}</span>
         <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-6" :style="{ fontSize: 'clamp(3rem,8vw,7rem)' }">{{ title }}</component>
         <div class="flex flex-col sm:flex-row sm:items-center gap-6 sm:gap-10">
-          <p class="text-sm leading-relaxed max-w-xs" :style="{ opacity: 0.6 }">{{ subtitle }}</p>
+          <p :class="[bodyClass, 'leading-relaxed max-w-xs']" :style="{ opacity: 0.6 }">{{ subtitle }}</p>
           <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-7 py-3 rounded-full text-[11px] font-black uppercase tracking-widest border transition-all hover:gap-5 shrink-0" :style="{ borderColor: ca(textColor, '50'), color: textColor }">{{ ctaText }}<span>→</span></NuxtLink>
         </div>
       </div>
@@ -69,7 +69,7 @@
 
     <!-- MINIMAL -->
     <div v-else-if="layout === 'minimal'" class="px-6 md:px-12 py-14">
-      <div class="max-w-6xl mx-auto">
+      <div :class="[containerClass]">
         <div class="flex items-center gap-4 mb-10 border-b pb-5" :style="{ borderColor: ca(textColor, '10') }">
           <span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.5em] opacity-30">{{ badge }}</span>
           <div class="flex-1 h-px" :style="{ backgroundColor: ca(textColor, '08') }"></div>
@@ -80,7 +80,7 @@
           <img :src="image" class="w-full h-full object-cover" />
         </div>
         <div class="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 border-t pt-8" :style="{ borderColor: ca(textColor, '10') }">
-          <p class="text-sm leading-relaxed max-w-xs" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
+          <p :class="[bodyClass, 'leading-relaxed max-w-xs']" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
           <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5 shrink-0">{{ ctaText }}<span>→</span></NuxtLink>
         </div>
       </div>
@@ -88,7 +88,7 @@
 
     <!-- EDITORIAL -->
     <div v-else class="px-6 md:px-12 py-14">
-      <div class="max-w-6xl mx-auto">
+      <div :class="[containerClass]">
         <div class="flex items-center gap-4 mb-8">
           <div class="w-8 h-px" :style="{ backgroundColor: ca(textColor, '30') }"></div>
           <span class="text-[9px] font-black uppercase tracking-[0.5em] opacity-30">{{ badge || '—' }}</span>
@@ -100,7 +100,7 @@
           </div>
         </div>
         <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 border-t pt-8" :style="{ borderColor: ca(textColor, '10') }">
-          <p class="text-sm leading-relaxed max-w-sm" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
+          <p :class="[bodyClass, 'leading-relaxed max-w-sm']" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
           <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-7 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5 shrink-0 active:scale-95" :style="{ backgroundColor: textColor, color: bgColor }">{{ ctaText }}<span>→</span></NuxtLink>
         </div>
       </div>
@@ -131,7 +131,12 @@ const props = defineProps({
   bgColor: { type: String, default: "rgba(var(--primary-color), 1)" },
   textColor: { type: String, default: "rgba(var(--body-bg), 1)" },
   spacing: { type: String, default: "normal" },
-  radius: { type: String, default: "rounded" }
+  radius: { type: String, default: "rounded" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" }
 });
 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");
 </script>

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

@@ -1,11 +1,11 @@
 <template>
-  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
 
     <!-- CENTERED -->
-    <div v-if="layout === 'centered'" class="max-w-xl mx-auto text-center">
+    <div v-if="layout === 'centered'" :class="[containerClass, 'text-center']">
       <span v-if="badge" class="inline-block text-[10px] font-black uppercase tracking-[0.4em] px-3 py-1 rounded-full border mb-6" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
-      <h2 class="font-black uppercase tracking-tighter leading-[0.9] mb-3" :style="{ fontSize: 'clamp(1.8rem,5vw,3.5rem)' }">{{ title }}</h2>
-      <p v-if="description" class="text-sm leading-relaxed mb-8" :style="{ opacity: 0.6 }">{{ description }}</p>
+      <h2 class="font-black uppercase tracking-tighter leading-[0.9] mb-3" :style="{ fontSize: titleFontSize }">{{ title }}</h2>
+      <p v-if="description" :class="[bodyClass, 'leading-relaxed mb-8']" :style="{ opacity: 0.6 }">{{ description }}</p>
       <div class="flex gap-2 max-w-sm mx-auto">
         <input type="email" :placeholder="placeholder || 'your@email.com'" class="flex-1 px-4 py-3 text-sm outline-none rounded-xl border" :style="{ backgroundColor: ca(textColor, '06'), borderColor: ca(textColor, '15'), color: textColor }" />
         <button :class="['px-5 py-3 text-[11px] font-black uppercase tracking-wider shrink-0', cardRound]" :style="{ backgroundColor: textColor, color: bgColor }">{{ buttonText || 'Subscribe' }}</button>
@@ -14,11 +14,11 @@
     </div>
 
     <!-- SPLIT -->
-    <div v-else-if="layout === 'split'" :class="['grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-16 items-center max-w-5xl mx-auto']">
+    <div v-else-if="layout === 'split'" :class="[containerClass, 'grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-16 items-center']">
       <div>
         <span v-if="badge" class="inline-block text-[10px] font-black uppercase tracking-[0.4em] mb-4" :style="{ opacity: 0.5 }">{{ badge }}</span>
-        <h2 class="font-black uppercase tracking-tighter leading-[0.9] mb-3" :style="{ fontSize: 'clamp(1.8rem,4vw,3rem)' }">{{ title }}</h2>
-        <p v-if="description" class="text-sm leading-relaxed" :style="{ opacity: 0.6 }">{{ description }}</p>
+        <h2 class="font-black uppercase tracking-tighter leading-[0.9] mb-3" :style="{ fontSize: titleFontSize }">{{ title }}</h2>
+        <p v-if="description" :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.6 }">{{ description }}</p>
       </div>
       <div>
         <div class="flex gap-2">
@@ -30,11 +30,11 @@
     </div>
 
     <!-- MINIMAL -->
-    <div v-else class="max-w-3xl mx-auto">
+    <div v-else :class="[containerClass]">
       <div class="flex flex-col md:flex-row items-start md:items-center gap-6 border-t border-b py-10" :style="{ borderColor: ca(textColor, '15') }">
         <div class="flex-1">
-          <h2 class="font-black uppercase tracking-tight leading-[0.92] mb-1" :style="{ fontSize: 'clamp(1rem,2.5vw,1.6rem)' }">{{ title }}</h2>
-          <p v-if="description" class="text-xs" :style="{ opacity: 0.55 }">{{ description }}</p>
+          <h2 class="font-black uppercase tracking-tight leading-[0.92] mb-1" :style="{ fontSize: titleFontSize }">{{ title }}</h2>
+          <p v-if="description" :class="[bodyClass]" :style="{ opacity: 0.55 }">{{ description }}</p>
         </div>
         <div class="flex gap-2 w-full md:w-auto">
           <input type="email" :placeholder="placeholder || 'your@email.com'" class="flex-1 md:w-48 px-4 py-2.5 text-sm outline-none rounded-lg border" :style="{ backgroundColor: ca(textColor, '06'), borderColor: ca(textColor, '15'), color: textColor }" />
@@ -63,8 +63,14 @@ const props = defineProps({
   bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
   textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
-  radius: { type: String, default: "rounded" }
+  radius: { type: String, default: "rounded" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" }
 });
 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(1rem,2vw,1.5rem)", md: "clamp(1.8rem,5vw,3.5rem)", lg: "clamp(2.2rem,6vw,4.5rem)" })[props.textSize] || "clamp(1.8rem,5vw,3.5rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
 </script>

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

@@ -1,11 +1,11 @@
 <template>
-  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
-    <div class="max-w-6xl mx-auto">
+  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div :class="[containerClass]">
 
       <div v-if="title || description" class="mb-12 text-center max-w-2xl mx-auto">
         <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
-        <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-4">{{ title }}</component>
-        <p v-if="description" class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ description }}</p>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9] mb-4" :style="{ fontSize: titleFontSize }">{{ title }}</component>
+        <p v-if="description" :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.55 }">{{ description }}</p>
       </div>
 
       <!-- CARDS -->
@@ -99,10 +99,16 @@ const props = defineProps({
   bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
   textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
-  radius: { type: String, default: "rounded" }
+  radius: { type: String, default: "rounded" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" }
 });
 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(1.5rem,3vw,2.5rem)", md: "clamp(2rem,4vw,3.5rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(2rem,4vw,3.5rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
 const allFeatures = computed(() => {
   const set = /* @__PURE__ */ new Set();
   props.items.forEach((p) => (p.features || []).forEach((f) => set.add(typeof f === "object" ? f.fr || JSON.stringify(f) : f)));

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

@@ -1,11 +1,11 @@
 <template>
-  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
-    <div class="max-w-6xl mx-auto">
+  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+    <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'">
         <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
-        <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-4">{{ title }}</component>
-        <p v-if="description" class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ description }}</p>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9] mb-4" :style="{ fontSize: titleFontSize }">{{ title }}</component>
+        <p v-if="description" :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.55 }">{{ description }}</p>
       </div>
 
       <!-- STEPS (vertical) -->
@@ -92,8 +92,14 @@ const props = defineProps({
   bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
   textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
-  radius: { type: String, default: "rounded" }
+  radius: { type: String, default: "rounded" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" }
 });
 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(1.5rem,3vw,2.5rem)", md: "clamp(2rem,4vw,3.5rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(2rem,4vw,3.5rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
 </script>

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

@@ -1,10 +1,10 @@
 <template>
-  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
 
     <!-- CENTERED -->
-    <div v-if="layout === 'centered'" class="max-w-3xl mx-auto text-center">
+    <div v-if="layout === 'centered'" :class="[containerClass, 'text-center']">
       <div class="text-6xl font-black mb-6 leading-none" :style="{ opacity: 0.15 }">"</div>
-      <blockquote class="font-black uppercase tracking-tighter leading-[0.92] mb-8" :style="{ fontSize: 'clamp(1.6rem,4vw,3rem)' }">{{ quote }}</blockquote>
+      <blockquote class="font-black uppercase tracking-tighter leading-[0.92] mb-8" :style="{ fontSize: quoteFontSize }">{{ quote }}</blockquote>
       <div class="flex items-center justify-center gap-3">
         <img v-if="avatar" :src="avatar" class="w-10 h-10 rounded-full object-cover" />
         <div v-else-if="author" class="w-10 h-10 rounded-full flex items-center justify-center text-xs font-black" :style="{ backgroundColor: ca(textColor, '15') }">{{ author[0] }}</div>
@@ -16,10 +16,10 @@
     </div>
 
     <!-- LEFT -->
-    <div v-else-if="layout === 'left'" class="max-w-3xl mx-auto flex gap-8 items-start">
+    <div v-else-if="layout === 'left'" :class="[containerClass, 'flex gap-8 items-start']">
       <div class="text-8xl font-black leading-none shrink-0 mt-2" :style="{ opacity: 0.12 }">"</div>
       <div>
-        <blockquote class="font-black uppercase tracking-tight leading-[0.92] mb-7" :style="{ fontSize: 'clamp(1.3rem,3vw,2.5rem)' }">{{ quote }}</blockquote>
+        <blockquote class="font-black uppercase tracking-tight leading-[0.92] mb-7" :style="{ fontSize: quoteFontSize }">{{ quote }}</blockquote>
         <div class="flex items-center gap-3">
           <img v-if="avatar" :src="avatar" class="w-9 h-9 rounded-full object-cover" />
           <div v-else-if="author" class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-black" :style="{ backgroundColor: ca(textColor, '15') }">{{ author[0] }}</div>
@@ -32,9 +32,9 @@
     </div>
 
     <!-- LARGE (full width statement) -->
-    <div v-else class="max-w-5xl mx-auto">
+    <div v-else :class="[containerClass]">
       <div class="border-t border-b py-12 md:py-16" :style="{ borderColor: ca(textColor, '20') }">
-        <blockquote class="font-black uppercase tracking-tighter leading-[0.88] mb-10" :style="{ fontSize: 'clamp(2rem,7vw,6rem)' }">{{ quote }}</blockquote>
+        <blockquote class="font-black uppercase tracking-tighter leading-[0.88] mb-10" :style="{ fontSize: quoteFontSize }">{{ quote }}</blockquote>
         <div class="flex items-center gap-4">
           <div class="w-12 h-px" :style="{ backgroundColor: textColor }"></div>
           <img v-if="avatar" :src="avatar" class="w-8 h-8 rounded-full object-cover" />
@@ -72,7 +72,12 @@ const props = defineProps({
   bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
   textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
-  radius: { type: String, default: "rounded" }
+  radius: { type: String, default: "rounded" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "narrow" },
+  textSize: { type: String, default: "md" }
 });
 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(1rem,2.5vw,1.8rem)", md: "clamp(1.6rem,4vw,3rem)", lg: "clamp(2rem,6vw,5rem)" })[props.textSize] || "clamp(1.6rem,4vw,3rem)");
 </script>

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

@@ -1,9 +1,9 @@
 <template>
-  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
     <div :class="maxW">
 
       <!-- Optional title -->
-      <component v-if="title" :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9] mb-10" :style="{ fontSize: 'clamp(1.6rem,4vw,3rem)' }">{{ title }}</component>
+      <component v-if="title" :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9] mb-10" :style="{ fontSize: titleFontSize }">{{ title }}</component>
 
       <!-- Divider above content -->
       <div v-if="title" class="mb-10 h-px w-12" :style="{ backgroundColor: textColor }"></div>
@@ -43,11 +43,18 @@ const props = defineProps({
   bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
   textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
-  radius: { type: String, default: "rounded" }
+  radius: { type: String, default: "rounded" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" }
 });
 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 maxW = computed(() => ({ article: "max-w-2xl mx-auto", wide: "max-w-4xl mx-auto", full: "w-full" })[props.layout] || "max-w-2xl mx-auto");
+const titleFontSize = computed(() => ({ sm: "clamp(1rem,2vw,1.5rem)", md: "clamp(1.6rem,4vw,3rem)", lg: "clamp(2rem,5vw,4rem)" })[props.textSize] || "clamp(1.6rem,4vw,3rem)");
+const maxW = computed(() => {
+  if (props.contentWidth !== "normal") return { narrow: "max-w-2xl mx-auto", normal: "max-w-4xl mx-auto", wide: "max-w-6xl mx-auto", full: "max-w-full" }[props.contentWidth] || "max-w-4xl mx-auto";
+  return { article: "max-w-2xl mx-auto", wide: "max-w-4xl mx-auto", full: "w-full" }[props.layout] || "max-w-2xl mx-auto";
+});
 const rendered = computed(() => {
   if (!props.content) return "";
   if (typeof props.content === "object") return props.content.fr || "";

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

@@ -1,11 +1,11 @@
 <template>
-  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
-    <div class="max-w-6xl mx-auto">
+  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div :class="[containerClass]">
 
       <div v-if="title || description" class="mb-12" :class="headerAlign === 'center' ? 'text-center max-w-2xl mx-auto' : 'max-w-xl'">
         <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
-        <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-4">{{ title }}</component>
-        <p v-if="description" class="text-sm leading-relaxed mb-6" :style="{ opacity: 0.55 }">{{ description }}</p>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9] mb-4" :style="{ fontSize: titleFontSize }">{{ title }}</component>
+        <p v-if="description" :class="[bodyClass, 'leading-relaxed mb-6']" :style="{ opacity: 0.55 }">{{ description }}</p>
         <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3">
           <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
             class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
@@ -94,8 +94,14 @@ const props = defineProps({
   bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
   textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
-  radius: { type: String, default: "rounded" }
+  radius: { type: String, default: "rounded" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" }
 });
 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(1.5rem,3vw,2.5rem)", md: "clamp(2rem,4vw,3.5rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(2rem,4vw,3.5rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
 </script>

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

@@ -1,11 +1,11 @@
 <template>
-  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
-    <div class="max-w-6xl mx-auto">
+  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div :class="[containerClass]">
 
       <div v-if="title || description" class="mb-12 max-w-xl">
         <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
-        <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-3">{{ title }}</component>
-        <p v-if="description" class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ description }}</p>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9] mb-3" :style="{ fontSize: titleFontSize }">{{ title }}</component>
+        <p v-if="description" :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.55 }">{{ description }}</p>
       </div>
 
       <!-- GRID -->
@@ -92,8 +92,14 @@ const props = defineProps({
   bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
   textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   spacing: { type: String, default: "normal" },
-  radius: { type: String, default: "rounded" }
+  radius: { type: String, default: "rounded" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" }
 });
 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(1.5rem,3vw,2.5rem)", md: "clamp(2rem,4vw,3.5rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(2rem,4vw,3.5rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
 </script>

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

@@ -1,12 +1,12 @@
 <template>
-  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
 
     <!-- SPLIT -->
-    <div v-if="layout === 'split'" :class="['max-w-6xl mx-auto flex flex-col md:flex-row gap-12 items-center', reverse ? 'md:flex-row-reverse' : '']">
+    <div v-if="layout === 'split'" :class="[containerClass, 'flex flex-col md:flex-row gap-12 items-center', reverse ? 'md:flex-row-reverse' : '']">
       <div class="flex-1 space-y-6">
         <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
-        <component :is="titleTag" class="text-3xl md:text-4xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
-        <p class="leading-relaxed text-sm max-w-md" :style="{ opacity: 0.55 }">{{ content }}</p>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9]" :style="{ fontSize: titleFontSize }">{{ title }}</component>
+        <p :class="[bodyClass, 'leading-relaxed max-w-md']" :style="{ opacity: 0.55 }">{{ content }}</p>
         <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
           <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
             class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
@@ -22,15 +22,15 @@
     </div>
 
     <!-- STACKED -->
-    <div v-else-if="layout === 'stacked'" class="max-w-3xl mx-auto space-y-8">
+    <div v-else-if="layout === 'stacked'" :class="[containerClass, 'space-y-8']">
       <div :class="['w-full overflow-hidden relative', imageContainerClass]">
         <img v-if="image" :src="image" class="w-full h-full object-cover" />
         <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '08') }"></div>
       </div>
       <div class="space-y-5">
         <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
-        <component :is="titleTag" class="text-3xl md:text-4xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
-        <p class="leading-relaxed text-sm" :style="{ opacity: 0.55 }">{{ content }}</p>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9]" :style="{ fontSize: titleFontSize }">{{ title }}</component>
+        <p :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.55 }">{{ content }}</p>
         <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
           <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
             class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
@@ -42,15 +42,15 @@
     </div>
 
     <!-- WIDE -->
-    <div v-else :class="['max-w-6xl mx-auto flex flex-col md:flex-row gap-10 items-center', reverse ? 'md:flex-row-reverse' : '']">
+    <div v-else :class="[containerClass, 'flex flex-col md:flex-row gap-10 items-center', reverse ? 'md:flex-row-reverse' : '']">
       <div :class="['md:w-2/3 w-full overflow-hidden relative', imageContainerClass]">
         <img v-if="image" :src="image" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" />
         <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor, '08') }"></div>
       </div>
       <div class="md:w-1/3 space-y-5">
         <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
-        <component :is="titleTag" class="text-2xl md:text-3xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
-        <p class="leading-relaxed text-sm" :style="{ opacity: 0.55 }">{{ content }}</p>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9]" :style="{ fontSize: titleFontSize }">{{ title }}</component>
+        <p :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.55 }">{{ content }}</p>
         <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
           <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
             class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
@@ -86,10 +86,16 @@ const props = defineProps({
   textColor: { type: String, default: "rgba(var(--text-color), 1)" },
   ctas: { type: Array, default: () => [] },
   spacing: { type: String, default: "normal" },
-  radius: { type: String, default: "rounded" }
+  radius: { type: String, default: "rounded" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" }
 });
 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(1.2rem,2.5vw,2rem)", md: "clamp(1.5rem,3.5vw,2.8rem)", lg: "clamp(2rem,5vw,4rem)" })[props.textSize] || "clamp(1.5rem,3.5vw,2.8rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
 const imageContainerClass = computed(() => {
   const r = cardRound.value;
   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` };