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.
259 lines
8.7 KiB
TypeScript
259 lines
8.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|