Fix unified catalog: add map, tokens inside input, redirect from main
Some checks failed
Build Docker Image / build (push) Has been cancelled

- Main page (/) now redirects to /catalog
- Catalog page uses CatalogPage component with map on the right
- Search bar tokens are now inside the input field (like Gmail)
- Removed separate grid components, using cards directly
- Added missing translations (refine, noResults)
This commit is contained in:
Ruslan Bakiev
2026-01-22 11:06:58 +07:00
parent 08d7e0ade9
commit d837b9b90b
12 changed files with 377 additions and 768 deletions

View File

@@ -1,93 +1,13 @@
<template>
<Stack gap="12">
<!-- How it works -->
<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>
<!-- Who it's for -->
<Section variant="plain">
<Stack gap="8" align="center">
<Heading :level="2">{{ $t('roles.title') }}</Heading>
<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>
</Stack>
<div></div>
</template>
<script setup>
// Redirect to unified catalog
definePageMeta({
layout: 'topnav'
})
const localePath = useLocalePath()
await navigateTo(localePath('/catalog'), { replace: true })
</script>