qrmaster.net

src/components/marketing/Pricing.tsx

@@ -1,16 +1,19 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
+import { BillingToggle } from '@/components/ui/BillingToggle';
 
 interface PricingProps {
   t: any; // i18n translation function
 }
 
 export const Pricing: React.FC<PricingProps> = ({ t }) => {
+  const [billingPeriod, setBillingPeriod] = useState<'month' | 'year'>('month');
+
   const plans = [
     {
       key: 'free',
@@ -38,6 +41,10 @@ export const Pricing: React.FC<PricingProps> = ({ t }) => {
           </p>
         </div>
 
+        <div className="flex justify-center mb-8">
+          <BillingToggle value={billingPeriod} onChange={setBillingPeriod} />
+        </div>
+
         <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
           {plans.map((plan) => (
             <Card
@@ -56,13 +63,30 @@ export const Pricing: React.FC<PricingProps> = ({ t }) => {
                 <CardTitle className="text-2xl mb-4">
                   {t.pricing[plan.key].title}
                 </CardTitle>
-                <div className="flex items-baseline justify-center">
-                  <span className="text-4xl font-bold">
-                    {t.pricing[plan.key].price}
-                  </span>
-                  <span className="text-gray-600 ml-2">
-                    {t.pricing[plan.key].period}
-                  </span>
+                <div className="flex flex-col items-center">
+                  <div className="flex items-baseline justify-center">
+                    <span className="text-4xl font-bold">
+                      {plan.key === 'free'
+                        ? t.pricing[plan.key].price
+                        : billingPeriod === 'month'
+                        ? t.pricing[plan.key].price
+                        : plan.key === 'pro'
+                        ? '€90'
+                        : '€290'}
+                    </span>
+                    <span className="text-gray-600 ml-2">
+                      {plan.key === 'free'
+                        ? t.pricing[plan.key].period
+                        : billingPeriod === 'month'
+                        ? t.pricing[plan.key].period
+                        : 'per year'}
+                    </span>
+                  </div>
+                  {billingPeriod === 'year' && plan.key !== 'free' && (
+                    <Badge variant="success" className="mt-2">
+                      Save 16%
+                    </Badge>
+                  )}
                 </div>
               </CardHeader>