389 lines
16 KiB
TypeScript
389 lines
16 KiB
TypeScript
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;
|