Homepage Photo Glass Cards - unified visual style
All checks were successful
Build Docker Image / build (push) Successful in 4m12s
All checks were successful
Build Docker Image / build (push) Successful in 4m12s
- Add 6 promo images from Unsplash (wheat, trucks, warehouse, farmer, etc.) - Replace plain white cards with Photo Glass Cards - Gradient overlay + backdrop blur for glass effect - Hover animation (scale 105%) - Colored accent icons (violet, cyan, rose) - Matches animated hero visual style
This commit is contained in:
Ruslan Bakiev
@@ -1,89 +1,164 @@
|
||||
<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>
|
||||
<div class="space-y-16 pb-16">
|
||||
<!-- How it works - Photo Glass Cards -->
|
||||
<section class="container mx-auto px-4">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-base-content">
|
||||
{{ $t('howto.title') }}
|
||||
</h2>
|
||||
|
||||
<!-- Who it's for -->
|
||||
<Section variant="plain">
|
||||
<Stack gap="8" align="center">
|
||||
<Heading :level="2">{{ $t('roles.title') }}</Heading>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Step 1: Search -->
|
||||
<div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
|
||||
<img
|
||||
src="/images/promo/search.jpg"
|
||||
alt=""
|
||||
class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
|
||||
<div class="absolute inset-0 p-6 flex flex-col justify-end">
|
||||
<div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
|
||||
<Icon name="lucide:search" size="24" class="text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step1.title') }}</h3>
|
||||
<p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step1.description') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- Step 2: Compare -->
|
||||
<div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
|
||||
<img
|
||||
src="/images/promo/compare.jpg"
|
||||
alt=""
|
||||
class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
|
||||
<div class="absolute inset-0 p-6 flex flex-col justify-end">
|
||||
<div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
|
||||
<Icon name="lucide:git-compare" size="24" class="text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step2.title') }}</h3>
|
||||
<p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step2.description') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- Step 3: Services -->
|
||||
<div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
|
||||
<img
|
||||
src="/images/promo/services.jpg"
|
||||
alt=""
|
||||
class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
|
||||
<div class="absolute inset-0 p-6 flex flex-col justify-end">
|
||||
<div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
|
||||
<Icon name="lucide:sparkles" size="24" class="text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step3.title') }}</h3>
|
||||
<p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step3.description') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<!-- Who it's for - Photo Glass Cards with CTA -->
|
||||
<section class="container mx-auto px-4">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-base-content">
|
||||
{{ $t('roles.title') }}
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Producers -->
|
||||
<div class="relative overflow-hidden rounded-2xl h-96 group">
|
||||
<img
|
||||
src="/images/promo/producer.jpg"
|
||||
alt=""
|
||||
class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
|
||||
<div class="absolute inset-0 p-6 flex flex-col justify-end">
|
||||
<div class="w-12 h-12 rounded-xl bg-violet-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
|
||||
<Icon name="lucide:factory" size="24" class="text-violet-200" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.producers.title') }}</h3>
|
||||
<p class="text-white/70 text-sm mb-4">{{ $t('roles.producers.description') }}</p>
|
||||
<ul class="space-y-1 mb-4 text-sm">
|
||||
<li class="flex items-center gap-2 text-white/80">
|
||||
<Icon name="lucide:check" size="14" class="text-violet-400" />
|
||||
{{ $t('roles.producers.benefit1') }}
|
||||
</li>
|
||||
<li class="flex items-center gap-2 text-white/80">
|
||||
<Icon name="lucide:check" size="14" class="text-violet-400" />
|
||||
{{ $t('roles.producers.benefit2') }}
|
||||
</li>
|
||||
</ul>
|
||||
<button class="btn btn-sm bg-violet-500 hover:bg-violet-600 border-0 text-white">
|
||||
{{ $t('roles.producers.cta') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buyers -->
|
||||
<div class="relative overflow-hidden rounded-2xl h-96 group">
|
||||
<img
|
||||
src="/images/promo/buyer.jpg"
|
||||
alt=""
|
||||
class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
|
||||
<div class="absolute inset-0 p-6 flex flex-col justify-end">
|
||||
<div class="w-12 h-12 rounded-xl bg-cyan-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
|
||||
<Icon name="lucide:building-2" size="24" class="text-cyan-200" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.buyers.title') }}</h3>
|
||||
<p class="text-white/70 text-sm mb-4">{{ $t('roles.buyers.description') }}</p>
|
||||
<ul class="space-y-1 mb-4 text-sm">
|
||||
<li class="flex items-center gap-2 text-white/80">
|
||||
<Icon name="lucide:check" size="14" class="text-cyan-400" />
|
||||
{{ $t('roles.buyers.benefit1') }}
|
||||
</li>
|
||||
<li class="flex items-center gap-2 text-white/80">
|
||||
<Icon name="lucide:check" size="14" class="text-cyan-400" />
|
||||
{{ $t('roles.buyers.benefit2') }}
|
||||
</li>
|
||||
</ul>
|
||||
<button class="btn btn-sm bg-cyan-500 hover:bg-cyan-600 border-0 text-white">
|
||||
{{ $t('roles.buyers.cta') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services -->
|
||||
<div class="relative overflow-hidden rounded-2xl h-96 group">
|
||||
<img
|
||||
src="/images/promo/partner.jpg"
|
||||
alt=""
|
||||
class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
|
||||
<div class="absolute inset-0 p-6 flex flex-col justify-end">
|
||||
<div class="w-12 h-12 rounded-xl bg-rose-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
|
||||
<Icon name="lucide:handshake" size="24" class="text-rose-200" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.services.title') }}</h3>
|
||||
<p class="text-white/70 text-sm mb-4">{{ $t('roles.services.description') }}</p>
|
||||
<ul class="space-y-1 mb-4 text-sm">
|
||||
<li class="flex items-center gap-2 text-white/80">
|
||||
<Icon name="lucide:check" size="14" class="text-rose-400" />
|
||||
{{ $t('roles.services.benefit1') }}
|
||||
</li>
|
||||
<li class="flex items-center gap-2 text-white/80">
|
||||
<Icon name="lucide:check" size="14" class="text-rose-400" />
|
||||
{{ $t('roles.services.benefit2') }}
|
||||
</li>
|
||||
</ul>
|
||||
<button class="btn btn-sm bg-rose-500 hover:bg-rose-600 border-0 text-white">
|
||||
{{ $t('roles.services.cta') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
BIN
public/images/promo/buyer.jpg
Normal file
BIN
public/images/promo/buyer.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
public/images/promo/compare.jpg
Normal file
BIN
public/images/promo/compare.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 325 KiB |
BIN
public/images/promo/partner.jpg
Normal file
BIN
public/images/promo/partner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
public/images/promo/producer.jpg
Normal file
BIN
public/images/promo/producer.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
BIN
public/images/promo/search.jpg
Normal file
BIN
public/images/promo/search.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
BIN
public/images/promo/services.jpg
Normal file
BIN
public/images/promo/services.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
Reference in New Issue
Block a user