Improve public pages
This commit is contained in:
Urtzi Alfaro
@@ -48,7 +48,7 @@ import {
|
||||
} from 'lucide-react';
|
||||
|
||||
const FeaturesPage: React.FC = () => {
|
||||
const { t } = useTranslation('features');
|
||||
const { t } = useTranslation(['features', 'about']);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Automatic System Timeline Steps
|
||||
@@ -913,57 +913,30 @@ const FeaturesPage: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="relative overflow-hidden py-24 bg-[var(--bg-secondary)] border-y border-[var(--border-primary)]">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-pattern opacity-30"></div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal variant="fadeUp">
|
||||
<div className="text-center space-y-6">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 mb-4">
|
||||
<Sparkles className="w-5 h-5 text-[var(--color-primary)]" />
|
||||
<span className="text-sm font-medium text-[var(--color-primary)]">{t('cta.badge', 'Prueba Gratuita Disponible')}</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-6 leading-tight">
|
||||
{t('cta.title', 'Ver Bakery-IA en Acción')}
|
||||
</h2>
|
||||
|
||||
<p className="text-xl lg:text-2xl text-[var(--text-secondary)] mb-8 max-w-2xl mx-auto leading-relaxed">
|
||||
{t('cta.subtitle', 'Solicita una demo personalizada para tu panadería')}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
|
||||
<Link to={getDemoUrl()} className="w-full sm:w-auto">
|
||||
<Button
|
||||
size="xl"
|
||||
variant="primary"
|
||||
className="w-full sm:w-auto px-12 py-6 text-xl font-bold shadow-2xl hover:shadow-orange-500/20 transform hover:scale-105 transition-all group"
|
||||
>
|
||||
<Sparkles className="mr-2 w-6 h-6" />
|
||||
{t('cta.button', 'Solicitar Demo')}
|
||||
<ArrowRight className="ml-3 w-6 h-6 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-8 pt-8 text-sm text-[var(--text-tertiary)]">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
|
||||
<span>{t('cta.feature1', 'Sin compromiso')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
|
||||
<span>{t('cta.feature2', 'Configuración en minutos')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
|
||||
<span>{t('cta.feature3', 'Soporte dedicado')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
{/* 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">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-white mb-6">
|
||||
{t('about:cta.title')}
|
||||
</h2>
|
||||
<p className="text-xl text-white/90 mb-8 leading-relaxed">
|
||||
{t('about:cta.subtitle')}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
to="/register"
|
||||
className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-[var(--color-primary)] rounded-xl font-bold hover:shadow-2xl transition-all hover:scale-105"
|
||||
>
|
||||
<span>{t('about:cta.primary')}</span>
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</Link>
|
||||
<Link
|
||||
to="/demo"
|
||||
className="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-white text-white rounded-xl font-bold hover:bg-white hover:text-[var(--color-primary)] transition-all"
|
||||
>
|
||||
<span>{t('about:cta.secondary')}</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PublicLayout>
|
||||
|
||||
@@ -26,7 +26,7 @@ import {
|
||||
} from 'lucide-react';
|
||||
|
||||
const LandingPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useTranslation(['landing', 'about']);
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
@@ -671,33 +671,30 @@ const LandingPage: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="py-24 bg-[var(--bg-secondary)] border-y border-[var(--border-primary)]">
|
||||
{/* 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">
|
||||
<ScrollReveal variant="fadeUp">
|
||||
<h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-6">
|
||||
{t('landing:final_cta.title', 'Deja de Perder €2,000 al Mes en Desperdicios')}
|
||||
</h2>
|
||||
<p className="text-xl text-[var(--text-secondary)] mb-10 max-w-2xl mx-auto">
|
||||
{t('landing:final_cta.subtitle', 'Únete a las primeras 20 panaderías. Solo quedan 12 plazas.')}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<Link to={getRegisterUrl()} className="w-full sm:w-auto">
|
||||
<Button
|
||||
size="xl"
|
||||
variant="primary"
|
||||
className="w-full sm:w-auto px-12 py-6 text-xl font-bold shadow-2xl hover:shadow-orange-500/20 transform hover:scale-105 transition-all"
|
||||
>
|
||||
{t('landing:final_cta.button', 'Comenzar Ahora')}
|
||||
<ArrowRight className="ml-3 w-6 h-6" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<p className="mt-8 text-[var(--text-tertiary)] text-sm font-medium">
|
||||
<CheckCircle2 className="inline-block w-4 h-4 mr-2 text-green-500" />
|
||||
{t('landing:final_cta.guarantee', 'Tarjeta requerida. Sin cargo por 3 meses. Cancela cuando quieras.')}
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-white mb-6">
|
||||
{t('about:cta.title')}
|
||||
</h2>
|
||||
<p className="text-xl text-white/90 mb-8 leading-relaxed">
|
||||
{t('about:cta.subtitle')}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
to="/register"
|
||||
className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-[var(--color-primary)] rounded-xl font-bold hover:shadow-2xl transition-all hover:scale-105"
|
||||
>
|
||||
<span>{t('about:cta.primary')}</span>
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</Link>
|
||||
<Link
|
||||
to="/demo"
|
||||
className="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-white text-white rounded-xl font-bold hover:bg-white hover:text-[var(--color-primary)] transition-all"
|
||||
>
|
||||
<span>{t('about:cta.secondary')}</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PublicLayout>
|
||||
|
||||
Reference in New Issue
Block a user