Skip to content

feat(home): add imgBackground option to about component #3855

Description

@PierreBrisorgueil

Context

When about sections display images (especially SVG illustrations), the image floats directly on the section background. This can look empty or oversized, particularly with single content items. Premium landing pages typically wrap visuals in their own card with a distinct background color.

Proposal

Add an imgBackground option per content item in home.about.component.vue:

about: {
  content: [{
    subtitle: '...',
    text: '...',
    img: '/images/illustration.svg',
    imgBackground: '#f5f5f7', // wraps image in a rounded card with this bg
    reversed: false,
  }]
}

Implementation:

  • When item.imgBackground is set, wrap the v-img in a v-card with:
    • color set to imgBackground
    • Same border-radius as theme (config.vuetify.theme.rounded)
    • Padding to give the image breathing room
  • When not set, current behavior (image directly on section bg)
  • Support theme-aware values (could accept an object { light: '#f5f5f7', dark: '#1e293b' })

Benefit

Images get their own visual identity, making about sections look more polished and contained.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions