From eebf2a4b7defe3f67b53f5da715d3abdd62c3662 Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Fri, 3 Apr 2026 15:30:41 +0200
Subject: [PATCH 1/4] feat(home): add HomeCtaComponent for final CTA section

Add a reusable call-to-action component with centered layout, title,
subtitle, and dual CTA buttons (primary + secondary). Supports variant
for background alternation. Registered between FAQ and contact sections.

Closes #3837
---
 .../home/components/home.cta.component.vue    | 111 ++++++++++++++++++
 src/modules/home/views/home.view.vue          |   3 +
 2 files changed, 114 insertions(+)
 create mode 100644 src/modules/home/components/home.cta.component.vue

diff --git a/src/modules/home/components/home.cta.component.vue b/src/modules/home/components/home.cta.component.vue
new file mode 100644
index 000000000..0c5f46b27
--- /dev/null
+++ b/src/modules/home/components/home.cta.component.vue
@@ -0,0 +1,111 @@
+<!--
+  HomeCtaComponent
+  ================
+  Final call-to-action section with title, subtitle, and dual CTA buttons.
+
+  USAGE:
+  <homeCtaComponent :setup="config.home.cta" />
+
+  CONFIG EXAMPLE (setup object):
+  cta: {
+    variant: 'alternate',
+    title: 'Ready to get started?',
+    subtitle: 'One sentence reinforcing the key benefit.',
+    button: { title: 'Start Free', link: '/signup', color: 'primary' },
+    secondaryButton: { title: 'See how it works', link: '/docs' },
+  }
+-->
+<template>
+  <section id="cta" :style="sectionStyle">
+    <v-container :style="containerStyle">
+      <v-row align="center" justify="center" class="px-0 py-8">
+        <v-col cols="12">
+          <homeContentComponent :setup="{ title: setup.title, subtitle: setup.subtitle, alignment: 'center' }"></homeContentComponent>
+        </v-col>
+        <v-col cols="12" class="text-center">
+          <v-btn
+            v-if="setup.button"
+            :color="setup.button.color || 'primary'"
+            variant="flat"
+            size="x-large"
+            :class="config.vuetify.theme.rounded"
+            :to="setup.button.link"
+          >
+            {{ setup.button.title }}
+          </v-btn>
+          <v-btn
+            v-if="setup.secondaryButton"
+            variant="outlined"
+            size="x-large"
+            :class="`ml-4 ${config.vuetify.theme.rounded}`"
+            :to="setup.secondaryButton.link"
+          >
+            {{ setup.secondaryButton.title }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </section>
+</template>
+
+<script>
+/**
+ * Module dependencies.
+ */
+import { useTheme } from 'vuetify';
+import { style, overlapStyle, colorModeStyle } from '../../../lib/helpers/theme';
+import homeContentComponent from './utils/home.content.component.vue';
+
+/**
+ * Component definition.
+ */
+export default {
+  name: 'HomeCtaComponent',
+  components: {
+    homeContentComponent,
+  },
+  props: {
+    setup: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    const theme = useTheme();
+    return {
+      theme,
+    };
+  },
+  computed: {
+    /**
+     * Active visual variant of the section.
+     * @returns {string} 'default' or 'alternate'
+     */
+    variant() {
+      return this.setup.variant || 'default';
+    },
+    /**
+     * Inline styles for the v-container, including max-width and optional overlap.
+     * @returns {Object}
+     */
+    containerStyle() {
+      return {
+        'max-width': this.config.vuetify.theme.maxWidth,
+        ...overlapStyle(this.setup.overlap, this.$vuetify?.display),
+      };
+    },
+    /**
+     * Inline styles for the section element, using theme background based on variant.
+     * @returns {Object}
+     */
+    sectionStyle() {
+      const bgColor = this.variant === 'alternate' ? this.theme.current.colors.surface : this.theme.current.colors.background;
+      return {
+        ...style('section', this.setup),
+        ...colorModeStyle(this.setup.colorMode),
+        background: bgColor,
+      };
+    },
+  },
+};
+</script>
diff --git a/src/modules/home/views/home.view.vue b/src/modules/home/views/home.view.vue
index c929f69b1..9f6bcb4a2 100644
--- a/src/modules/home/views/home.view.vue
+++ b/src/modules/home/views/home.view.vue
@@ -35,6 +35,7 @@
       :color-mode="config.home.statistics.colorMode"
     ></homeStatisticsComponent>
     <homeFaqComponent v-if="config.home.faq" :setup="config.home.faq"></homeFaqComponent>
+    <homeCtaComponent v-if="config.home.cta" :setup="config.home.cta"></homeCtaComponent>
     <homeContactComponent v-if="config.home.contact"></homeContactComponent>
   </div>
 </template>
@@ -59,6 +60,7 @@ import homeSocialComponent from '../components/home.social.component.vue';
 import homeArticlesComponent from '../components/home.articles.component.vue';
 import homeStatisticsComponent from '../components/home.statistics.component.vue';
 import homeFaqComponent from '../components/home.faq.component.vue';
+import homeCtaComponent from '../components/home.cta.component.vue';
 import homeContactComponent from '../components/home.contact.component.vue';
 
 /**
@@ -79,6 +81,7 @@ export default {
     homeArticlesComponent,
     homeStatisticsComponent,
     homeFaqComponent,
+    homeCtaComponent,
     homeContactComponent,
   },
   data() {

From 688430e8cb24353c9c0d042ffa389a3329be61d4 Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Fri, 3 Apr 2026 15:30:59 +0200
Subject: [PATCH 2/4] feat(home): add imgMode prop to features cards for SVG
 illustrations

Support 'cover' (default) and 'contain' image fit modes on homeImgComponent,
passed through from features card config. Allows SVG illustrations to display
without cropping.

Closes #3839
---
 .../home/components/home.features.component.vue     |  5 +++--
 .../home/components/utils/home.img.component.vue    | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/modules/home/components/home.features.component.vue b/src/modules/home/components/home.features.component.vue
index 16aa2fe95..97cc3c268 100644
--- a/src/modules/home/components/home.features.component.vue
+++ b/src/modules/home/components/home.features.component.vue
@@ -19,6 +19,7 @@
       {
         subtitle: 'Product Name',
         img: '/images/card01.webp',
+        imgMode: 'cover',      // 'cover' (default) or 'contain' for SVG illustrations
         text: 'Description with **markdown** support.',
         reversed: false,       // Image position (false = top, true = bottom)
         fullWidth: false,      // Full width card
@@ -60,14 +61,14 @@
               <v-row align="center" justify="center" class="pa-0">
                 <v-col v-for="(item, i) in content" :key="i" cols="12" :md="item.fullWidth ? 12 : setup.content.length > 1 ? 6 : 12">
                   <v-card :class="`${config.vuetify.theme.rounded}`" :flat="config.vuetify.theme.flat" :style="style('card', { style: item.style })">
-                    <homeImgComponent v-if="item.img && !item.reversed" :img="item.img"></homeImgComponent>
+                    <homeImgComponent v-if="item.img && !item.reversed" :img="item.img" :img-mode="item.imgMode"></homeImgComponent>
                     <homeContentComponent
                       :setup="item"
                       :alignment="item.alignment || 'center'"
                       :color="item.color || 'default'"
                       variant="card"
                     ></homeContentComponent>
-                    <homeImgComponent v-if="item.img && item.reversed" :img="item.img"></homeImgComponent>
+                    <homeImgComponent v-if="item.img && item.reversed" :img="item.img" :img-mode="item.imgMode"></homeImgComponent>
                   </v-card>
                 </v-col>
               </v-row>
diff --git a/src/modules/home/components/utils/home.img.component.vue b/src/modules/home/components/utils/home.img.component.vue
index 78155aebe..d4247f551 100644
--- a/src/modules/home/components/utils/home.img.component.vue
+++ b/src/modules/home/components/utils/home.img.component.vue
@@ -19,6 +19,7 @@
   - title (String): Title text displayed on image
   - text (String): Description text displayed on image
   - alt (String): Alt text for accessibility (falls back to title, then empty string for decorative images)
+  - imgMode (String): Image fit mode — 'cover' (default) or 'contain' for SVG illustrations
 
   NOTES:
   - Uses lazy-src for placeholder during loading
@@ -32,7 +33,8 @@
     :class="`${config.vuetify.theme.rounded}`"
     :height="height || ($vuetify.display.xsAndDown ? '225px' : $vuetify.display.smAndDown ? '300px' : '350px')"
     :gradient="gradient"
-    cover
+    :cover="imgMode !== 'contain'"
+    :style="imgMode === 'contain' ? 'object-fit: contain' : ''"
     :alt="alt || title || ''"
   >
     <template #placeholder>
@@ -79,6 +81,15 @@ export default {
       type: String,
       default: '',
     },
+    /**
+     * Image fit mode: 'cover' (default) fills the area, 'contain' fits the
+     * entire image inside (useful for SVG illustrations).
+     * @type {string}
+     */
+    imgMode: {
+      type: String,
+      default: 'cover',
+    },
   },
 };
 </script>

From 0386cacf34da3abddae32207666b176090721f0f Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Fri, 3 Apr 2026 17:54:31 +0200
Subject: [PATCH 3/4] fix(home): address CTA button link handling and JSDoc
 conventions

Use :href instead of :to for external URL support, validate title+link
before rendering buttons, make ml-4 spacing conditional on both buttons
being present, and add JSDoc to data() per repo convention.
---
 src/modules/home/components/home.cta.component.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/modules/home/components/home.cta.component.vue b/src/modules/home/components/home.cta.component.vue
index 0c5f46b27..44930d035 100644
--- a/src/modules/home/components/home.cta.component.vue
+++ b/src/modules/home/components/home.cta.component.vue
@@ -24,21 +24,21 @@
         </v-col>
         <v-col cols="12" class="text-center">
           <v-btn
-            v-if="setup.button"
+            v-if="setup.button && setup.button.title && setup.button.link"
             :color="setup.button.color || 'primary'"
             variant="flat"
             size="x-large"
             :class="config.vuetify.theme.rounded"
-            :to="setup.button.link"
+            :href="setup.button.link"
           >
             {{ setup.button.title }}
           </v-btn>
           <v-btn
-            v-if="setup.secondaryButton"
+            v-if="setup.secondaryButton && setup.secondaryButton.title && setup.secondaryButton.link"
             variant="outlined"
             size="x-large"
-            :class="`ml-4 ${config.vuetify.theme.rounded}`"
-            :to="setup.secondaryButton.link"
+            :class="{ [config.vuetify.theme.rounded]: true, 'ml-4': setup.button && setup.button.title && setup.button.link }"
+            :href="setup.secondaryButton.link"
           >
             {{ setup.secondaryButton.title }}
           </v-btn>
@@ -70,6 +70,10 @@ export default {
       required: true,
     },
   },
+  /**
+   * Initialise component data with the current Vuetify theme instance.
+   * @returns {{ theme: import('vuetify').ThemeInstance }} Reactive theme reference.
+   */
   data() {
     const theme = useTheme();
     return {

From c045406ee95b8c9f9c755e5b577c71881dedf4fe Mon Sep 17 00:00:00 2001
From: Pierre Brisorgueil <pierrebrisorgueil@me.com>
Date: Fri, 3 Apr 2026 18:07:37 +0200
Subject: [PATCH 4/4] test(home): add unit tests for HomeCtaComponent

Cover variant switching, button rendering with validation, conditional
ml-4 spacing, containerStyle maxWidth, href usage, and content prop
passthrough (13 tests).
---
 .../tests/home.cta.component.unit.tests.js    | 183 ++++++++++++++++++
 1 file changed, 183 insertions(+)
 create mode 100644 src/modules/home/tests/home.cta.component.unit.tests.js

diff --git a/src/modules/home/tests/home.cta.component.unit.tests.js b/src/modules/home/tests/home.cta.component.unit.tests.js
new file mode 100644
index 000000000..910560dd9
--- /dev/null
+++ b/src/modules/home/tests/home.cta.component.unit.tests.js
@@ -0,0 +1,183 @@
+import { mount } from '@vue/test-utils';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import { beforeEach, describe, it, expect, vi } from 'vitest';
+import HomeCtaComponent from '../components/home.cta.component.vue';
+
+/**
+ * Mock the homeContentComponent used inside CTA.
+ */
+vi.mock('../components/utils/home.content.component.vue', () => ({
+  default: { name: 'homeContentComponent', template: '<div class="mock-content" />', props: ['setup'] },
+}));
+
+/**
+ * Mock the theme helpers to isolate component logic.
+ */
+vi.mock('../../../lib/helpers/theme', () => ({
+  style: vi.fn(() => ({ padding: '0' })),
+  overlapStyle: vi.fn(() => ({})),
+  colorModeStyle: vi.fn(() => ({})),
+}));
+
+const mockConfig = {
+  vuetify: { theme: { rounded: 'rounded-xl', maxWidth: '1200px', flat: false } },
+};
+
+/**
+ * Build global options with Vuetify + config global property.
+ * @param {object} vuetify - Vuetify instance.
+ * @returns {object} Vue test-utils global config.
+ */
+const globalOpts = (vuetify) => ({
+  plugins: [vuetify],
+  config: {
+    globalProperties: { config: mockConfig },
+  },
+});
+
+describe('HomeCtaComponent', () => {
+  let vuetify;
+
+  beforeEach(() => {
+    vuetify = createVuetify({ components, directives });
+  });
+
+  const baseSetup = {
+    title: 'Ready to start?',
+    subtitle: 'Get going now.',
+    button: { title: 'Sign Up', link: '/signup', color: 'primary' },
+    secondaryButton: { title: 'Learn More', link: '/docs' },
+  };
+
+  it('renders primary and secondary buttons when both are provided', () => {
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup: baseSetup },
+      global: globalOpts(vuetify),
+    });
+    const buttons = wrapper.findAllComponents({ name: 'VBtn' });
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0].text()).toBe('Sign Up');
+    expect(buttons[1].text()).toBe('Learn More');
+  });
+
+  it('renders only primary button when secondaryButton is absent', () => {
+    const setup = { ...baseSetup, secondaryButton: undefined };
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup },
+      global: globalOpts(vuetify),
+    });
+    const buttons = wrapper.findAllComponents({ name: 'VBtn' });
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0].text()).toBe('Sign Up');
+  });
+
+  it('renders only secondary button when primary button is absent', () => {
+    const setup = { ...baseSetup, button: undefined };
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup },
+      global: globalOpts(vuetify),
+    });
+    const buttons = wrapper.findAllComponents({ name: 'VBtn' });
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0].text()).toBe('Learn More');
+  });
+
+  it('does not render primary button when title is missing', () => {
+    const setup = { ...baseSetup, button: { link: '/signup', color: 'primary' } };
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup },
+      global: globalOpts(vuetify),
+    });
+    const buttons = wrapper.findAllComponents({ name: 'VBtn' });
+    expect(buttons).toHaveLength(1); // only secondary
+    expect(buttons[0].text()).toBe('Learn More');
+  });
+
+  it('does not render primary button when link is missing', () => {
+    const setup = { ...baseSetup, button: { title: 'Sign Up', color: 'primary' } };
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup },
+      global: globalOpts(vuetify),
+    });
+    const buttons = wrapper.findAllComponents({ name: 'VBtn' });
+    expect(buttons).toHaveLength(1); // only secondary
+  });
+
+  it('applies ml-4 to secondary button only when primary button is present', () => {
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup: baseSetup },
+      global: globalOpts(vuetify),
+    });
+    const buttons = wrapper.findAllComponents({ name: 'VBtn' });
+    expect(buttons[1].classes()).toContain('ml-4');
+  });
+
+  it('does not apply ml-4 to secondary button when primary button is absent', () => {
+    const setup = { ...baseSetup, button: undefined };
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup },
+      global: globalOpts(vuetify),
+    });
+    const buttons = wrapper.findAllComponents({ name: 'VBtn' });
+    expect(buttons[0].classes()).not.toContain('ml-4');
+  });
+
+  it('uses default variant when not specified', () => {
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup: baseSetup },
+      global: globalOpts(vuetify),
+    });
+    expect(wrapper.vm.variant).toBe('default');
+  });
+
+  it('uses alternate variant when specified', () => {
+    const setup = { ...baseSetup, variant: 'alternate' };
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup },
+      global: globalOpts(vuetify),
+    });
+    expect(wrapper.vm.variant).toBe('alternate');
+  });
+
+  it('computes containerStyle with maxWidth from config', () => {
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup: baseSetup },
+      global: globalOpts(vuetify),
+    });
+    expect(wrapper.vm.containerStyle['max-width']).toBe('1200px');
+  });
+
+  it('uses href attribute for button links', () => {
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup: baseSetup },
+      global: globalOpts(vuetify),
+    });
+    const primaryBtn = wrapper.findAllComponents({ name: 'VBtn' })[0];
+    expect(primaryBtn.props('href')).toBe('/signup');
+  });
+
+  it('renders no buttons when neither button is provided', () => {
+    const setup = { title: 'Title', subtitle: 'Sub' };
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup },
+      global: globalOpts(vuetify),
+    });
+    const buttons = wrapper.findAllComponents({ name: 'VBtn' });
+    expect(buttons).toHaveLength(0);
+  });
+
+  it('passes title and subtitle to homeContentComponent', () => {
+    const wrapper = mount(HomeCtaComponent, {
+      props: { setup: baseSetup },
+      global: globalOpts(vuetify),
+    });
+    const content = wrapper.findComponent({ name: 'homeContentComponent' });
+    expect(content.props('setup')).toEqual({
+      title: 'Ready to start?',
+      subtitle: 'Get going now.',
+      alignment: 'center',
+    });
+  });
+});