76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { Zap, MonitorPlay, DollarSign, BarChart3, Users, Gauge } from "lucide-react"
|
|
import { useLanguage } from "@/contexts/language-context"
|
|
|
|
export default function Features() {
|
|
const { t } = useLanguage()
|
|
|
|
const features = [
|
|
{
|
|
icon: Gauge,
|
|
title: t.features.monitoring.title,
|
|
description: t.features.monitoring.desc,
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: t.features.remote.title,
|
|
description: t.features.remote.desc,
|
|
},
|
|
{
|
|
icon: DollarSign,
|
|
title: t.features.pricing.title,
|
|
description: t.features.pricing.desc,
|
|
},
|
|
{
|
|
icon: MonitorPlay,
|
|
title: t.features.tracking.title,
|
|
description: t.features.tracking.desc,
|
|
},
|
|
{
|
|
icon: DollarSign,
|
|
title: t.features.payments.title,
|
|
description: t.features.payments.desc,
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: t.features.users.title,
|
|
description: t.features.users.desc,
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: t.features.analytics.title,
|
|
description: t.features.analytics.desc,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<section id="features" className="py-20 md:py-32 px-4 sm:px-6 lg:px-8 bg-muted">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="text-center mb-12 md:mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{t.features.title}</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">{t.features.description}</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{features.map((feature, index) => {
|
|
const Icon = feature.icon
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="bg-background rounded-xl border border-border p-6 hover:shadow-lg hover:border-primary/50 transition-all duration-300"
|
|
>
|
|
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
|
|
<Icon size={24} className="text-primary" />
|
|
</div>
|
|
<h3 className="font-semibold text-lg text-foreground mb-2">{feature.title}</h3>
|
|
<p className="text-muted-foreground">{feature.description}</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|