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.
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
imgBackgroundoption per content item inhome.about.component.vue:Implementation:
item.imgBackgroundis set, wrap thev-imgin av-cardwith:colorset toimgBackgroundconfig.vuetify.theme.rounded){ light: '#f5f5f7', dark: '#1e293b' })Benefit
Images get their own visual identity, making about sections look more polished and contained.