language text full complated

components/pricing.tsx

@@ -0,0 +1,125 @@
+import { Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useLanguage } from "@/contexts/language-context";
+
+export default function Pricing() {
+  const {t} = useLanguage();
+  const pricingTiers = [
+    {
+      name: t.pricingSection.plans.one.title,
+      price: t.pricingSection.plans.one.price,
+      period: "/year",
+      description: t.pricingSection.plans.one.desc,
+      features: [
+        t.pricingSection.plans.one.features[0],
+        t.pricingSection.plans.one.features[1],
+        t.pricingSection.plans.one.features[2],
+        t.pricingSection.plans.one.features[3],
+        t.pricingSection.plans.one.features[4],
+      ],
+    },
+    {
+      name: t.pricingSection.plans.two.title,
+      price: t.pricingSection.plans.two.price,
+      period: "/year",
+      description: t.pricingSection.plans.two.desc,
+      popular: true,
+      features: [
+        t.pricingSection.plans.two.features[0],
+        t.pricingSection.plans.two.features[1],
+        t.pricingSection.plans.two.features[2],
+        t.pricingSection.plans.two.features[3],
+        t.pricingSection.plans.two.features[4],
+        t.pricingSection.plans.two.features[5]
+      ],
+    },
+    {
+      name: t.pricingSection.plans.three.title,
+      price: t.pricingSection.plans.three.price,
+      period: "per station/year",
+      description: t.pricingSection.plans.three.desc,
+      features: [
+        t.pricingSection.plans.three.features[0],
+        t.pricingSection.plans.three.features[1],
+        t.pricingSection.plans.three.features[2],
+        t.pricingSection.plans.three.features[3],
+        t.pricingSection.plans.three.features[4],
+        t.pricingSection.plans.three.features[5],
+        t.pricingSection.plans.three.features[6],
+      ],
+    },
+  ];
+  return (
+    <section
+      id="pricing"
+      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.pricingSection.title}
+          </h2>
+          <p className="text-lg text-muted-foreground">
+            {t.pricingSection.subtitle}
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {pricingTiers.map((tier, index) => (
+            <div
+              key={index}
+              className={`relative rounded-xl border transition-all duration-300 ${
+                tier.popular
+                  ? "border-primary bg-background shadow-lg scale-105"
+                  : "border-border bg-background hover:border-primary/50"
+              }`}
+            >
+              {tier.popular && (
+                <div className="absolute -top-4 left-0 right-0 flex justify-center">
+                  <span className="bg-primary text-white text-sm font-semibold px-4 py-1 rounded-full">
+                    {t.pricingSection.popular}
+                  </span>
+                </div>
+              )}
+
+              <div className="p-6">
+                <h3 className="text-xl font-bold text-foreground mb-2">
+                  {tier.name}
+                </h3>
+                <p className="text-muted-foreground text-sm mb-4">
+                  {tier.description}
+                </p>
+
+                <div className="mb-6">
+                  <span className="text-4xl font-bold text-foreground">
+                    {tier.price}
+                  </span>
+                </div>
+
+                <Button
+                  className={`w-full mb-6 ${
+                    tier.popular
+                      ? "bg-primary hover:bg-primary/90"
+                      : "border-primary text-primary hover:bg-primary/5"
+                  }`}
+                  variant={tier.popular ? "default" : "outline"}
+                >
+                  {t.pricingSection.started}
+                </Button>
+
+                <div className="space-y-3">
+                  {tier.features.map((feature, featureIndex) => (
+                    <div key={featureIndex} className="flex items-center gap-3">
+                      <Check size={20} className="text-primary flex-shrink-0" />
+                      <span className="text-foreground text-sm">{feature}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}