cinqcinqdev-seo 0.1.71 → 0.1.73

package/dist/runtime/components/sections/swiss-style/BlogHero.vue

@@ -0,0 +1,146 @@
+<template>
+  <section ref="sectionEl" :class="isVisible ? 'sv-in' : 'sv-out'" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+
+    <!-- CENTERED -->
+    <div v-if="layout === 'centered'" :class="[sectionPad]">
+      <div :class="[containerClass]">
+        <div class="border-b pb-8 mb-8" :style="{ borderColor: ca(textColor,'15') }">
+          <div v-if="category || readTime" class="flex items-center gap-4 mb-6 flex-wrap">
+            <span v-if="category" class="text-[9px] font-black uppercase tracking-[0.5em] border px-3 py-1" :style="{ borderColor: ca(textColor,'25'), color: textColor }">{{ category }}</span>
+            <span v-if="readTime" class="text-[11px]" :style="{ opacity: 0.4 }">{{ readTime }}</span>
+          </div>
+          <component :is="titleTag" class="font-black uppercase leading-[0.88] mb-0" :style="{ fontSize: titleFontSize, letterSpacing: '-0.04em' }">{{ title }}</component>
+        </div>
+        <div class="grid md:grid-cols-2 gap-10 mb-10">
+          <p v-if="description" :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.6 }">{{ description }}</p>
+          <div v-if="author || date" class="flex items-center gap-4">
+            <img v-if="authorAvatar" :src="authorAvatar" class="w-10 h-10 object-cover shrink-0" style="border-radius:0" />
+            <div v-else-if="author" class="w-10 h-10 flex items-center justify-center text-xs font-black shrink-0" :style="{ backgroundColor: ca(textColor,'12') }">{{ author[0] }}</div>
+            <div>
+              <div v-if="author" class="text-sm font-black uppercase tracking-wide">{{ author }}</div>
+              <div class="text-[11px]" :style="{ opacity: 0.4 }">{{ [date, readTime].filter(Boolean).join(' · ') }}</div>
+            </div>
+          </div>
+        </div>
+        <div v-if="image" class="overflow-hidden border aspect-[21/9]" :style="{ borderColor: ca(textColor,'12') }">
+          <img :src="image" :alt="title" class="w-full h-full object-cover" />
+        </div>
+      </div>
+    </div>
+
+    <!-- COVER -->
+    <div v-else-if="layout === 'cover'" class="relative flex items-end" style="min-height: 75vh">
+      <div class="absolute inset-0">
+        <img v-if="image" :src="image" :alt="title" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor,'06') }"></div>
+        <div class="absolute inset-0" :style="{ background: `linear-gradient(to top, ${bgColor} 25%, ${ca(bgColor,'cc')} 55%, transparent 100%)` }"></div>
+      </div>
+      <div class="relative w-full px-8 md:px-16 pb-12 pt-40">
+        <div :class="[containerClass]">
+          <div v-if="category || readTime" class="flex items-center gap-4 mb-6">
+            <span v-if="category" class="text-[9px] font-black uppercase tracking-[0.5em] border px-3 py-1" :style="{ borderColor: ca(textColor,'40'), color: textColor }">{{ category }}</span>
+            <span v-if="readTime" class="text-[11px]" :style="{ opacity: 0.5 }">{{ readTime }}</span>
+          </div>
+          <component :is="titleTag" class="font-black uppercase leading-[0.88] mb-6" :style="{ fontSize: titleFontSize, letterSpacing: '-0.04em' }">{{ title }}</component>
+          <div v-if="author || date" class="flex items-center gap-4 border-t pt-6" :style="{ borderColor: ca(textColor,'25') }">
+            <img v-if="authorAvatar" :src="authorAvatar" class="w-8 h-8 object-cover shrink-0" style="border-radius:0" />
+            <div>
+              <span v-if="author" class="text-xs font-black uppercase tracking-wide">{{ author }}</span>
+              <span v-if="date" class="text-[11px] ml-3" :style="{ opacity: 0.5 }">{{ date }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- MINIMAL (default) -->
+    <div v-else :class="[sectionPad]">
+      <div :class="[containerClass]">
+        <div class="border-b pb-6 mb-6" :style="{ borderColor: ca(textColor,'15') }">
+          <div v-if="category" class="text-[9px] font-black uppercase tracking-[0.5em] mb-4" :style="{ opacity: 0.4 }">{{ category }}</div>
+          <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.04em' }">{{ title }}</component>
+        </div>
+        <div class="flex items-center gap-6" :style="{ opacity: 0.5 }">
+          <span v-if="author" class="text-[11px] font-black uppercase tracking-wider">{{ author }}</span>
+          <span v-if="date" class="text-[11px]">{{ date }}</span>
+          <span v-if="readTime" class="text-[11px]">{{ readTime }}</span>
+        </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: "centered" },
+  title: { type: String, default: "" },
+  titleTag: { type: String, default: "h1" },
+  description: { type: String, default: "" },
+  category: { type: String, default: "" },
+  readTime: { type: String, default: "" },
+  author: { type: String, default: "" },
+  authorAvatar: { type: String, default: "" },
+  date: { type: String, default: "" },
+  image: { type: String, default: "" },
+  textAlign: { type: String, default: "left" },
+  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-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(3rem,7vw,6rem)" })[props.textSize] || "clamp(2rem,4vw,3.5rem)");
+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/BlogHero.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/CallToAction.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/CallToAction.vue

@@ -0,0 +1,138 @@
+<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 py-14 px-10 md:px-16" :style="{ borderColor: ca(textColor,'20') }">
+        <div class="border-l-4 pl-8 mb-10" :style="{ borderColor: textColor }">
+          <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-3" :style="{ opacity: 0.4 }">{{ badge }}</span>
+          <h2 class="font-black uppercase leading-[0.9]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</h2>
+          <p v-if="description" :class="[bodyClass, 'leading-relaxed mt-4 max-w-md']" :style="{ opacity: 0.6 }">{{ description }}</p>
+        </div>
+        <div class="flex flex-wrap gap-4">
+          <NuxtLink v-if="ctaText" :to="ctaLink || '#'"
+            class="inline-flex items-center gap-3 px-7 py-3 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6 border"
+            :style="{ backgroundColor: textColor, color: bgColor, borderColor: textColor }">
+            {{ ctaText }}<span>→</span>
+          </NuxtLink>
+          <NuxtLink v-if="ctaSecondaryText" :to="ctaSecondaryLink || '#'"
+            class="inline-flex items-center gap-3 px-7 py-3 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6 border"
+            :style="{ borderColor: ca(textColor,'40'), color: textColor }">
+            {{ ctaSecondaryText }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- BANNER -->
+    <div v-else-if="layout === 'banner'" :class="[containerClass]">
+      <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-8 border-t border-b py-10" :style="{ borderColor: ca(textColor,'20') }">
+        <div>
+          <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-2" :style="{ opacity: 0.4 }">{{ badge }}</span>
+          <h2 class="font-black uppercase leading-[0.9]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</h2>
+          <p v-if="description" :class="[bodyClass, 'mt-2']" :style="{ opacity: 0.6 }">{{ description }}</p>
+        </div>
+        <div class="flex flex-wrap gap-3 shrink-0">
+          <NuxtLink v-if="ctaText" :to="ctaLink || '#'"
+            class="inline-flex items-center gap-3 px-7 py-3 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6 border"
+            :style="{ backgroundColor: textColor, color: bgColor, borderColor: textColor }">
+            {{ ctaText }}<span>→</span>
+          </NuxtLink>
+          <NuxtLink v-if="ctaSecondaryText" :to="ctaSecondaryLink || '#'"
+            class="inline-flex items-center gap-3 px-7 py-3 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6 border"
+            :style="{ borderColor: ca(textColor,'40'), color: textColor }">
+            {{ ctaSecondaryText }}
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- MINIMAL (default) -->
+    <div v-else :class="[containerClass]">
+      <div class="flex items-start md:items-center justify-between gap-8 border-t border-b py-10 flex-col md:flex-row" :style="{ borderColor: ca(textColor,'15') }">
+        <div>
+          <span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.5em] block mb-2" :style="{ opacity: 0.4 }">{{ badge }}</span>
+          <h2 class="font-black uppercase leading-[0.9]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</h2>
+          <p v-if="description" :class="[bodyClass, 'mt-2']" :style="{ opacity: 0.55 }">{{ description }}</p>
+        </div>
+        <NuxtLink v-if="ctaText" :to="ctaLink || '#'"
+          class="inline-flex items-center gap-3 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6 shrink-0"
+          :style="{ color: textColor }">
+          {{ ctaText }}<span>→</span>
+        </NuxtLink>
+      </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" },
+  badge: { type: String, default: "" },
+  title: { type: String, default: "Ready to get started?" },
+  description: { type: String, default: "" },
+  ctaText: { type: String, default: "Get Started" },
+  ctaLink: { type: String, default: "#" },
+  ctaSecondaryText: { type: String, default: "" },
+  ctaSecondaryLink: { 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: "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.5rem)", md: "clamp(1.5rem,3vw,2.5rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.5rem,3vw,2.5rem)");
+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/CallToAction.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/Comparison.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/Comparison.vue

@@ -0,0 +1,280 @@
+<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 || description" :class="['border-b pb-8 mb-12', headerAlign === 'center' ? 'text-center' : '']" :style="{ borderColor: ca(textColor,'15') }">
+        <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-4" :style="{ opacity: 0.35 }">{{ badge }}</span>
+        <component :is="titleTag" v-if="title" class="font-black uppercase leading-[0.88] mb-4" :style="{ fontSize: titleFontSize, letterSpacing: '-0.04em' }">{{ title }}</component>
+        <p v-if="description" :class="[bodyClass, 'leading-relaxed', headerAlign === 'center' ? 'max-w-xl mx-auto' : 'max-w-xl']" :style="{ opacity: 0.55 }">{{ description }}</p>
+      </div>
+
+      <!-- CARDS layout -->
+      <div v-if="layout === 'cards'" :class="['grid border divide-x', gridCols]" :style="{ borderColor: ca(textColor,'15') }">
+        <div
+          v-for="(plan, i) in parsedPlans" :key="i"
+          class="relative flex flex-col p-8"
+          :style="plan.highlighted ? { backgroundColor: textColor, color: bgColor } : {}"
+        >
+          <!-- Popular badge -->
+          <span v-if="plan.badge" class="block text-[9px] font-black uppercase tracking-[0.4em] mb-5 border-l-4 pl-2"
+            :style="plan.highlighted ? { borderColor: bgColor, opacity: 0.6 } : { borderColor: textColor, opacity: 0.4 }">{{ 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="mb-7 border-t" :style="{ borderColor: plan.highlighted ? ca(bgColor,'20') : ca(textColor,'10') }"></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 flex items-center justify-center text-[10px] font-black leading-none mt-0.5 border"
+                :style="feat.type === 'excluded'
+                  ? { borderColor: plan.highlighted ? ca(bgColor,'25') : ca(textColor,'15'), opacity: 0.4 }
+                  : { backgroundColor: plan.highlighted ? bgColor : textColor, color: plan.highlighted ? textColor : bgColor, borderColor: 'transparent' }">
+                {{ 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 border transition-all hover:gap-4"
+            :style="plan.highlighted
+              ? { backgroundColor: bgColor, color: textColor, borderColor: bgColor }
+              : { borderColor: ca(textColor,'25'), color: textColor }">
+            {{ plan.ctaText }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- TABLE layout -->
+      <div v-else-if="layout === 'table'" class="overflow-x-auto border" :style="{ borderColor: ca(textColor,'15') }">
+        <table class="w-full min-w-[540px]" style="border-collapse: collapse;">
+          <thead>
+            <tr :style="{ borderBottom: `2px solid ${ca(textColor,'12')}` }">
+              <th class="text-left pb-6 pr-6 pt-6 pl-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-6 px-6 pt-6 align-bottom" :style="{ width: `${70 / Math.max(parsedPlans.length, 1)}%`, borderLeft: `1px solid ${ca(textColor,'10')}` }">
+                <div :style="plan.highlighted ? { borderLeft: `4px solid ${textColor}`, paddingLeft: '12px' } : {}">
+                  <span v-if="plan.badge" class="block text-[9px] font-black uppercase tracking-[0.4em] mb-2" :style="{ opacity: 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 inline-flex items-center gap-1.5 px-4 py-2 text-[10px] font-black uppercase tracking-wider border transition-all hover:gap-3"
+                    :style="plan.highlighted
+                      ? { backgroundColor: textColor, color: bgColor, borderColor: textColor }
+                      : { borderColor: ca(textColor,'20'), color: textColor }">
+                    {{ plan.ctaText }}
+                  </NuxtLink>
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, ri) in parsedRows" :key="ri"
+              :style="{ borderTop: `1px solid ${ca(textColor,'08')}` }">
+              <td class="py-4 pr-6 pl-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-6 text-center" :style="{ borderLeft: `1px solid ${ca(textColor,'08')}` }">
+                <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 text-[10px] font-black border"
+                      :style="{ backgroundColor: textColor, color: bgColor, borderColor: textColor }">✓</span>
+                    <span v-else-if="plan.features[ri].type === 'excluded'"
+                      class="inline-flex items-center justify-center w-6 h-6 text-[10px] border"
+                      :style="{ borderColor: ca(textColor,'15'), 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 grid grid-cols-1 md:grid-cols-2 border" :style="{ borderColor: ca(textColor,'15') }">
+        <div v-for="(plan, i) in parsedPlans.slice(0, 2)" :key="i"
+          class="flex flex-col p-8 md:p-12"
+          :style="i === 1 ? { borderTop: `1px solid ${ca(textColor,'12')}`, borderLeft: undefined } : {}">
+          <span v-if="plan.badge" class="block self-start text-[9px] font-black uppercase tracking-[0.4em] mb-5 border-l-4 pl-2" :style="{ borderColor: textColor, opacity: 0.4 }">{{ plan.badge }}</span>
+          <div class="text-[10px] font-black uppercase tracking-[0.4em] mb-3" :style="{ opacity: 0.4 }">{{ plan.name }}</div>
+          <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>
+          <p v-if="plan.description" :class="[bodyClass, 'leading-relaxed mb-8 mt-1']" :style="{ opacity: 0.55 }">{{ plan.description }}</p>
+          <div class="mb-7 border-t" :style="{ borderColor: ca(textColor,'10') }"></div>
+          <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 flex items-center justify-center text-[9px] font-black leading-none mt-0.5 border"
+                :style="feat.type === 'excluded'
+                  ? { borderColor: ca(textColor,'12'), opacity: 0.3 }
+                  : { backgroundColor: textColor, color: bgColor, borderColor: textColor }">
+                {{ feat.type === 'excluded' ? '✗' : '✓' }}
+              </span>
+              <span :class="[bodyClass, 'leading-snug']" :style="{ opacity: feat.type === 'excluded' ? 0.3 : 0.7 }">{{ feat.text }}</span>
+            </li>
+          </ul>
+          <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 border transition-all hover:gap-4"
+            :style="plan.highlighted
+              ? { backgroundColor: textColor, color: bgColor, borderColor: textColor }
+              : { borderColor: ca(textColor,'25'), color: textColor }">
+            {{ plan.ctaText }}<span>→</span>
+          </NuxtLink>
+        </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-10 h-10 border-2 text-[10px] font-black uppercase tracking-widest z-10"
+          :style="{ backgroundColor: bgColor, borderColor: ca(textColor,'20'), color: textColor }">VS</div>
+      </div>
+
+      <!-- Empty state -->
+      <div v-if="!parsedPlans.length" class="py-16 text-center border" :style="{ borderColor: ca(textColor,'08'), opacity: 0.2 }">
+        <div class="text-4xl font-black mb-2">≡</div>
+        <div class="text-xs font-black uppercase tracking-widest">Add items 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 { ref, computed, onMounted } 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: "left" },
+  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" },
+  items: { 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: "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-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.3rem,2vw,1.8rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.3rem,2vw,1.8rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+const parsedPlans = computed(
+  () => (props.items || []).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";
+});
+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/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/swiss-style/ContactForm.d.vue.ts

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