cinqcinqdev-seo 0.1.13 → 0.1.15

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

@@ -0,0 +1,129 @@
+<template>
+  <section class="relative overflow-hidden" :style="{ backgroundColor: bgColor, color: textColor }">
+
+    <!-- CENTERED -->
+    <div v-if="layout === 'centered'" class="px-6 md:px-12 pt-20 pb-16 text-center">
+      <div class="max-w-4xl mx-auto">
+        <span v-if="badge" class="inline-flex items-center gap-1.5 text-[10px] font-bold tracking-[0.4em] uppercase px-4 py-1.5 rounded-full border mb-8" :style="{ borderColor: textColor + '30', color: textColor + '80' }">
+          <span class="w-1.5 h-1.5 rounded-full inline-block" :style="{ backgroundColor: textColor + '60' }"></span>{{ badge }}
+        </span>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-6" :style="{ fontSize: titleSize === 'sm' ? 'clamp(2.5rem,5vw,4rem)' : titleSize === 'lg' ? 'clamp(3.5rem,9vw,8rem)' : 'clamp(3rem,7vw,6rem)' }">{{ title }}</component>
+        <p class="text-sm leading-relaxed max-w-lg mx-auto mb-10" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
+        <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-8 py-3.5 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5 active:scale-95" :style="{ backgroundColor: textColor, color: bgColor }">{{ ctaText }}<span>→</span></NuxtLink>
+        <div v-if="image" class="mt-14 mx-auto aspect-video rounded-3xl overflow-hidden max-w-3xl">
+          <img :src="image" class="w-full h-full object-cover" />
+        </div>
+      </div>
+    </div>
+
+    <!-- SPLIT -->
+    <div v-else-if="layout === 'split'" class="px-6 md:px-12 py-16">
+      <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 md:gap-20 items-center">
+        <div>
+          <span v-if="badge" class="inline-block text-[9px] font-black tracking-[0.5em] uppercase mb-6 opacity-35">{{ badge }}</span>
+          <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-6" :style="{ fontSize: 'clamp(2.2rem,5vw,4.5rem)' }">{{ title }}</component>
+          <p class="text-sm leading-relaxed mb-10 max-w-sm" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
+          <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-7 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5 active:scale-95" :style="{ backgroundColor: textColor, color: bgColor }">{{ ctaText }}<span>→</span></NuxtLink>
+        </div>
+        <div class="aspect-[4/3] rounded-3xl overflow-hidden">
+          <img v-if="image" :src="image" class="w-full h-full object-cover" />
+          <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '06' }"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- BENTO -->
+    <div v-else-if="layout === 'bento'" class="p-3 md:p-5">
+      <div class="max-w-6xl mx-auto grid grid-cols-12 gap-3">
+        <div class="col-span-12 md:col-span-7 rounded-[28px] p-8 md:p-10 border flex flex-col justify-between min-h-[320px]" :style="{ borderColor: textColor + '10', backgroundColor: textColor + '04' }">
+          <span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.4em] opacity-30">{{ badge }}</span>
+          <div>
+            <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-4" :style="{ fontSize: 'clamp(2rem,4.5vw,3.8rem)' }">{{ title }}</component>
+            <p class="text-sm leading-relaxed mb-8 max-w-xs" :style="{ opacity: 0.45 }">{{ subtitle }}</p>
+            <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-all hover:gap-5 active:scale-95" :style="{ backgroundColor: textColor, color: bgColor }">{{ ctaText }}<span>→</span></NuxtLink>
+          </div>
+        </div>
+        <div class="col-span-12 md:col-span-5 rounded-[28px] overflow-hidden min-h-[260px] md:min-h-[320px]">
+          <img v-if="image" :src="image" class="w-full h-full object-cover" />
+          <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- FULLSCREEN -->
+    <div v-else-if="layout === 'fullscreen'" class="relative min-h-[88vh] flex flex-col justify-end">
+      <div class="absolute inset-0">
+        <img v-if="image" :src="image" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+        <div class="absolute inset-0" :style="{ background: `linear-gradient(to top, ${bgColor} 20%, ${bgColor}cc 40%, ${bgColor}44 65%, transparent 100%)` }"></div>
+      </div>
+      <div class="relative z-10 max-w-6xl mx-auto w-full px-6 md:px-12 pb-14">
+        <span v-if="badge" class="inline-block text-[9px] font-black uppercase tracking-[0.5em] opacity-40 mb-4">{{ badge }}</span>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.88] mb-6" :style="{ fontSize: 'clamp(3rem,8vw,7rem)' }">{{ title }}</component>
+        <div class="flex flex-col sm:flex-row sm:items-center gap-6 sm:gap-10">
+          <p class="text-sm leading-relaxed max-w-xs" :style="{ opacity: 0.6 }">{{ subtitle }}</p>
+          <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-7 py-3 rounded-full text-[11px] font-black uppercase tracking-widest border transition-all hover:gap-5 shrink-0" :style="{ borderColor: textColor + '50', color: textColor }">{{ ctaText }}<span>→</span></NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- MINIMAL -->
+    <div v-else-if="layout === 'minimal'" class="px-6 md:px-12 py-14">
+      <div class="max-w-6xl mx-auto">
+        <div class="flex items-center gap-4 mb-10 border-b pb-5" :style="{ borderColor: textColor + '10' }">
+          <span v-if="badge" class="text-[9px] font-black uppercase tracking-[0.5em] opacity-30">{{ badge }}</span>
+          <div class="flex-1 h-px" :style="{ backgroundColor: textColor + '08' }"></div>
+          <span class="text-[9px] font-black uppercase tracking-[0.5em] opacity-20">{{ ctaText }}</span>
+        </div>
+        <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.85] mb-10" :style="{ fontSize: 'clamp(3.5rem,10vw,9rem)' }">{{ title }}</component>
+        <div v-if="image" class="mb-10 overflow-hidden rounded-2xl aspect-video">
+          <img :src="image" class="w-full h-full object-cover" />
+        </div>
+        <div class="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 border-t pt-8" :style="{ borderColor: textColor + '10' }">
+          <p class="text-sm leading-relaxed max-w-xs" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
+          <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5 shrink-0">{{ ctaText }}<span>→</span></NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- EDITORIAL -->
+    <div v-else class="px-6 md:px-12 py-14">
+      <div class="max-w-6xl mx-auto">
+        <div class="flex items-center gap-4 mb-8">
+          <div class="w-8 h-px" :style="{ backgroundColor: textColor + '30' }"></div>
+          <span class="text-[9px] font-black uppercase tracking-[0.5em] opacity-30">{{ badge || '—' }}</span>
+        </div>
+        <div class="flex flex-col md:flex-row md:items-end gap-8 mb-8">
+          <component :is="titleTag" class="font-black uppercase tracking-tighter leading-[0.85] flex-1" :style="{ fontSize: 'clamp(3rem,9vw,9rem)' }">{{ title }}</component>
+          <div v-if="image" class="md:w-56 md:shrink-0 aspect-[3/4] rounded-3xl overflow-hidden">
+            <img :src="image" class="w-full h-full object-cover" />
+          </div>
+        </div>
+        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 border-t pt-8" :style="{ borderColor: textColor + '10' }">
+          <p class="text-sm leading-relaxed max-w-sm" :style="{ opacity: 0.5 }">{{ subtitle }}</p>
+          <NuxtLink :to="ctaLink || '#'" class="inline-flex items-center gap-2.5 px-7 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5 shrink-0 active:scale-95" :style="{ backgroundColor: textColor, color: bgColor }">{{ ctaText }}<span>→</span></NuxtLink>
+        </div>
+      </div>
+    </div>
+
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  layout: { type: String, default: "centered" },
+  animation: { type: String, default: "fadeUp" },
+  titleSize: { type: String, default: "md" },
+  title: { type: String, default: "Impactful Title" },
+  titleTag: { type: String, default: "h1" },
+  subtitle: { type: String, default: "" },
+  badge: { type: String, default: "" },
+  ctaText: { type: String, default: "Get Started" },
+  ctaLink: { type: String, default: "#" },
+  image: { type: String, default: "" },
+  imageStyle: { type: String, default: "cover" },
+  imagePosition: { type: String, default: "center" },
+  bgColor: { type: String, default: "#3d35ff" },
+  textColor: { type: String, default: "#ffffff" }
+});
+</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/runtime/components/sections/Testimonials.d.vue.ts

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

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

@@ -0,0 +1,90 @@
+<template>
+  <section class="py-14 px-6 md:px-12" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div class="max-w-6xl mx-auto">
+
+      <div v-if="title || description" class="mb-12 max-w-xl">
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-3">{{ title }}</component>
+        <p v-if="description" class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ description }}</p>
+      </div>
+
+      <!-- GRID -->
+      <div v-if="layout === 'grid'" class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div v-for="(item, i) in items" :key="i" class="flex flex-col p-7 rounded-3xl border transition-all hover:-translate-y-1" :style="{ backgroundColor: textColor + '04', borderColor: textColor + '10' }">
+          <div v-if="item.rating" class="flex gap-0.5 mb-4">
+            <span v-for="s in 5" :key="s" class="text-xs" :style="{ opacity: s <= item.rating ? 1 : 0.15 }">★</span>
+          </div>
+          <p class="text-sm leading-relaxed flex-1 italic mb-6" :style="{ opacity: 0.7 }">"{{ item.quote }}"</p>
+          <div class="flex items-center gap-3 pt-4 border-t" :style="{ borderColor: textColor + '10' }">
+            <img v-if="item.avatar" :src="item.avatar" class="w-9 h-9 rounded-full object-cover shrink-0" />
+            <div v-else class="w-9 h-9 rounded-full flex items-center justify-center text-[11px] font-black shrink-0" :style="{ backgroundColor: textColor + '15' }">{{ (item.name || '?')[0] }}</div>
+            <div>
+              <p class="text-[11px] font-black uppercase tracking-wide leading-none">{{ item.name }}</p>
+              <p v-if="item.role || item.company" class="text-[9px] mt-0.5" :style="{ opacity: 0.4 }">{{ [item.role, item.company].filter(Boolean).join(' · ') }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- FEATURED -->
+      <div v-else-if="layout === 'featured'">
+        <div v-if="items[0]" class="p-10 rounded-[32px] border mb-6" :style="{ backgroundColor: textColor + '05', borderColor: textColor + '10' }">
+          <div v-if="items[0].rating" class="flex gap-0.5 mb-6">
+            <span v-for="s in 5" :key="s" class="text-base" :style="{ opacity: s <= items[0].rating ? 1 : 0.15 }">★</span>
+          </div>
+          <p class="text-xl md:text-3xl font-bold italic leading-snug mb-8 max-w-3xl" :style="{ opacity: 0.8 }">"{{ items[0].quote }}"</p>
+          <div class="flex items-center gap-4">
+            <img v-if="items[0].avatar" :src="items[0].avatar" class="w-12 h-12 rounded-full object-cover" />
+            <div v-else class="w-12 h-12 rounded-full flex items-center justify-center text-sm font-black" :style="{ backgroundColor: textColor + '15' }">{{ (items[0].name || '?')[0] }}</div>
+            <div>
+              <p class="text-sm font-black uppercase tracking-wide">{{ items[0].name }}</p>
+              <p v-if="items[0].role || items[0].company" class="text-[10px]" :style="{ opacity: 0.4 }">{{ [items[0].role, items[0].company].filter(Boolean).join(' · ') }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div v-for="(item, i) in items.slice(1)" :key="i" class="p-7 rounded-3xl border" :style="{ backgroundColor: textColor + '03', borderColor: textColor + '08' }">
+            <p class="text-sm italic leading-relaxed mb-5" :style="{ opacity: 0.7 }">"{{ item.quote }}"</p>
+            <div class="flex items-center gap-3">
+              <img v-if="item.avatar" :src="item.avatar" class="w-8 h-8 rounded-full object-cover" />
+              <div v-else class="w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-black" :style="{ backgroundColor: textColor + '12' }">{{ (item.name || '?')[0] }}</div>
+              <div>
+                <p class="text-[10px] font-black uppercase">{{ item.name }}</p>
+                <p v-if="item.role" class="text-[9px]" :style="{ opacity: 0.4 }">{{ item.role }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- WALL / MINIMAL -->
+      <div v-else class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
+        <div v-for="(item, i) in items" :key="i" class="break-inside-avoid p-6 rounded-2xl border mb-6" :style="{ backgroundColor: textColor + '04', borderColor: textColor + '08' }">
+          <div v-if="item.rating" class="flex gap-0.5 mb-3">
+            <span v-for="s in 5" :key="s" class="text-[10px]" :style="{ opacity: s <= item.rating ? 1 : 0.15 }">★</span>
+          </div>
+          <p class="text-sm italic leading-relaxed mb-4" :style="{ opacity: 0.7 }">"{{ item.quote }}"</p>
+          <div class="flex items-center gap-2.5">
+            <img v-if="item.avatar" :src="item.avatar" class="w-7 h-7 rounded-full object-cover" />
+            <div v-else class="w-7 h-7 rounded-full flex items-center justify-center text-[9px] font-black" :style="{ backgroundColor: textColor + '15' }">{{ (item.name || '?')[0] }}</div>
+            <p class="text-[10px] font-black uppercase">{{ item.name }}</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  layout: { type: String, default: "grid" },
+  title: { type: String, default: "What our clients say" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "" },
+  description: { type: String, default: "" },
+  items: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "#ffffff" },
+  textColor: { type: String, default: "#000000" }
+});
+</script>

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

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