cinqcinqdev-seo 0.1.72 → 1.0.0

package/dist/runtime/components/sections/swiss-style/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/swiss-style/Process.vue

@@ -0,0 +1,124 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="[containerClass]">
+
+      <!-- Header -->
+      <div v-if="title || description" class="border-b pb-6 mb-0" :style="{ borderColor: ca(textColor,'15') }">
+        <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-3" :style="{ opacity: 0.35 }">{{ badge }}</span>
+        <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+        <p v-if="description" :class="[bodyClass, 'leading-relaxed mt-3 max-w-xl']" :style="{ opacity: 0.55 }">{{ description }}</p>
+      </div>
+
+      <!-- STEPS (vertical) -->
+      <div v-if="layout === 'steps'" class="divide-y" :style="{ borderColor: ca(textColor,'10') }">
+        <div v-for="(step, i) in items" :key="i" class="grid grid-cols-[3rem_1fr] gap-8 py-8 items-start" :style="{ borderColor: ca(textColor,'10') }">
+          <div class="font-black tabular-nums leading-none pt-1" :style="{ fontSize: '2.5rem', opacity: 0.1, letterSpacing: '-0.05em' }">{{ String(i+1).padStart(2,'0') }}</div>
+          <div>
+            <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>
+      </div>
+
+      <!-- HORIZONTAL -->
+      <div v-else-if="layout === 'horizontal'" class="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x border-t border-b" :style="{ borderColor: ca(textColor,'12') }">
+        <div v-for="(step, i) in items" :key="i" class="p-8" :style="{ borderColor: ca(textColor,'12') }">
+          <div class="font-black tabular-nums mb-6" :style="{ fontSize: '2.5rem', opacity: 0.1, letterSpacing: '-0.05em' }">{{ 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" :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 border divide-x divide-y" :style="{ borderColor: ca(textColor,'12') }">
+        <div v-for="(step, i) in items" :key="i" class="p-8" :style="{ borderColor: ca(textColor,'12') }">
+          <div class="font-black tabular-nums mb-6" :style="{ fontSize: '2rem', opacity: 0.1, letterSpacing: '-0.05em' }">{{ 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 (default) -->
+      <div v-else class="divide-y" :style="{ borderColor: ca(textColor,'10') }">
+        <div v-for="(step, i) in items" :key="i" class="grid md:grid-cols-[8rem_1fr] gap-8 py-8 items-start" :style="{ borderColor: ca(textColor,'10') }">
+          <div class="font-black tabular-nums text-right hidden md:block" :style="{ fontSize: '3rem', opacity: 0.08, letterSpacing: '-0.05em' }">{{ String(i+1).padStart(2,'0') }}</div>
+          <div class="border-l pl-8" :style="{ borderColor: ca(textColor,'15') }">
+            <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>
+      </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 { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "steps" },
+  badge: { type: String, default: "" },
+  title: { type: String, default: "" },
+  titleTag: { type: String, default: "h2" },
+  itemTag: { type: String, default: "h3" },
+  description: { type: String, default: "" },
+  items: { type: Array, default: () => [] },
+  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: "sharp" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.06 });
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-8 md:px-16", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-8 md:px-16");
+const containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-6xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-6xl mx-auto");
+const titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.5rem,2.5vw,2rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.5rem,2.5vw,2rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
+  if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
+  if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
+  return s;
+});
+</script>
+
+<style scoped>
+.sv-out{opacity:0;transform:translateY(16px)}.sv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
+</style>

package/dist/runtime/components/sections/swiss-style/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/swiss-style/Quote.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/swiss-style/Quote.vue

@@ -0,0 +1,130 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+
+    <!-- CENTERED -->
+    <div v-if="layout === 'centered'" :class="[containerClass]">
+      <div class="border-t border-b py-14" :style="{ borderColor: ca(textColor,'20') }">
+        <div class="grid md:grid-cols-[2rem_1fr] gap-8 items-start">
+          <div class="font-black leading-none hidden md:block" style="font-size:4rem; opacity:0.12">"</div>
+          <div>
+            <blockquote class="font-black uppercase leading-[0.88] mb-8" :style="{ fontSize: quoteFontSize, letterSpacing: '-0.03em' }">{{ quote }}</blockquote>
+            <div class="flex items-center gap-4">
+              <div class="w-8 h-px" :style="{ backgroundColor: textColor }"></div>
+              <img v-if="avatar" :src="avatar" class="w-8 h-8 object-cover" style="border-radius:0" />
+              <div>
+                <div v-if="author" class="text-xs font-black uppercase tracking-wider">{{ author }}</div>
+                <div v-if="role" class="text-[11px]" :style="{ opacity: 0.45 }">{{ role }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- LEFT -->
+    <div v-else-if="layout === 'left'" :class="[containerClass, 'grid md:grid-cols-[1px_1fr] gap-8']">
+      <div class="hidden md:block" :style="{ backgroundColor: textColor, opacity: 0.15 }"></div>
+      <div class="pl-0 md:pl-8">
+        <blockquote class="font-black uppercase leading-[0.88] mb-8" :style="{ fontSize: quoteFontSize, letterSpacing: '-0.03em' }">{{ quote }}</blockquote>
+        <div class="flex items-center gap-4">
+          <img v-if="avatar" :src="avatar" class="w-8 h-8 object-cover" style="border-radius:0" />
+          <div v-else-if="author" class="w-8 h-8 flex items-center justify-center text-xs font-black" :style="{ backgroundColor: ca(textColor,'15') }">{{ author[0] }}</div>
+          <div>
+            <div v-if="author" class="text-xs font-black uppercase tracking-wider">{{ author }}</div>
+            <div v-if="role" class="text-[11px]" :style="{ opacity: 0.45 }">{{ role }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- LARGE (default) -->
+    <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 leading-[0.88] mb-10" :style="{ fontSize: quoteFontSize, letterSpacing: '-0.03em' }">{{ quote }}</blockquote>
+        <div class="flex items-center gap-4">
+          <div class="w-10 h-px" :style="{ backgroundColor: textColor }"></div>
+          <img v-if="avatar" :src="avatar" class="w-8 h-8 object-cover" style="border-radius:0" />
+          <div>
+            <span v-if="author" class="text-xs font-black uppercase tracking-wider">{{ author }}</span>
+            <span v-if="role" class="text-[11px] ml-3" :style="{ opacity: 0.45 }">{{ role }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Placeholder -->
+    <div v-if="!quote" :class="[containerClass, 'border-t border-b py-10']" :style="{ borderColor: ca(textColor,'12') }">
+      <div class="h-6 mb-4" :style="{ backgroundColor: ca(textColor,'08'), width: '80%' }"></div>
+      <div class="h-6 mb-8" :style="{ backgroundColor: ca(textColor,'08'), width: '60%' }"></div>
+      <div class="h-3" :style="{ backgroundColor: ca(textColor,'12'), width: '20%' }"></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 { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "centered" },
+  quote: { type: String, default: "" },
+  author: { type: String, default: "" },
+  role: { type: String, default: "" },
+  avatar: { type: String, default: "" },
+  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: "sharp" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "narrow" },
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.06 });
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-8 md:px-16", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-8 md:px-16");
+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 quoteFontSize = computed(() => ({ sm: "clamp(1.2rem,2vw,1.8rem)", md: "clamp(1.5rem,3vw,2.5rem)", lg: "clamp(2rem,5vw,4rem)" })[props.textSize] || "clamp(1.5rem,3vw,2.5rem)");
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
+  if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
+  if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
+  return s;
+});
+</script>
+
+<style scoped>
+.sv-out{opacity:0;transform:translateY(16px)}.sv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
+</style>

package/dist/runtime/components/sections/swiss-style/Quote.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/swiss-style/RelatedPages.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/swiss-style/RelatedPages.vue

@@ -0,0 +1,212 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="[containerClass]">
+
+      <!-- Header -->
+      <div v-if="badge || title" class="flex items-end justify-between gap-6 flex-wrap mb-10 pb-6 border-b" :style="{ borderColor: ca(textColor,'12') }">
+        <div>
+          <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-2" :style="{ opacity: 0.35 }">{{ badge }}</span>
+          <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+        </div>
+      </div>
+
+      <!-- CARDS layout -->
+      <div v-if="layout === 'cards'" :class="['grid border divide-x', gridCols]" :style="{ borderColor: ca(textColor,'12') }">
+        <NuxtLink
+          v-for="(item, i) in items" :key="i"
+          :to="item.slug ? '/' + item.slug : '#'"
+          class="group flex flex-col overflow-hidden transition-all hover:bg-opacity-5"
+          :style="{ backgroundColor: 'transparent' }"
+        >
+          <!-- Image -->
+          <div v-if="item.image" class="overflow-hidden aspect-video shrink-0 border-b" :style="{ borderColor: ca(textColor,'08') }">
+            <img :src="item.image" :alt="item.title" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
+          </div>
+          <!-- No-image placeholder -->
+          <div v-else class="aspect-video shrink-0 flex items-center justify-center border-b" :style="{ backgroundColor: ca(textColor,'04'), borderColor: ca(textColor,'08') }">
+            <span class="text-5xl font-black" :style="{ opacity: 0.06 }">{{ (item.title || '?')[0] }}</span>
+          </div>
+          <!-- Content -->
+          <div class="flex flex-col flex-1 p-6">
+            <span v-if="item.category" class="text-[9px] font-black uppercase tracking-[0.4em] mb-3 border-l-2 pl-2" :style="{ borderColor: textColor, opacity: 0.4 }">{{ item.category }}</span>
+            <div class="font-black leading-snug mb-2 flex-1 uppercase" :class="bodyClass">{{ item.title }}</div>
+            <p v-if="item.description" :class="[bodyClass, 'leading-relaxed mt-1']" :style="{ opacity: 0.5, fontSize: '0.85em' }">{{ item.description }}</p>
+            <div class="flex items-center gap-1.5 mt-5 text-[11px] font-black uppercase tracking-wider transition-all group-hover:gap-3" :style="{ opacity: 0.4 }">
+              Lire <span>→</span>
+            </div>
+          </div>
+        </NuxtLink>
+      </div>
+
+      <!-- LIST layout -->
+      <div v-else-if="layout === 'list'" class="border divide-y" :style="{ borderColor: ca(textColor,'12') }">
+        <NuxtLink
+          v-for="(item, i) in items" :key="i"
+          :to="item.slug ? '/' + item.slug : '#'"
+          class="group flex items-center gap-5 py-4 px-4 transition-all hover:pl-6"
+        >
+          <!-- Thumbnail -->
+          <div v-if="item.image" class="shrink-0 overflow-hidden border" style="width: 72px; height: 54px;" :style="{ borderColor: ca(textColor,'08') }">
+            <img :src="item.image" :alt="item.title" class="w-full h-full object-cover" />
+          </div>
+          <div v-else class="shrink-0 flex items-center justify-center border" style="width: 72px; height: 54px;" :style="{ backgroundColor: ca(textColor,'05'), borderColor: ca(textColor,'08') }">
+            <span class="text-lg font-black" :style="{ opacity: 0.15 }">{{ (item.title || '?')[0] }}</span>
+          </div>
+          <!-- Text -->
+          <div class="flex-1 min-w-0">
+            <span v-if="item.category" class="text-[9px] font-black uppercase tracking-[0.4em] block mb-0.5" :style="{ opacity: 0.35 }">{{ item.category }}</span>
+            <div class="font-black leading-snug truncate uppercase" :class="[bodyClass]">{{ item.title }}</div>
+            <p v-if="item.description" class="text-[11px] leading-relaxed mt-0.5 truncate" :style="{ opacity: 0.45 }">{{ item.description }}</p>
+          </div>
+          <!-- Arrow -->
+          <span class="shrink-0 text-sm transition-all group-hover:translate-x-1" :style="{ opacity: 0.3 }">→</span>
+        </NuxtLink>
+      </div>
+
+      <!-- MINIMAL layout -->
+      <div v-else-if="layout === 'minimal'" class="border divide-y" :style="{ borderColor: ca(textColor,'10') }">
+        <NuxtLink
+          v-for="(item, i) in items" :key="i"
+          :to="item.slug ? '/' + item.slug : '#'"
+          class="group flex items-center justify-between gap-4 py-4 px-4 transition-all hover:pl-6"
+        >
+          <div class="flex items-center gap-4 min-w-0">
+            <span class="text-[10px] font-black tabular-nums" :style="{ opacity: 0.2 }">{{ String(i + 1).padStart(2, '0') }}</span>
+            <span v-if="item.category" class="shrink-0 text-[9px] font-black uppercase tracking-[0.35em] px-2 py-0.5 border" :style="{ borderColor: ca(textColor,'15') }">{{ item.category }}</span>
+            <span class="font-black truncate uppercase" :class="[bodyClass]">{{ item.title }}</span>
+          </div>
+          <span class="shrink-0 text-sm transition-all group-hover:translate-x-1 group-hover:opacity-100" :style="{ opacity: 0.3 }">→</span>
+        </NuxtLink>
+      </div>
+
+      <!-- EDITORIAL layout (default) -->
+      <div v-else class="grid grid-cols-1 md:grid-cols-3 border divide-x" :style="{ borderColor: ca(textColor,'12') }">
+        <!-- Featured (first item) -->
+        <NuxtLink
+          v-if="items[0]"
+          :to="items[0].slug ? '/' + items[0].slug : '#'"
+          class="group col-span-1 md:col-span-2 flex flex-col overflow-hidden transition-all"
+        >
+          <div class="overflow-hidden border-b" style="aspect-ratio: 16/9;" :style="{ borderColor: ca(textColor,'08') }">
+            <img v-if="items[0].image" :src="items[0].image" :alt="items[0].title" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
+            <div v-else class="w-full h-full flex items-center justify-center" :style="{ backgroundColor: ca(textColor,'04') }">
+              <span class="text-6xl font-black" :style="{ opacity: 0.06 }">{{ (items[0].title || '?')[0] }}</span>
+            </div>
+          </div>
+          <div class="p-8 flex-1 flex flex-col">
+            <span v-if="items[0].category" class="text-[9px] font-black uppercase tracking-[0.4em] mb-4 border-l-2 pl-2" :style="{ borderColor: textColor, opacity: 0.4 }">{{ items[0].category }}</span>
+            <div class="font-black leading-snug mb-3 flex-1 uppercase" :style="{ fontSize: titleFontSize }">{{ items[0].title }}</div>
+            <p v-if="items[0].description" :class="[bodyClass, 'leading-relaxed mt-1']" :style="{ opacity: 0.5 }">{{ items[0].description }}</p>
+            <div class="flex items-center gap-1.5 mt-6 text-[11px] font-black uppercase tracking-wider transition-all group-hover:gap-3" :style="{ opacity: 0.4 }">Lire <span>→</span></div>
+          </div>
+        </NuxtLink>
+
+        <!-- Side items (2+) -->
+        <div class="flex flex-col divide-y" :style="{ borderColor: ca(textColor,'10') }">
+          <NuxtLink
+            v-for="(item, i) in items.slice(1, 3)" :key="i"
+            :to="item.slug ? '/' + item.slug : '#'"
+            class="group flex flex-col overflow-hidden flex-1 transition-all"
+          >
+            <div v-if="item.image" class="overflow-hidden shrink-0 border-b" style="aspect-ratio: 16/9;" :style="{ borderColor: ca(textColor,'08') }">
+              <img :src="item.image" :alt="item.title" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
+            </div>
+            <div v-else class="shrink-0 flex items-center justify-center border-b" style="aspect-ratio: 16/9;" :style="{ backgroundColor: ca(textColor,'03'), borderColor: ca(textColor,'08') }">
+              <span class="text-2xl font-black" :style="{ opacity: 0.06 }">{{ (item.title || '?')[0] }}</span>
+            </div>
+            <div class="p-5 flex flex-col flex-1">
+              <span v-if="item.category" class="text-[9px] font-black uppercase tracking-[0.4em] mb-2" :style="{ opacity: 0.35 }">{{ item.category }}</span>
+              <div class="font-black leading-snug flex-1 uppercase" :class="[bodyClass]">{{ item.title }}</div>
+              <div class="flex items-center gap-1 mt-3 text-[11px] font-black uppercase tracking-wider transition-all group-hover:gap-2" :style="{ opacity: 0.35 }">Lire <span>→</span></div>
+            </div>
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- Empty state -->
+      <div v-if="!items?.length" class="py-12 text-center border" :style="{ borderColor: ca(textColor,'08'), opacity: 0.2 }">
+        <div class="text-3xl mb-2 font-black">→</div>
+        <div class="text-xs font-black uppercase tracking-widest">Add related pages</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 { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "cards" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "See Also" },
+  title: { type: String, default: "" },
+  items: { type: Array, default: () => [
+    { title: "Getting Started", slug: "getting-started", description: "Everything you need to know to get up and running.", image: "", category: "Guide" },
+    { title: "Our Services", slug: "services", description: "Discover the full range of services we offer.", image: "", category: "Services" },
+    { title: "Contact Us", slug: "contact", description: "Reach out to our team \u2014 we reply within 24h.", image: "", category: "Support" }
+  ] },
+  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: "sharp" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.05 });
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-8 md:px-16", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-8 md:px-16");
+const containerClass = computed(() => ({ narrow: "max-w-3xl mx-auto", normal: "max-w-5xl mx-auto", wide: "max-w-7xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-5xl mx-auto");
+const titleFontSize = computed(() => ({ sm: "clamp(0.9rem,1vw,1.1rem)", md: "clamp(1rem,1.5vw,1.4rem)", lg: "clamp(1.5rem,2.5vw,2rem)" })[props.textSize] || "clamp(1rem,1.5vw,1.4rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const gridCols = computed(() => {
+  const n = (props.items || []).length;
+  if (n === 1) return "grid-cols-1 max-w-sm";
+  if (n === 2) return "grid-cols-1 sm:grid-cols-2";
+  return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
+});
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
+  if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
+  if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
+  return s;
+});
+</script>
+
+<style scoped>
+.sv-out{opacity:0;transform:translateY(16px)}.sv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
+</style>

package/dist/runtime/components/sections/swiss-style/RelatedPages.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/swiss-style/RichText.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/swiss-style/RichText.vue

@@ -0,0 +1,100 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="maxW">
+
+      <!-- Optional title -->
+      <component v-if="title" :is="titleTag"
+        :class="['font-black uppercase leading-[0.9]', titleBorder ? 'pb-6 mb-6 border-b' : 'mb-10']"
+        :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em', borderColor: titleBorder ? ca(textColor,'18') : undefined }">{{ title }}</component>
+
+      <!-- Content -->
+      <div class="prose-content text-sm md:text-base leading-relaxed space-y-5" :style="{ opacity: 0.85 }" v-html="rendered"></div>
+
+      <!-- CTA buttons -->
+      <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 mt-10 pt-8 border-t" :style="{ borderColor: ca(textColor,'12') }">
+        <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
+          class="inline-flex items-center gap-3 px-6 py-3 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6 border"
+          :style="i === 0 ? { backgroundColor: textColor, color: bgColor, borderColor: textColor } : { borderColor: ca(textColor,'30'), color: textColor }">
+          {{ cta.text }}<span>→</span>
+        </NuxtLink>
+      </div>
+
+      <!-- Placeholder when empty -->
+      <div v-if="!content && !title" class="space-y-3">
+        <div v-for="n in 6" :key="n" class="h-3" :style="{ backgroundColor: ca(textColor,'0c'), width: n % 3 === 0 ? '60%' : '100%' }"></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 { ref, computed, onMounted } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "article" },
+  titleTag: { type: String, default: "h2" },
+  titleBorder: { type: Boolean, default: false },
+  title: { type: String, default: "" },
+  content: { type: String, default: "" },
+  ctas: { type: Array, default: () => [] },
+  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: "sharp" },
+  textDirection: { type: String, default: "ltr" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" },
+  paddingX: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.06 });
+  if (sectionEl.value) obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 300);
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-8 md:px-16", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-8 md:px-16");
+const maxW = computed(() => ({ narrow: "max-w-2xl mx-auto", normal: "max-w-3xl mx-auto", wide: "max-w-5xl mx-auto", full: "max-w-full" })[props.contentWidth] || "max-w-3xl mx-auto");
+const titleFontSize = computed(() => ({ sm: "clamp(1rem,1.5vw,1.3rem)", md: "clamp(1.5rem,2.5vw,2rem)", lg: "clamp(2rem,4vw,3.5rem)" })[props.textSize] || "clamp(1.5rem,2.5vw,2rem)");
+const rendered = computed(() => {
+  if (!props.content) return "";
+  return props.content.replace(/\n\n/g, "</p><p>").replace(/\n/g, "<br>");
+});
+const SM = { none: "0", xs: "8px", sm: "24px", md: "48px", lg: "80px", xl: "128px", "-xs": "-8px", "-sm": "-24px", "-md": "-48px", "-lg": "-80px", "-xl": "-128px" };
+const spacingStyle = computed(() => {
+  const s = {};
+  if (props.paddingTop && SM[props.paddingTop]) s.paddingTop = SM[props.paddingTop];
+  if (props.paddingBottom && SM[props.paddingBottom]) s.paddingBottom = SM[props.paddingBottom];
+  if (props.marginTop && SM[props.marginTop]) s.marginTop = SM[props.marginTop];
+  if (props.marginBottom && SM[props.marginBottom]) s.marginBottom = SM[props.marginBottom];
+  if (props.paddingX && SM[props.paddingX]) {
+    const v = SM[props.paddingX];
+    if (v.startsWith("-")) {
+      s.marginLeft = v;
+      s.marginRight = v;
+    } else {
+      s.paddingLeft = v;
+      s.paddingRight = v;
+    }
+  }
+  return s;
+});
+</script>
+
+<style scoped>
+.sv-out{opacity:0;transform:translateY(16px)}.sv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
+</style>

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

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