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.

components/sections/market-offers.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { AnimatedList } from "@/components/ui/animated-list";
+import { OfferCard } from "@/components/offer-card";
+import { buyOffers, sellOffers } from "@/lib/mock-data";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export function MarketOffers() {
+  const t = useTranslations("home.offers");
+
+  return (
+    <section className="py-20 bg-background">
+      <div className="container">
+        <h2 className="text-4xl font-bold text-center mb-12">
+          Ofertas do Mercado
+        </h2>
+
+        <Tabs defaultValue="buying" className="w-full">
+          <TabsList className="grid w-full max-w-md mx-auto grid-cols-2">
+            <TabsTrigger value="buying">{t("buying")}</TabsTrigger>
+            <TabsTrigger value="selling">{t("selling")}</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="buying" className="mt-8">
+            <AnimatedList>
+              {buyOffers.map((offer) => (
+                <OfferCard key={offer.id} offer={offer} />
+              ))}
+            </AnimatedList>
+          </TabsContent>
+
+          <TabsContent value="selling" className="mt-8">
+            <AnimatedList>
+              {sellOffers.map((offer) => (
+                <OfferCard key={offer.id} offer={offer} />
+              ))}
+            </AnimatedList>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </section>
+  );
+}