refactor(converter): split converter card into modular section components

components/converter/converter-card-header.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function ConverterCardHeader({
+  fiatSource,
+  cryptoSource,
+}: {
+  fiatSource: string;
+  cryptoSource: string;
+}) {
+  return (
+    <CardHeader className="relative isolate z-10 overflow-hidden rounded-t-2xl border-b border-white/5 bg-[linear-gradient(115deg,rgba(16,39,62,0.9)_0%,rgba(14,32,50,0.95)_46%,rgba(14,50,54,0.88)_100%)] pb-4 sm:pb-5 before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(140%_120%_at_0%_0%,rgba(56,189,248,0.12)_0%,rgba(56,189,248,0)_45%),radial-gradient(120%_100%_at_100%_0%,rgba(16,185,129,0.1)_0%,rgba(16,185,129,0)_45%)] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <CardTitle className="text-2xl font-semibold tracking-tight">
+          Currency Converter
+        </CardTitle>
+        <Badge
+          variant="outline"
+          className="max-w-full border-border/70 bg-background/50 text-[11px] sm:text-xs"
+        >
+          <span className="inline-flex items-center gap-1 whitespace-nowrap sm:hidden">
+            <span className="text-muted-foreground">Data sources:</span>
+            <a
+              href="https://frankfurter.dev/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-foreground transition-colors hover:text-cyan-100"
+            >
+              {fiatSource}
+            </a>
+            <span className="text-muted-foreground">•</span>
+            <a
+              href="https://www.coingecko.com/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-foreground transition-colors hover:text-cyan-100"
+            >
+              {cryptoSource}
+            </a>
+          </span>
+
+          <span className="hidden items-center gap-1 whitespace-nowrap sm:inline-flex">
+            <span className="text-muted-foreground">Data sources:</span>
+            <a
+              href="https://frankfurter.dev/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-foreground transition-colors hover:text-cyan-100"
+            >
+              {fiatSource}
+            </a>
+            <span className="text-muted-foreground">•</span>
+            <a
+              href="https://www.coingecko.com/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-foreground transition-colors hover:text-cyan-100"
+            >
+              {cryptoSource}
+            </a>
+          </span>
+        </Badge>
+      </div>
+      <CardDescription className="pr-1 text-base/7 sm:text-sm">
+        Convert fiat currencies and cryptocurrencies using live exchange rates.
+      </CardDescription>
+    </CardHeader>
+  );
+}