Translate the entire project

Translate all text content to support multiple languages, defaulting to English and supporting French, Spanish, Russian, and Chinese based on browser language settings.

Author: lovable-dev[bot]

src/components/landing/CTASection.tsx

@@ -1,12 +1,15 @@
 
 import { Button } from "@/components/ui/button";
 import { ArrowRight, Clock } from "lucide-react";
+import { useTranslation } from 'react-i18next';
 
 interface CTASectionProps {
   onRedirectToDashboard: () => void;
 }
 
 export const CTASection = ({ onRedirectToDashboard }: CTASectionProps) => {
+  const { t } = useTranslation();
+
   return (
     <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 relative overflow-hidden">
       <div className="absolute inset-0 bg-black/10"></div>
@@ -15,11 +18,10 @@ export const CTASection = ({ onRedirectToDashboard }: CTASectionProps) => {
           <Clock className="w-16 h-16 text-blue-200 mx-auto mb-4 animate-pulse" />
         </div>
         <h2 className="text-4xl md:text-6xl font-bold text-white mb-6">
-          Your competition is already here
+          {t('cta.title')}
         </h2>
         <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto leading-relaxed">
-          While others pay monthly fees for uncertain results, smart companies are already earning with RefSpring's 
-          performance-based model. Don't let them get ahead.
+          {t('cta.subtitle')}
         </p>
         <div className="flex flex-col sm:flex-row gap-6 justify-center">
           <Button 
@@ -28,7 +30,7 @@ export const CTASection = ({ onRedirectToDashboard }: CTASectionProps) => {
             className="text-lg px-12 py-6 bg-white text-slate-900 hover:bg-slate-100 hover:scale-105 transition-all shadow-xl" 
             onClick={onRedirectToDashboard}
           >
-            Start earning now
+            {t('cta.startEarning')}
             <ArrowRight className="ml-2 h-5 w-5" />
           </Button>
           <Button 
@@ -37,7 +39,7 @@ export const CTASection = ({ onRedirectToDashboard }: CTASectionProps) => {
             className="text-lg px-12 py-6 border-2 border-white text-white hover:bg-white hover:text-slate-900 hover:scale-105 transition-all" 
             onClick={onRedirectToDashboard}
           >
-            See live demo
+            {t('cta.seeDemo')}
           </Button>
         </div>
       </div>

src/components/landing/FeaturesSection.tsx

@@ -1,31 +1,34 @@
 
 import { Zap, Users, BarChart3, Shield } from "lucide-react";
+import { useTranslation } from 'react-i18next';
 
 export const FeaturesSection = () => {
+  const { t } = useTranslation();
+
   const features = [
     {
       icon: <Zap className="h-10 w-10 text-blue-600" />,
-      title: "Lightning Fast",
-      description: "Set up your affiliate program in minutes, not weeks. One-click deployment.",
-      metric: "3 min setup"
+      title: t('features.lightningFast.title'),
+      description: t('features.lightningFast.description'),
+      metric: t('features.lightningFast.metric')
     },
     {
       icon: <Users className="h-10 w-10 text-green-600" />,
-      title: "Smart Recruitment",
-      description: "AI-powered affiliate matching. Find and onboard top performers automatically.",
-      metric: "847 affiliates"
+      title: t('features.smartRecruitment.title'),
+      description: t('features.smartRecruitment.description'),
+      metric: t('features.smartRecruitment.metric')
     },
     {
       icon: <BarChart3 className="h-10 w-10 text-purple-600" />,
-      title: "Real-time Analytics",
-      description: "Track performance with crystal-clear insights. Know what's working instantly.",
-      metric: "Live tracking"
+      title: t('features.realTimeAnalytics.title'),
+      description: t('features.realTimeAnalytics.description'),
+      metric: t('features.realTimeAnalytics.metric')
     },
     {
       icon: <Shield className="h-10 w-10 text-orange-600" />,
-      title: "Fraud Protection",
-      description: "Advanced AI security to protect against fraudulent activities and fake traffic.",
-      metric: "99.9% accuracy"
+      title: t('features.fraudProtection.title'),
+      description: t('features.fraudProtection.description'),
+      metric: t('features.fraudProtection.metric')
     }
   ];
 
@@ -34,10 +37,10 @@ export const FeaturesSection = () => {
       <div className="max-w-7xl mx-auto">
         <div className="text-center mb-16">
           <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
-            Everything you need to dominate
+            {t('features.title')}
           </h2>
           <p className="text-xl text-slate-600 max-w-2xl mx-auto">
-            Powerful tools designed to help you build and manage successful affiliate programs at scale.
+            {t('features.subtitle')}
           </p>
         </div>
 

src/components/landing/HeroSection.tsx

@@ -1,13 +1,16 @@
 
 import { Button } from "@/components/ui/button";
 import { ArrowRight, CheckCircle, Star, DollarSign, TrendingUp, Zap, Globe } from "lucide-react";
+import { useTranslation } from 'react-i18next';
 
 interface HeroSectionProps {
   scrollY: number;
   onRedirectToDashboard: () => void;
 }
 
 export const HeroSection = ({ scrollY, onRedirectToDashboard }: HeroSectionProps) => {
+  const { t } = useTranslation();
+
   return (
     <section className="h-screen flex items-center justify-center bg-gradient-to-br from-blue-50/50 via-white to-purple-50/50 relative">
       {/* Grid Pattern Background */}
@@ -38,37 +41,37 @@ export const HeroSection = ({ scrollY, onRedirectToDashboard }: HeroSectionProps
           {/* Badge */}
           <div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-100 to-purple-100 text-blue-800 px-6 py-3 rounded-full text-sm font-medium border border-blue-200/50 backdrop-blur-sm animate-scale-in">
             <CheckCircle className="w-4 h-4" />
-            0€ de frais mensuels • Rémunération sur performance uniquement
+            {t('hero.badge')}
             <Star className="w-4 h-4 text-yellow-500" />
           </div>
 
           <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold text-slate-900 leading-tight">
-            Enfin une plateforme
+            {t('hero.title.part1')}
             <br />
             <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent animate-pulse">
-              qui paie pour elle-même
+              {t('hero.title.part2')}
             </span>
           </h1>
 
           <p className="text-lg md:text-xl lg:text-2xl text-slate-600 max-w-4xl mx-auto leading-relaxed" style={{ animationDelay: '0.2s' }}>
-            <strong>Modèle basé sur les revenus :</strong> 
+            <strong>{t('hero.subtitle.bold')}</strong>
             <br />
-            <span className="text-slate-900 font-semibold">Accès gratuit, nous gagnons seulement quand vous gagnez.</span>
+            <span className="text-slate-900 font-semibold">{t('hero.subtitle.normal')}</span>
           </p>
 
           {/* Value props with animations */}
           <div className="flex flex-wrap justify-center gap-4 lg:gap-6">
             {[
-              { icon: CheckCircle, text: "0€ de frais d'installation", delay: "0.3s" },
-              { icon: CheckCircle, text: "0€ d'abonnement mensuel", delay: "0.4s" },
-              { icon: CheckCircle, text: "Accès complet à la plateforme", delay: "0.5s" }
+              { text: t('hero.features.noSetupFee'), delay: "0.3s" },
+              { text: t('hero.features.noMonthlyFee'), delay: "0.4s" },
+              { text: t('hero.features.fullAccess'), delay: "0.5s" }
             ].map((item, index) => (
               <div 
                 key={index}
                 className="flex items-center gap-2 bg-white/80 backdrop-blur-sm px-4 py-2 lg:px-6 lg:py-3 rounded-full border border-slate-200 hover:scale-105 transition-all animate-fade-in shadow-lg"
                 style={{ animationDelay: item.delay }}
               >
-                <item.icon className="w-4 h-4 lg:w-5 lg:h-5 text-green-600" />
+                <CheckCircle className="w-4 h-4 lg:w-5 lg:h-5 text-green-600" />
                 <span className="text-sm lg:text-base text-slate-700 font-medium">{item.text}</span>
               </div>
             ))}
@@ -80,7 +83,7 @@ export const HeroSection = ({ scrollY, onRedirectToDashboard }: HeroSectionProps
               className="text-lg px-8 py-4 lg:px-12 lg:py-6 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-2xl hover:shadow-3xl transition-all hover:scale-105 border-0 text-white" 
               onClick={onRedirectToDashboard}
             >
-              Commencer à gagner dès aujourd'hui
+              {t('hero.cta.primary')}
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
             <Button 
@@ -89,21 +92,21 @@ export const HeroSection = ({ scrollY, onRedirectToDashboard }: HeroSectionProps
               className="text-lg px-8 py-4 lg:px-12 lg:py-6 border-2 hover:bg-slate-50 shadow-lg hover:scale-105 transition-all backdrop-blur-sm" 
               onClick={onRedirectToDashboard}
             >
-              Voir comment ça marche
+              {t('hero.cta.secondary')}
             </Button>
           </div>
 
           {/* Social proof with animation */}
           <div className="pt-12 border-t border-slate-200/50" style={{ animationDelay: '0.8s' }}>
-            <p className="text-slate-500 text-sm mb-6">Adopté par les entreprises qui veulent des résultats, pas des factures récurrentes</p>
+            <p className="text-slate-500 text-sm mb-6">{t('hero.socialProof.text')}</p>
             <div className="flex justify-center items-center gap-6 lg:gap-8 opacity-70">
-              <div className="text-2xl lg:text-3xl font-bold text-slate-600 hover:text-blue-600 transition-colors">50M€+</div>
+              <div className="text-2xl lg:text-3xl font-bold text-slate-600 hover:text-blue-600 transition-colors">{t('hero.socialProof.revenue')}</div>
               <div className="w-px h-6 lg:h-8 bg-slate-300"></div>
-              <div className="text-base lg:text-lg font-medium text-slate-500">Générés</div>
+              <div className="text-base lg:text-lg font-medium text-slate-500">{t('hero.socialProof.generated')}</div>
               <div className="w-px h-6 lg:h-8 bg-slate-300"></div>
-              <div className="text-2xl lg:text-3xl font-bold text-green-600">0€</div>
+              <div className="text-2xl lg:text-3xl font-bold text-green-600">{t('hero.socialProof.upfront')}</div>
               <div className="w-px h-6 lg:h-8 bg-slate-300"></div>
-              <div className="text-base lg:text-lg font-medium text-slate-500">D'avance</div>
+              <div className="text-base lg:text-lg font-medium text-slate-500">{t('hero.socialProof.advance')}</div>
             </div>
           </div>
         </div>

src/components/landing/StatsSection.tsx

@@ -1,23 +1,26 @@
 
 import { Globe, TrendingUp, Shield, Award } from "lucide-react";
+import { useTranslation } from 'react-i18next';
 
 export const StatsSection = () => {
+  const { t } = useTranslation();
+
   const stats = [
-    { number: "10K+", label: "Active Campaigns", icon: <Globe className="w-8 h-8" /> },
-    { number: "€50M+", label: "Revenue Generated", icon: <TrendingUp className="w-8 h-8" /> },
-    { number: "99.9%", label: "Uptime", icon: <Shield className="w-8 h-8" /> },
-    { number: "€0", label: "Upfront Costs", icon: <Award className="w-8 h-8" /> }
+    { number: "10K+", label: t('stats.activeCampaigns'), icon: <Globe className="w-8 h-8" /> },
+    { number: "€50M+", label: t('stats.revenueGenerated'), icon: <TrendingUp className="w-8 h-8" /> },
+    { number: "99.9%", label: t('stats.uptime'), icon: <Shield className="w-8 h-8" /> },
+    { number: "€0", label: t('stats.upfrontCosts'), icon: <Award className="w-8 h-8" /> }
   ];
 
   return (
     <section className="py-24 px-4 sm:px-6 lg:px-8 bg-slate-900 relative overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-purple-900/20"></div>
       <div className="max-w-7xl mx-auto text-center relative z-10">
         <h2 className="text-4xl font-bold text-white mb-4">
-          Numbers that speak louder than words
+          {t('stats.title')}
         </h2>
         <p className="text-xl text-slate-300 mb-16 max-w-2xl mx-auto">
-          Join the revolution of performance-based affiliate marketing.
+          {t('stats.subtitle')}
         </p>
         <div className="grid md:grid-cols-4 gap-8">
           {stats.map((stat, index) => (

src/components/landing/StorySection.tsx

@@ -1,38 +1,41 @@
 
+import { useTranslation } from 'react-i18next';
+
 export const StorySection = () => {
+  const { t } = useTranslation();
+
   return (
     <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-white to-slate-50">
       <div className="max-w-6xl mx-auto">
         <div className="text-center mb-16">
           <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
-            L'histoire qui change tout
+            {t('story.title')}
           </h2>
           <p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
-            Pendant que d'autres plateformes demandent 299€/mois d'avance avant que vous gagniez un seul euro, 
-            nous croyons en une approche différente : <strong>votre succès est notre succès.</strong>
+            {t('story.subtitle.part1')} <strong>{t('story.subtitle.bold')}</strong>
           </p>
         </div>
 
         <div className="grid md:grid-cols-3 gap-8 mb-16">
           {[
             {
               step: "01",
-              title: "Plateformes traditionnelles",
-              description: "Payez 99-299€/mois, espérez le meilleur, priez pour couvrir vos coûts",
+              title: t('story.steps.traditional.title'),
+              description: t('story.steps.traditional.description'),
               icon: "❌",
               color: "red"
             },
             {
               step: "02", 
-              title: "La méthode RefSpring",
-              description: "Commencez immédiatement, accès complet, nous gagnons seulement quand vous gagnez. Zéro risque.",
+              title: t('story.steps.refspring.title'),
+              description: t('story.steps.refspring.description'),
               icon: "✅",
               color: "green"
             },
             {
               step: "03",
-              title: "Votre résultat",
-              description: "Concentrez-vous sur votre croissance, pas sur les factures mensuelles. Chaque euro gagné est du profit pur.",
+              title: t('story.steps.result.title'),
+              description: t('story.steps.result.description'),
               icon: "🚀",
               color: "blue"
             }

src/i18n/locales/en.json

@@ -60,6 +60,90 @@
     "actionsPerformed": "Actions performed",
     "grossRevenue": "Gross revenue",
     "costPerAcquisition": "Cost per acquisition",
-    "returnOnAdSpend": "Return on ad spend"
+    "returnOnAdSpend": "Return on ad spend",
+    "title": "Numbers that speak louder than words",
+    "subtitle": "Join the revolution of performance-based affiliate marketing.",
+    "activeCampaigns": "Active Campaigns",
+    "revenueGenerated": "Revenue Generated",
+    "uptime": "Uptime",
+    "upfrontCosts": "Upfront Costs"
+  },
+  "hero": {
+    "badge": "€0 monthly fees • Performance-based compensation only",
+    "title": {
+      "part1": "Finally a platform",
+      "part2": "that pays for itself"
+    },
+    "subtitle": {
+      "bold": "Revenue-based model:",
+      "normal": "Free access, we only earn when you earn."
+    },
+    "features": {
+      "noSetupFee": "€0 setup fee",
+      "noMonthlyFee": "€0 monthly subscription",
+      "fullAccess": "Full platform access"
+    },
+    "cta": {
+      "primary": "Start earning today",
+      "secondary": "See how it works"
+    },
+    "socialProof": {
+      "text": "Adopted by companies that want results, not recurring bills",
+      "revenue": "50M€+",
+      "generated": "Generated",
+      "upfront": "€0",
+      "advance": "Upfront"
+    }
+  },
+  "story": {
+    "title": "The story that changes everything",
+    "subtitle": {
+      "part1": "While other platforms ask for €299/month upfront before you earn a single euro, we believe in a different approach:",
+      "bold": "your success is our success."
+    },
+    "steps": {
+      "traditional": {
+        "title": "Traditional platforms",
+        "description": "Pay €99-299/month, hope for the best, pray to cover your costs"
+      },
+      "refspring": {
+        "title": "The RefSpring method",
+        "description": "Start immediately, full access, we only earn when you earn. Zero risk."
+      },
+      "result": {
+        "title": "Your result",
+        "description": "Focus on your growth, not on monthly bills. Every euro earned is pure profit."
+      }
+    }
+  },
+  "features": {
+    "title": "Everything you need to dominate",
+    "subtitle": "Powerful tools designed to help you build and manage successful affiliate programs at scale.",
+    "lightningFast": {
+      "title": "Lightning Fast",
+      "description": "Set up your affiliate program in minutes, not weeks. One-click deployment.",
+      "metric": "3 min setup"
+    },
+    "smartRecruitment": {
+      "title": "Smart Recruitment",
+      "description": "AI-powered affiliate matching. Find and onboard top performers automatically.",
+      "metric": "847 affiliates"
+    },
+    "realTimeAnalytics": {
+      "title": "Real-time Analytics",
+      "description": "Track performance with crystal-clear insights. Know what's working instantly.",
+      "metric": "Live tracking"
+    },
+    "fraudProtection": {
+      "title": "Fraud Protection",
+      "description": "Advanced AI security to protect against fraudulent activities and fake traffic.",
+      "metric": "99.9% accuracy"
+    }
+  },
+  "cta": {
+    "title": "Your competition is already here",
+    "subtitle": "While others pay monthly fees for uncertain results, smart companies are already earning with RefSpring's performance-based model. Don't let them get ahead.",
+    "startEarning": "Start earning now",
+    "seeDemo": "See live demo"
   }
 }