From a76cd67581a2db5b33e3cea28aeb5f637147b34b Mon Sep 17 00:00:00 2001
From: zvspany <zvspany@pm.me>
Date: Sun, 8 Mar 2026 12:31:00 +0100
Subject: [PATCH] improve landing UI and open-source branding

---
 components/converter/converter-card.tsx  | 57 +++++++++++++++++-------
 components/sections/hero.tsx             | 32 ++++++++-----
 components/sections/insights-section.tsx | 39 ++++++++++------
 3 files changed, 90 insertions(+), 38 deletions(-)

diff --git a/components/converter/converter-card.tsx b/components/converter/converter-card.tsx
index 080d274..e4ddc7e 100644
--- a/components/converter/converter-card.tsx
+++ b/components/converter/converter-card.tsx
@@ -12,7 +12,7 @@ import {
   CardContent,
   CardDescription,
   CardHeader,
-  CardTitle
+  CardTitle,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
@@ -23,7 +23,7 @@ import {
   formatAmount,
   formatInverseRate,
   formatRate,
-  formatTimestamp
+  formatTimestamp,
 } from "@/lib/format";
 import { buildRateMap, convertAmount } from "@/lib/rates";
 import { validateAmount } from "@/lib/validation";
@@ -62,7 +62,7 @@ function ConverterSkeleton() {
 
 function ErrorState({
   message,
-  onRetry
+  onRetry,
 }: {
   message: string;
   onRetry: () => void;
@@ -73,11 +73,17 @@ function ErrorState({
         <div className="flex items-start gap-3">
           <AlertTriangle className="mt-0.5 h-5 w-5 text-red-300" />
           <div>
-            <p className="text-sm font-medium text-red-200">Unable to load market rates</p>
+            <p className="text-sm font-medium text-red-200">
+              Unable to load market rates
+            </p>
             <p className="mt-1 text-sm text-red-200/80">{message}</p>
           </div>
         </div>
-        <Button variant="outline" onClick={onRetry} className="w-fit border-red-300/30">
+        <Button
+          variant="outline"
+          onClick={onRetry}
+          className="w-fit border-red-300/30"
+        >
           <RefreshCcw className="mr-2 h-4 w-4" />
           Retry
         </Button>
@@ -101,7 +107,7 @@ function EmptyState() {
 export function ConverterCard({
   forcedFromCode,
   forcedToCode,
-  onPairChange
+  onPairChange,
 }: ConverterCardProps) {
   const { data, error, isLoading, refresh } = useMarketRates();
 
@@ -126,7 +132,8 @@ export function ConverterCard({
     if (!rateMap.has(toCode)) {
       const fallback = rateMap.has(DEFAULT_TO)
         ? DEFAULT_TO
-        : assets.find((asset) => asset.code !== fromCode)?.code ?? assets[0].code;
+        : (assets.find((asset) => asset.code !== fromCode)?.code ??
+          assets[0].code);
 
       setToCode(fallback);
     }
@@ -209,26 +216,35 @@ export function ConverterCard({
       <CardHeader className="relative z-10 rounded-t-2xl bg-gradient-to-r from-sky-500/10 via-cyan-400/5 to-emerald-500/10 pb-4 sm:pb-5">
         <div className="flex flex-wrap items-center justify-between gap-2">
           <CardTitle className="text-2xl font-semibold tracking-tight">
-            Smart Converter
+            Currency Converter
           </CardTitle>
           <div className="flex items-center gap-2">
-            <Badge variant="outline" className="border-border/70 bg-background/50">
+            <Badge
+              variant="outline"
+              className="border-border/70 bg-background/50"
+            >
               Fiat: {data.sources.fiat}
             </Badge>
-            <Badge variant="outline" className="border-border/70 bg-background/50">
+            <Badge
+              variant="outline"
+              className="border-border/70 bg-background/50"
+            >
               Crypto: {data.sources.crypto}
             </Badge>
           </div>
         </div>
         <CardDescription className="pr-1 text-base/7 sm:text-sm">
-          Convert fiat and crypto assets instantly using live normalized USD quote data.
+          Convert fiat currencies and cryptocurrencies using live exchange
+          rates.
         </CardDescription>
       </CardHeader>
       <CardContent className="relative z-10 space-y-5 pt-4 sm:pt-5">
         {error ? (
           <div className="flex items-center gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
             <AlertTriangle className="h-4 w-4" />
-            <span>Using last successful data. Latest refresh failed: {error}</span>
+            <span>
+              Using last successful data. Latest refresh failed: {error}
+            </span>
           </div>
         ) : null}
 
@@ -289,12 +305,20 @@ export function ConverterCard({
           {fromAsset && toAsset ? (
             <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
               <span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background/60 px-2 py-1">
-                <CurrencyIcon code={fromAsset.code} type={fromAsset.type} size="sm" />
+                <CurrencyIcon
+                  code={fromAsset.code}
+                  type={fromAsset.type}
+                  size="sm"
+                />
                 {fromAsset.code}
               </span>
               <span>to</span>
               <span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background/60 px-2 py-1">
-                <CurrencyIcon code={toAsset.code} type={toAsset.type} size="sm" />
+                <CurrencyIcon
+                  code={toAsset.code}
+                  type={toAsset.type}
+                  size="sm"
+                />
                 {toAsset.code}
               </span>
             </div>
@@ -304,7 +328,10 @@ export function ConverterCard({
           </p>
           {fromAsset ? (
             <p className="mt-2 text-sm text-muted-foreground">
-              for {inputValidation.ok ? formatAmount(inputValidation.value, fromAsset) : "-"}{" "}
+              for{" "}
+              {inputValidation.ok
+                ? formatAmount(inputValidation.value, fromAsset)
+                : "-"}{" "}
               {fromAsset.code}
             </p>
           ) : null}
diff --git a/components/sections/hero.tsx b/components/sections/hero.tsx
index 661f538..bb1c749 100644
--- a/components/sections/hero.tsx
+++ b/components/sections/hero.tsx
@@ -1,21 +1,33 @@
-import { Badge } from "@/components/ui/badge";
+import { Github } from "lucide-react";
 
 export function Hero() {
   return (
     <section className="relative pt-10 sm:pt-14">
       <div className="mx-auto max-w-3xl text-center">
-        <Badge
-          variant="outline"
-          className="border-cyan-400/40 bg-cyan-400/10 px-3 py-1 text-cyan-200"
-        >
-          Real-time fiat and crypto conversion
-        </Badge>
+        <div className="mb-4 flex justify-center">
+          <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/60 px-3 py-1 text-xs text-muted-foreground backdrop-blur">
+            <span className="text-foreground">Open Source</span>
+            <span className="text-muted-foreground/70">•</span>
+            <span className="text-foreground">MIT License</span>
+            <span className="text-muted-foreground/70">•</span>
+            <a
+              href="https://github.com/zvspany/nexcurrency"
+              target="_blank"
+              rel="noreferrer"
+              aria-label="View on GitHub"
+              title="View on GitHub"
+              className="inline-flex items-center text-cyan-200 transition-colors hover:text-cyan-100"
+            >
+              <Github className="h-4 w-4" />
+            </a>
+          </div>
+        </div>
         <h1 className="mt-5 text-balance font-heading text-4xl font-semibold leading-tight tracking-tight text-foreground sm:text-5xl lg:text-6xl">
-          Convert Global Currencies and Crypto in One Premium Workspace
+          Open-source fiat and crypto converter
         </h1>
         <p className="mx-auto mt-4 max-w-2xl text-balance text-base text-muted-foreground sm:text-lg">
-          Instantly switch between fiat and digital assets with live rates, smart
-          formatting, and a clean professional interface built for speed.
+          Convert fiat currencies and cryptocurrencies using live exchange
+          rates.
         </p>
       </div>
     </section>
diff --git a/components/sections/insights-section.tsx b/components/sections/insights-section.tsx
index 930ba13..c2edbb1 100644
--- a/components/sections/insights-section.tsx
+++ b/components/sections/insights-section.tsx
@@ -1,6 +1,12 @@
 "use client";
 
-import { ArrowRightLeft, Landmark, Layers, MoveRight, Workflow } from "lucide-react";
+import {
+  ArrowRightLeft,
+  Landmark,
+  Layers,
+  MoveRight,
+  Workflow,
+} from "lucide-react";
 
 import { CurrencyIcon } from "@/components/converter/currency-icon";
 import { Button } from "@/components/ui/button";
@@ -23,31 +29,31 @@ const popularPairs: PopularPair[] = [
   { from: "ETH", to: "SOL", fromType: "crypto", toType: "crypto" },
   { from: "XMR", to: "BTC", fromType: "crypto", toType: "crypto" },
   { from: "LTC", to: "BTC", fromType: "crypto", toType: "crypto" },
-  { from: "CHF", to: "JPY", fromType: "fiat", toType: "fiat" }
+  { from: "CHF", to: "JPY", fromType: "fiat", toType: "fiat" },
 ];
 
 const howItWorks = [
   "Fiat rates are fetched from Frankfurter with USD as the common quote.",
   "Crypto prices are fetched from CoinGecko in USD.",
-  "Any pair is converted through normalized USD-per-unit pricing."
+  "Any pair is converted through normalized USD-per-unit pricing.",
 ];
 
 const supportedAssets = [
   {
     title: "Fiat currencies",
     description:
-      "Supports a broad list of global government-issued currencies, including major and regional pairs."
+      "Supports a broad list of global government-issued currencies, including major and regional pairs.",
   },
   {
     title: "Cryptocurrencies",
     description:
-      "Includes leading crypto assets such as BTC, ETH, LTC, XMR, SOL, USDT, and more."
+      "Includes leading crypto assets such as BTC, ETH, LTC, XMR, SOL, USDT, and more.",
   },
   {
     title: "Cross-market pairs",
     description:
-      "Convert fiat-to-crypto, crypto-to-fiat, and crypto-to-crypto in one unified experience."
-  }
+      "Convert fiat-to-crypto, crypto-to-fiat, and crypto-to-crypto in one unified experience.",
+  },
 ];
 
 interface InsightsSectionProps {
@@ -59,7 +65,7 @@ interface InsightsSectionProps {
 export function InsightsSection({
   selectedFromCode,
   selectedToCode,
-  onSelectPopularPair
+  onSelectPopularPair,
 }: InsightsSectionProps) {
   return (
     <section className="mt-10 grid gap-5 lg:grid-cols-3">
@@ -67,7 +73,7 @@ export function InsightsSection({
         <CardHeader className="pb-3">
           <CardTitle className="flex items-center gap-2 text-lg">
             <ArrowRightLeft className="h-4 w-4 text-sky-300" />
-            Popular conversions
+            Common pairs
           </CardTitle>
         </CardHeader>
         <CardContent className="flex flex-wrap gap-2 pt-0">
@@ -86,11 +92,15 @@ export function InsightsSection({
                   "h-9 rounded-full border-border/70 bg-background/50 px-3.5 font-normal transition-all",
                   "hover:border-cyan-400/40 hover:bg-cyan-400/10 hover:text-cyan-100",
                   isActive &&
-                    "border-cyan-400/50 bg-cyan-400/15 text-cyan-100 shadow-[0_0_0_1px_hsl(189_100%_40%_/_0.2)]"
+                    "border-cyan-400/50 bg-cyan-400/15 text-cyan-100 shadow-[0_0_0_1px_hsl(189_100%_40%_/_0.2)]",
                 )}
               >
                 <span className="inline-flex items-center gap-1.5 text-xs sm:text-sm">
-                  <CurrencyIcon code={pair.from} type={pair.fromType} size="sm" />
+                  <CurrencyIcon
+                    code={pair.from}
+                    type={pair.fromType}
+                    size="sm"
+                  />
                   <span>{pair.from}</span>
                   <MoveRight className="h-3.5 w-3.5 text-cyan-300" />
                   <CurrencyIcon code={pair.to} type={pair.toType} size="sm" />
@@ -111,7 +121,10 @@ export function InsightsSection({
         </CardHeader>
         <CardContent className="space-y-3 pt-0 text-sm text-muted-foreground">
           {howItWorks.map((line) => (
-            <p key={line} className="rounded-lg border border-border/60 bg-background/40 px-3 py-2">
+            <p
+              key={line}
+              className="rounded-lg border border-border/60 bg-background/40 px-3 py-2"
+            >
               {line}
             </p>
           ))}
@@ -122,7 +135,7 @@ export function InsightsSection({
         <CardHeader className="pb-3">
           <CardTitle className="flex items-center gap-2 text-lg">
             <Layers className="h-4 w-4 text-emerald-300" />
-            Supported asset types
+            Supported currencies
           </CardTitle>
         </CardHeader>
         <CardContent className="space-y-3 pt-0 text-sm">