Improve public pages

frontend/src/pages/public/CareersPage.tsx

@@ -0,0 +1,388 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { PublicLayout } from '../../components/layout';
+import {
+  Briefcase,
+  MapPin,
+  Clock,
+  Euro,
+  Users,
+  Heart,
+  Zap,
+  Globe,
+  Laptop,
+  Coffee,
+  TrendingUp,
+  Award,
+  Mail,
+  ArrowRight,
+  Code,
+  Palette,
+  BarChart3
+} from 'lucide-react';
+
+interface JobOpening {
+  id: string;
+  title: string;
+  department: string;
+  location: string;
+  type: string;
+  salary?: string;
+  description: string;
+  requirements: string[];
+  niceToHave: string[];
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+const CareersPage: React.FC = () => {
+  const { t } = useTranslation();
+
+  const benefits = [
+    {
+      icon: Laptop,
+      title: 'Trabajo Remoto',
+      description: '100% remoto o híbrido según prefieras. Tenemos oficina en Bilbao pero puedes trabajar desde donde quieras.',
+    },
+    {
+      icon: Clock,
+      title: 'Horario Flexible',
+      description: 'Enfócate en resultados, no en horas. Organiza tu día como mejor funcione para ti.',
+    },
+    {
+      icon: Euro,
+      title: 'Salario Competitivo',
+      description: 'Sueldos por encima de mercado + equity en la empresa para fundadores tempranos.',
+    },
+    {
+      icon: TrendingUp,
+      title: 'Crecimiento Real',
+      description: 'Somos una startup en fase temprana. Aquí aprendes rápido y tu impacto se ve directamente.',
+    },
+    {
+      icon: Heart,
+      title: 'Propósito',
+      description: 'Ayuda a negocios reales a prosperar. Tu trabajo tiene impacto tangible en familias.',
+    },
+    {
+      icon: Users,
+      title: 'Equipo Pequeño',
+      description: 'Sin burocracia, sin reuniones inútiles. Decisiones rápidas, ejecución directa.',
+    },
+  ];
+
+  const openPositions: JobOpening[] = [
+    {
+      id: '1',
+      title: 'Full Stack Developer (React + Python)',
+      department: 'Ingeniería',
+      location: 'Remoto (España)',
+      type: 'Tiempo completo',
+      salary: '€45,000 - €65,000 + equity',
+      description: 'Buscamos un desarrollador full-stack que nos ayude a construir la mejor plataforma de gestión para panaderías de todos los tamaños y modelos. Trabajarás directamente con los fundadores y tendrás ownership completo de features.',
+      requirements: [
+        '3+ años de experiencia con React y TypeScript',
+        '2+ años con Python (FastAPI, Flask o Django)',
+        'Experiencia con bases de datos (PostgreSQL)',
+        'Git, CI/CD, testing',
+        'Capacidad de trabajar autónomamente',
+      ],
+      niceToHave: [
+        'Experiencia con ML/IA',
+        'Background en startups',
+        'Conocimiento del sector F&B/hostelería',
+        'Contribuciones open source',
+      ],
+      icon: Code,
+    },
+    {
+      id: '2',
+      title: 'ML Engineer (Predicción de Demanda)',
+      department: 'IA/ML',
+      location: 'Remoto (España)',
+      type: 'Tiempo completo',
+      salary: '€50,000 - €70,000 + equity',
+      description: 'Lidera el desarrollo de nuestros algoritmos de predicción. Trabajarás con datos reales de panaderías (locales y obradores centrales) para crear modelos que predicen demanda con >90% precisión, tanto a nivel individual como agregado.',
+      requirements: [
+        'MSc o PhD en CS, Matemáticas, o similar',
+        '3+ años trabajando con ML en producción',
+        'Experiencia con time series forecasting',
+        'Python (scikit-learn, TensorFlow/PyTorch)',
+        'SQL y manejo de grandes datasets',
+      ],
+      niceToHave: [
+        'Publicaciones en ML/IA',
+        'Experiencia con MLOps',
+        'Background en retail/forecasting/supply chain',
+        'Kaggle competitions',
+      ],
+      icon: BarChart3,
+    },
+    {
+      id: '3',
+      title: 'Product Designer (UI/UX)',
+      department: 'Diseño',
+      location: 'Remoto (España)',
+      type: 'Freelance/Tiempo parcial',
+      salary: '€30,000 - €45,000 (parcial)',
+      description: 'Diseña interfaces que panaderos puedan usar incluso con las manos llenas de harina. Necesitamos UX/UI funcional, intuitivo y hermoso para usuarios no-técnicos.',
+      requirements: [
+        '3+ años diseñando productos digitales',
+        'Portfolio con casos de estudio reales',
+        'Experiencia con Figma',
+        'Conocimiento de design systems',
+        'User research y testing',
+      ],
+      niceToHave: [
+        'Experiencia en B2B/SaaS',
+        'Conocimiento de front-end (HTML/CSS)',
+        'Ilustración/motion design',
+        'Background en F&B/hostelería',
+      ],
+      icon: Palette,
+    },
+  ];
+
+  const cultureFacts = [
+    'Somos un equipo de 5 personas (por ahora)',
+    'Promedio de edad: 32 años',
+    'Daily standups de 10 minutos máximo',
+    '80% del equipo trabaja remoto',
+    'Viernes terminamos a las 14:00',
+    'Budget para cursos y conferencias',
+    'Equipo multilingüe (ES/EN/EU)',
+    'Sin dress code (incluso en videollamadas)',
+  ];
+
+  return (
+    <PublicLayout
+      variant="default"
+      contentPadding="default"
+      headerProps={{
+        showThemeToggle: true,
+        showAuthButtons: true,
+        showLanguageSelector: true,
+        variant: "default"
+      }}
+    >
+      {/* Hero Section */}
+      <section className="bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-4xl mx-auto">
+            <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
+              <Briefcase className="w-4 h-4" />
+              <span>Estamos Contratando</span>
+            </div>
+            <h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
+              Construye el Futuro de
+              <span className="block text-[var(--color-primary)]">las Panaderías</span>
+            </h1>
+            <p className="text-xl text-[var(--text-secondary)] leading-relaxed mb-8">
+              Únete a una startup en fase temprana que combina IA, sostenibilidad y pasión por ayudar a negocios reales de todos los tamaños.
+              Somos pequeños, ágiles y con un propósito claro.
+            </p>
+            <div className="flex items-center justify-center gap-6 text-sm text-[var(--text-tertiary)]">
+              <div className="flex items-center gap-2">
+                <MapPin className="w-4 h-4" />
+                <span>Remoto/Híbrido</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Users className="w-4 h-4" />
+                <span>Equipo de 5</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Globe className="w-4 h-4" />
+                <span>100% España</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Benefits */}
+      <section className="py-20 bg-[var(--bg-primary)]">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
+              ¿Por Qué Trabajar Con Nosotros?
+            </h2>
+            <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
+              Beneficios reales, no promesas vacías
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {benefits.map((benefit, index) => (
+              <div
+                key={index}
+                className="bg-[var(--bg-secondary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all duration-300"
+              >
+                <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center mb-4">
+                  <benefit.icon className="w-6 h-6 text-[var(--color-primary)]" />
+                </div>
+                <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">{benefit.title}</h3>
+                <p className="text-sm text-[var(--text-secondary)]">{benefit.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Open Positions */}
+      <section className="py-20 bg-[var(--bg-secondary)]">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
+              Posiciones Abiertas
+            </h2>
+            <p className="text-xl text-[var(--text-secondary)]">
+              {openPositions.length} vacantes disponibles
+            </p>
+          </div>
+
+          <div className="space-y-6">
+            {openPositions.map((job) => (
+              <div
+                key={job.id}
+                className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)] transition-all duration-300"
+              >
+                <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
+                  {/* Left: Job Info */}
+                  <div className="flex-1">
+                    <div className="flex items-start gap-4 mb-4">
+                      <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center flex-shrink-0">
+                        <job.icon className="w-6 h-6 text-[var(--color-primary)]" />
+                      </div>
+                      <div>
+                        <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-2">{job.title}</h3>
+                        <div className="flex flex-wrap items-center gap-4 text-sm text-[var(--text-secondary)]">
+                          <span className="inline-flex items-center gap-1">
+                            <Briefcase className="w-4 h-4" />
+                            {job.department}
+                          </span>
+                          <span className="inline-flex items-center gap-1">
+                            <MapPin className="w-4 h-4" />
+                            {job.location}
+                          </span>
+                          <span className="inline-flex items-center gap-1">
+                            <Clock className="w-4 h-4" />
+                            {job.type}
+                          </span>
+                          {job.salary && (
+                            <span className="inline-flex items-center gap-1 text-[var(--color-primary)] font-medium">
+                              <Euro className="w-4 h-4" />
+                              {job.salary}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    <p className="text-[var(--text-secondary)] mb-6">{job.description}</p>
+
+                    <div className="grid md:grid-cols-2 gap-6">
+                      {/* Requirements */}
+                      <div>
+                        <h4 className="font-bold text-[var(--text-primary)] mb-3">Requisitos:</h4>
+                        <ul className="space-y-2">
+                          {job.requirements.map((req, i) => (
+                            <li key={i} className="flex items-start gap-2 text-sm text-[var(--text-secondary)]">
+                              <Award className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
+                              <span>{req}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+
+                      {/* Nice to Have */}
+                      <div>
+                        <h4 className="font-bold text-[var(--text-primary)] mb-3">Valorable:</h4>
+                        <ul className="space-y-2">
+                          {job.niceToHave.map((item, i) => (
+                            <li key={i} className="flex items-start gap-2 text-sm text-[var(--text-secondary)]">
+                              <Zap className="w-4 h-4 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
+                              <span>{item}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Right: Apply Button */}
+                  <div className="flex flex-col gap-3 lg:min-w-[200px]">
+                    <a
+                      href={`mailto:careers@panaderia-ia.com?subject=Aplicación: ${job.title}`}
+                      className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-[var(--color-primary)] text-white rounded-xl font-bold hover:bg-[var(--color-primary-dark)] transition-all hover:scale-105"
+                    >
+                      <Mail className="w-5 h-5" />
+                      <span>Aplicar</span>
+                    </a>
+                    <Link
+                      to="/demo"
+                      className="inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-[var(--border-primary)] text-[var(--text-primary)] rounded-xl font-medium hover:border-[var(--color-primary)] transition-all text-center"
+                    >
+                      <span>Ver Producto</span>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Culture */}
+      <section className="py-20 bg-[var(--bg-primary)]">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
+              Nuestra Cultura
+            </h2>
+            <p className="text-xl text-[var(--text-secondary)]">
+              Datos reales, sin marketing
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-4">
+            {cultureFacts.map((fact, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-3 bg-[var(--bg-secondary)] p-4 rounded-lg border border-[var(--border-primary)]"
+              >
+                <Coffee className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0" />
+                <span className="text-[var(--text-secondary)]">{fact}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <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">
+            ¿No Ves Tu Posición Ideal?
+          </h2>
+          <p className="text-xl text-white/90 mb-8 leading-relaxed">
+            Siempre estamos abiertos a conocer talento excepcional.
+            Envíanos tu CV y cuéntanos por qué quieres unirte a Panadería IA.
+          </p>
+          <a
+            href="mailto:careers@panaderia-ia.com?subject=Aplicación Espontánea"
+            className="inline-flex items-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"
+          >
+            <Mail className="w-5 h-5" />
+            <span>Enviar Aplicación Espontánea</span>
+            <ArrowRight className="w-5 h-5" />
+          </a>
+          <p className="text-white/80 text-sm mt-6">
+            careers@panaderia-ia.com
+          </p>
+        </div>
+      </section>
+    </PublicLayout>
+  );
+};
+
+export default CareersPage;