57 lines
2.9 KiB
Vue
57 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
const features = [
|
|
{
|
|
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><circle cx="12" cy="12" r="10"/><path d="M12 6v2m0 8v2m-4.24-2.76 1.42-1.42m5.64-5.64 1.42-1.42M6 12h2m8 0h2m-2.76 4.24-1.42-1.42m-5.64-5.64L7.76 7.76"/></svg>`,
|
|
title: 'All 27 EU Countries',
|
|
description: 'Standard, reduced, and special VAT rates for every member state.',
|
|
},
|
|
{
|
|
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>`,
|
|
title: 'No Authentication',
|
|
description: 'No API keys, no sign-up. Just send a GET request.',
|
|
},
|
|
{
|
|
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182"/></svg>`,
|
|
title: 'Always Current',
|
|
description: 'Rates sourced and synced regularly from official EU data.',
|
|
},
|
|
{
|
|
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"/></svg>`,
|
|
title: 'Simple JSON',
|
|
description: 'Clean, predictable JSON responses. Easy to integrate anywhere.',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<section id="features" class="section-padding bg-surface-soft">
|
|
<div class="section-container">
|
|
<div class="text-center mb-14 animate-on-scroll">
|
|
<h2 class="text-title md:text-display-sm text-ink">
|
|
Built for developers
|
|
</h2>
|
|
<p class="mt-3 text-ink-muted max-w-lg mx-auto">
|
|
A straightforward API that does one thing well — delivering EU VAT rates without friction.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
|
<div
|
|
v-for="(feature, i) in features"
|
|
:key="feature.title"
|
|
class="animate-on-scroll group relative bg-white rounded-2xl p-6 border border-surface-border hover:border-eu-blue/20 hover:shadow-card transition-all duration-300"
|
|
:style="{ transitionDelay: `${i * 80}ms` }"
|
|
>
|
|
<div class="w-10 h-10 rounded-xl bg-eu-blue-100 text-eu-blue flex items-center justify-center mb-4 group-hover:bg-eu-blue group-hover:text-white transition-colors duration-300" v-html="feature.icon" />
|
|
<h3 class="font-heading font-semibold text-ink mb-1.5">
|
|
{{ feature.title }}
|
|
</h3>
|
|
<p class="text-sm text-ink-muted leading-relaxed">
|
|
{{ feature.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|