Evandro Fonseca Junior
5c1ccbc69a
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.
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import { BentoGrid, BentoCard } from "@/components/ui/bento-grid";
|
|
import { ShoppingBag, Coins, Shield } from "lucide-react";
|
|
|
|
export function HowItWorks() {
|
|
const t = useTranslations("home.howItWorks");
|
|
|
|
const features = [
|
|
{
|
|
name: t("buy"),
|
|
description: "Encontre os melhores itens com preços justos",
|
|
className: "md:col-span-1",
|
|
background: (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-green-500/10 via-green-500/5 to-transparent" />
|
|
),
|
|
Icon: ShoppingBag,
|
|
href: "/market",
|
|
cta: "Ver Mercado",
|
|
},
|
|
{
|
|
name: t("sell"),
|
|
description: "Venda seu loot e ganhe gold rapidamente",
|
|
className: "md:col-span-1",
|
|
background: (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-amber-500/10 via-amber-500/5 to-transparent" />
|
|
),
|
|
Icon: Coins,
|
|
href: "/market",
|
|
cta: "Vender Agora",
|
|
},
|
|
{
|
|
name: t("trade"),
|
|
description: "Sistema seguro de escrow protege suas transações",
|
|
className: "md:col-span-2",
|
|
background: (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-blue-500/5 to-transparent" />
|
|
),
|
|
Icon: Shield,
|
|
href: "/market",
|
|
cta: "Negociar",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-background">
|
|
<div className="container">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold mb-4">{t("title")}</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
Descubra como funciona nossa plataforma de trading segura e
|
|
eficiente
|
|
</p>
|
|
</div>
|
|
|
|
<BentoGrid>
|
|
{features.map((feature, idx) => (
|
|
<BentoCard key={idx} {...feature} />
|
|
))}
|
|
</BentoGrid>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|