Files
webapp/app/pages/index.vue
Ruslan Bakiev e629025899
All checks were successful
Build Docker Image / build (push) Successful in 4m14s
Fix UI issues: 3 columns, SubNav label, back button, sticky map, hover flyTo
- Homepage roles section now shows 3 columns on medium screens
- SubNavigation catalog offers label changed to "Предложения"
- Removed back button from catalog/offers page
- ListMapLayout: sticky map with full height
- ListMapLayout: hover on card flies to location on map
2026-01-08 10:00:59 +07:00

93 lines
4.0 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<Stack gap="12">
<Section variant="plain">
<Stack gap="8" align="center">
<Heading :level="2">{{ $t('roles.title') }}</Heading>
<Text align="center" tone="muted">{{ $t('about.description') }}</Text>
<Grid :cols="1" :md="3" :gap="6">
<Card padding="lg">
<Stack gap="4" align="center">
<IconCircle tone="primary">🏭</IconCircle>
<Heading :level="3">{{ $t('roles.producers.title') }}</Heading>
<Text tone="muted" align="center">{{ $t('roles.producers.description') }}</Text>
<Stack tag="ul" gap="1">
<li> {{ $t('roles.producers.benefit1') }}</li>
<li> {{ $t('roles.producers.benefit2') }}</li>
<li> {{ $t('roles.producers.benefit3') }}</li>
<li> {{ $t('roles.producers.benefit4') }}</li>
</Stack>
<Button :full-width="true" variant="outline">{{ $t('roles.producers.cta') }}</Button>
</Stack>
</Card>
<Card padding="lg">
<Stack gap="4" align="center">
<IconCircle tone="primary">🏢</IconCircle>
<Heading :level="3">{{ $t('roles.buyers.title') }}</Heading>
<Text tone="muted" align="center">{{ $t('roles.buyers.description') }}</Text>
<Stack tag="ul" gap="1">
<li> {{ $t('roles.buyers.benefit1') }}</li>
<li> {{ $t('roles.buyers.benefit2') }}</li>
<li> {{ $t('roles.buyers.benefit3') }}</li>
<li> {{ $t('roles.buyers.benefit4') }}</li>
</Stack>
<Button :full-width="true" variant="outline">{{ $t('roles.buyers.cta') }}</Button>
</Stack>
</Card>
<Card padding="lg">
<Stack gap="4" align="center">
<IconCircle tone="primary"></IconCircle>
<Heading :level="3">{{ $t('roles.services.title') }}</Heading>
<Text tone="muted" align="center">{{ $t('roles.services.description') }}</Text>
<Stack tag="ul" gap="1">
<li> {{ $t('roles.services.benefit1') }}</li>
<li> {{ $t('roles.services.benefit2') }}</li>
<li> {{ $t('roles.services.benefit3') }}</li>
<li> {{ $t('roles.services.benefit4') }}</li>
</Stack>
<Button :full-width="true" variant="outline">{{ $t('roles.services.cta') }}</Button>
</Stack>
</Card>
</Grid>
</Stack>
</Section>
<Section variant="plain">
<Stack gap="6" align="center">
<Heading :level="2">{{ $t('howto.title') }}</Heading>
<Grid :cols="1" :md="3" :gap="6">
<Card padding="lg">
<Stack gap="3" align="center">
<IconCircle tone="primary">🔍</IconCircle>
<Heading :level="3" weight="semibold">{{ $t('howto.step1.title') }}</Heading>
<Text tone="muted" align="center">{{ $t('howto.step1.description') }}</Text>
</Stack>
</Card>
<Card padding="lg">
<Stack gap="3" align="center">
<IconCircle tone="primary">🤝</IconCircle>
<Heading :level="3" weight="semibold">{{ $t('howto.step2.title') }}</Heading>
<Text tone="muted" align="center">{{ $t('howto.step2.description') }}</Text>
</Stack>
</Card>
<Card padding="lg">
<Stack gap="3" align="center">
<IconCircle tone="primary"></IconCircle>
<Heading :level="3" weight="semibold">{{ $t('howto.step3.title') }}</Heading>
<Text tone="muted" align="center">{{ $t('howto.step3.description') }}</Text>
</Stack>
</Card>
</Grid>
</Stack>
</Section>
</Stack>
</template>
<script setup>
definePageMeta({
layout: 'topnav'
})
</script>