cinqcinqdev-seo 0.1.15 → 0.1.17

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

@@ -10,7 +10,7 @@
         <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">
+        <div v-if="image" :class="['mt-14 mx-auto aspect-video overflow-hidden max-w-3xl', cardRound]">
           <img :src="image" class="w-full h-full object-cover" />
         </div>
       </div>
@@ -25,7 +25,7 @@
           <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">
+        <div :class="['aspect-[4/3] overflow-hidden', cardRound]">
           <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>
@@ -35,7 +35,7 @@
     <!-- 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' }">
+        <div :class="['col-span-12 md:col-span-7 p-8 md:p-10 border flex flex-col justify-between min-h-[320px]', cardRound]" :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>
@@ -43,7 +43,7 @@
             <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]">
+        <div :class="['col-span-12 md:col-span-5 overflow-hidden min-h-[260px] md:min-h-[320px]', cardRound]">
           <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>
@@ -76,7 +76,7 @@
           <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">
+        <div v-if="image" :class="['mb-10 overflow-hidden aspect-video', cardRound]">
           <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' }">
@@ -95,7 +95,7 @@
         </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">
+          <div v-if="image" :class="['md:w-56 md:shrink-0 aspect-[3/4] overflow-hidden', cardRound]">
             <img :src="image" class="w-full h-full object-cover" />
           </div>
         </div>
@@ -110,7 +110,8 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+const props = defineProps({
   layout: { type: String, default: "centered" },
   animation: { type: String, default: "fadeUp" },
   titleSize: { type: String, default: "md" },
@@ -124,6 +125,9 @@ defineProps({
   imageStyle: { type: String, default: "cover" },
   imagePosition: { type: String, default: "center" },
   bgColor: { type: String, default: "#3d35ff" },
-  textColor: { type: String, default: "#ffffff" }
+  textColor: { type: String, default: "#ffffff" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
 });
+const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="py-14 px-6 md:px-12" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :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">
@@ -11,8 +11,7 @@
       <!-- 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' : ''"
+          :class="['border p-8 flex flex-col transition-all duration-300 relative', cardRound, 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>
@@ -63,7 +62,7 @@
           <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 }">
+              <th v-for="(plan, i) in items" :key="i" class="text-center py-4 px-4 font-black uppercase tracking-tight text-sm" :style="plan.highlighted ? { color: textColor } : { opacity: 0.7 }">
                 {{ plan.name }}<br/><span class="text-2xl font-black tracking-tighter">{{ plan.price }}</span>
               </th>
             </tr>
@@ -94,8 +93,12 @@ const props = defineProps({
   description: { type: String, default: "" },
   items: { type: Array, default: () => [] },
   bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" }
+  textColor: { type: String, default: "#000000" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
 });
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
+const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
 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)));

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="py-14 px-6 md:px-12" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :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'">
@@ -36,7 +36,7 @@
 
       <!-- 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 v-for="(step, i) in items" :key="i" :class="['p-7 border', cardRound]" :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>
@@ -76,7 +76,8 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+const props = defineProps({
   layout: { type: String, default: "steps" },
   title: { type: String, default: "How it works" },
   titleTag: { type: String, default: "h2" },
@@ -85,6 +86,10 @@ defineProps({
   itemTag: { type: String, default: "h3" },
   items: { type: Array, default: () => [] },
   bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" }
+  textColor: { type: String, default: "#000000" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
 });
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
+const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="py-14 px-6 md:px-12" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :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'">
@@ -18,7 +18,7 @@
       <!-- 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"
+          :class="['group relative p-8 border transition-all duration-300 overflow-hidden hover:-translate-y-1 hover:shadow-lg', cardRound]"
           :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" />
@@ -46,7 +46,7 @@
       <!-- 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"
+          :class="['flex gap-6 p-7 border transition-all hover:shadow-md', cardRound]"
           :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" />
@@ -76,7 +76,8 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+const props = defineProps({
   layout: { type: String, default: "grid" },
   title: { type: String, default: "Our Services" },
   titleTag: { type: String, default: "h2" },
@@ -87,6 +88,10 @@ defineProps({
   items: { type: Array, default: () => [] },
   ctas: { type: Array, default: () => [] },
   bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" }
+  textColor: { type: String, default: "#000000" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
 });
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
+const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="py-14 px-6 md:px-12" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
     <div class="max-w-6xl mx-auto">
 
       <div v-if="title || description" class="mb-12 max-w-xl">
@@ -10,7 +10,7 @@
 
       <!-- 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-for="(item, i) in items" :key="i" :class="['flex flex-col p-7 border transition-all hover:-translate-y-1', cardRound]" :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>
@@ -28,7 +28,7 @@
 
       <!-- 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]" :class="['p-10 border mb-6', cardRound]" :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>
@@ -43,7 +43,7 @@
           </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' }">
+          <div v-for="(item, i) in items.slice(1)" :key="i" :class="['p-7 border', cardRound]" :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" />
@@ -59,7 +59,7 @@
 
       <!-- 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-for="(item, i) in items" :key="i" :class="['break-inside-avoid p-6 border mb-6', cardRound]" :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>
@@ -77,7 +77,8 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue";
+const props = defineProps({
   layout: { type: String, default: "grid" },
   title: { type: String, default: "What our clients say" },
   titleTag: { type: String, default: "h2" },
@@ -85,6 +86,10 @@ defineProps({
   description: { type: String, default: "" },
   items: { type: Array, default: () => [] },
   bgColor: { type: String, default: "#ffffff" },
-  textColor: { type: String, default: "#000000" }
+  textColor: { type: String, default: "#000000" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
 });
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
+const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="py-14 px-6 md:px-12" :style="{ backgroundColor: bgColor, color: textColor }">
+  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
 
     <!-- SPLIT -->
     <div v-if="layout === 'split'" :class="['max-w-6xl mx-auto flex flex-col md:flex-row gap-12 items-center', reverse ? 'md:flex-row-reverse' : '']">
@@ -80,10 +80,15 @@ const props = defineProps({
   reverse: { type: Boolean, default: false },
   bgColor: { type: String, default: "#ffffff" },
   textColor: { type: String, default: "#000000" },
-  ctas: { type: Array, default: () => [] }
+  ctas: { type: Array, default: () => [] },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
 });
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
+const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
 const imageContainerClass = computed(() => {
-  const styles = { rounded: "aspect-[4/3] rounded-3xl", square: "aspect-square rounded-xl", circle: "aspect-square rounded-full max-w-[360px] mx-auto", portrait: "aspect-[3/4] rounded-3xl max-w-sm mx-auto" };
+  const r = cardRound.value;
+  const styles = { rounded: `aspect-[4/3] ${r}`, square: "aspect-square rounded-xl", circle: "aspect-square rounded-full max-w-[360px] mx-auto", portrait: `aspect-[3/4] ${r} max-w-sm mx-auto` };
   return styles[props.imageStyle] ?? styles.rounded;
 });
 </script>

package/dist/runtime/composables/useAdminBasePath.d.ts

@@ -0,0 +1 @@
+export declare const useAdminBasePath: () => string;

package/dist/runtime/composables/useAdminBasePath.js

@@ -0,0 +1,5 @@
+import { useRuntimeConfig } from "#imports";
+export const useAdminBasePath = () => {
+  const config = useRuntimeConfig().public.adminCms;
+  return config?.basePath || "/admin";
+};

package/dist/runtime/composables/useAdminSections.d.ts

@@ -1,10 +1,3 @@
-/**
- * Default section definitions for the visual editor.
- * Keys must match component names in the consuming app's components/sections/ directory.
- * e.g. HeroSection → components/sections/HeroSection.vue → <SectionsHeroSection />
- *
- * Add your own sections via the `extraSections` module option in nuxt.config.ts.
- */
 export declare const DEFAULT_SECTIONS: Record<string, any>;
 export declare const useAdminSections: () => {
     [x: string]: any;

package/dist/runtime/composables/useAdminSections.js

@@ -23,6 +23,16 @@ const animationOptions = [
   { value: "typewriter", label: "Typewriter", icon: "\u258C" },
   { value: "float", label: "Float", icon: "\u301C" }
 ];
+const spacingOptions = [
+  { value: "compact", label: "Compact", icon: "\u2194" },
+  { value: "normal", label: "Normal", icon: "\u27F7" },
+  { value: "spacious", label: "Large", icon: "\u2195" }
+];
+const radiusOptions = [
+  { value: "sharp", label: "Sharp", icon: "\u25A1" },
+  { value: "rounded", label: "Rounded", icon: "\u25A2" },
+  { value: "pill", label: "Pill", icon: "\u25EF" }
+];
 const i18n0 = (fr = "") => ({ fr, ar: "", en: "" });
 export const DEFAULT_SECTIONS = {
   HeroSection: {
@@ -42,7 +52,9 @@ export const DEFAULT_SECTIONS = {
       bgColor: "#3d35ff",
       textColor: "#ffffff",
       ctaText: i18n0("Get Started"),
-      ctaLink: "/"
+      ctaLink: "/",
+      spacing: "normal",
+      radius: "rounded"
     },
     groups: [
       { key: "design", label: "Design" },
@@ -71,6 +83,7 @@ export const DEFAULT_SECTIONS = {
       ctaLink: { type: "text", label: "Button URL", group: "design" },
       bgColor: { type: "color", label: "Background", group: "design" },
       textColor: { type: "color", label: "Text Color", group: "design" },
+      radius: { type: "cards", label: "Arrondis", group: "design", options: radiusOptions },
       animation: { type: "cards", label: "Animation", group: "animation", options: animationOptions }
     }
   },
@@ -91,7 +104,9 @@ export const DEFAULT_SECTIONS = {
       reverse: false,
       bgColor: "#ffffff",
       textColor: "#000000",
-      ctas: []
+      ctas: [],
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -121,7 +136,9 @@ export const DEFAULT_SECTIONS = {
         link: { type: "text", label: "URL" }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   ServiceGrid: {
@@ -138,7 +155,9 @@ export const DEFAULT_SECTIONS = {
       itemTag: "h3",
       items: [],
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -161,7 +180,9 @@ export const DEFAULT_SECTIONS = {
         image: { type: "image", label: "Icon/Image" }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   Features: {
@@ -171,7 +192,9 @@ export const DEFAULT_SECTIONS = {
       title: i18n0("Why choose us?"),
       items: [],
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       title: { type: "text", label: "Section Title", i18n: true },
@@ -180,7 +203,9 @@ export const DEFAULT_SECTIONS = {
         description: { type: "textarea", label: "Description", i18n: true }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   FAQ: {
@@ -190,14 +215,18 @@ export const DEFAULT_SECTIONS = {
       title: i18n0("FAQ"),
       items: [],
       bgColor: "#F9F9FB",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       title: { type: "text", label: "Title", i18n: true },
       items: { type: "list", label: "Questions", itemFields: {
         question: { type: "text", label: "Question", i18n: true },
         answer: { type: "textarea", label: "Answer", i18n: true }
-      } }
+      } },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   Process: {
@@ -211,7 +240,9 @@ export const DEFAULT_SECTIONS = {
       description: i18n0(),
       items: [],
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -231,7 +262,9 @@ export const DEFAULT_SECTIONS = {
         description: { type: "textarea", label: "Description", i18n: true }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   Testimonials: {
@@ -245,7 +278,9 @@ export const DEFAULT_SECTIONS = {
       description: i18n0(),
       items: [],
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -267,7 +302,9 @@ export const DEFAULT_SECTIONS = {
         avatar: { type: "image", label: "Photo" }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   Pricing: {
@@ -281,7 +318,9 @@ export const DEFAULT_SECTIONS = {
       description: i18n0(),
       items: [],
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -303,27 +342,39 @@ export const DEFAULT_SECTIONS = {
         highlighted: { type: "select", label: "Highlight", options: [{ value: false, label: "No" }, { value: true, label: "Yes" }] }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   ContactForm: {
     label: "Contact Form",
     icon: "\u{1F4E9}",
     defaultProps: {
+      layout: "split",
       title: i18n0("Let's talk"),
       subtitle: i18n0("Describe your project and we'll get back to you within 24h."),
       badge: i18n0(),
       button_text: i18n0("Send"),
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
+      layout: { type: "cards", label: "Layout", options: [
+        { value: "split", label: "Split", icon: "\u25E7" },
+        { value: "centered", label: "Centered", icon: "\u25C9" },
+        { value: "minimal", label: "Minimal", icon: "\u2014" }
+      ] },
       badge: { type: "text", label: "Badge", i18n: true },
       title: { type: "text", label: "Title", i18n: true },
       subtitle: { type: "text", label: "Subtitle", i18n: true },
       button_text: { type: "text", label: "Button", i18n: true },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   }
 };

package/dist/runtime/composables/useAdminSettings.d.ts

@@ -0,0 +1,31 @@
+export interface SectionPreset {
+    layout?: string;
+    spacing?: string;
+    radius?: string;
+    animation?: string;
+    bgColor?: string;
+    textColor?: string;
+}
+export interface BrandSettings {
+    id: number;
+    brand_name?: string;
+    tagline?: string;
+    vision?: string;
+    logo_url?: string;
+    primary_color?: string;
+    secondary_color?: string;
+    accent_color?: string;
+    font_headline?: string;
+    font_body?: string;
+    ai_context?: string;
+    section_presets?: Record<string, SectionPreset>;
+    updated_at?: string;
+}
+export declare const useAdminSettings: () => {
+    settings: any;
+    loading: any;
+    saving: any;
+    load: () => Promise<void>;
+    save: (updates: Partial<BrandSettings>) => Promise<void>;
+    applyPresets: (sectionType: string, defaultProps: Record<string, any>) => Record<string, any>;
+};

package/dist/runtime/composables/useAdminSettings.js

@@ -0,0 +1,31 @@
+import { ref } from "#imports";
+import { useSupabaseClient } from "#imports";
+export const useAdminSettings = () => {
+  const supabase = useSupabaseClient();
+  const settings = ref(null);
+  const loading = ref(false);
+  const saving = ref(false);
+  const load = async () => {
+    loading.value = true;
+    const { data } = await supabase.from("brand_settings").select("*").eq("id", 1).maybeSingle();
+    settings.value = data || { id: 1 };
+    loading.value = false;
+  };
+  const save = async (updates) => {
+    saving.value = true;
+    await supabase.from("brand_settings").upsert({ id: 1, ...updates });
+    settings.value = { ...settings.value || { id: 1 }, ...updates };
+    saving.value = false;
+  };
+  const applyPresets = (sectionType, defaultProps) => {
+    const presets = settings.value?.section_presets?.[sectionType];
+    if (!presets) return defaultProps;
+    const merged = { ...defaultProps };
+    const styleKeys = ["layout", "spacing", "radius", "animation", "bgColor", "textColor"];
+    for (const key of styleKeys) {
+      if (presets[key] !== void 0) merged[key] = presets[key];
+    }
+    return merged;
+  };
+  return { settings, loading, saving, load, save, applyPresets };
+};

package/dist/runtime/middleware/admin-auth.js

@@ -4,10 +4,11 @@ export default defineNuxtRouteMiddleware((to) => {
   const config = useRuntimeConfig().public.adminCms;
   const user = useSupabaseUser();
   const loginRoute = config?.loginRoute || "/login";
-  if (to.path.startsWith("/admin") && !user.value) {
+  const basePath = config?.basePath || "/admin";
+  if (to.path.startsWith(basePath) && !user.value) {
     return navigateTo(loginRoute);
   }
   if (to.path === loginRoute && user.value) {
-    return navigateTo("/admin");
+    return navigateTo(basePath);
   }
 });