cinqcinqdev-seo 0.1.14 → 0.1.16

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

@@ -0,0 +1,46 @@
+<template>
+  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div class="max-w-3xl mx-auto">
+      <div class="text-center mb-16">
+        <component :is="titleTag" class="text-4xl md:text-6xl font-black uppercase tracking-tighter italic">{{ title }}</component>
+      </div>
+      <div class="space-y-3">
+        <div v-for="(item, index) in items" :key="index"
+          :class="['overflow-hidden border transition-all duration-300', cardRound]"
+          :style="{ backgroundColor: textColor + '04', borderColor: textColor + '10' }">
+          <button @click="toggle(index)" class="w-full flex items-center justify-between p-7 text-left cursor-pointer">
+            <span class="text-sm md:text-base font-black uppercase tracking-tight pr-8 leading-snug">{{ item.question }}</span>
+            <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>
+          </div>
+        </div>
+        <div v-if="!items.length" v-for="n in 3" :key="n"
+          :class="['border p-7', cardRound]"
+          :style="{ backgroundColor: textColor + '04', borderColor: textColor + '10' }">
+          <div class="h-4 rounded" :style="{ backgroundColor: textColor + '15', width: n === 1 ? '70%' : n === 2 ? '55%' : '65%' }"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  title: { type: String, default: "FAQ" },
+  titleTag: { type: String, default: "h2" },
+  items: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "#F9F9FB" },
+  textColor: { type: String, default: "#000000" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
+});
+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 openIndex = ref(null);
+const toggle = (index) => {
+  openIndex.value = openIndex.value === index ? null : index;
+};
+</script>

package/dist/runtime/components/sections/FAQ.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/Features.d.vue.ts

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

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

@@ -0,0 +1,41 @@
+<template>
+  <section :class="[sectionPad, 'overflow-hidden']" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div class="max-w-6xl mx-auto">
+      <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>
+      </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: textColor + '10', border: `1px solid ${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>
+          </div>
+        </div>
+      </div>
+      <div v-else :class="['grid grid-cols-1 md:grid-cols-3 gap-px overflow-hidden', cardRound]" :style="{ backgroundColor: textColor + '10', border: `1px solid ${textColor}10` }">
+        <div v-for="n in 3" :key="n" class="p-10" :style="{ backgroundColor: bgColor }">
+          <span class="text-[10px] font-black opacity-20 mb-8 tracking-widest block">0{{ n }}</span>
+          <div class="h-4 rounded mb-3" :style="{ backgroundColor: textColor + '12', width: '60%' }"></div>
+          <div class="h-3 rounded" :style="{ backgroundColor: textColor + '08', width: '80%' }"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  title: { type: String, default: "Why choose us?" },
+  titleTag: { type: String, default: "h2" },
+  itemTag: { type: String, default: "h3" },
+  items: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "#ffffff" },
+  textColor: { type: String, default: "#000000" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
+});
+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]");
+</script>

package/dist/runtime/components/sections/Features.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/HeroSection.d.vue.ts

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

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

@@ -0,0 +1,133 @@
+<template>
+  <section class="relative overflow-hidden" :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">
+        <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: textColor + '30', color: textColor + '80' }">
+          <span class="w-1.5 h-1.5 rounded-full inline-block" :style="{ backgroundColor: 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>
+        <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" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 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>
+          <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>
+          <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]">
+          <img v-if="image" :src="image" class="w-full h-full object-cover" />
+          <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '06' }"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 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="['col-span-12 md:col-span-7 p-8 md:p-10 border flex flex-col justify-between min-h-[320px]', cardRound]" :style="{ borderColor: textColor + '10', backgroundColor: 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>
+            <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>
+        <div :class="['col-span-12 md:col-span-5 overflow-hidden min-h-[260px] md:min-h-[320px]', cardRound]">
+          <img v-if="image" :src="image" class="w-full h-full object-cover" />
+          <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- FULLSCREEN -->
+    <div v-else-if="layout === 'fullscreen'" class="relative min-h-[88vh] flex flex-col justify-end">
+      <div class="absolute inset-0">
+        <img v-if="image" :src="image" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+        <div class="absolute inset-0" :style="{ background: `linear-gradient(to top, ${bgColor} 20%, ${bgColor}cc 40%, ${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">
+        <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>
+          <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: textColor + '50', color: textColor }">{{ ctaText }}<span>→</span></NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- MINIMAL -->
+    <div v-else-if="layout === 'minimal'" class="px-6 md:px-12 py-14">
+      <div class="max-w-6xl mx-auto">
+        <div class="flex items-center gap-4 mb-10 border-b pb-5" :style="{ borderColor: 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: textColor + '08' }"></div>
+          <span class="text-[9px] font-black uppercase tracking-[0.5em] opacity-20">{{ ctaText }}</span>
+        </div>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.85] mb-10" :style="{ fontSize: 'clamp(3.5rem,10vw,9rem)' }">{{ title }}</component>
+        <div v-if="image" :class="['mb-10 overflow-hidden aspect-video', cardRound]">
+          <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: textColor + '10' }">
+          <p class="text-sm 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>
+    </div>
+
+    <!-- EDITORIAL -->
+    <div v-else class="px-6 md:px-12 py-14">
+      <div class="max-w-6xl mx-auto">
+        <div class="flex items-center gap-4 mb-8">
+          <div class="w-8 h-px" :style="{ backgroundColor: textColor + '30' }"></div>
+          <span class="text-[9px] font-black uppercase tracking-[0.5em] opacity-30">{{ badge || '—' }}</span>
+        </div>
+        <div class="flex flex-col md:flex-row md:items-end gap-8 mb-8">
+          <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.85] flex-1" :style="{ fontSize: 'clamp(3rem,9vw,9rem)' }">{{ title }}</component>
+          <div v-if="image" :class="['md:w-56 md:shrink-0 aspect-[3/4] overflow-hidden', cardRound]">
+            <img :src="image" class="w-full h-full object-cover" />
+          </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: textColor + '10' }">
+          <p class="text-sm 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>
+    </div>
+
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "centered" },
+  animation: { type: String, default: "fadeUp" },
+  titleSize: { type: String, default: "md" },
+  title: { type: String, default: "Impactful Title" },
+  titleTag: { type: String, default: "h1" },
+  subtitle: { type: String, default: "" },
+  badge: { type: String, default: "" },
+  ctaText: { type: String, default: "Get Started" },
+  ctaLink: { type: String, default: "#" },
+  image: { type: String, default: "" },
+  imageStyle: { type: String, default: "cover" },
+  imagePosition: { type: String, default: "center" },
+  bgColor: { type: String, default: "#3d35ff" },
+  textColor: { type: String, default: "#ffffff" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
+});
+const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
+</script>

package/dist/runtime/components/sections/HeroSection.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/Pricing.d.vue.ts

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

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

@@ -0,0 +1,108 @@
+<template>
+  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div class="max-w-6xl mx-auto">
+
+      <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: textColor + '25', color: 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>
+      </div>
+
+      <!-- CARDS -->
+      <div v-if="layout === 'cards'" class="grid grid-cols-1 md:grid-cols-3 gap-6 items-end">
+        <div v-for="(plan, i) in items" :key="i"
+          :class="['border p-8 flex flex-col transition-all duration-300 relative', cardRound, plan.highlighted ? 'md:-translate-y-4 shadow-2xl' : '']"
+          :style="plan.highlighted ? { backgroundColor: textColor, color: bgColor, borderColor: textColor } : { backgroundColor: textColor + '04', borderColor: textColor + '12' }">
+          <div v-if="plan.highlighted" class="absolute -top-3 left-1/2 -translate-x-1/2">
+            <span class="px-4 py-1 rounded-full text-[9px] font-black uppercase tracking-widest" :style="{ backgroundColor: bgColor, color: textColor }">Populaire</span>
+          </div>
+          <p class="text-[11px] font-black uppercase tracking-widest mb-4" :style="{ opacity: 0.6 }">{{ plan.name }}</p>
+          <div class="mb-2">
+            <span class="text-4xl font-black tracking-tighter">{{ plan.price }}</span>
+            <span v-if="plan.period" class="text-sm ml-1" :style="{ opacity: 0.5 }">{{ plan.period }}</span>
+          </div>
+          <p v-if="plan.description" class="text-xs leading-relaxed mb-6" :style="{ opacity: 0.55 }">{{ plan.description }}</p>
+          <ul v-if="plan.features && plan.features.length" class="space-y-3 mb-8 flex-1">
+            <li v-for="(feat, fi) in plan.features" :key="fi" class="flex items-start gap-2.5 text-sm">
+              <span class="text-[10px] mt-0.5 shrink-0">✓</span>
+              <span :style="{ opacity: 0.75 }">{{ typeof feat === 'object' ? (feat.fr || feat) : feat }}</span>
+            </li>
+          </ul>
+          <div class="flex-1"></div>
+          <NuxtLink v-if="plan.ctaText || plan.ctaLink" :to="plan.ctaLink || '#'"
+            class="block text-center py-3 px-6 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:opacity-80 active:scale-95 mt-6"
+            :style="plan.highlighted ? { backgroundColor: bgColor, color: textColor } : { backgroundColor: textColor, color: bgColor }">
+            {{ plan.ctaText || 'Get started' }}
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- MINIMAL -->
+      <div v-else-if="layout === 'minimal'" class="divide-y max-w-2xl mx-auto" :style="{ borderColor: textColor + '12' }">
+        <div v-for="(plan, i) in items" :key="i" class="flex items-center gap-6 py-7" :style="{ borderColor: textColor + '12' }">
+          <div class="flex-1">
+            <p class="font-black uppercase tracking-tight text-lg leading-none mb-1">{{ plan.name }}</p>
+            <p v-if="plan.description" class="text-xs" :style="{ opacity: 0.5 }">{{ plan.description }}</p>
+          </div>
+          <div class="text-right shrink-0">
+            <p class="text-2xl font-black tracking-tighter">{{ plan.price }}</p>
+            <p v-if="plan.period" class="text-[10px]" :style="{ opacity: 0.4 }">{{ plan.period }}</p>
+          </div>
+          <NuxtLink v-if="plan.ctaText || plan.ctaLink" :to="plan.ctaLink || '#'"
+            class="px-5 py-2 rounded-full text-[10px] font-black uppercase tracking-widest shrink-0"
+            :style="{ backgroundColor: textColor, color: bgColor }">
+            {{ plan.ctaText || '→' }}
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- TABLE -->
+      <div v-else class="overflow-x-auto">
+        <table class="w-full text-sm border-collapse">
+          <thead>
+            <tr class="border-b" :style="{ borderColor: textColor + '12' }">
+              <th class="text-left py-4 pr-6 font-black uppercase tracking-widest text-[10px]" :style="{ opacity: 0.4 }">Plan</th>
+              <th v-for="(plan, i) in items" :key="i" class="text-center py-4 px-4 font-black uppercase tracking-tight text-sm" :style="plan.highlighted ? { color: textColor } : { opacity: 0.7 }">
+                {{ plan.name }}<br/><span class="text-2xl font-black tracking-tighter">{{ plan.price }}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(feat, fi) in allFeatures" :key="fi" class="border-b" :style="{ borderColor: textColor + '08' }">
+              <td class="py-4 pr-6 text-xs" :style="{ opacity: 0.6 }">{{ typeof feat === 'object' ? (feat.fr || feat) : feat }}</td>
+              <td v-for="(plan, pi) in items" :key="pi" class="py-4 px-4 text-center text-sm">
+                <span v-if="planHasFeature(plan, feat)">✓</span>
+                <span v-else :style="{ opacity: 0.2 }">—</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "cards" },
+  title: { type: String, default: "Our Pricing" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "" },
+  description: { type: String, default: "" },
+  items: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "#ffffff" },
+  textColor: { type: String, default: "#000000" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
+});
+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 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)));
+  return [...set];
+});
+const planHasFeature = (plan, feat) => (plan.features || []).some((f) => (typeof f === "object" ? f.fr || JSON.stringify(f) : f) === (typeof feat === "object" ? feat.fr || JSON.stringify(feat) : feat));
+</script>

package/dist/runtime/components/sections/Pricing.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/Process.d.vue.ts

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

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

@@ -0,0 +1,95 @@
+<template>
+  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div class="max-w-6xl mx-auto">
+
+      <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: textColor + '25', color: 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>
+      </div>
+
+      <!-- STEPS (vertical) -->
+      <div v-if="layout === 'steps'" class="relative max-w-2xl">
+        <div class="absolute left-5 top-0 bottom-0 w-px" :style="{ backgroundColor: textColor + '12' }"></div>
+        <div v-for="(step, i) in items" :key="i" class="relative flex gap-8 pb-12 last:pb-0">
+          <div class="relative z-10 w-10 h-10 rounded-full flex items-center justify-center text-[11px] font-black shrink-0" :style="{ backgroundColor: textColor, color: bgColor }">
+            {{ step.icon || String(i+1).padStart(2,'0') }}
+          </div>
+          <div class="pt-1.5 flex-1">
+            <component :is="itemTag" class="text-lg font-black uppercase tracking-tight mb-2 leading-tight">{{ step.title }}</component>
+            <p class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ step.description }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- HORIZONTAL -->
+      <div v-else-if="layout === 'horizontal'" class="flex flex-col md:flex-row gap-8">
+        <div v-for="(step, i) in items" :key="i" class="flex-1 flex flex-col items-center text-center relative">
+          <div v-if="i < items.length - 1" class="hidden md:block absolute top-5 left-1/2 w-full h-px" :style="{ backgroundColor: textColor + '15' }"></div>
+          <div class="relative z-10 w-10 h-10 rounded-full flex items-center justify-center text-[11px] font-black mb-5 shrink-0" :style="{ backgroundColor: textColor, color: bgColor }">
+            {{ step.icon || String(i+1).padStart(2,'0') }}
+          </div>
+          <component :is="itemTag" class="text-sm font-black uppercase tracking-tight mb-2 leading-tight">{{ step.title }}</component>
+          <p class="text-xs leading-relaxed px-4" :style="{ opacity: 0.5 }">{{ step.description }}</p>
+        </div>
+      </div>
+
+      <!-- CARDS -->
+      <div v-else-if="layout === 'cards'" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <div v-for="(step, i) in items" :key="i" :class="['p-7 border', cardRound]" :style="{ backgroundColor: textColor + '04', borderColor: textColor + '10' }">
+          <div class="w-10 h-10 rounded-full flex items-center justify-center text-[11px] font-black mb-5" :style="{ backgroundColor: textColor, color: bgColor }">
+            {{ step.icon || String(i+1).padStart(2,'0') }}
+          </div>
+          <component :is="itemTag" class="font-black uppercase tracking-tight mb-3 leading-tight">{{ step.title }}</component>
+          <p class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ step.description }}</p>
+        </div>
+      </div>
+
+      <!-- TIMELINE -->
+      <div v-else-if="layout === 'timeline'" class="relative max-w-3xl mx-auto">
+        <div class="absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-px" :style="{ backgroundColor: textColor + '12' }"></div>
+        <div v-for="(step, i) in items" :key="i" :class="['relative flex items-start gap-8 pb-12 last:pb-0', i % 2 === 0 ? 'flex-row' : 'flex-row-reverse']">
+          <div class="flex-1 text-right" :class="i % 2 === 0 ? '' : 'text-left'">
+            <component :is="itemTag" class="font-black uppercase tracking-tight mb-2 leading-tight">{{ step.title }}</component>
+            <p class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ step.description }}</p>
+          </div>
+          <div class="relative z-10 w-10 h-10 rounded-full flex items-center justify-center text-[11px] font-black shrink-0" :style="{ backgroundColor: textColor, color: bgColor }">
+            {{ step.icon || String(i+1).padStart(2,'0') }}
+          </div>
+          <div class="flex-1"></div>
+        </div>
+      </div>
+
+      <!-- MINIMAL -->
+      <div v-else class="divide-y max-w-2xl" :style="{ borderColor: textColor + '10' }">
+        <div v-for="(step, i) in items" :key="i" class="flex items-start gap-6 py-6" :style="{ borderColor: textColor + '10' }">
+          <span class="text-[11px] font-black opacity-20 shrink-0 w-5">{{ String(i+1).padStart(2,'0') }}</span>
+          <div>
+            <component :is="itemTag" class="font-black uppercase tracking-tight mb-1 leading-tight">{{ step.title }}</component>
+            <p class="text-sm" :style="{ opacity: 0.5 }">{{ step.description }}</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "steps" },
+  title: { type: String, default: "How it works" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "" },
+  description: { type: String, default: "" },
+  itemTag: { type: String, default: "h3" },
+  items: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "#ffffff" },
+  textColor: { type: String, default: "#000000" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
+});
+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");
+</script>

package/dist/runtime/components/sections/Process.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/ServiceGrid.d.vue.ts

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

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

@@ -0,0 +1,97 @@
+<template>
+  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div class="max-w-6xl mx-auto">
+
+      <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: textColor + '25', color: 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>
+        <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"
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            {{ cta.text }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- GRID -->
+      <div v-if="layout === 'grid'" class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div v-for="(service, idx) in items" :key="idx"
+          :class="['group relative p-8 border transition-all duration-300 overflow-hidden hover:-translate-y-1 hover:shadow-lg', cardRound]"
+          :style="{ backgroundColor: textColor + '04', borderColor: textColor + '12' }">
+          <span class="absolute -top-6 -right-2 text-[100px] font-black italic opacity-[0.04] select-none">{{ String(idx+1).padStart(2,'0') }}</span>
+          <img v-if="service.image" :src="service.image" class="w-10 h-10 object-contain mb-5 rounded-xl" />
+          <component :is="itemTag" class="text-lg font-black uppercase tracking-tight mb-3 leading-tight">{{ service.title }}</component>
+          <p class="text-sm leading-relaxed mb-4" :style="{ opacity: 0.5 }">{{ service.description }}</p>
+          <p v-if="service.price" class="text-2xl font-black tracking-tight mb-4">{{ service.price }}</p>
+          <NuxtLink v-if="service.ctaText || service.link" :to="service.link || '#'" class="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest transition-all hover:gap-4" :style="{ color: textColor }">{{ service.ctaText || 'En savoir +' }}<span>→</span></NuxtLink>
+        </div>
+      </div>
+
+      <!-- LIST -->
+      <div v-else-if="layout === 'list'" :style="{ borderColor: textColor + '12' }">
+        <div v-for="(service, idx) in items" :key="idx" class="group flex items-start gap-8 py-8 border-b last:border-b-0" :style="{ borderColor: textColor + '10' }">
+          <span class="text-[11px] font-black opacity-20 pt-1 w-6 shrink-0">{{ String(idx+1).padStart(2,'0') }}</span>
+          <img v-if="service.image" :src="service.image" class="w-12 h-12 object-contain rounded-xl shrink-0" />
+          <div class="flex-1 min-w-0">
+            <component :is="itemTag" class="text-xl font-black uppercase tracking-tight mb-2">{{ service.title }}</component>
+            <p class="text-sm leading-relaxed" :style="{ opacity: 0.5 }">{{ service.description }}</p>
+            <p v-if="service.price" class="text-xl font-black tracking-tight mt-3">{{ service.price }}</p>
+          </div>
+          <NuxtLink v-if="service.ctaText || service.link" :to="service.link || '#'" class="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest shrink-0 mt-1 transition-all hover:gap-4" :style="{ color: textColor }">{{ service.ctaText || '→' }}</NuxtLink>
+        </div>
+      </div>
+
+      <!-- CARDS -->
+      <div v-else-if="layout === 'cards'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div v-for="(service, idx) in items" :key="idx"
+          :class="['flex gap-6 p-7 border transition-all hover:shadow-md', cardRound]"
+          :style="{ backgroundColor: textColor + '03', borderColor: textColor + '10' }">
+          <div class="w-12 h-12 rounded-2xl flex items-center justify-center shrink-0" :style="{ backgroundColor: textColor + '10' }">
+            <img v-if="service.image" :src="service.image" class="w-7 h-7 object-contain" />
+            <span v-else class="text-lg font-black opacity-30">{{ String(idx+1).padStart(2,'0') }}</span>
+          </div>
+          <div>
+            <component :is="itemTag" class="text-base font-black uppercase tracking-tight mb-2 leading-tight">{{ service.title }}</component>
+            <p class="text-sm leading-relaxed" :style="{ opacity: 0.5 }">{{ service.description }}</p>
+            <p v-if="service.price" class="text-xl font-black mt-3">{{ service.price }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- MINIMAL -->
+      <div v-else class="max-w-2xl">
+        <div v-for="(service, idx) in items" :key="idx" class="flex items-start justify-between gap-6 py-6 border-b last:border-b-0" :style="{ borderColor: textColor + '10' }">
+          <div>
+            <component :is="itemTag" class="font-black uppercase tracking-tight mb-1">{{ service.title }}</component>
+            <p v-if="service.description" class="text-sm" :style="{ opacity: 0.5 }">{{ service.description }}</p>
+          </div>
+          <p v-if="service.price" class="text-xl font-black tracking-tighter shrink-0">{{ service.price }}</p>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "grid" },
+  title: { type: String, default: "Our Services" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "" },
+  description: { type: String, default: "" },
+  headerAlign: { type: String, default: "left" },
+  itemTag: { type: String, default: "h3" },
+  items: { type: Array, default: () => [] },
+  ctas: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "#ffffff" },
+  textColor: { type: String, default: "#000000" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
+});
+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");
+</script>

package/dist/runtime/components/sections/ServiceGrid.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/Testimonials.d.vue.ts

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