From 6c6be6f5a5572bd40aaee12184f9c36135228299 Mon Sep 17 00:00:00 2001 From: Urtzi Alfaro Date: Mon, 5 Jan 2026 19:51:28 +0100 Subject: [PATCH] Improve public pages --- .../src/components/layout/Footer/Footer.tsx | 2 +- .../layout/Footer/Footer.tsx.backup | 481 ------------------ frontend/src/locales/es/common.json | 2 +- frontend/src/pages/public/FeaturesPage.tsx | 77 +-- frontend/src/pages/public/LandingPage.tsx | 51 +- 5 files changed, 51 insertions(+), 562 deletions(-) delete mode 100644 frontend/src/components/layout/Footer/Footer.tsx.backup diff --git a/frontend/src/components/layout/Footer/Footer.tsx b/frontend/src/components/layout/Footer/Footer.tsx index e554d64d..29ef67b4 100644 --- a/frontend/src/components/layout/Footer/Footer.tsx +++ b/frontend/src/components/layout/Footer/Footer.tsx @@ -196,7 +196,7 @@ export const Footer = forwardRef(({ links: [ { id: 'about', label: t('common:footer.links.about', 'Acerca de'), href: '/about' }, { id: 'blog', label: t('common:footer.links.blog', 'Blog'), href: '/blog' }, - { id: 'careers', label: t('common:footer.links.careers', 'Carreras'), href: '/careers' }, + { id: 'careers', label: t('common:footer.links.careers', 'Empleo'), href: '/careers' }, ], }, ]; diff --git a/frontend/src/components/layout/Footer/Footer.tsx.backup b/frontend/src/components/layout/Footer/Footer.tsx.backup deleted file mode 100644 index 8284cbc9..00000000 --- a/frontend/src/components/layout/Footer/Footer.tsx.backup +++ /dev/null @@ -1,481 +0,0 @@ -import React, { forwardRef } from 'react'; -import { clsx } from 'clsx'; -import { Link } from 'react-router-dom'; -import { Button } from '../../ui'; -import { - Heart, - ExternalLink, - Mail, - Phone, - MapPin, - Github, - Twitter, - Linkedin, - Globe, - Shield, - FileText, - HelpCircle, - MessageSquare -} from 'lucide-react'; - -export interface FooterLink { - id: string; - label: string; - href: string; - external?: boolean; - icon?: React.ComponentType<{ className?: string }>; -} - -export interface FooterSection { - id: string; - title: string; - links: FooterLink[]; -} - -export interface SocialLink { - id: string; - label: string; - href: string; - icon: React.ComponentType<{ className?: string }>; -} - -export interface CompanyInfo { - name: string; - description?: string; - logo?: React.ReactNode; - email?: string; - phone?: string; - address?: string; - website?: string; -} - -export interface FooterProps { - className?: string; - /** - * Company information - */ - companyInfo?: CompanyInfo; - /** - * Footer sections with links - */ - sections?: FooterSection[]; - /** - * Social media links - */ - socialLinks?: SocialLink[]; - /** - * Copyright text (auto-generated if not provided) - */ - copyrightText?: string; - /** - * Show version info - */ - showVersion?: boolean; - /** - * Version string - */ - version?: string; - /** - * Show language selector - */ - showLanguageSelector?: boolean; - /** - * Available languages - */ - languages?: Array<{ code: string; name: string }>; - /** - * Current language - */ - currentLanguage?: string; - /** - * Language change handler - */ - onLanguageChange?: (language: string) => void; - /** - * Show theme toggle - */ - showThemeToggle?: boolean; - /** - * Theme toggle handler - */ - onThemeToggle?: () => void; - /** - * Show privacy links - */ - showPrivacyLinks?: boolean; - /** - * Compact mode (smaller footer) - */ - compact?: boolean; - /** - * Custom content - */ - children?: React.ReactNode; -} - -export interface FooterRef { - scrollIntoView: () => void; -} - -/** - * Footer - Application footer with links and copyright info - * - * Features: - * - Company information and branding - * - Organized link sections for easy navigation - * - Social media links with proper icons - * - Copyright notice with automatic year - * - Version information display - * - Language selector for i18n - * - Privacy and legal links - * - Responsive design with mobile adaptations - * - Accessible link handling with external indicators - * - Customizable sections and content - */ -export const Footer = forwardRef(({ - className, - companyInfo, - sections, - socialLinks, - copyrightText, - showVersion = true, - version = '2.0.0', - showLanguageSelector = false, - languages = [], - currentLanguage = 'es', - onLanguageChange, - showThemeToggle = false, - onThemeToggle, - showPrivacyLinks = true, - compact = false, - children, -}, ref) => { - const footerRef = React.useRef(null); - const currentYear = new Date().getFullYear(); - - // Default company info - const defaultCompanyInfo: CompanyInfo = { - name: 'Panadería IA', - description: 'Sistema inteligente de gestión para panaderías. Optimiza tu producción, inventario y ventas con inteligencia artificial.', - email: 'contacto@panaderia-ia.com', - website: 'https://panaderia-ia.com', - }; - - const company = companyInfo || defaultCompanyInfo; - - // Default sections - const defaultSections: FooterSection[] = [ - { - id: 'product', - title: 'Producto', - links: [ - { id: 'dashboard', label: 'Dashboard', href: '/dashboard' }, - { id: 'inventory', label: 'Inventario', href: '/inventory' }, - { id: 'production', label: 'Producción', href: '/production' }, - { id: 'sales', label: 'Ventas', href: '/sales' }, - { id: 'forecasting', label: 'Predicciones', href: '/forecasting' }, - ], - }, - { - id: 'support', - title: 'Soporte', - links: [ - { id: 'help', label: 'Centro de Ayuda', href: '/help', icon: HelpCircle }, - { id: 'docs', label: 'Documentación', href: '/help/docs', icon: FileText }, - { id: 'contact', label: 'Contacto', href: '/help/support', icon: MessageSquare }, - { id: 'feedback', label: 'Feedback', href: '/help/feedback' }, - ], - }, - { - id: 'company', - title: 'Empresa', - links: [ - { id: 'about', label: 'Acerca de', href: '/about', external: true }, - { id: 'blog', label: 'Blog', href: 'https://blog.panaderia-ia.com', external: true }, - { id: 'careers', label: 'Carreras', href: 'https://careers.panaderia-ia.com', external: true }, - { id: 'press', label: 'Prensa', href: '/press', external: true }, - ], - }, - ]; - - const footerSections = sections || defaultSections; - - // Default social links - const defaultSocialLinks: SocialLink[] = [ - { - id: 'github', - label: 'GitHub', - href: 'https://github.com/panaderia-ia', - icon: Github, - }, - { - id: 'twitter', - label: 'Twitter', - href: 'https://twitter.com/panaderia_ia', - icon: Twitter, - }, - { - id: 'linkedin', - label: 'LinkedIn', - href: 'https://linkedin.com/company/panaderia-ia', - icon: Linkedin, - }, - ]; - - const socialLinksToShow = socialLinks || defaultSocialLinks; - - // Privacy links - const privacyLinks: FooterLink[] = [ - { id: 'privacy', label: 'Privacidad', href: '/privacy', icon: Shield }, - { id: 'terms', label: 'Términos', href: '/terms', icon: FileText }, - { id: 'cookies', label: 'Cookies', href: '/cookies' }, - ]; - - // Scroll into view - const scrollIntoView = React.useCallback(() => { - footerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); - }, []); - - // Expose ref methods - React.useImperativeHandle(ref, () => ({ - scrollIntoView, - }), [scrollIntoView]); - - // Render link - const renderLink = (link: FooterLink) => { - const LinkIcon = link.icon; - - const linkContent = ( - - {LinkIcon && } - {link.label} - {link.external && } - - ); - - if (link.external) { - return ( - - {linkContent} - - ); - } - - return ( - - {linkContent} - - ); - }; - - // Render social link - const renderSocialLink = (social: SocialLink) => { - const SocialIcon = social.icon; - - return ( - - - - ); - }; - - return ( -
-
- {!compact && ( - <> - {/* Main footer content */} -
- {/* Company info */} -
-
- {company.logo || ( -
- PI -
- )} - - {company.name} - -
- - {company.description && ( -

- {company.description} -

- )} - - {/* Contact info */} -
- {company.email && ( - - - {company.email} - - )} - - {company.phone && ( - - - {company.phone} - - )} - - {company.address && ( -
- - {company.address} -
- )} - - {company.website && ( - - - {company.website} - - - )} -
-
- - {/* Footer sections */} - {footerSections.map(section => ( -
-

- {section.title} -

-
    - {section.links.map(link => ( -
  • - {renderLink(link)} -
    • - ))} -
-
- ))} -
- - {/* Social links */} - {socialLinksToShow.length > 0 && ( -
- {socialLinksToShow.map(renderSocialLink)} -
- )} - - {/* Custom children */} - {children && ( -
- {children} -
- )} - - )} - - {/* Bottom bar */} -
- {/* Copyright and version */} -
-
- © {currentYear} - {company.name} - - Hecho en España -
- - {showVersion && ( -
- v{version} -
- )} -
- - {/* Right side utilities */} -
- {/* Language selector */} - {showLanguageSelector && languages.length > 0 && ( - - )} - - {/* Theme toggle */} - {showThemeToggle && ( - - )} - - {/* Privacy links */} - {showPrivacyLinks && ( -
- {privacyLinks.map(link => renderLink(link))} -
- )} -
-
- - {/* Copyright text override */} - {copyrightText && ( -
- {copyrightText} -
- )} -
-
- ); -}); - -Footer.displayName = 'Footer'; \ No newline at end of file diff --git a/frontend/src/locales/es/common.json b/frontend/src/locales/es/common.json index ecb67f68..c793d1cb 100644 --- a/frontend/src/locales/es/common.json +++ b/frontend/src/locales/es/common.json @@ -371,7 +371,7 @@ "feedback": "Feedback", "about": "Acerca de", "blog": "Blog", - "careers": "Carreras", + "careers": "Empleo", "press": "Prensa", "privacy": "Privacidad", "terms": "Términos", diff --git a/frontend/src/pages/public/FeaturesPage.tsx b/frontend/src/pages/public/FeaturesPage.tsx index 1a5e2b3f..3fbdc4b8 100644 --- a/frontend/src/pages/public/FeaturesPage.tsx +++ b/frontend/src/pages/public/FeaturesPage.tsx @@ -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 = () => { - {/* Final CTA */} -
- {/* Background Pattern */} -
- -
- -
-
- - {t('cta.badge', 'Prueba Gratuita Disponible')} -
- -

- {t('cta.title', 'Ver Bakery-IA en Acción')} -

- -

- {t('cta.subtitle', 'Solicita una demo personalizada para tu panadería')} -

- -
- - - -
- -
-
- - {t('cta.feature1', 'Sin compromiso')} -
-
- - {t('cta.feature2', 'Configuración en minutos')} -
-
- - {t('cta.feature3', 'Soporte dedicado')} -
-
-
- + {/* Final CTA - Replicated from AboutPage */} +
+
+

+ {t('about:cta.title')} +

+

+ {t('about:cta.subtitle')} +

+
+ + {t('about:cta.primary')} + + + + {t('about:cta.secondary')} + +
diff --git a/frontend/src/pages/public/LandingPage.tsx b/frontend/src/pages/public/LandingPage.tsx index f297a45b..1ef573a6 100644 --- a/frontend/src/pages/public/LandingPage.tsx +++ b/frontend/src/pages/public/LandingPage.tsx @@ -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 = () => {
- {/* Final CTA */} -
+ {/* Final CTA - Replicated from AboutPage */} +
- -

- {t('landing:final_cta.title', 'Deja de Perder €2,000 al Mes en Desperdicios')} -

-

- {t('landing:final_cta.subtitle', 'Únete a las primeras 20 panaderías. Solo quedan 12 plazas.')} -

-
- - - -
-

- - {t('landing:final_cta.guarantee', 'Tarjeta requerida. Sin cargo por 3 meses. Cancela cuando quieras.')} -

- +

+ {t('about:cta.title')} +

+

+ {t('about:cta.subtitle')} +

+
+ + {t('about:cta.primary')} + + + + {t('about:cta.secondary')} + +