Improve the frontend and fix TODOs

frontend/src/pages/public/LandingPage.tsx

@@ -701,49 +701,71 @@ const LandingPage: React.FC = () => {
           </div>
 
           {/* Grant Programs Grid */}
-          <div className="mt-16 grid md:grid-cols-4 gap-6">
-            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
-              <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
-                <Award className="w-6 h-6 text-blue-600" />
-              </div>
-              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.eu_horizon', 'EU Horizon Europe')}</h4>
-              <p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.eu_horizon_req', 'Requires 30% reduction')}</p>
-              <div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
-                <CheckCircle2 className="w-3 h-3" />
-                {t('landing:sustainability.grants.eligible', 'Eligible')}
-              </div>
-            </div>
-
-            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
-              <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
-                <Leaf className="w-6 h-6 text-green-600" />
-              </div>
-              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.farm_to_fork', 'Farm to Fork')}</h4>
-              <p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.farm_to_fork_req', 'Requires 20% reduction')}</p>
-              <div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
-                <CheckCircle2 className="w-3 h-3" />
-                {t('landing:sustainability.grants.eligible', 'Eligible')}
-              </div>
-            </div>
-
+          <div className="mt-16 grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
+            {/* LIFE Programme */}
             <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
               <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
                 <Recycle className="w-6 h-6 text-purple-600" />
               </div>
-              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.circular_economy', 'Circular Economy')}</h4>
-              <p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.circular_economy_req', 'Requires 15% reduction')}</p>
+              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.life_circular_economy', 'LIFE Programme')}</h4>
+              <p className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.grants.life_circular_economy_req', 'Requires 15% reduction')}</p>
+              <p className="text-xs font-semibold text-purple-600 dark:text-purple-400 mb-2">{t('landing:sustainability.grants.life_circular_economy_funding', '€73M available')}</p>
               <div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
                 <CheckCircle2 className="w-3 h-3" />
                 {t('landing:sustainability.grants.eligible', 'Eligible')}
               </div>
             </div>
 
+            {/* Horizon Europe */}
+            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
+              <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <Award className="w-6 h-6 text-blue-600" />
+              </div>
+              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.horizon_europe_cluster_6', 'Horizon Europe')}</h4>
+              <p className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.grants.horizon_europe_cluster_6_req', 'Requires 20% reduction')}</p>
+              <p className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-2">{t('landing:sustainability.grants.horizon_europe_cluster_6_funding', '€880M+ annually')}</p>
+              <div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
+                <CheckCircle2 className="w-3 h-3" />
+                {t('landing:sustainability.grants.eligible', 'Eligible')}
+              </div>
+            </div>
+
+            {/* Fedima Grant */}
+            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
+              <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <Leaf className="w-6 h-6 text-orange-600" />
+              </div>
+              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.fedima_sustainability_grant', 'Fedima Grant')}</h4>
+              <p className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.grants.fedima_sustainability_grant_req', 'Requires 15% reduction')}</p>
+              <p className="text-xs font-semibold text-orange-600 dark:text-orange-400 mb-2">{t('landing:sustainability.grants.fedima_sustainability_grant_funding', '€20,000 per award')}</p>
+              <div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
+                <CheckCircle2 className="w-3 h-3" />
+                {t('landing:sustainability.grants.eligible', 'Eligible')}
+              </div>
+            </div>
+
+            {/* EIT Food */}
+            <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center">
+              <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <Leaf className="w-6 h-6 text-green-600" />
+              </div>
+              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.eit_food_retail', 'EIT Food')}</h4>
+              <p className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.grants.eit_food_retail_req', 'Requires 20% reduction')}</p>
+              <p className="text-xs font-semibold text-green-600 dark:text-green-400 mb-2">{t('landing:sustainability.grants.eit_food_retail_funding', '€15-45k per project')}</p>
+              <div className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
+                <CheckCircle2 className="w-3 h-3" />
+                {t('landing:sustainability.grants.eligible', 'Eligible')}
+              </div>
+            </div>
+
+            {/* UN SDG Certification */}
             <div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-amber-500 transition-all duration-300 text-center">
               <div className="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
                 <Target className="w-6 h-6 text-amber-600" />
               </div>
-              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.un_sdg', 'UN SDG Certified')}</h4>
-              <p className="text-xs text-[var(--text-secondary)] mb-2">{t('landing:sustainability.grants.un_sdg_req', 'Requires 50% reduction')}</p>
+              <h4 className="font-bold text-[var(--text-primary)] mb-2">{t('landing:sustainability.grants.un_sdg', 'UN SDG 12.3')}</h4>
+              <p className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.grants.un_sdg_req', 'Requires 50% reduction')}</p>
+              <p className="text-xs font-semibold text-amber-600 dark:text-amber-400 mb-2">Certification</p>
               <div className="inline-flex items-center gap-1 px-3 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-semibold">
                 <TrendingUp className="w-3 h-3" />
                 {t('landing:sustainability.grants.on_track', 'On Track')}