language text full complated

components/features.tsx

@@ -0,0 +1,75 @@
+"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>
+  )
+}