webapp/app/pages/index.vue

<template>
  <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">
definePageMeta({
  layout: 'topnav'
})

const { startSelect } = useCatalogSearch()
</script>