feat: replace ad placeholders with Yandex app referral banners
Leaderboard shows horizontal layout with logo, text and CTA button. Tile/rectangle show vertical layout. All link to Yandex referral URL with rel=sponsored. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
71b5f68064
commit
fe5bb4f39c
@@ -5,20 +5,54 @@ interface Props {
|
|||||||
|
|
||||||
const { size } = Astro.props;
|
const { size } = Astro.props;
|
||||||
|
|
||||||
|
const href = 'https://redirect.appmetrica.yandex.com/serve/29835370459904648?clid=15006577&appmetrica_js_redirect=0';
|
||||||
|
|
||||||
const specs = {
|
const specs = {
|
||||||
leaderboard: { label: '728 × 90', class: 'w-full h-[90px]' },
|
leaderboard: { class: 'w-full h-[90px]', horizontal: true },
|
||||||
rectangle: { label: '300 × 250', class: 'w-full max-w-[300px] h-[250px]' },
|
rectangle: { class: 'w-full max-w-[300px] h-[250px]', horizontal: false },
|
||||||
tile: { label: '300 × 250', class: 'w-full h-[250px]' },
|
tile: { class: 'w-full h-[250px]', horizontal: false },
|
||||||
};
|
};
|
||||||
|
|
||||||
const { label, class: sizeClass } = specs[size];
|
const { class: sizeClass, horizontal } = specs[size];
|
||||||
---
|
---
|
||||||
|
|
||||||
<aside aria-label="Advertisement">
|
<aside aria-label="Реклама">
|
||||||
<div
|
<a
|
||||||
class={`${sizeClass} flex flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-zinc-800 bg-zinc-900/30`}
|
href={href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener sponsored"
|
||||||
|
class={`${sizeClass} flex ${horizontal ? 'flex-row items-center gap-4 px-6' : 'flex-col items-center justify-center gap-3 px-4'} rounded-xl border border-zinc-800 bg-zinc-900/50 hover:border-[#534AB7]/50 hover:bg-zinc-900 transition-colors duration-200 group`}
|
||||||
>
|
>
|
||||||
<span class="text-[10px] font-medium uppercase tracking-widest text-zinc-600">Advertisement</span>
|
<!-- Yandex logo -->
|
||||||
<span class="text-[11px] tabular-nums text-zinc-700">{label}</span>
|
<svg class="shrink-0 text-[#FC3F1D]" width={horizontal ? '32' : '40'} height={horizontal ? '32' : '40'} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||||
</div>
|
<circle cx="20" cy="20" r="20" fill="currentColor"/>
|
||||||
|
<path d="M22.44 10H19.1c-3.78 0-6.1 2.02-6.1 5.32 0 2.66 1.26 4.24 3.64 5.8L13.5 30h3.38l3.4-8.38-.96-.58c-1.84-1.12-2.72-2.08-2.72-3.92 0-1.94 1.3-3.08 3.44-3.08h1.4V30h3V10z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{horizontal ? (
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-medium text-zinc-500 uppercase tracking-widest mb-0.5">Реклама</div>
|
||||||
|
<div class="text-sm font-semibold text-zinc-100 group-hover:text-[#534AB7] transition-colors leading-tight">
|
||||||
|
Яндекс с Алисой — скачать бесплатно
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-zinc-500 mt-0.5">Голосовой ИИ-помощник для Android и iOS</div>
|
||||||
|
</div>
|
||||||
|
<span class="shrink-0 text-xs font-semibold text-white bg-[#FC3F1D] px-3 py-1.5 rounded-lg group-hover:bg-[#e03518] transition-colors whitespace-nowrap">
|
||||||
|
Установить
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-xs font-medium text-zinc-500 uppercase tracking-widest mb-2">Реклама</div>
|
||||||
|
<div class="text-base font-semibold text-zinc-100 group-hover:text-[#534AB7] transition-colors leading-snug">
|
||||||
|
Яндекс с Алисой
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-zinc-500 mt-1">Голосовой ИИ-помощник</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-white bg-[#FC3F1D] px-4 py-2 rounded-lg group-hover:bg-[#e03518] transition-colors">
|
||||||
|
Установить бесплатно
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
</aside>
|
</aside>
|
||||||
|
|||||||
Reference in New Issue
Block a user