feat(home): add HomeCtaComponent for final CTA section

src/modules/home/components/home.cta.component.vue

@@ -0,0 +1,115 @@
+<!--
+  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 && setup.button.title && setup.button.link"
+            :color="setup.button.color || 'primary'"
+            variant="flat"
+            size="x-large"
+            :class="config.vuetify.theme.rounded"
+            :href="setup.button.link"
+          >
+            {{ setup.button.title }}
+          </v-btn>
+          <v-btn
+            v-if="setup.secondaryButton && setup.secondaryButton.title && setup.secondaryButton.link"
+            variant="outlined"
+            size="x-large"
+            :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>
+        </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,
+    },
+  },
+  /**
+   * Initialise component data with the current Vuetify theme instance.
+   * @returns {{ theme: import('vuetify').ThemeInstance }} Reactive theme reference.
+   */
+  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>

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>

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>

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',
+    });
+  });
+});

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() {