feat: init

app/components/HeroSection.vue

@@ -0,0 +1,79 @@
+<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 &amp; 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>