Initial commit

components/sections/hero.tsx

@@ -0,0 +1,23 @@
+import { Badge } from "@/components/ui/badge";
+
+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>
+        <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
+        </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.
+        </p>
+      </div>
+    </section>
+  );
+}

components/sections/insights-section.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { ArrowRightLeft, Landmark, Layers, MoveRight, Workflow } from "lucide-react";
+
+import { CurrencyIcon } from "@/components/converter/currency-icon";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { AssetType } from "@/lib/assets";
+import { cn } from "@/lib/utils";
+
+interface PopularPair {
+  from: string;
+  to: string;
+  fromType: AssetType;
+  toType: AssetType;
+}
+
+const popularPairs: PopularPair[] = [
+  { from: "USD", to: "PLN", fromType: "fiat", toType: "fiat" },
+  { from: "EUR", to: "GBP", fromType: "fiat", toType: "fiat" },
+  { from: "USD", to: "BTC", fromType: "fiat", toType: "crypto" },
+  { from: "BTC", to: "USD", fromType: "crypto", toType: "fiat" },
+  { 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" }
+];
+
+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."
+];
+
+const supportedAssets = [
+  {
+    title: "Fiat currencies",
+    description:
+      "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."
+  },
+  {
+    title: "Cross-market pairs",
+    description:
+      "Convert fiat-to-crypto, crypto-to-fiat, and crypto-to-crypto in one unified experience."
+  }
+];
+
+interface InsightsSectionProps {
+  selectedFromCode: string;
+  selectedToCode: string;
+  onSelectPopularPair: (fromCode: string, toCode: string) => void;
+}
+
+export function InsightsSection({
+  selectedFromCode,
+  selectedToCode,
+  onSelectPopularPair
+}: InsightsSectionProps) {
+  return (
+    <section className="mt-10 grid gap-5 lg:grid-cols-3">
+      <Card className="border-border/70 bg-card/85">
+        <CardHeader className="pb-3">
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <ArrowRightLeft className="h-4 w-4 text-sky-300" />
+            Popular conversions
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-2 pt-0">
+          {popularPairs.map((pair) => {
+            const isActive =
+              pair.from === selectedFromCode && pair.to === selectedToCode;
+
+            return (
+              <Button
+                key={`${pair.from}-${pair.to}`}
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => onSelectPopularPair(pair.from, pair.to)}
+                className={cn(
+                  "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)]"
+                )}
+              >
+                <span className="inline-flex items-center gap-1.5 text-xs sm:text-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" />
+                  <span>{pair.to}</span>
+                </span>
+              </Button>
+            );
+          })}
+        </CardContent>
+      </Card>
+
+      <Card className="border-border/70 bg-card/85">
+        <CardHeader className="pb-3">
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <Workflow className="h-4 w-4 text-cyan-300" />
+            How it works
+          </CardTitle>
+        </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">
+              {line}
+            </p>
+          ))}
+        </CardContent>
+      </Card>
+
+      <Card className="border-border/70 bg-card/85">
+        <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
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3 pt-0 text-sm">
+          {supportedAssets.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-lg border border-border/60 bg-background/40 px-3 py-2"
+            >
+              <p className="flex items-center gap-2 font-medium text-foreground">
+                <Landmark className="h-3.5 w-3.5 text-muted-foreground" />
+                {item.title}
+              </p>
+              <p className="mt-1 text-muted-foreground">{item.description}</p>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </section>
+  );
+}