Improve public pages 2
This commit is contained in:
Urtzi Alfaro
@@ -3,7 +3,6 @@ import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { PublicLayout } from '../../components/layout';
|
||||
import {
|
||||
Button,
|
||||
ProgressBar,
|
||||
FloatingCTA,
|
||||
ScrollReveal,
|
||||
@@ -14,7 +13,6 @@ import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
Badge
|
||||
} from '../../components/ui';
|
||||
import { getDemoUrl } from '../../utils/navigation';
|
||||
import {
|
||||
@@ -25,10 +23,7 @@ import {
|
||||
Leaf,
|
||||
Store,
|
||||
CheckCircle2,
|
||||
Calendar,
|
||||
Package,
|
||||
AlertTriangle,
|
||||
Euro,
|
||||
Globe,
|
||||
School,
|
||||
Building2,
|
||||
@@ -37,14 +32,15 @@ import {
|
||||
Cloud,
|
||||
PartyPopper,
|
||||
ArrowRight,
|
||||
Zap,
|
||||
Target,
|
||||
TreeDeciduous,
|
||||
Droplets,
|
||||
Award,
|
||||
Database,
|
||||
FileText,
|
||||
Sparkles
|
||||
Sparkles,
|
||||
Cpu,
|
||||
Smartphone
|
||||
} from 'lucide-react';
|
||||
|
||||
const FeaturesPage: React.FC = () => {
|
||||
@@ -913,6 +909,109 @@ const FeaturesPage: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Condensed Roadmap Section */}
|
||||
<section id="roadmap-preview" className="py-20 bg-[var(--bg-primary)] border-t border-[var(--border-primary)]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal variant="fadeUp" delay={0.1}>
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 bg-purple-500/10 dark:bg-purple-500/20 border border-purple-500/20 dark:border-purple-500/30 text-purple-600 dark:text-purple-400 px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<Sparkles className="w-5 h-5" />
|
||||
<span>{t('roadmap.badge')}</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-4">
|
||||
{t('roadmap.title')}
|
||||
<span className="block bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
|
||||
{t('roadmap.highlight')}
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
|
||||
{t('roadmap.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<ScrollReveal variant="fadeUp" delay={0.2}>
|
||||
<Card className="h-full border-t-4 border-t-purple-500 bg-[var(--bg-secondary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<Cpu className="w-6 h-6 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold">{t('roadmap.iot.title')}</h3>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p className="text-[var(--text-secondary)] mb-4">
|
||||
{t('roadmap.iot.description')}
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-[var(--text-tertiary)]">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-purple-500" />
|
||||
{t('roadmap.iot.item1')}
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-purple-500" />
|
||||
{t('roadmap.iot.item2')}
|
||||
</li>
|
||||
</ul>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal variant="fadeUp" delay={0.3}>
|
||||
<Card className="h-full border-t-4 border-t-blue-500 bg-[var(--bg-secondary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<Smartphone className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold">{t('roadmap.staff_app.title')}</h3>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p className="text-[var(--text-secondary)] mb-4">
|
||||
{t('roadmap.staff_app.description')}
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-[var(--text-tertiary)]">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-blue-500" />
|
||||
{t('roadmap.staff_app.item1')}
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-blue-500" />
|
||||
{t('roadmap.staff_app.item2')}
|
||||
</li>
|
||||
</ul>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal variant="fadeUp" delay={0.4}>
|
||||
<Card className="h-full border-t-4 border-t-green-500 bg-[var(--bg-secondary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<ArrowRight className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold">{t('roadmap.ecosystem.title')}</h3>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p className="text-[var(--text-secondary)] mb-4">
|
||||
{t('roadmap.ecosystem.description')}
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-[var(--text-tertiary)]">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
||||
{t('roadmap.ecosystem.item1')}
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
||||
{t('roadmap.ecosystem.item2')}
|
||||
</li>
|
||||
</ul>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA - Replicated from AboutPage */}
|
||||
<section className="py-20 bg-gradient-to-r from-[var(--color-primary)] to-orange-600">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
|
||||
Reference in New Issue
Block a user