Improve teh securty of teh DB

frontend/src/components/subscription/PricingSection.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { ArrowRight } from 'lucide-react';
 import { SubscriptionPricingCards } from './SubscriptionPricingCards';
 
 export const PricingSection: React.FC = () => {
+  const { t } = useTranslation();
+
   return (
     <section id="pricing" className="py-24 bg-[var(--bg-primary)]">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="text-center mb-8">
           <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]">
-            Planes que se Adaptan a tu Negocio
+            {t('landing:pricing.title', 'Planes que se Adaptan a tu Negocio')}
           </h2>
           <p className="mt-4 max-w-2xl mx-auto text-lg text-[var(--text-secondary)]">
-            Sin costos ocultos, sin compromisos largos. Comienza gratis y escala según crezcas.
+            {t('landing:pricing.subtitle', 'Sin costos ocultos, sin compromisos largos. Comienza gratis y escala según crezcas.')}
           </p>
         </div>
 
@@ -26,7 +29,7 @@ export const PricingSection: React.FC = () => {
             to="/plans/compare"
             className="text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] font-semibold inline-flex items-center gap-2"
           >
-            Ver comparación completa de características
+            {t('landing:pricing.compare_link', 'Ver comparación completa de características')}
             <ArrowRight className="w-4 h-4" />
           </Link>
         </div>