Restore landing page + improve header search input
All checks were successful
Build Docker Image / build (push) Successful in 3m11s
All checks were successful
Build Docker Image / build (push) Successful in 3m11s
- 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
@@ -12,42 +12,42 @@
|
||||
<!-- Center: Search input with tokens -->
|
||||
<div class="flex-1 flex justify-center px-4 max-w-2xl mx-auto">
|
||||
<div
|
||||
class="flex items-center gap-2 w-full px-3 py-1.5 border border-base-300 rounded-lg bg-base-100 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary cursor-text"
|
||||
class="flex items-center gap-3 w-full px-5 py-2.5 border border-base-300 rounded-full bg-base-100 shadow-sm hover:shadow-md focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
|
||||
@click="focusInput"
|
||||
>
|
||||
<Icon name="lucide:search" size="16" class="text-base-content/50 flex-shrink-0" />
|
||||
<Icon name="lucide:search" size="20" class="text-base-content/50 flex-shrink-0" />
|
||||
|
||||
<!-- Tokens + input inline -->
|
||||
<div class="flex items-center gap-1.5 flex-wrap flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
|
||||
<!-- Active filter tokens -->
|
||||
<div
|
||||
v-for="token in activeTokens"
|
||||
:key="token.type"
|
||||
class="badge badge-sm gap-1 cursor-pointer hover:badge-primary transition-colors flex-shrink-0"
|
||||
class="badge badge-md gap-1.5 cursor-pointer hover:badge-primary transition-colors flex-shrink-0"
|
||||
@click.stop="$emit('edit-token', token.type)"
|
||||
>
|
||||
<Icon :name="token.icon" size="12" />
|
||||
<span class="max-w-20 truncate">{{ token.label }}</span>
|
||||
<Icon :name="token.icon" size="14" />
|
||||
<span class="max-w-24 truncate">{{ token.label }}</span>
|
||||
<button
|
||||
class="hover:text-error"
|
||||
@click.stop="$emit('remove-token', token.type)"
|
||||
>
|
||||
<Icon name="lucide:x" size="10" />
|
||||
<Icon name="lucide:x" size="12" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Active selection mode indicator -->
|
||||
<div
|
||||
v-if="selectMode"
|
||||
class="badge badge-sm badge-outline badge-primary gap-1 flex-shrink-0"
|
||||
class="badge badge-md badge-outline badge-primary gap-1.5 flex-shrink-0"
|
||||
>
|
||||
<Icon :name="selectModeIcon" size="12" />
|
||||
<Icon :name="selectModeIcon" size="14" />
|
||||
{{ selectModeLabel }}:
|
||||
<button
|
||||
class="hover:text-error"
|
||||
@click.stop="$emit('cancel-select')"
|
||||
>
|
||||
<Icon name="lucide:x" size="10" />
|
||||
<Icon name="lucide:x" size="12" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
v-model="localSearchQuery"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
class="flex-1 min-w-24 bg-transparent outline-none text-sm"
|
||||
class="flex-1 min-w-32 bg-transparent outline-none"
|
||||
@input="$emit('update:search-query', localSearchQuery)"
|
||||
/>
|
||||
</div>
|
||||
@@ -181,15 +181,15 @@
|
||||
<!-- Bottom row: Quick filter chips -->
|
||||
<div
|
||||
v-if="availableChips.length > 0"
|
||||
class="flex items-center justify-center gap-2 px-4 py-1.5 border-t border-base-200"
|
||||
class="flex items-center justify-center gap-3 px-4 py-2"
|
||||
>
|
||||
<button
|
||||
v-for="chip in availableChips"
|
||||
:key="chip.type"
|
||||
class="btn btn-xs btn-ghost gap-1"
|
||||
class="btn btn-sm btn-ghost gap-1.5"
|
||||
@click="$emit('start-select', chip.type)"
|
||||
>
|
||||
<Icon name="lucide:plus" size="12" />
|
||||
<Icon name="lucide:plus" size="14" />
|
||||
{{ chip.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user