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.
2025-10-23 19:57:09 -03:00
1 parent 55c169bd6e
commit 5c1ccbc69a
@@ -0,0 +1,65 @@
+"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>
+  );
+}