80 lines
4.0 KiB
Vue
80 lines
4.0 KiB
Vue
<template>
|
|
<section class="relative pt-32 pb-20 md:pt-40 md:pb-28 overflow-hidden">
|
|
<!-- Background pattern -->
|
|
<div class="absolute inset-0 dot-grid opacity-[0.03]" />
|
|
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-eu-blue/[0.04] rounded-full blur-3xl -translate-y-1/2 translate-x-1/4" />
|
|
|
|
<div class="section-container relative">
|
|
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
|
<!-- Left: copy -->
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-eu-blue-100 text-eu-blue text-xs font-semibold tracking-wide uppercase mb-6">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-eu-blue animate-pulse" />
|
|
Free & Open
|
|
</div>
|
|
|
|
<h1 class="text-display-sm md:text-display text-ink text-balance">
|
|
EU VAT Rates
|
|
<span class="text-eu-blue">API</span>
|
|
</h1>
|
|
|
|
<p class="mt-4 text-subtitle text-ink-secondary font-heading">
|
|
Free. No API key. Always up-to-date.
|
|
</p>
|
|
|
|
<p class="mt-4 text-base text-ink-muted leading-relaxed max-w-lg">
|
|
Get current VAT rates for all 27 EU member states with a single API call. No registration, no rate limits, no nonsense.
|
|
</p>
|
|
|
|
<div class="flex flex-wrap gap-3 mt-8">
|
|
<a
|
|
href="#rates"
|
|
class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-eu-blue text-white font-semibold text-sm hover:bg-eu-blue-dark transition-all hover:shadow-glow"
|
|
>
|
|
View Rates
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="#playground"
|
|
class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border-2 border-eu-blue/20 text-eu-blue font-semibold text-sm hover:border-eu-blue/40 hover:bg-eu-blue-100 transition-all"
|
|
>
|
|
Try the API
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: code snippet -->
|
|
<div class="relative">
|
|
<div class="absolute -inset-4 bg-eu-blue/[0.04] rounded-3xl blur-2xl" />
|
|
<div class="relative code-block p-6 shadow-card">
|
|
<!-- Top bar -->
|
|
<div class="flex items-center gap-3 mb-4 pb-4 border-b border-white/10">
|
|
<div class="flex gap-1.5">
|
|
<span class="w-3 h-3 rounded-full bg-[#ff5f57]" />
|
|
<span class="w-3 h-3 rounded-full bg-[#febc2e]" />
|
|
<span class="w-3 h-3 rounded-full bg-[#28c840]" />
|
|
</div>
|
|
<span class="text-xs text-[#8b949e] font-mono">GET /api/v1/rates/DE</span>
|
|
</div>
|
|
|
|
<!-- JSON -->
|
|
<pre class="text-[13px] leading-6"><span style="color:#8b949e">// Response 200 OK</span>
|
|
<span style="color:#ff7b72">{</span>
|
|
<span style="color:#79c0ff">"country"</span>: <span style="color:#a5d6ff">"Germany"</span>,
|
|
<span style="color:#79c0ff">"country_code"</span>: <span style="color:#a5d6ff">"DE"</span>,
|
|
<span style="color:#79c0ff">"standard_rate"</span>: <span style="color:#79c0ff">19</span>,
|
|
<span style="color:#79c0ff">"reduced_rates"</span>: <span style="color:#ff7b72">[</span><span style="color:#79c0ff">7</span><span style="color:#ff7b72">]</span>,
|
|
<span style="color:#79c0ff">"currency"</span>: <span style="color:#a5d6ff">"EUR"</span>
|
|
<span style="color:#ff7b72">}</span></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|