cinqcinqdev-seo 0.1.71 → 0.1.73

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;

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

@@ -0,0 +1,190 @@
+<template>
+  <section ref="sectionEl" class="relative" :dir="textDirection" :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]">
+
+    <!-- CENTERED -->
+    <div v-if="layout === 'centered'" class="px-8 md:px-16 pt-20 pb-16" :class="[containerClass]">
+      <div class="border-l-4 pl-8 mb-12" :style="{ borderColor: textColor }">
+        <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-4" :style="{ opacity: 0.4 }">{{ badge }}</span>
+        <component :is="titleTag" :class="['font-black uppercase leading-[0.85] mb-0', isVisible ? 'sv-in' : 'sv-out']" :style="{ fontSize: titleSize === 'sm' ? 'clamp(2.5rem,5vw,4rem)' : titleSize === 'lg' ? 'clamp(3.5rem,9vw,8rem)' : 'clamp(3rem,7vw,6rem)', letterSpacing: '-0.03em' }">{{ title }}</component>
+      </div>
+      <div class="grid md:grid-cols-2 gap-12 items-end border-t pt-8" :style="{ borderColor: ca(textColor,'15') }">
+        <p class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ subtitle }}</p>
+        <div class="flex items-center gap-6">
+          <div class="h-px flex-1" :style="{ backgroundColor: ca(textColor,'20') }"></div>
+          <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-3 px-6 py-3 border text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6" :style="{ borderColor: textColor, color: textColor }">{{ ctaText }}<span>→</span></NuxtLink>
+        </div>
+      </div>
+      <div v-if="image" class="mt-12 aspect-video overflow-hidden border" :style="{ borderColor: ca(textColor,'15') }">
+        <img :src="image" class="w-full h-full object-cover" />
+      </div>
+    </div>
+
+    <!-- SPLIT -->
+    <div v-else-if="layout === 'split'" class="px-8 md:px-16 py-16">
+      <div :class="[containerClass, 'grid md:grid-cols-2 gap-0 border', isVisible ? 'sv-in' : 'sv-out']" :style="{ borderColor: ca(textColor,'20') }">
+        <div class="p-10 md:p-14 border-b md:border-b-0 md:border-r flex flex-col justify-between" :style="{ borderColor: ca(textColor,'15') }">
+          <span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.5em] mb-8 block" :style="{ opacity: 0.35 }">{{ badge }}</span>
+          <component :is="titleTag" class="font-black uppercase leading-[0.85] mb-0" :style="{ fontSize: 'clamp(2.2rem,5vw,4.5rem)', letterSpacing: '-0.03em' }">{{ title }}</component>
+        </div>
+        <div class="p-10 md:p-14 flex flex-col justify-between">
+          <p class="text-sm leading-relaxed mb-10" :style="{ opacity: 0.55 }">{{ subtitle }}</p>
+          <div>
+            <div class="h-px mb-8" :style="{ backgroundColor: ca(textColor,'15') }"></div>
+            <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-3 px-6 py-3 border text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6" :style="{ borderColor: textColor, color: textColor }">{{ ctaText }}<span>→</span></NuxtLink>
+          </div>
+        </div>
+        <div v-if="image" class="md:col-span-2 border-t overflow-hidden" :style="{ borderColor: ca(textColor,'15'), height: '320px' }">
+          <img :src="image" class="w-full h-full object-cover" />
+        </div>
+      </div>
+    </div>
+
+    <!-- FULLSCREEN -->
+    <div v-else-if="layout === 'fullscreen'" class="relative flex flex-col justify-end" style="min-height: 88vh">
+      <div class="absolute inset-0">
+        <img v-if="image" :src="image" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: ca(textColor,'08') }"></div>
+        <div v-if="showOverlay" class="absolute inset-0" :style="overlayStyle"></div>
+      </div>
+      <div :class="[containerClass, 'relative z-10 w-full px-8 md:px-16 pb-12 border-t', isVisible ? 'sv-in' : 'sv-out']" :style="{ borderColor: ca(textColor,'30') }">
+        <div class="grid md:grid-cols-3 gap-8 pt-8">
+          <div class="md:col-span-2">
+            <span v-if="badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-4" :style="{ opacity: 0.5 }">{{ badge }}</span>
+            <component :is="titleTag" class="font-black uppercase leading-[0.85]" :style="{ fontSize: 'clamp(2.5rem,7vw,6rem)', letterSpacing: '-0.03em' }">{{ title }}</component>
+          </div>
+          <div class="flex flex-col justify-end">
+            <p class="text-sm leading-relaxed mb-6" :style="{ opacity: 0.65 }">{{ subtitle }}</p>
+            <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-3 px-6 py-3 border text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6 self-start" :style="{ borderColor: textColor, color: textColor }">{{ ctaText }}<span>→</span></NuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- MINIMAL -->
+    <div v-else-if="layout === 'minimal'" class="px-8 md:px-16 py-14" :class="[containerClass]">
+      <div class="flex items-center gap-6 mb-10 border-b pb-6" :style="{ borderColor: ca(textColor,'15') }">
+        <span class="text-[9px] font-black uppercase tracking-[0.5em]" :style="{ opacity: 0.3 }">{{ badge || '—' }}</span>
+        <div class="h-px flex-1" :style="{ backgroundColor: ca(textColor,'10') }"></div>
+        <span class="text-[9px] font-black uppercase tracking-[0.5em]" :style="{ opacity: 0.2 }">{{ ctaText }}</span>
+      </div>
+      <component :is="titleTag" :class="['font-black uppercase leading-[0.85] mb-10', isVisible ? 'sv-in' : 'sv-out']" :style="{ fontSize: 'clamp(3.5rem,10vw,9rem)', letterSpacing: '-0.04em' }">{{ title }}</component>
+      <div v-if="image" class="mb-10 overflow-hidden border aspect-video" :style="{ borderColor: ca(textColor,'15') }">
+        <img :src="image" class="w-full h-full object-cover" />
+      </div>
+      <div class="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 border-t pt-8" :style="{ borderColor: ca(textColor,'15') }">
+        <p class="text-sm leading-relaxed max-w-xs" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
+        <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-3 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6">{{ ctaText }}<span>→</span></NuxtLink>
+      </div>
+    </div>
+
+    <!-- EDITORIAL (default) -->
+    <div v-else class="px-8 md:px-16 py-14">
+      <div :class="[containerClass]">
+        <div class="mb-8 border-b pb-6" :style="{ borderColor: ca(textColor,'12') }">
+          <span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.5em]" :style="{ opacity: 0.3 }">{{ badge }}</span>
+        </div>
+        <component :is="titleTag" :class="['font-black uppercase leading-[0.85] mb-8', isVisible ? 'sv-in' : 'sv-out']" :style="{ fontSize: 'clamp(3rem,9vw,9rem)', letterSpacing: '-0.04em' }">{{ title }}</component>
+        <div class="grid md:grid-cols-2 gap-10 border-t pt-8" :style="{ borderColor: ca(textColor,'12') }">
+          <p class="text-sm leading-relaxed" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
+          <div class="flex items-start justify-end">
+            <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-3 px-6 py-3 border text-[11px] font-black uppercase tracking-widest transition-all hover:gap-6" :style="{ borderColor: textColor, color: textColor }">{{ ctaText }}<span>→</span></NuxtLink>
+          </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: "centered" },
+  animation: { type: String, default: "fadeUp" },
+  titleSize: { type: String, default: "md" },
+  title: { type: String, default: "Impactful Title" },
+  titleTag: { type: String, default: "h1" },
+  subtitle: { type: String, default: "" },
+  badge: { type: String, default: "" },
+  ctaText: { type: String, default: "Get Started" },
+  ctaLink: { type: String, default: "#" },
+  image: { type: String, default: "" },
+  videoUrl: { type: String, default: "" },
+  imageStyle: { type: String, default: "cover" },
+  imagePosition: { type: String, default: "center" },
+  bgColor: { type: String, default: "rgba(var(--primary-color), 1)" },
+  textColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "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: "" },
+  overlay: { type: String, default: "auto" },
+  overlayDirection: { type: String, default: "to top" },
+  overlayStrength: { type: String, default: "medium" },
+  overlayColor: { type: String, default: "" }
+});
+const sectionEl = ref(null);
+const isVisible = ref(false);
+onMounted(() => {
+  if (!sectionEl.value) return;
+  const obs = new IntersectionObserver(([e]) => {
+    if (e.isIntersecting) {
+      isVisible.value = true;
+      obs.disconnect();
+    }
+  }, { threshold: 0.05 });
+  obs.observe(sectionEl.value);
+  setTimeout(() => {
+    if (!isVisible.value) isVisible.value = true;
+  }, 400);
+});
+const showOverlay = computed(() => {
+  if (props.overlay === "off") return false;
+  if (props.overlay === "on") return true;
+  return ["fullscreen", "parallax", "video"].includes(props.layout);
+});
+const overlayStyle = computed(() => {
+  const dir = props.overlayDirection || "to top";
+  const c = props.overlayColor || props.bgColor;
+  const stops = {
+    light: `linear-gradient(${dir}, ${ca(c, "99")} 0%, ${ca(c, "44")} 40%, transparent 70%)`,
+    medium: `linear-gradient(${dir}, ${c} 15%, ${ca(c, "cc")} 40%, ${ca(c, "44")} 65%, transparent 100%)`,
+    strong: `linear-gradient(${dir}, ${c} 35%, ${ca(c, "ee")} 55%, ${ca(c, "88")} 75%, transparent 100%)`
+  };
+  return { background: stops[props.overlayStrength] || stops.medium };
+});
+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 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/HeroSection.vue.d.ts

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

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

@@ -0,0 +1,138 @@
+<template>
+  <section
+    class="relative overflow-hidden select-none"
+    :dir="textDirection"
+    :style="[{ backgroundColor: bgColor, color: textColor }, spacingStyle]"
+    @mouseenter="pauseAutoplay"
+    @mouseleave="resumeAutoplay"
+  >
+    <!-- Slides -->
+    <div class="relative overflow-hidden" :style="{ height: heightValue }">
+      <div
+        v-for="(slide, i) in slides" :key="i"
+        class="absolute inset-0 w-full h-full transition-opacity duration-500"
+        :style="{ opacity: i === current ? 1 : 0, pointerEvents: i === current ? 'auto' : 'none' }"
+      >
+        <img v-if="slide.image" :src="slide.image" class="absolute inset-0 w-full h-full object-cover" />
+        <div v-if="slide.image && overlay" class="absolute inset-0" :style="{ background: `linear-gradient(to top, ${bgColor} 20%, ${ca(bgColor,'aa')} 50%, transparent 100%)` }"></div>
+        <div v-if="!slide.image" class="absolute inset-0" :style="{ backgroundColor: ca(textColor,'08') }"></div>
+
+        <!-- Content -->
+        <div class="relative z-10 h-full flex flex-col justify-end px-8 md:px-16 pb-12 border-t" :style="{ borderColor: ca(textColor,'25') }">
+          <div class="max-w-6xl mx-auto w-full grid md:grid-cols-2 gap-8 pt-8">
+            <div>
+              <span v-if="slide.badge" class="block text-[9px] font-black uppercase tracking-[0.5em] mb-4 border-l-4 pl-3" :style="{ borderColor: textColor, opacity: 0.5 }">{{ slide.badge }}</span>
+              <div class="font-black uppercase leading-[0.88]" :style="{ fontSize: titleFontSize, letterSpacing: '-0.04em' }">{{ slide.title || 'Slide Title' }}</div>
+            </div>
+            <div class="flex flex-col justify-end">
+              <p v-if="slide.subtitle" :class="[bodyClass, 'leading-relaxed mb-6']" :style="{ opacity: 0.65 }">{{ slide.subtitle }}</p>
+              <div class="flex flex-wrap gap-3">
+                <NuxtLink v-if="slide.ctaText" :to="slide.ctaLink || '#'"
+                  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="{ backgroundColor: textColor, color: bgColor, borderColor: textColor }">
+                  {{ slide.ctaText }}<span>→</span>
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Slide counter + controls -->
+    <div v-if="slides.length > 1" class="absolute bottom-4 right-8 md:right-16 z-20 flex items-center gap-4">
+      <button v-if="showArrows" @click="prev" class="w-8 h-8 border flex items-center justify-center text-xs font-black transition-all hover:opacity-70" :style="{ borderColor: ca(textColor,'30'), color: textColor }">←</button>
+      <span class="text-[10px] font-black tabular-nums" :style="{ opacity: 0.5 }">{{ String(current + 1).padStart(2,'0') }} / {{ String(slides.length).padStart(2,'0') }}</span>
+      <button v-if="showArrows" @click="next" class="w-8 h-8 border flex items-center justify-center text-xs font-black transition-all hover:opacity-70" :style="{ borderColor: ca(textColor,'30'), color: textColor }">→</button>
+    </div>
+
+    <!-- Progress bar -->
+    <div v-if="autoplay && slides.length > 1" class="absolute bottom-0 left-0 h-[2px] z-30"
+      :style="{ width: `${progress}%`, backgroundColor: textColor, opacity: 0.3, transition: 'width 0.05s linear' }"></div>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } 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({
+  slides: { type: Array, default: () => [
+    { badge: "New", title: "First Slide Title", subtitle: "Describe your offer here.", ctaText: "Discover", ctaLink: "#", image: "" },
+    { badge: "", title: "Second Slide Title", subtitle: "Another compelling message.", ctaText: "Learn More", ctaLink: "#", image: "" }
+  ] },
+  transition: { type: String, default: "fade" },
+  autoplay: { type: Boolean, default: true },
+  interval: { type: Number, default: 5e3 },
+  height: { type: String, default: "large" },
+  overlay: { type: Boolean, default: true },
+  showDots: { type: Boolean, default: false },
+  showArrows: { type: Boolean, default: true },
+  contentAlign: { type: String, default: "bottom" },
+  titleSize: { type: String, default: "md" },
+  bgColor: { type: String, default: "rgba(var(--primary-color), 1)" },
+  textColor: { type: String, default: "rgba(var(--body-bg), 1)" },
+  radius: { type: String, default: "sharp" },
+  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 current = ref(0);
+const paused = ref(false);
+const progress = ref(0);
+const heightValue = computed(() => ({ small: "50vh", medium: "65vh", large: "80vh", full: "100vh" })[props.height] || "80vh");
+const titleFontSize = computed(() => ({ sm: "clamp(2rem,4vw,3.5rem)", md: "clamp(2.5rem,5vw,4.5rem)", lg: "clamp(3rem,7vw,6rem)" })[props.titleSize] || "clamp(2.5rem,5vw,4.5rem)");
+const bodyClass = computed(() => ({ sm: "text-xs", md: "text-sm", lg: "text-base" })[props.textSize] || "text-sm");
+function next() {
+  current.value = (current.value + 1) % props.slides.length;
+}
+function prev() {
+  current.value = (current.value - 1 + props.slides.length) % props.slides.length;
+}
+let timer = null;
+let progressTimer = null;
+function startAutoplay() {
+  if (!props.autoplay || props.slides.length <= 1 || paused.value) return;
+  progress.value = 0;
+  const step = 100 / (props.interval / 50);
+  progressTimer = setInterval(() => {
+    progress.value = Math.min(progress.value + step, 100);
+  }, 50);
+  timer = setTimeout(() => {
+    next();
+    progress.value = 0;
+    clearInterval(progressTimer);
+    startAutoplay();
+  }, props.interval);
+}
+function pauseAutoplay() {
+  paused.value = true;
+  clearTimeout(timer);
+  clearInterval(progressTimer);
+}
+function resumeAutoplay() {
+  paused.value = false;
+  startAutoplay();
+}
+onMounted(startAutoplay);
+onUnmounted(() => {
+  clearTimeout(timer);
+  clearInterval(progressTimer);
+});
+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/HeroSlider.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/Newsletter.d.vue.ts

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