optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore landing page + improve header search input
All checks were successful
Build Docker Image / build (push) Successful in 3m11s
Details

Browse Source 
- Restore full landing with How it works + Who it's for sections
- Make search input bigger and rounder (rounded-full, shadow)
- Remove border between input and chips
- Bigger badges and icons
This commit is contained in:
Ruslan Bakiev
2026-01-22 11:27:59 +07:00
parent 584a423e86
commit 31f3c622eb
2 changed files with 132 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
app/pages/index.vue
View File

@@ -1,7 +1,122 @@
<template>
<div class="flex-1 flex items-center justify-center py-8">
<CatalogHero @start-select="startSelect" />
</div>
<Stack gap="12">
<!-- Hero with search -->
<Section variant="plain">
<Stack gap="6" align="center">
<Heading :level="1">{{ $t('searchPage.hero.title') }}</Heading>
<Text tone="muted" align="center" class="max-w-lg">
{{ $t('searchPage.hero.subtitle') }}
</Text>
<div class="flex flex-wrap justify-center gap-4 mt-4">
<button
class="btn btn-lg btn-primary gap-2"
@click="startSelect('product')"
>
<Icon name="lucide:package" size="24" />
{{ $t('catalog.filters.product') }}
</button>
<button
class="btn btn-lg btn-outline gap-2"
@click="startSelect('supplier')"
>
<Icon name="lucide:factory" size="24" />
{{ $t('catalog.filters.supplier') }}
</button>
<button
class="btn btn-lg btn-outline gap-2"
@click="startSelect('hub')"
>
<Icon name="lucide:map-pin" size="24" />
{{ $t('catalog.filters.hub') }}
</button>
</div>
</Stack>
</Section>
<!-- 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>
</template>
<script setup lang="ts">