Improve the frontend and repository layer
This commit is contained in:
Urtzi Alfaro
@@ -25,7 +25,14 @@ import {
|
||||
Settings,
|
||||
Brain,
|
||||
Store,
|
||||
Network
|
||||
Network,
|
||||
Leaf,
|
||||
Droplets,
|
||||
TreeDeciduous,
|
||||
Target,
|
||||
CheckCircle2,
|
||||
Sparkles,
|
||||
Recycle
|
||||
} from 'lucide-react';
|
||||
|
||||
const LandingPage: React.FC = () => {
|
||||
@@ -574,6 +581,187 @@ const LandingPage: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Sustainability & SDG Compliance Section */}
|
||||
<section className="py-24 bg-gradient-to-b from-green-50 to-white dark:from-green-950/20 dark:to-[var(--bg-secondary)]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-sm font-semibold mb-6">
|
||||
<Leaf className="w-4 h-4" />
|
||||
{t('landing:sustainability.badge', 'UN SDG 12.3 & EU Green Deal Aligned')}
|
||||
</div>
|
||||
<h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)]">
|
||||
{t('landing:sustainability.title_main', 'Not Just Reduce Waste')}
|
||||
<span className="block text-transparent bg-clip-text bg-gradient-to-r from-green-600 to-emerald-600 mt-2">
|
||||
{t('landing:sustainability.title_accent', 'Prove It to the World')}
|
||||
</span>
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-[var(--text-secondary)] max-w-3xl mx-auto">
|
||||
{t('landing:sustainability.subtitle', 'The only AI platform with built-in UN SDG 12.3 compliance tracking. Reduce waste, save money, and qualify for EU sustainability grants—all with verifiable environmental impact metrics.')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Environmental Impact Cards */}
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||||
{/* CO2 Savings */}
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-green-200 dark:border-green-900/50 hover:border-green-400 dark:hover:border-green-600 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 mx-auto">
|
||||
<TreeDeciduous className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-green-600 dark:text-green-400 mb-2">855 kg</div>
|
||||
<div className="text-sm font-semibold text-[var(--text-primary)] mb-2">{t('landing:sustainability.metrics.co2_avoided', 'CO₂ Avoided Monthly')}</div>
|
||||
<div className="text-xs text-[var(--text-secondary)]">{t('landing:sustainability.metrics.co2_equivalent', 'Equivalent to 43 trees planted')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Water Savings */}
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-blue-200 dark:border-blue-900/50 hover:border-blue-400 dark:hover:border-blue-600 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mb-6 mx-auto">
|
||||
<Droplets className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">675k L</div>
|
||||
<div className="text-sm font-semibold text-[var(--text-primary)] mb-2">{t('landing:sustainability.metrics.water_saved', 'Water Saved Monthly')}</div>
|
||||
<div className="text-xs text-[var(--text-secondary)]">{t('landing:sustainability.metrics.water_equivalent', 'Equivalent to 4,500 showers')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grant Eligibility */}
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-amber-200 dark:border-amber-900/50 hover:border-amber-400 dark:hover:border-amber-600 transition-all duration-300">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6 mx-auto">
|
||||
<Award className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-amber-600 dark:text-amber-400 mb-2">3+</div>
|
||||
<div className="text-sm font-semibold text-[var(--text-primary)] mb-2">{t('landing:sustainability.metrics.grants_eligible', 'Grant Programs Eligible')}</div>
|
||||
<div className="text-xs text-[var(--text-secondary)]">{t('landing:sustainability.metrics.grants_value', 'Up to €50,000 in funding')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SDG Progress Visualization */}
|
||||
<div className="bg-gradient-to-r from-green-500/10 to-emerald-500/10 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl p-10 border border-green-300 dark:border-green-800">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-8">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-green-600 rounded-xl flex items-center justify-center">
|
||||
<Target className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)]">{t('landing:sustainability.sdg.title', 'UN SDG 12.3 Compliance')}</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.subtitle', 'Halve food waste by 2030')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[var(--text-secondary)] mb-6">
|
||||
{t('landing:sustainability.sdg.description', 'Real-time tracking toward the UN Sustainable Development Goal 12.3 target. Our AI helps you achieve 50% waste reduction with verifiable, auditable data for grant applications and certifications.')}
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.features.tracking', 'Automated waste baseline and progress tracking')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.features.export', 'One-click grant application report export')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">{t('landing:sustainability.sdg.features.certification', 'Certification-ready environmental impact data')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 w-full">
|
||||
<div className="bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 shadow-lg">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="text-sm font-semibold text-[var(--text-primary)]">{t('landing:sustainability.sdg.progress_label', 'Progress to Target')}</span>
|
||||
<span className="text-2xl font-bold text-green-600">65%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-green-500 to-emerald-500 h-6 rounded-full flex items-center justify-end pr-3" style={{ width: '65%' }}>
|
||||
<TrendingUp className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<div className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.sdg.baseline', 'Baseline')}</div>
|
||||
<div className="text-lg font-bold text-[var(--text-primary)]">25%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.sdg.current', 'Current')}</div>
|
||||
<div className="text-lg font-bold text-green-600">16.25%</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-[var(--text-secondary)] mb-1">{t('landing:sustainability.sdg.target', 'Target 2030')}</div>
|
||||
<div className="text-lg font-bold text-[var(--text-primary)]">12.5%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="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>
|
||||
<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-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>
|
||||
<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')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Unique Differentiator Callout */}
|
||||
<div className="mt-16 text-center">
|
||||
<div className="inline-flex flex-col items-center gap-4 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-2xl px-12 py-8">
|
||||
<Sparkles className="w-12 h-12" />
|
||||
<h3 className="text-2xl font-bold">{t('landing:sustainability.differentiator.title', 'The Only AI Platform')}</h3>
|
||||
<p className="text-lg max-w-2xl">{t('landing:sustainability.differentiator.description', 'With built-in UN SDG 12.3 tracking, real-time environmental impact calculations, and one-click grant application exports. Not just reduce waste—prove it.')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section - Problem/Solution Focus */}
|
||||
<section id="benefits" className="py-24 bg-[var(--bg-primary)]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
Reference in New Issue
Block a user