1a2693bcd6
All checks were successful
Build Docker Image / build (push) Successful in 5m25s
- Make GlobalSearchBar functional with searchStore integration - Add destination search using hubs/nodes GraphQL query - Navigate to /request page instead of /catalog/offers - Remove hero section from index.vue (search is now in header) - Add padding (px-3 lg:px-6) to topnav layout - Implement split layout for catalog pages (offers, hubs, suppliers) - Left side: filters + scrollable card list (40%) - Right side: map (60%, hidden on mobile)
93 lines
4.0 KiB
Vue
93 lines
4.0 KiB
Vue
<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" :lg="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>
|