feat: integrate Tailwind CSS with custom theme and animations
Added Tailwind CSS and tw-animate-css imports to globals.css. Introduced a custom dark variant and an extensive @theme inline block with CSS variables for colors, radii, and animations. Included keyframes for shimmer-slide, spin-around, gradient, shine, and background-position-spin to enable consistent theming and dynamic UI effects across the application.
This commit is contained in:
1 parent
55c169bd6e
commit
5c1ccbc69a
67 files changed
+8984
-160
No files matched your search
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Shield, Coins } from "lucide-react";
|
||||
|
||||
export function EscrowBanner() {
|
||||
const t = useTranslations("home.escrow");
|
||||
|
||||
return (
|
||||
<section className="py-8 bg-gradient-to-r from-green-500/10 via-blue-500/10 to-green-500/10 border-b border-green-500/20">
|
||||
<div className="container">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center">
|
||||
<Shield className="w-6 h-6 text-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-foreground">
|
||||
{t("title")}
|
||||
</h2>
|
||||
<p className="text-muted-foreground">{t("description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-muted-foreground">Escrow Balance</p>
|
||||
<p className="text-lg font-bold text-foreground">🪙 0 gp</p>
|
||||
</div>
|
||||
<Button className="bg-green-600 hover:bg-green-700 text-white">
|
||||
<Coins className="w-4 h-4 mr-2" />
|
||||
{t("deposit")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user