| 1 | import { Globe, Zap, Shield, CreditCard } from "lucide-react"; |
| 2 | const features = [{ |
| 3 | icon: Globe, |
| 4 | title: "Global Settlement Layer", |
| 5 | description: "Send money to 80+ countries with the real exchange rate. No hidden fees, ever." |
| 6 | }, { |
| 7 | icon: Zap, |
| 8 | title: "Low-Cost Cross-Border Transactions", |
| 9 | description: "Most transfers arrive in seconds. Track your money every step of the way." |
| 10 | }, { |
| 11 | icon: Shield, |
| 12 | title: "Faster knowledge of Internal Spending", |
| 13 | description: "We're regulated by the world's most respected authorities. Your money is always protected." |
| 14 | }, { |
| 15 | icon: CreditCard, |
| 16 | title: "AI Agent Ready", |
| 17 | description: "Spend abroad with the real exchange rate. Works everywhere Mastercard is accepted." |
| 18 | }]; |
| 19 | const Features = () => { |
| 20 | return <section id="features" className="py-20 md:py-32 bg-background"> |
| 21 | <div className="container"> |
| 22 | <div className="text-center max-w-2xl mx-auto mb-16"> |
| 23 | <h2 className="text-3xl md:text-5xl font-bold text-foreground">Why Blockchain Expense Management?</h2> |
| 24 | <p className="mt-4 text-lg text-muted-foreground">Of course there are other ways to do Expense Management </p> |
| 25 | </div> |
| 26 | |
| 27 | <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| 28 | {features.map((feature, index) => <div key={index} className="group p-6 rounded-2xl bg-muted hover:bg-primary/10 transition-all duration-300 animate-fade-up" style={{ |
| 29 | animationDelay: `${index * 100}ms` |
| 30 | }}> |
| 31 | <div className="w-14 h-14 rounded-2xl bg-primary/20 flex items-center justify-center mb-6 group-hover:bg-primary group-hover:scale-110 transition-all duration-300"> |
| 32 | <feature.icon className="w-7 h-7 text-primary group-hover:text-primary-foreground transition-colors" /> |
| 33 | </div> |
| 34 | <h3 className="text-xl font-semibold text-foreground mb-2">{feature.title}</h3> |
| 35 | <p className="text-muted-foreground">{feature.description}</p> |
| 36 | </div>)} |
| 37 | </div> |
| 38 | </div> |
| 39 | </section>; |
| 40 | }; |
| 41 | export default Features; |