cinqcinqdev-seo 0.1.72 → 1.0.0

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

@@ -0,0 +1,245 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="[containerClass]">
+
+      <!-- Header row: title + search -->
+      <div v-if="badge || title || description || searchable" class="flex flex-col md:flex-row md:items-end gap-6 mb-10 pb-6 border-b" :style="{ borderColor: ca(textColor,'12') }">
+        <div class="flex-1">
+          <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" v-if="title" 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']" :style="{ opacity: 0.55 }">{{ description }}</p>
+        </div>
+        <!-- Search input -->
+        <div v-if="searchable" class="shrink-0 relative">
+          <input
+            v-model="query"
+            type="search"
+            placeholder="Search…"
+            :class="[bodyClass, 'w-full md:w-56 pl-9 pr-4 py-2.5 border outline-none transition-all bg-transparent']"
+            :style="{ borderColor: ca(textColor,'20'), color: textColor }"
+            @input="currentPage = 1"
+          />
+          <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm pointer-events-none" :style="{ opacity: 0.35 }">⌕</span>
+        </div>
+      </div>
+
+      <!-- DEFAULT / STRIPED / MINIMAL table -->
+      <div v-if="layout !== 'cards'" class="overflow-x-auto border" :style="{ borderColor: ca(textColor,'12') }">
+        <table class="w-full min-w-[400px]" style="border-collapse: collapse;">
+          <caption v-if="caption" class="text-left px-6 pb-3 text-xs" :style="{ opacity: 0.4 }">{{ caption }}</caption>
+          <thead :class="stickyHeader ? 'sticky top-0 z-10' : ''" :style="{ backgroundColor: bgColor }">
+            <tr :style="{ borderBottom: `2px solid ${ca(textColor,'15')}` }">
+              <th
+                v-for="(col, ci) in parsedCols" :key="ci"
+                :class="['px-6 py-4 text-[9px] font-black uppercase tracking-[0.4em] select-none', col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : 'text-left', sortable ? 'cursor-pointer hover:opacity-100' : '']"
+                :style="{ opacity: 0.4, borderLeft: ci > 0 ? `1px solid ${ca(textColor,'08')}` : 'none' }"
+                @click="sortable && toggleSort(ci)"
+              >
+                <span class="inline-flex items-center gap-1.5">
+                  {{ col.label }}
+                  <span v-if="sortable" class="text-[10px] transition-all" :style="{ opacity: sortCol === ci ? 1 : 0.25 }">
+                    {{ sortCol === ci ? (sortDir === 'asc' ? '↑' : '↓') : '↕' }}
+                  </span>
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="!pageRows.length">
+              <td :colspan="parsedCols.length" class="px-6 py-12 text-center text-sm" :style="{ opacity: 0.3 }">No results found</td>
+            </tr>
+            <tr
+              v-for="(row, ri) in pageRows" :key="ri"
+              :style="{
+                borderTop: `1px solid ${ca(textColor,'07')}`,
+                backgroundColor: layout === 'striped' && ri % 2 === 1 ? ca(textColor,'03') : 'transparent',
+              }"
+            >
+              <td
+                v-for="(cell, ci) in row.cells" :key="ci"
+                :class="['px-6 py-4', parsedCols[ci]?.align === 'center' ? 'text-center' : parsedCols[ci]?.align === 'right' ? 'text-right' : 'text-left']"
+                :style="{ borderLeft: ci > 0 ? `1px solid ${ca(textColor,'06')}` : 'none' }"
+              >
+                <span v-if="parsedCols[ci]?.badge" class="inline-block text-[9px] font-black uppercase tracking-wider px-2.5 py-0.5 border"
+                  :style="{ borderColor: ca(textColor,'18'), color: textColor }">{{ cell }}</span>
+                <span v-else :class="[bodyClass]" :style="{ opacity: 0.8 }">{{ cell }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- CARDS layout -->
+      <div v-else class="grid gap-0 border divide-x divide-y" :class="gridCols" :style="{ borderColor: ca(textColor,'12') }">
+        <div v-if="!pageRows.length" class="col-span-full py-12 text-center text-sm" :style="{ opacity: 0.3 }">No results found</div>
+        <div
+          v-for="(row, ri) in pageRows" :key="ri"
+          class="p-6"
+        >
+          <dl class="space-y-3">
+            <div v-for="(cell, ci) in row.cells" :key="ci" class="flex items-start justify-between gap-4 border-b pb-2.5 last:border-b-0" :style="{ borderColor: ca(textColor,'07') }">
+              <dt class="text-[9px] font-black uppercase tracking-[0.4em] shrink-0" :style="{ opacity: 0.35 }">{{ parsedCols[ci]?.label }}</dt>
+              <dd :class="[bodyClass, 'font-medium text-right']" :style="{ opacity: 0.8 }">{{ cell }}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      <!-- Pagination -->
+      <div v-if="perPage > 0 && totalPages > 1" class="flex items-center justify-between mt-6 border-t pt-4" :style="{ borderColor: ca(textColor,'10') }">
+        <span :class="[bodyClass]" :style="{ opacity: 0.4 }">
+          {{ (currentPage - 1) * perPage + 1 }}–{{ Math.min(currentPage * perPage, filteredRows.length) }} of {{ filteredRows.length }}
+        </span>
+        <div class="flex items-center gap-1">
+          <button
+            v-for="p in totalPages" :key="p"
+            class="w-8 h-8 text-xs font-black border transition-all"
+            :style="p === currentPage
+              ? { backgroundColor: textColor, color: bgColor, borderColor: textColor }
+              : { borderColor: ca(textColor,'15'), color: textColor, opacity: 0.5 }"
+            @click="currentPage = p"
+          >{{ p }}</button>
+        </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: "default" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "" },
+  title: { type: String, default: "" },
+  description: { type: String, default: "" },
+  caption: { type: String, default: "" },
+  searchable: { type: Boolean, default: false },
+  sortable: { type: Boolean, default: true },
+  stickyHeader: { type: Boolean, default: false },
+  perPage: { type: Number, default: 0 },
+  cardColumns: { type: String, default: "auto" },
+  columns: { type: Array, default: () => [
+    { label: "Name", align: "left", badge: false },
+    { label: "Role", align: "left", badge: false },
+    { label: "Department", align: "left", badge: false },
+    { label: "Status", align: "left", badge: true }
+  ] },
+  items: { type: Array, default: () => [
+    { cells: "Alice Martin | Lead Designer | Product | Active" },
+    { cells: "Bob Chen | Senior Developer | Engineering | Active" },
+    { cells: "Clara Dumont | Product Manager | Product | On leave" },
+    { cells: "David Kim | UX Researcher | Design | Active" },
+    { cells: "Emma Laurent | DevOps Engineer | Engineering | Active" },
+    { cells: "F\xE9lix Moreau | Data Analyst | Analytics | Active" }
+  ] },
+  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(0.9rem,1vw,1.1rem)", md: "clamp(1rem,1.5vw,1.4rem)", lg: "clamp(2.2rem,5vw,4rem)" })[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 parsedCols = computed(() => (props.columns || []).map((col) => ({
+  label: col.label || "",
+  align: col.align || "left",
+  badge: col.badge || false
+})));
+const parsedRows = computed(() => (props.items || []).map((row) => ({
+  cells: (row.cells || "").split("|").map((c) => c.trim())
+})));
+const query = ref("");
+const sortCol = ref(-1);
+const sortDir = ref("asc");
+const toggleSort = (i) => {
+  if (sortCol.value === i) sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
+  else {
+    sortCol.value = i;
+    sortDir.value = "asc";
+  }
+};
+const currentPage = ref(1);
+const filteredRows = computed(() => {
+  let rows = parsedRows.value;
+  if (props.searchable && query.value.trim()) {
+    const q = query.value.toLowerCase();
+    rows = rows.filter((r) => r.cells.some((c) => c.toLowerCase().includes(q)));
+  }
+  if (props.sortable && sortCol.value >= 0) {
+    rows = [...rows].sort((a, b) => {
+      const av = a.cells[sortCol.value] || "";
+      const bv = b.cells[sortCol.value] || "";
+      const cmp = av.localeCompare(bv, void 0, { numeric: true, sensitivity: "base" });
+      return sortDir.value === "asc" ? cmp : -cmp;
+    });
+  }
+  return rows;
+});
+const totalPages = computed(() => props.perPage > 0 ? Math.ceil(filteredRows.value.length / props.perPage) : 1);
+const pageRows = computed(() => {
+  if (props.perPage <= 0) return filteredRows.value;
+  const start = (currentPage.value - 1) * props.perPage;
+  return filteredRows.value.slice(start, start + props.perPage);
+});
+const gridCols = computed(() => {
+  if (props.cardColumns === "1") return "grid-cols-1";
+  if (props.cardColumns === "2") return "grid-cols-1 md:grid-cols-2";
+  if (props.cardColumns === "4") return "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4";
+  const n = parsedCols.value.length;
+  if (n <= 3) return "grid-cols-1 md:grid-cols-2";
+  return "grid-cols-1 md: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/DataTable.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/FAQ.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/FAQ.vue

@@ -0,0 +1,107 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="[containerClass]">
+
+      <!-- Header -->
+      <div class="border-b pb-6 mb-0 flex items-end gap-8 justify-between" :style="{ borderColor: ca(textColor,'15') }">
+        <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+        <span class="text-[9px] font-black uppercase tracking-[0.4em] pb-1 shrink-0" :style="{ opacity: 0.3 }">Q&amp;A</span>
+      </div>
+
+      <!-- Items -->
+      <div class="divide-y" :style="{ borderColor: ca(textColor,'10') }">
+        <div v-for="(item, index) in items" :key="index" :style="{ borderColor: ca(textColor,'10') }">
+          <button @click="toggle(index)" class="w-full flex items-start justify-between py-7 text-left cursor-pointer gap-8">
+            <div class="flex items-start gap-6">
+              <span class="text-[11px] font-black tabular-nums pt-0.5 shrink-0" :style="{ opacity: 0.25 }">{{ String(index + 1).padStart(2, '0') }}</span>
+              <span class="font-black uppercase tracking-tight leading-snug">{{ item.question }}</span>
+            </div>
+            <span class="text-xl font-light shrink-0 mt-0.5 transition-transform duration-200" :style="{ transform: openIndex === index ? 'rotate(45deg)' : 'none', opacity: 0.4 }">+</span>
+          </button>
+          <div v-if="openIndex === index" class="pl-14 pb-7">
+            <p :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.6 }">{{ item.answer }}</p>
+          </div>
+        </div>
+
+        <!-- Placeholders -->
+        <div v-if="!items.length" v-for="n in 3" :key="n" :style="{ borderColor: ca(textColor,'10') }">
+          <div class="flex items-center gap-6 py-7">
+            <span class="text-[11px] font-black tabular-nums" :style="{ opacity: 0.15 }">0{{ n }}</span>
+            <div class="h-4 flex-1" :style="{ backgroundColor: ca(textColor,'10'), width: n === 1 ? '70%' : n === 2 ? '55%' : '65%' }"></div>
+          </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({
+  title: { type: String, default: "FAQ" },
+  titleTag: { type: String, default: "h2" },
+  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: "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 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 openIndex = ref(null);
+const toggle = (index) => {
+  openIndex.value = openIndex.value === index ? null : index;
+};
+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/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/swiss-style/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/swiss-style/Features.vue

@@ -0,0 +1,103 @@
+<template>
+  <section ref="sectionEl" :class="[sectionPad, isVisible ? 'sv-in' : 'sv-out']" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+    <div :class="[containerClass]">
+
+      <!-- Header -->
+      <div class="border-b mb-0 pb-6 flex items-end justify-between gap-8" :style="{ borderColor: ca(textColor,'15') }">
+        <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.03em' }">{{ title }}</component>
+        <span class="text-[9px] font-black uppercase tracking-[0.4em] shrink-0 pb-1" :style="{ opacity: 0.3 }">{{ items.length || 3 }} items</span>
+      </div>
+
+      <!-- Grid -->
+      <div v-if="items.length" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-b" :style="{ borderColor: ca(textColor,'10') }">
+        <div v-for="(item, index) in items" :key="index"
+          class="p-8 border-b border-r last:border-r-0 md:[&:nth-child(2n)]:border-r-0 lg:[&:nth-child(2n)]:border-r lg:[&:nth-child(3n)]:border-r-0 transition-colors hover:bg-black/[0.02]"
+          :style="{ borderColor: ca(textColor,'10') }">
+          <div class="flex items-start justify-between mb-6">
+            <span class="font-black tabular-nums" :style="{ fontSize: 'clamp(1.8rem,3vw,2.5rem)', opacity: 0.12, letterSpacing: '-0.04em' }">{{ String(index + 1).padStart(2, '0') }}</span>
+            <div class="w-px self-stretch" :style="{ backgroundColor: ca(textColor,'10') }"></div>
+          </div>
+          <component :is="itemTag" class="font-black uppercase tracking-tight mb-3 leading-tight">{{ item.title }}</component>
+          <p :class="[bodyClass, 'leading-relaxed']" :style="{ opacity: 0.55 }">{{ item.description || item.text }}</p>
+        </div>
+      </div>
+
+      <!-- Placeholder -->
+      <div v-else class="grid grid-cols-1 md:grid-cols-3 border-b" :style="{ borderColor: ca(textColor,'10') }">
+        <div v-for="n in 3" :key="n" class="p-8 border-r last:border-r-0" :style="{ borderColor: ca(textColor,'10') }">
+          <span class="block font-black tabular-nums mb-6" :style="{ fontSize: '2rem', opacity: 0.08 }">0{{ n }}</span>
+          <div class="h-4 mb-3" :style="{ backgroundColor: ca(textColor,'12'), width: '60%' }"></div>
+          <div class="h-3" :style="{ backgroundColor: ca(textColor,'08'), width: '80%' }"></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({
+  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: "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(1.2rem,2vw,1.8rem)", md: "clamp(1.8rem,3vw,2.8rem)", lg: "clamp(2.5rem,6vw,5rem)" })[props.textSize] || "clamp(1.8rem,3vw,2.8rem)");
+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/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/swiss-style/HeroFan.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/HeroFan.vue

@@ -0,0 +1,108 @@
+<template>
+  <section
+    ref="rootEl"
+    class="relative overflow-hidden"
+    :dir="textDirection"
+    :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]"
+  >
+    <div :class="['relative mx-auto px-8 md:px-16', containerClass, variant === 'compact' ? 'py-14 md:py-20' : 'py-20 md:py-28']">
+
+      <!-- Grid layout: text left, images right -->
+      <div class="grid md:grid-cols-2 gap-12 md:gap-16 items-center">
+
+        <!-- Left: text block -->
+        <div>
+          <div class="border-l-4 pl-8 mb-10" :style="{ borderColor: textColor }">
+            <component :is="titleTag" class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.04em' }">
+              {{ title }}
+              <template v-if="titleLine2Prefix || titleHighlight">
+                <br />
+                <span v-if="titleLine2Prefix">{{ titleLine2Prefix }} </span>
+                <span v-if="titleHighlight" :style="{ color: highlightColor }">{{ titleHighlight }}</span>
+              </template>
+            </component>
+          </div>
+
+          <p v-if="description" class="text-sm leading-relaxed mb-8 max-w-sm" :style="{ opacity: 0.6 }">{{ description }}</p>
+
+          <div v-if="primaryCtaText || secondaryCtaText" class="flex flex-wrap gap-3">
+            <NuxtLink v-if="primaryCtaText" :to="primaryCtaLink || '#'"
+              class="inline-flex items-center gap-3 px-7 py-3.5 text-[11px] font-black uppercase tracking-widest border transition-all hover:gap-6"
+              :style="{ backgroundColor: textColor, color: bgColor, borderColor: textColor }">
+              {{ primaryCtaText }}<span>→</span>
+            </NuxtLink>
+            <NuxtLink v-if="secondaryCtaText" :to="secondaryCtaLink || '#'"
+              class="inline-flex items-center gap-3 px-7 py-3.5 border text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6"
+              :style="{ borderColor: ca(textColor,'30'), color: textColor }">
+              {{ secondaryCtaText }}
+            </NuxtLink>
+          </div>
+
+          <p v-if="socialProof" class="text-xs font-medium mt-4 border-t pt-4" :style="{ opacity: 0.4, borderColor: ca(textColor,'12') }">{{ socialProof }}</p>
+        </div>
+
+        <!-- Right: images grid -->
+        <div v-if="images?.length" class="grid grid-cols-2 gap-2">
+          <div
+            v-for="(img, i) in images.slice(0, 4)" :key="i"
+            :class="['overflow-hidden border', i === 0 ? 'col-span-2 aspect-[16/7]' : 'aspect-square']"
+            :style="{ borderColor: ca(textColor,'12') }"
+          >
+            <img :src="typeof img === 'object' ? img.url : img" :alt="typeof img === 'object' ? (img.alt || '') : ''" class="w-full h-full object-cover" />
+          </div>
+          <div v-if="!images.length" v-for="n in 3" :key="n" :class="['border', n === 1 ? 'col-span-2 aspect-[16/7]' : 'aspect-square']" :style="{ borderColor: ca(textColor,'10'), backgroundColor: ca(textColor,'04') }"></div>
+        </div>
+        <div v-else class="grid grid-cols-2 gap-2">
+          <div v-for="n in 3" :key="n" :class="['border', n === 1 ? 'col-span-2 aspect-[16/7]' : 'aspect-square']" :style="{ borderColor: ca(textColor,'10'), backgroundColor: ca(textColor,'04') }"></div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+const ca = (c, h) => {
+  if (!c) return "#000" + h;
+  const m = c.match(/rgba\((var\([^)]+\)),\s*[\d.]+\)/);
+  return m ? `rgba(${m[1]}, ${Math.round(parseInt(h, 16) / 255 * 1e3) / 1e3})` : c + h;
+};
+const props = defineProps({
+  titleTag: { type: String, default: "h1" },
+  title: { type: String, default: "The Headline" },
+  titleLine2Prefix: { type: String, default: "" },
+  titleHighlight: { type: String, default: "Highlighted" },
+  highlightColor: { type: String, default: "rgba(var(--primary-color), 1)" },
+  description: { type: String, default: "A compelling subtitle that explains your value proposition clearly." },
+  socialProof: { type: String, default: "" },
+  primaryCtaText: { type: String, default: "Get Started" },
+  primaryCtaLink: { type: String, default: "#" },
+  secondaryCtaText: { type: String, default: "" },
+  secondaryCtaLink: { type: String, default: "#" },
+  images: { type: Array, default: () => [] },
+  variant: { type: String, default: "standard" },
+  animation: { type: String, default: "subtle" },
+  bgColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  textColor: { type: String, default: "rgba(var(--text-color), 1)" },
+  contentWidth: { type: String, default: "normal" },
+  textSize: { type: String, default: "md" },
+  textDirection: { type: String, default: "ltr" },
+  paddingTop: { type: String, default: "" },
+  paddingBottom: { type: String, default: "" },
+  marginTop: { type: String, default: "" },
+  marginBottom: { type: String, default: "" }
+});
+const rootEl = ref(null);
+const containerClass = computed(() => ({ narrow: "max-w-4xl 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(2rem,4vw,3.5rem)", md: "clamp(2.5rem,5vw,4.5rem)", lg: "clamp(3rem,7vw,6rem)" })[props.textSize] || "clamp(2.5rem,5vw,4.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];
+  return s;
+});
+</script>

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

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