cinqcinqdev-seo 0.1.44 → 0.1.45

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` };