cinqcinqdev-seo 0.1.44 → 0.1.45

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

@@ -0,0 +1,264 @@
+<template>
+  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div :class="[containerClass]">
+
+      <!-- Header -->
+      <div v-if="badge || title || description" :class="['mb-14', headerAlign === 'center' ? '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-5" :style="{ borderColor: ca(textColor, '25'), color: ca(textColor, 'aa') }">{{ badge }}</span>
+        <component :is="titleTag" v-if="title" class="font-black uppercase tracking-tighter leading-[0.9] mb-4" :style="{ fontSize: titleFontSize }">{{ title }}</component>
+        <p v-if="description" :class="[bodyClass, 'leading-relaxed', headerAlign === 'center' ? 'max-w-xl mx-auto' : 'max-w-xl']" :style="{ opacity: 0.6 }">{{ description }}</p>
+      </div>
+
+      <!-- ── CARDS layout ──────────────────────────────────────── -->
+      <div v-if="layout === 'cards'" :class="['grid gap-5', gridCols]">
+        <div
+          v-for="(plan, i) in parsedPlans" :key="i"
+          :class="['relative flex flex-col p-8 border transition-all duration-300', cardRound, plan.highlighted ? 'shadow-2xl scale-[1.03] z-10' : '']"
+          :style="plan.highlighted
+            ? { backgroundColor: textColor, color: bgColor, borderColor: 'transparent' }
+            : { backgroundColor: ca(textColor, '04'), borderColor: ca(textColor, '0d') }"
+        >
+          <!-- Popular badge -->
+          <span v-if="plan.badge" class="absolute -top-3 left-1/2 -translate-x-1/2 text-[9px] font-black uppercase tracking-[0.3em] px-3 py-1 rounded-full whitespace-nowrap"
+            :style="plan.highlighted ? { backgroundColor: bgColor, color: textColor } : { backgroundColor: ca(textColor, '12'), color: textColor }">
+            {{ plan.badge }}
+          </span>
+          <!-- Plan name -->
+          <div class="text-[10px] font-black uppercase tracking-[0.4em] mb-5" :style="{ opacity: plan.highlighted ? 0.55 : 0.4 }">{{ plan.name }}</div>
+          <!-- Price -->
+          <div class="flex items-end gap-1 mb-2">
+            <span class="text-5xl font-black tracking-tight leading-none">{{ plan.price }}</span>
+            <span class="text-sm pb-1" :style="{ opacity: 0.45 }">{{ plan.priceUnit }}</span>
+          </div>
+          <!-- Description -->
+          <p v-if="plan.description" :class="[bodyClass, 'leading-relaxed mb-8 mt-3']" :style="{ opacity: plan.highlighted ? 0.65 : 0.5 }">{{ plan.description }}</p>
+          <!-- Divider -->
+          <div class="h-px mb-7" :style="{ backgroundColor: plan.highlighted ? ca(bgColor, '20') : ca(textColor, '0c') }"></div>
+          <!-- Features -->
+          <ul class="space-y-3.5 flex-1 mb-8">
+            <li v-for="(feat, j) in plan.features" :key="j" class="flex items-start gap-3">
+              <span class="shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-black leading-none mt-0.5"
+                :style="feat.type === 'excluded'
+                  ? { backgroundColor: plan.highlighted ? ca(bgColor, '15') : ca(textColor, '0a'), color: plan.highlighted ? ca(bgColor, '40') : ca(textColor, '30') }
+                  : { backgroundColor: plan.highlighted ? bgColor : textColor, color: plan.highlighted ? textColor : bgColor }">
+                {{ feat.type === 'excluded' ? '✗' : '✓' }}
+              </span>
+              <span :class="[bodyClass, 'leading-snug']" :style="{ opacity: feat.type === 'excluded' ? 0.3 : (plan.highlighted ? 0.85 : 0.7) }">{{ feat.text }}</span>
+            </li>
+          </ul>
+          <!-- CTA -->
+          <NuxtLink v-if="plan.ctaText" :to="plan.ctaLink || '#'"
+            :class="['flex items-center justify-center gap-2 py-3.5 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-4 active:scale-95', cardRound]"
+            :style="plan.highlighted
+              ? { backgroundColor: bgColor, color: textColor }
+              : { border: `1px solid ${ca(textColor, '20')}`, color: textColor }">
+            {{ plan.ctaText }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- ── TABLE layout ──────────────────────────────────────── -->
+      <div v-else-if="layout === 'table'" class="overflow-x-auto -mx-4 px-4">
+        <table class="w-full min-w-[540px]" style="border-collapse: separate; border-spacing: 0;">
+          <!-- Plan headers -->
+          <thead>
+            <tr>
+              <th class="text-left pb-8 pr-6 align-bottom" style="width: 30%">
+                <span v-if="rowsLabel" :class="[bodyClass, 'font-black uppercase tracking-wider']" :style="{ opacity: 0.35 }">{{ rowsLabel }}</span>
+              </th>
+              <th v-for="(plan, i) in parsedPlans" :key="i" class="pb-8 px-4 align-bottom" :style="{ width: `${70 / Math.max(parsedPlans.length, 1)}%` }">
+                <div :class="['px-5 py-5 transition-all', plan.highlighted ? cardRound : 'rounded-2xl']"
+                  :style="plan.highlighted
+                    ? { backgroundColor: textColor, color: bgColor }
+                    : { backgroundColor: ca(textColor, '04') }">
+                  <span v-if="plan.badge" class="block text-[9px] font-black uppercase tracking-[0.35em] mb-2" :style="{ opacity: plan.highlighted ? 0.6 : 0.4 }">{{ plan.badge }}</span>
+                  <div class="font-black uppercase tracking-tight text-sm mb-2">{{ plan.name }}</div>
+                  <div class="flex items-end gap-1">
+                    <span class="text-2xl font-black leading-none">{{ plan.price }}</span>
+                    <span class="text-xs pb-0.5" :style="{ opacity: 0.45 }">{{ plan.priceUnit }}</span>
+                  </div>
+                  <NuxtLink v-if="plan.ctaText" :to="plan.ctaLink || '#'"
+                    class="mt-4 flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-wider transition-all hover:gap-3"
+                    :style="plan.highlighted
+                      ? { backgroundColor: bgColor, color: textColor }
+                      : { border: `1px solid ${ca(textColor, '18')}`, color: textColor }">
+                    {{ plan.ctaText }}
+                  </NuxtLink>
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <!-- Feature rows -->
+          <tbody>
+            <tr v-for="(row, ri) in parsedRows" :key="ri"
+              :class="[ri % 2 === 0 ? '' : '']"
+              :style="{ borderTop: `1px solid ${ca(textColor, '07')}` }">
+              <td class="py-4 pr-6">
+                <span :class="[bodyClass, 'font-medium']" :style="{ opacity: 0.7 }">{{ row }}</span>
+              </td>
+              <td v-for="(plan, pi) in parsedPlans" :key="pi" class="py-4 px-4 text-center">
+                <div class="flex items-center justify-center">
+                  <template v-if="plan.features[ri]">
+                    <span v-if="plan.features[ri].type === 'included'"
+                      class="inline-flex items-center justify-center w-6 h-6 rounded-full text-[10px] font-black"
+                      :style="{ backgroundColor: textColor, color: bgColor }">✓</span>
+                    <span v-else-if="plan.features[ri].type === 'excluded'"
+                      class="inline-flex items-center justify-center w-6 h-6 rounded-full text-[10px]"
+                      :style="{ backgroundColor: ca(textColor, '08'), color: ca(textColor, '30') }">✗</span>
+                    <span v-else :class="[bodyClass, 'font-semibold']" :style="{ opacity: 0.8 }">{{ plan.features[ri].text }}</span>
+                  </template>
+                  <span v-else class="text-xs" :style="{ opacity: 0.15 }">—</span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- ── VERSUS layout ─────────────────────────────────────── -->
+      <div v-else class="relative">
+        <div :class="['grid grid-cols-1 md:grid-cols-2 overflow-hidden border', cardRound]" :style="{ borderColor: ca(textColor, '10') }">
+          <div v-for="(plan, i) in parsedPlans.slice(0, 2)" :key="i"
+            class="flex flex-col p-8 md:p-12"
+            :style="i === 1 ? { backgroundColor: ca(textColor, '04'), borderLeft: `1px solid ${ca(textColor, '08')}` } : {}">
+            <!-- Badge -->
+            <span v-if="plan.badge" class="inline-block self-start text-[9px] font-black uppercase tracking-[0.3em] px-2.5 py-1 rounded-full mb-5"
+              :style="{ backgroundColor: ca(textColor, '10'), color: textColor }">{{ plan.badge }}</span>
+            <!-- Name -->
+            <div class="text-[10px] font-black uppercase tracking-[0.4em] mb-3" :style="{ opacity: 0.4 }">{{ plan.name }}</div>
+            <!-- Price -->
+            <div class="flex items-end gap-1 mb-3">
+              <span class="text-4xl font-black tracking-tight leading-none">{{ plan.price }}</span>
+              <span class="text-sm pb-0.5" :style="{ opacity: 0.45 }">{{ plan.priceUnit }}</span>
+            </div>
+            <!-- Description -->
+            <p v-if="plan.description" :class="[bodyClass, 'leading-relaxed mb-8 mt-1']" :style="{ opacity: 0.55 }">{{ plan.description }}</p>
+            <!-- Divider -->
+            <div class="h-px mb-7" :style="{ backgroundColor: ca(textColor, '0a') }"></div>
+            <!-- Features -->
+            <ul class="space-y-3.5 flex-1 mb-10">
+              <li v-for="(feat, j) in plan.features" :key="j" class="flex items-start gap-3">
+                <span class="shrink-0 w-4 h-4 rounded-full flex items-center justify-center text-[9px] font-black leading-none mt-0.5"
+                  :style="feat.type === 'excluded'
+                    ? { backgroundColor: ca(textColor, '0a'), color: ca(textColor, '30') }
+                    : { backgroundColor: textColor, color: bgColor }">
+                  {{ feat.type === 'excluded' ? '✗' : '✓' }}
+                </span>
+                <span :class="[bodyClass, 'leading-snug']" :style="{ opacity: feat.type === 'excluded' ? 0.3 : 0.7 }">{{ feat.text }}</span>
+              </li>
+            </ul>
+            <!-- CTA -->
+            <NuxtLink v-if="plan.ctaText" :to="plan.ctaLink || '#'"
+              :class="['inline-flex items-center gap-2 px-7 py-3.5 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-4 active:scale-95', cardRound]"
+              :style="plan.highlighted
+                ? { backgroundColor: textColor, color: bgColor }
+                : { border: `1px solid ${ca(textColor, '20')}`, color: textColor }">
+              {{ plan.ctaText }}<span>→</span>
+            </NuxtLink>
+          </div>
+        </div>
+        <!-- VS badge -->
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden md:flex items-center justify-center w-12 h-12 rounded-full text-[10px] font-black uppercase tracking-widest border-2 z-10"
+          :style="{ backgroundColor: bgColor, borderColor: ca(textColor, '15'), color: textColor }">VS</div>
+        <!-- VS divider mobile -->
+        <div class="md:hidden py-3 text-center text-[10px] font-black tracking-widest border-t border-b"
+          :style="{ borderColor: ca(textColor, '08'), backgroundColor: ca(textColor, '04'), color: ca(textColor, '50') }">VS</div>
+      </div>
+
+      <!-- Empty state placeholder -->
+      <div v-if="!parsedPlans.length" class="py-16 text-center" :style="{ opacity: 0.2 }">
+        <div class="text-4xl font-black mb-2">≡</div>
+        <div class="text-xs font-black uppercase tracking-widest">Add plans to compare</div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+const ca = (c, h) => {
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
+import { computed } from "vue";
+const parseFeatureLine = (line) => {
+  const t = line.trim();
+  if (!t) return null;
+  if (t.startsWith("\u2713") || t.toLowerCase().startsWith("yes") || t.startsWith("+")) return { type: "included", text: t.replace(/^[✓+]|^yes/i, "").trim() || t };
+  if (t.startsWith("\u2717") || t.toLowerCase().startsWith("no") || t.startsWith("-")) return { type: "excluded", text: t.replace(/^[✗\-]|^no/i, "").trim() || t };
+  return { type: "text", text: t };
+};
+const props = defineProps({
+  layout: { type: String, default: "cards" },
+  headerAlign: { type: String, default: "center" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "" },
+  title: { type: String, default: "" },
+  description: { type: String, default: "" },
+  rowsLabel: { type: String, default: "Features" },
+  rows: { type: String, default: "Projects\nStorage\nSupport\nAPI Access\nCustom Domain" },
+  plans: { type: Array, default: () => [
+    {
+      name: "Starter",
+      badge: "",
+      price: "$0",
+      priceUnit: "/mo",
+      description: "Perfect for individuals and small projects.",
+      highlighted: false,
+      ctaText: "Get started",
+      ctaLink: "#",
+      features: "3 projects\n1 GB storage\nCommunity support\n\u2717 API access\n\u2717 Custom domain"
+    },
+    {
+      name: "Pro",
+      badge: "Popular",
+      price: "$29",
+      priceUnit: "/mo",
+      description: "Everything you need to scale your business.",
+      highlighted: true,
+      ctaText: "Start free trial",
+      ctaLink: "#",
+      features: "Unlimited projects\n50 GB storage\nPriority support\n\u2713 API access\n\u2713 Custom domain"
+    },
+    {
+      name: "Enterprise",
+      badge: "",
+      price: "$99",
+      priceUnit: "/mo",
+      description: "Advanced features for large organizations.",
+      highlighted: false,
+      ctaText: "Contact sales",
+      ctaLink: "#",
+      features: "Unlimited projects\nUnlimited storage\nDedicated support\n\u2713 API access\n\u2713 Custom domain"
+    }
+  ] },
+  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" },
+  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 parsedPlans = computed(
+  () => (props.plans || []).map((plan) => ({
+    ...plan,
+    features: (plan.features || "").split("\n").map(parseFeatureLine).filter(Boolean)
+  }))
+);
+const parsedRows = computed(
+  () => (props.rows || "").split("\n").map((r) => r.trim()).filter(Boolean)
+);
+const gridCols = computed(() => {
+  const n = parsedPlans.value.length;
+  if (n === 1) return "grid-cols-1 max-w-sm mx-auto";
+  if (n === 2) return "grid-cols-1 md:grid-cols-2";
+  if (n === 4) return "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4";
+  return "grid-cols-1 md:grid-cols-3";
+});
+</script>

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

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

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

@@ -1,12 +1,12 @@
 <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]">
 
       <!-- SPLIT layout -->
       <div v-if="layout === 'split'" class="grid grid-cols-1 md:grid-cols-2 gap-16 items-start">
         <div>
           <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>
+          <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9] mb-4" :style="{ fontSize: titleFontSize }">{{ title }}</component>
           <p v-if="description" class="text-sm leading-relaxed mb-8" :style="{ opacity: 0.55 }">{{ description }}</p>
           <div v-if="infos && infos.length" class="space-y-4">
             <div v-for="(info, i) in infos" :key="i" class="flex items-start gap-3">
@@ -44,7 +44,7 @@
       <!-- CENTERED layout -->
       <div v-else-if="layout === 'centered'" class="max-w-xl mx-auto text-center">
         <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>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9] mb-4" :style="{ fontSize: titleFontSize }">{{ title }}</component>
         <p v-if="description" class="text-sm leading-relaxed mb-10" :style="{ opacity: 0.55 }">{{ description }}</p>
         <form @submit.prevent="handleSubmit" class="space-y-4 text-left">
           <div v-for="field in fields" :key="field.name" class="flex flex-col gap-1.5">
@@ -68,7 +68,7 @@
       <!-- MINIMAL layout (default) -->
       <div v-else class="max-w-2xl">
         <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>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.9] mb-4" :style="{ fontSize: titleFontSize }">{{ title }}</component>
         <p v-if="description" class="text-sm leading-relaxed mb-10" :style="{ opacity: 0.55 }">{{ description }}</p>
         <form @submit.prevent="handleSubmit" class="space-y-6">
           <div v-for="field in fields" :key="field.name" class="flex flex-col gap-2 border-b pb-6" :style="{ borderColor: ca(textColor, '10') }">
@@ -109,6 +109,9 @@ const props = defineProps({
   description: { type: String, default: "" },
   ctaText: { type: String, default: "Envoyer" },
   successMessage: { type: String, default: "Message envoy\xE9 !" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" },
   fields: {
     type: Array,
     default: () => [
@@ -129,6 +132,9 @@ const sent = ref(false);
 const formData = reactive({});
 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 handleSubmit = async () => {
   submitting.value = true;
   emit("submit", { ...formData });

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

@@ -1,8 +1,8 @@
 <template>
-  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
-    <div class="max-w-3xl mx-auto">
+  <section :class="[sectionPad]" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div :class="[containerClass]">
       <div class="text-center mb-16">
-        <component :is="titleTag" class="text-4xl md:text-6xl font-black uppercase tracking-tighter italic">{{ title }}</component>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter italic" :style="{ fontSize: titleFontSize }">{{ title }}</component>
       </div>
       <div class="space-y-3">
         <div v-for="(item, index) in items" :key="index"
@@ -13,7 +13,7 @@
             <span class="text-2xl font-light shrink-0 transition-transform duration-300" :style="{ transform: openIndex === index ? 'rotate(45deg)' : 'none' }">+</span>
           </button>
           <div v-if="openIndex === index" class="px-7 pb-7">
-            <p class="text-sm leading-relaxed" :style="{ opacity: 0.65 }">{{ item.answer }}</p>
+            <p :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.65 }">{{ item.answer }}</p>
           </div>
         </div>
         <div v-if="!items.length" v-for="n in 3" :key="n"
@@ -39,10 +39,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: "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 cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-[24px]", pill: "rounded-[36px]" })[props.radius] || "rounded-[24px]");
+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-3xl 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 openIndex = ref(null);
 const toggle = (index) => {
   openIndex.value = openIndex.value === index ? null : index;

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

@@ -1,15 +1,15 @@
 <template>
-  <section :class="[sectionPad, 'overflow-hidden']" :style="{ backgroundColor: bgColor, color: textColor }">
-    <div class="max-w-6xl mx-auto">
+  <section :class="[sectionPad, 'overflow-hidden']" :dir="textDirection" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div :class="[containerClass]">
       <div class="mb-16 md:mb-20">
-        <component :is="titleTag" class="text-4xl md:text-6xl font-black uppercase tracking-tighter leading-none max-w-4xl italic">{{ title }}</component>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-none italic" :style="{ fontSize: titleFontSize }">{{ title }}</component>
       </div>
       <div v-if="items.length" :class="['grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px overflow-hidden', cardRound]" :style="{ backgroundColor: ca(textColor, '10'), border: `1px solid ${ca(textColor, '10')}` }">
         <div v-for="(item, index) in items" :key="index" class="p-10 transition-all duration-300 hover:brightness-95" :style="{ backgroundColor: bgColor }">
           <div class="flex flex-col h-full">
             <span class="text-[10px] font-black opacity-20 mb-8 tracking-widest">{{ index < 9 ? '0' : '' }}{{ index + 1 }}</span>
             <component :is="itemTag" class="text-xl font-black uppercase tracking-tight mb-4 leading-tight">{{ item.title }}</component>
-            <p class="text-sm leading-relaxed" :style="{ opacity: 0.6 }">{{ item.description || item.text }}</p>
+            <p :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.6 }">{{ item.description || item.text }}</p>
           </div>
         </div>
       </div>
@@ -38,8 +38,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-[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(1.5rem,3vw,2.5rem)", md: "clamp(2rem,5vw,4rem)", lg: "clamp(2.5rem,7vw,6rem)" })[props.textSize] || "clamp(2rem,5vw,4rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
 </script>

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)));