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:
Evandro Fonseca Junior committed
1 parent
55c169bd6e
commit
5c1ccbc69a
67 files changed
+8984
-160
No files matched your search
@@ -0,0 +1,258 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { BlurFade } from "@/components/ui/blur-fade";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { NumberTicker } from "@/components/ui/number-ticker";
|
||||
import {
|
||||
Wallet,
|
||||
Handshake,
|
||||
CheckCircle,
|
||||
Shield,
|
||||
Zap,
|
||||
BarChart,
|
||||
Lock,
|
||||
} from "lucide-react";
|
||||
|
||||
export function EscrowExplanation() {
|
||||
const t = useTranslations("home.escrowExplanation");
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: t("benefits.protection.title"),
|
||||
description: t("benefits.protection.description"),
|
||||
color: "text-green-500",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: t("benefits.fast.title"),
|
||||
description: t("benefits.fast.description"),
|
||||
color: "text-blue-500",
|
||||
},
|
||||
{
|
||||
icon: BarChart,
|
||||
title: t("benefits.history.title"),
|
||||
description: t("benefits.history.description"),
|
||||
color: "text-purple-500",
|
||||
},
|
||||
{
|
||||
icon: Lock,
|
||||
title: t("benefits.trusted.title"),
|
||||
description: t("benefits.trusted.description"),
|
||||
color: "text-orange-500",
|
||||
},
|
||||
];
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
question: t("faq.q1"),
|
||||
answer: t("faq.a1"),
|
||||
},
|
||||
{
|
||||
question: t("faq.q2"),
|
||||
answer: t("faq.a2"),
|
||||
},
|
||||
{
|
||||
question: t("faq.q3"),
|
||||
answer: t("faq.a3"),
|
||||
},
|
||||
{
|
||||
question: t("faq.q4"),
|
||||
answer: t("faq.a4"),
|
||||
},
|
||||
{
|
||||
question: t("faq.q5"),
|
||||
answer: t("faq.a5"),
|
||||
},
|
||||
];
|
||||
|
||||
const stats = [
|
||||
{
|
||||
value: 208,
|
||||
suffix: "M",
|
||||
label: t("stats.volume"),
|
||||
},
|
||||
{
|
||||
value: 8763,
|
||||
suffix: "",
|
||||
label: t("stats.transactions"),
|
||||
},
|
||||
{
|
||||
value: 99.8,
|
||||
suffix: "%",
|
||||
label: t("stats.satisfaction"),
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
suffix: "min",
|
||||
label: t("stats.avgTime"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-20 bg-muted/30">
|
||||
<div className="container">
|
||||
{/* Título e Subtítulo */}
|
||||
<BlurFade delay={0.1}>
|
||||
<h2 className="text-5xl font-bold text-center mb-4">{t("title")}</h2>
|
||||
<p className="text-xl text-center text-muted-foreground mb-16">
|
||||
{t("subtitle")}
|
||||
</p>
|
||||
</BlurFade>
|
||||
|
||||
{/* Cards de Etapas */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
|
||||
{/* Card 1: Depósito */}
|
||||
<BlurFade delay={0.2}>
|
||||
<div className="relative p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg hover:border-orange-500/30 hover:scale-105 transition-all duration-300">
|
||||
<div className="absolute -top-4 -left-4 w-12 h-12 bg-orange-500/80 rounded-full flex items-center justify-center text-2xl font-bold text-white shadow-lg">
|
||||
1
|
||||
</div>
|
||||
<Wallet className="w-16 h-16 text-orange-500 mb-4" />
|
||||
<h3 className="text-2xl font-bold mb-3">{t("step1.title")}</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
{t("step1.description")}
|
||||
</p>
|
||||
<div className="bg-muted/50 p-3 rounded-lg border border-border/30">
|
||||
<code className="text-sm text-foreground/80">
|
||||
{t("step1.example")}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
|
||||
{/* Card 2: Negociação */}
|
||||
<BlurFade delay={0.3}>
|
||||
<div className="relative p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg hover:border-blue-500/30 hover:scale-105 transition-all duration-300">
|
||||
<div className="absolute -top-4 -left-4 w-12 h-12 bg-blue-500/80 rounded-full flex items-center justify-center text-2xl font-bold text-white shadow-lg">
|
||||
2
|
||||
</div>
|
||||
<Handshake className="w-16 h-16 text-blue-500 mb-4" />
|
||||
<h3 className="text-2xl font-bold mb-3">{t("step2.title")}</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
{t("step2.description")}
|
||||
</p>
|
||||
<div className="bg-muted/50 p-3 rounded-lg border border-border/30">
|
||||
<code className="text-sm text-foreground/80">
|
||||
{t("step2.example")}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
|
||||
{/* Card 3: Conclusão */}
|
||||
<BlurFade delay={0.4}>
|
||||
<div className="relative p-8 rounded-2xl border border-border/50 bg-card backdrop-blur-lg hover:border-green-500/30 hover:scale-105 transition-all duration-300">
|
||||
<div className="absolute -top-4 -left-4 w-12 h-12 bg-green-500/80 rounded-full flex items-center justify-center text-2xl font-bold text-white shadow-lg">
|
||||
3
|
||||
</div>
|
||||
<CheckCircle className="w-16 h-16 text-green-500 mb-4" />
|
||||
<h3 className="text-2xl font-bold mb-3">{t("step3.title")}</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
{t("step3.description")}
|
||||
</p>
|
||||
<div className="bg-muted/50 p-3 rounded-lg border border-border/30">
|
||||
<code className="text-sm text-foreground/80">
|
||||
{t("step3.example")}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
</div>
|
||||
|
||||
{/* Grid de Benefícios */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-20">
|
||||
{benefits.map((benefit, idx) => (
|
||||
<BlurFade key={idx} delay={0.5 + idx * 0.1}>
|
||||
<div className="p-6 rounded-xl border border-border/50 bg-card backdrop-blur-sm hover:border-accent/50 hover:shadow-lg transition-all">
|
||||
<benefit.icon className={`w-12 h-12 mb-4 ${benefit.color}`} />
|
||||
<h4 className="text-xl font-semibold mb-2">{benefit.title}</h4>
|
||||
<p className="text-muted-foreground">{benefit.description}</p>
|
||||
</div>
|
||||
</BlurFade>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* FAQ */}
|
||||
<BlurFade delay={0.9}>
|
||||
<h3 className="text-3xl font-bold text-center mb-8">
|
||||
{t("faq.title")}
|
||||
</h3>
|
||||
<Accordion
|
||||
type="single"
|
||||
collapsible
|
||||
className="max-w-3xl mx-auto mb-20"
|
||||
>
|
||||
{faqItems.map((item, idx) => (
|
||||
<AccordionItem key={idx} value={`item-${idx}`}>
|
||||
<AccordionTrigger className="text-left text-lg font-semibold">
|
||||
{item.question}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-muted-foreground">
|
||||
{item.answer}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</BlurFade>
|
||||
|
||||
{/* CTA Section */}
|
||||
<BlurFade delay={1.0}>
|
||||
<div className="relative p-12 rounded-2xl bg-card border border-border backdrop-blur-sm text-center">
|
||||
<Badge className="mb-4 bg-accent/20 text-accent-foreground">
|
||||
✨ Primeiras 3 transações sem taxa!
|
||||
</Badge>
|
||||
<h3 className="text-3xl font-bold mb-6">{t("cta.title")}</h3>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg" className="bg-primary hover:bg-primary/90">
|
||||
{t("cta.createOffer")}
|
||||
</Button>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-border/50"
|
||||
>
|
||||
{t("cta.watchVideo")}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-4xl">
|
||||
<div className="aspect-video bg-muted rounded-lg flex items-center justify-center">
|
||||
<p className="text-muted-foreground">
|
||||
Vídeo explicativo aqui
|
||||
</p>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
|
||||
{/* Barra de Estatísticas */}
|
||||
<div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||||
{stats.map((stat, idx) => (
|
||||
<BlurFade key={idx} delay={1.1 + idx * 0.1}>
|
||||
<div>
|
||||
<p className="text-3xl font-bold text-accent mb-2">
|
||||
<NumberTicker value={stat.value} />
|
||||
{stat.suffix}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{stat.label}</p>
|
||||
</div>
|
||||
</BlurFade>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user