diff --git a/apps/frontend/app/about/page.tsx b/apps/frontend/app/about/page.tsx new file mode 100644 index 0000000..caea7ca --- /dev/null +++ b/apps/frontend/app/about/page.tsx @@ -0,0 +1,476 @@ +'use client'; + +import { useRef } from 'react'; +import Link from 'next/link'; +import { motion, useInView } from 'framer-motion'; +import { + Ship, + Target, + Eye, + Heart, + Users, + TrendingUp, + Linkedin, + Calendar, + ArrowRight, +} from 'lucide-react'; +import { LandingHeader, LandingFooter } from '@/components/layout'; + +export default function AboutPage() { + const heroRef = useRef(null); + const missionRef = useRef(null); + const valuesRef = useRef(null); + const teamRef = useRef(null); + const timelineRef = useRef(null); + const statsRef = useRef(null); + + const isHeroInView = useInView(heroRef, { once: true }); + const isMissionInView = useInView(missionRef, { once: true }); + const isValuesInView = useInView(valuesRef, { once: true }); + const isTeamInView = useInView(teamRef, { once: true }); + const isTimelineInView = useInView(timelineRef, { once: true }); + const isStatsInView = useInView(statsRef, { once: true }); + + const values = [ + { + icon: Target, + title: 'Excellence', + description: + 'Nous visons l\'excellence dans chaque aspect de notre plateforme, en offrant une expérience utilisateur de premier ordre.', + color: 'from-blue-500 to-cyan-500', + }, + { + icon: Heart, + title: 'Transparence', + description: + 'Nous croyons en une communication ouverte et honnête avec nos clients, partenaires et employés.', + color: 'from-pink-500 to-rose-500', + }, + { + icon: Users, + title: 'Collaboration', + description: + 'Le succès se construit ensemble. Nous travaillons main dans la main avec nos clients pour atteindre leurs objectifs.', + color: 'from-purple-500 to-indigo-500', + }, + { + icon: TrendingUp, + title: 'Innovation', + description: + 'Nous repoussons constamment les limites de la technologie pour révolutionner le fret maritime.', + color: 'from-orange-500 to-amber-500', + }, + ]; + + const team = [ + { + name: 'Jean-Pierre Durand', + role: 'CEO & Co-fondateur', + bio: 'Ex-directeur chez Maersk, 20 ans d\'expérience dans le shipping', + image: '/assets/images/team/ceo.jpg', + linkedin: '#', + }, + { + name: 'Marie Lefebvre', + role: 'CTO & Co-fondatrice', + bio: 'Ex-Google, experte en plateformes B2B et systèmes distribués', + image: '/assets/images/team/cto.jpg', + linkedin: '#', + }, + { + name: 'Thomas Martin', + role: 'COO', + bio: 'Ex-CMA CGM, spécialiste des opérations maritimes internationales', + image: '/assets/images/team/coo.jpg', + linkedin: '#', + }, + { + name: 'Sophie Bernard', + role: 'VP Sales', + bio: '15 ans d\'expérience commerciale dans le secteur logistique', + image: '/assets/images/team/vp-sales.jpg', + linkedin: '#', + }, + { + name: 'Alexandre Petit', + role: 'VP Engineering', + bio: 'Ex-Uber Freight, expert en systèmes de réservation temps réel', + image: '/assets/images/team/vp-eng.jpg', + linkedin: '#', + }, + { + name: 'Claire Moreau', + role: 'VP Product', + bio: 'Ex-Flexport, passionnée par l\'UX et l\'innovation produit', + image: '/assets/images/team/vp-product.jpg', + linkedin: '#', + }, + ]; + + const timeline = [ + { + year: '2021', + title: 'Fondation', + description: 'Création de Xpeditis avec une vision claire : simplifier le fret maritime pour tous.', + }, + { + year: '2022', + title: 'Première version', + description: 'Lancement de la plateforme beta avec 10 compagnies maritimes partenaires.', + }, + { + year: '2023', + title: 'Série A', + description: 'Levée de fonds de 15M€ pour accélérer notre expansion européenne.', + }, + { + year: '2024', + title: 'Expansion', + description: '50+ compagnies maritimes, présence dans 15 pays européens.', + }, + { + year: '2025', + title: 'Leader européen', + description: 'Plateforme #1 du fret maritime B2B en Europe avec 500+ clients actifs.', + }, + ]; + + const stats = [ + { value: '500+', label: 'Clients actifs' }, + { value: '50+', label: 'Compagnies maritimes' }, + { value: '15', label: 'Pays couverts' }, + { value: '100K+', label: 'Réservations/an' }, + ]; + + const containerVariants = { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + staggerChildren: 0.1, + }, + }, + }; + + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.5 }, + }, + }; + + return ( +
+ + + {/* Hero Section */} +
+
+
+
+
+ +
+ + + + Notre histoire + + +

+ Révolutionner le fret maritime, +
+ + une réservation à la fois + +

+ +

+ Fondée en 2021, Xpeditis est née d'une vision simple : rendre le fret maritime aussi simple + qu'une réservation de vol. Nous connectons les transitaires du monde entier avec les plus + grandes compagnies maritimes. +

+ +
+ + {/* Wave */} +
+ + + +
+
+ + {/* Mission & Vision Section */} +
+
+ + +
+ +
+

Notre Mission

+

+ Démocratiser l'accès au fret maritime en offrant une plateforme technologique de pointe + qui simplifie la recherche, la comparaison et la réservation de transport maritime pour + tous les professionnels de la logistique. +

+ + + +
+ +
+

Notre Vision

+

+ Devenir la référence mondiale du fret maritime digital, en connectant chaque transitaire + à chaque compagnie maritime, partout dans le monde, avec la transparence et l'efficacité + que mérite le commerce international. +

+ + +
+
+ + {/* Stats Section */} +
+ +
+ {stats.map((stat, index) => ( + + + {stat.value} + +
{stat.label}
+ + ))} +
+ +
+ + {/* Values Section */} +
+
+ +

Nos Valeurs

+

+ Les principes qui guident chacune de nos décisions +

+ + + + {values.map((value, index) => { + const IconComponent = value.icon; + return ( + +
+ +
+

{value.title}

+

{value.description}

+ + ); + })} + +
+
+ + {/* Timeline Section */} +
+
+ +

Notre Parcours

+

+ De la startup au leader européen du fret maritime digital +

+ + +
+ {/* Timeline line */} +
+ +
+ {timeline.map((item, index) => ( + +
+
+
+ + {item.year} +
+

{item.title}

+

{item.description}

+
+
+
+
+
+
+ + ))} +
+
+
+
+ + {/* Team Section */} +
+
+ +

Notre Équipe

+

+ Des experts passionnés par le maritime et la technologie +

+ + + + {team.map((member, index) => ( + +
+
+ +
+
+ + + +
+
+
+

{member.name}

+

{member.role}

+

{member.bio}

+
+ + ))} + +
+
+ + {/* CTA Section */} +
+
+ +

+ Rejoignez l'aventure Xpeditis +

+

+ Que vous soyez transitaire à la recherche d'une solution moderne ou talent souhaitant + rejoindre une équipe passionnée, nous avons hâte de vous rencontrer. +

+
+ + Créer un compte + + + + Voir les offres d'emploi + +
+ +
+
+ + +
+ ); +} diff --git a/apps/frontend/app/blog/page.tsx b/apps/frontend/app/blog/page.tsx new file mode 100644 index 0000000..530cb4b --- /dev/null +++ b/apps/frontend/app/blog/page.tsx @@ -0,0 +1,473 @@ +'use client'; + +import { useState, useRef } from 'react'; +import Link from 'next/link'; +import { motion, useInView } from 'framer-motion'; +import { + Ship, + BookOpen, + Calendar, + Clock, + User, + ArrowRight, + Search, + TrendingUp, + Globe, + FileText, + Anchor, +} from 'lucide-react'; +import { LandingHeader, LandingFooter } from '@/components/layout'; + +export default function BlogPage() { + const [selectedCategory, setSelectedCategory] = useState('all'); + const [searchQuery, setSearchQuery] = useState(''); + + const heroRef = useRef(null); + const articlesRef = useRef(null); + const categoriesRef = useRef(null); + + const isHeroInView = useInView(heroRef, { once: true }); + const isArticlesInView = useInView(articlesRef, { once: true }); + const isCategoriesInView = useInView(categoriesRef, { once: true }); + + const categories = [ + { value: 'all', label: 'Tous les articles', icon: BookOpen }, + { value: 'industry', label: 'Industrie maritime', icon: Ship }, + { value: 'technology', label: 'Technologie', icon: TrendingUp }, + { value: 'guides', label: 'Guides pratiques', icon: FileText }, + { value: 'news', label: 'Actualités', icon: Globe }, + ]; + + const featuredArticle = { + id: 1, + title: 'L\'avenir du fret maritime : comment l\'IA transforme la logistique', + excerpt: + 'Découvrez comment l\'intelligence artificielle révolutionne la gestion des expéditions maritimes et optimise les chaînes d\'approvisionnement mondiales.', + category: 'technology', + author: 'Marie Lefebvre', + authorRole: 'CTO', + date: '15 janvier 2025', + readTime: '8 min', + image: '/assets/images/blog/featured.jpg', + tags: ['IA', 'Innovation', 'Logistique'], + }; + + const articles = [ + { + id: 2, + title: 'Guide complet des Incoterms 2020 pour le transport maritime', + excerpt: + 'Tout ce que vous devez savoir sur les règles Incoterms et leur application dans le fret maritime international.', + category: 'guides', + author: 'Thomas Martin', + date: '10 janvier 2025', + readTime: '12 min', + image: '/assets/images/blog/incoterms.jpg', + tags: ['Incoterms', 'Guide', 'Commerce international'], + }, + { + id: 3, + title: 'Comment optimiser vos coûts de transport maritime en 2025', + excerpt: + 'Stratégies et conseils pratiques pour réduire vos dépenses logistiques sans compromettre la qualité de service.', + category: 'guides', + author: 'Sophie Bernard', + date: '8 janvier 2025', + readTime: '6 min', + image: '/assets/images/blog/costs.jpg', + tags: ['Optimisation', 'Coûts', 'Stratégie'], + }, + { + id: 4, + title: 'Les plus grands ports européens : classement 2025', + excerpt: + 'Analyse des performances des principaux ports européens et tendances du trafic conteneurisé.', + category: 'industry', + author: 'Jean-Pierre Durand', + date: '5 janvier 2025', + readTime: '10 min', + image: '/assets/images/blog/ports.jpg', + tags: ['Ports', 'Europe', 'Statistiques'], + }, + { + id: 5, + title: 'Xpeditis lève 15M€ pour accélérer son expansion', + excerpt: + 'Notre série A nous permet de renforcer notre équipe et d\'étendre notre présence en Europe.', + category: 'news', + author: 'Jean-Pierre Durand', + date: '3 janvier 2025', + readTime: '4 min', + image: '/assets/images/blog/funding.jpg', + tags: ['Financement', 'Croissance', 'Xpeditis'], + }, + { + id: 6, + title: 'Décarbonation du transport maritime : où en sommes-nous ?', + excerpt: + 'État des lieux des initiatives environnementales dans le secteur maritime et perspectives pour 2030.', + category: 'industry', + author: 'Claire Moreau', + date: '28 décembre 2024', + readTime: '9 min', + image: '/assets/images/blog/green.jpg', + tags: ['Environnement', 'Décarbonation', 'Durabilité'], + }, + { + id: 7, + title: 'APIs et intégrations : comment connecter votre TMS à Xpeditis', + excerpt: + 'Guide technique pour intégrer notre plateforme avec vos systèmes de gestion existants.', + category: 'technology', + author: 'Alexandre Petit', + date: '22 décembre 2024', + readTime: '15 min', + image: '/assets/images/blog/api.jpg', + tags: ['API', 'Intégration', 'Technique'], + }, + { + id: 8, + title: 'Les documents essentiels pour l\'export maritime', + excerpt: + 'Check-list complète des documents requis pour vos expéditions maritimes internationales.', + category: 'guides', + author: 'Thomas Martin', + date: '18 décembre 2024', + readTime: '7 min', + image: '/assets/images/blog/documents.jpg', + tags: ['Documents', 'Export', 'Douane'], + }, + ]; + + const filteredArticles = articles.filter((article) => { + const categoryMatch = selectedCategory === 'all' || article.category === selectedCategory; + const searchMatch = + searchQuery === '' || + article.title.toLowerCase().includes(searchQuery.toLowerCase()) || + article.excerpt.toLowerCase().includes(searchQuery.toLowerCase()); + return categoryMatch && searchMatch; + }); + + const containerVariants = { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + staggerChildren: 0.1, + }, + }, + }; + + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.5 }, + }, + }; + + return ( +
+ + + {/* Hero Section */} +
+
+
+
+
+ +
+ + + + Blog Xpeditis + + +

+ Actualités & Insights +
+ + du fret maritime + +

+ +

+ Restez informé des dernières tendances du transport maritime, découvrez nos guides + pratiques et suivez l'actualité de Xpeditis. +

+ + {/* Search Bar */} + +
+ + setSearchQuery(e.target.value)} + className="w-full pl-12 pr-4 py-4 rounded-xl bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-brand-turquoise focus:outline-none" + /> +
+ + +
+ + {/* Wave */} +
+ + + +
+
+ + {/* Categories */} +
+ +
+ {categories.map((category) => { + const IconComponent = category.icon; + const isActive = selectedCategory === category.value; + return ( + + ); + })} +
+ +
+ + {/* Featured Article */} +
+
+ + +
+
+
+ +
+ +
+
+
+ + À la une + + + {categories.find((c) => c.value === featuredArticle.category)?.label} + +
+ +

+ {featuredArticle.title} +

+ +

{featuredArticle.excerpt}

+ +
+
+ + {featuredArticle.author} +
+
+ + {featuredArticle.date} +
+
+ + {featuredArticle.readTime} +
+
+ +
+ Lire l'article + +
+
+
+
+ + +
+
+ + {/* Articles Grid */} +
+
+ +

Tous les articles

+ {filteredArticles.length} articles + + + {filteredArticles.length === 0 ? ( +
+ +

Aucun article trouvé

+

Essayez de modifier vos filtres ou votre recherche

+
+ ) : ( + + {filteredArticles.map((article) => ( + + +
+
+ +
+ + {categories.find((c) => c.value === article.category)?.label} + +
+
+ +
+

+ {article.title} +

+ +

{article.excerpt}

+ +
+ {article.tags.map((tag) => ( + + {tag} + + ))} +
+ +
+
+
+ +
+ {article.author} +
+
+ {article.date} + + + {article.readTime} + +
+
+
+
+ + + ))} + + )} + + {/* Load More */} + {filteredArticles.length > 0 && ( + + + + )} +
+
+ + {/* Newsletter Section */} +
+
+ +

+ Restez informé +

+

+ Abonnez-vous à notre newsletter pour recevoir les derniers articles et actualités + du fret maritime directement dans votre boîte mail. +

+
+ + +
+

+ En vous inscrivant, vous acceptez notre politique de confidentialité. Désabonnement possible à tout moment. +

+ +
+
+ + +
+ ); +} diff --git a/apps/frontend/app/careers/page.tsx b/apps/frontend/app/careers/page.tsx new file mode 100644 index 0000000..d848413 --- /dev/null +++ b/apps/frontend/app/careers/page.tsx @@ -0,0 +1,621 @@ +'use client'; + +import { useState, useRef } from 'react'; +import Link from 'next/link'; +import { motion, useInView, AnimatePresence } from 'framer-motion'; +import { + Briefcase, + MapPin, + Clock, + Users, + Heart, + Zap, + Coffee, + GraduationCap, + Plane, + Building2, + ChevronDown, + ChevronRight, + ArrowRight, + Search, + Code, + LineChart, + Headphones, + Megaphone, +} from 'lucide-react'; +import { LandingHeader, LandingFooter } from '@/components/layout'; + +export default function CareersPage() { + const [selectedDepartment, setSelectedDepartment] = useState('all'); + const [selectedLocation, setSelectedLocation] = useState('all'); + const [expandedJob, setExpandedJob] = useState(null); + + const heroRef = useRef(null); + const benefitsRef = useRef(null); + const jobsRef = useRef(null); + const cultureRef = useRef(null); + + const isHeroInView = useInView(heroRef, { once: true }); + const isBenefitsInView = useInView(benefitsRef, { once: true }); + const isJobsInView = useInView(jobsRef, { once: true }); + const isCultureInView = useInView(cultureRef, { once: true }); + + const benefits = [ + { + icon: Heart, + title: 'Mutuelle Premium', + description: 'Couverture santé complète pour vous et votre famille', + }, + { + icon: Plane, + title: 'Télétravail Flexible', + description: 'Travaillez d\'où vous voulez, jusqu\'à 3 jours par semaine', + }, + { + icon: Coffee, + title: 'Bien-être au Travail', + description: 'Salle de sport, fruits frais, et événements d\'équipe', + }, + { + icon: GraduationCap, + title: 'Formation Continue', + description: '2 000€/an de budget formation et conférences', + }, + { + icon: Users, + title: 'Équipe Internationale', + description: 'Travaillez avec des talents de 15 nationalités', + }, + { + icon: Zap, + title: 'Stock Options', + description: 'Participez à la croissance de l\'entreprise', + }, + ]; + + const jobs = [ + { + id: 1, + title: 'Senior Frontend Engineer', + department: 'Engineering', + location: 'Paris', + type: 'CDI', + remote: true, + salary: '65K - 85K €', + description: 'Rejoignez notre équipe frontend pour développer la prochaine génération de notre plateforme.', + requirements: [ + '5+ ans d\'expérience en développement frontend', + 'Maîtrise de React, TypeScript et Next.js', + 'Expérience avec les design systems', + 'Capacité à mentorer des développeurs juniors', + ], + icon: Code, + }, + { + id: 2, + title: 'Backend Engineer (Node.js)', + department: 'Engineering', + location: 'Paris', + type: 'CDI', + remote: true, + salary: '55K - 75K €', + description: 'Construisez des APIs scalables pour connecter les transitaires aux compagnies maritimes.', + requirements: [ + '3+ ans d\'expérience en Node.js/NestJS', + 'Maîtrise de PostgreSQL et Redis', + 'Connaissance des architectures microservices', + 'Expérience avec Docker et Kubernetes appréciée', + ], + icon: Code, + }, + { + id: 3, + title: 'Product Manager', + department: 'Product', + location: 'Paris', + type: 'CDI', + remote: true, + salary: '60K - 80K €', + description: 'Définissez la vision produit et priorisez les fonctionnalités avec notre équipe.', + requirements: [ + '4+ ans d\'expérience en product management B2B', + 'Expérience dans la logistique ou le shipping appréciée', + 'Capacité à analyser les données et définir les KPIs', + 'Excellentes compétences en communication', + ], + icon: LineChart, + }, + { + id: 4, + title: 'Account Executive', + department: 'Sales', + location: 'Rotterdam', + type: 'CDI', + remote: false, + salary: '50K - 70K € + variable', + description: 'Développez notre portefeuille clients aux Pays-Bas et en Belgique.', + requirements: [ + '3+ ans d\'expérience en vente B2B', + 'Connaissance du secteur maritime/logistique', + 'Maîtrise du néerlandais et de l\'anglais', + 'Capacité à gérer des cycles de vente longs', + ], + icon: Megaphone, + }, + { + id: 5, + title: 'Customer Success Manager', + department: 'Customer Success', + location: 'Paris', + type: 'CDI', + remote: true, + salary: '45K - 60K €', + description: 'Accompagnez nos clients dans l\'utilisation de la plateforme et maximisez leur satisfaction.', + requirements: [ + '2+ ans d\'expérience en customer success', + 'Expérience avec les outils CRM (HubSpot, Salesforce)', + 'Excellent relationnel et sens du service', + 'Capacité à former et accompagner les utilisateurs', + ], + icon: Headphones, + }, + { + id: 6, + title: 'Data Analyst', + department: 'Data', + location: 'Hambourg', + type: 'CDI', + remote: true, + salary: '50K - 65K €', + description: 'Analysez les données de shipping pour optimiser notre plateforme et nos processus.', + requirements: [ + '3+ ans d\'expérience en data analysis', + 'Maîtrise de SQL, Python et des outils BI', + 'Expérience avec le shipping/logistics appréciée', + 'Capacité à communiquer les insights aux équipes', + ], + icon: LineChart, + }, + ]; + + const departments = [ + { value: 'all', label: 'Tous les départements' }, + { value: 'Engineering', label: 'Engineering' }, + { value: 'Product', label: 'Product' }, + { value: 'Sales', label: 'Sales' }, + { value: 'Customer Success', label: 'Customer Success' }, + { value: 'Data', label: 'Data' }, + ]; + + const locations = [ + { value: 'all', label: 'Toutes les villes' }, + { value: 'Paris', label: 'Paris' }, + { value: 'Rotterdam', label: 'Rotterdam' }, + { value: 'Hambourg', label: 'Hambourg' }, + ]; + + const filteredJobs = jobs.filter((job) => { + const departmentMatch = selectedDepartment === 'all' || job.department === selectedDepartment; + const locationMatch = selectedLocation === 'all' || job.location === selectedLocation; + return departmentMatch && locationMatch; + }); + + const containerVariants = { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + staggerChildren: 0.1, + }, + }, + }; + + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.5 }, + }, + }; + + return ( +
+ + + {/* Hero Section */} +
+
+
+
+
+ +
+ + + + Rejoignez-nous + + +

+ Construisons ensemble +
+ + le futur du maritime + +

+ +

+ Rejoignez une équipe passionnée qui révolutionne le fret maritime. Des défis stimulants, + une culture bienveillante et des opportunités de croissance uniques vous attendent. +

+ +
+ + Voir les offres + + + + En savoir plus + +
+ +
+ + {/* Wave */} +
+ + + +
+
+ + {/* Stats Section */} +
+
+
+ {[ + { value: '50+', label: 'Employés' }, + { value: '15', label: 'Nationalités' }, + { value: '3', label: 'Bureaux en Europe' }, + { value: '40%', label: 'Femmes dans la tech' }, + ].map((stat, index) => ( + +
{stat.value}
+
{stat.label}
+ + ))} +
+
+
+ + {/* Benefits Section */} +
+
+ +

+ Pourquoi nous rejoindre ? +

+

+ Nous investissons dans le bien-être et le développement de nos équipes +

+ + + + {benefits.map((benefit, index) => { + const IconComponent = benefit.icon; + return ( + +
+ +
+

{benefit.title}

+

{benefit.description}

+ + ); + })} + +
+
+ + {/* Culture Section */} +
+
+
+ +

+ Notre culture +

+

+ Chez Xpeditis, nous croyons que les meilleures idées viennent d'équipes diverses + et inclusives. Nous valorisons l'autonomie, la créativité et le feedback constructif. +

+
    + {[ + 'Transparence totale sur les décisions et les résultats', + 'Feedback continu et culture de l\'amélioration', + 'Équilibre vie pro/perso respecté', + 'Célébration des succès collectifs', + ].map((item, index) => ( + +
    + +
    + {item} +     + ))} +
+ + + + {[1, 2, 3, 4].map((i) => ( +
+ +
+ ))} + +
+
+
+ + {/* Jobs Section */} +
+
+ +

+ Nos offres d'emploi +

+

+ Trouvez le poste qui correspond à vos ambitions +

+ + + {/* Filters */} + +
+ + +
+
+ + +
+ + + {/* Job Listings */} + + {filteredJobs.length === 0 ? ( +
+ +

Aucune offre trouvée

+

Essayez de modifier vos filtres

+
+ ) : ( + filteredJobs.map((job) => { + const IconComponent = job.icon; + const isExpanded = expandedJob === job.id; + + return ( + +
setExpandedJob(isExpanded ? null : job.id)} + > +
+
+
+ +
+
+

{job.title}

+
+ + + {job.department} + + + + {job.location} + + + + {job.type} + +
+
+
+
+
+ {job.remote && ( + + Remote OK + + )} + + {job.salary} + +
+ +
+
+
+ + + {isExpanded && ( + +
+

{job.description}

+

Profil recherché :

+
    + {job.requirements.map((req, index) => ( +
  • + + {req} +
    • + ))} +
+
+ + Postuler + + + +
+
+ + )} + + + ); + }) + )} + +
+
+ + {/* CTA Section */} +
+
+ +

+ Pas de poste correspondant ? +

+

+ Envoyez-nous une candidature spontanée ! Nous sommes toujours à la recherche de + talents passionnés pour rejoindre notre aventure. +

+ + Candidature spontanée + + + +
+
+ + +
+ ); +} diff --git a/apps/frontend/app/compliance/page.tsx b/apps/frontend/app/compliance/page.tsx new file mode 100644 index 0000000..3ce966e --- /dev/null +++ b/apps/frontend/app/compliance/page.tsx @@ -0,0 +1,429 @@ +'use client'; + +import { useRef } from 'react'; +import { motion, useInView } from 'framer-motion'; +import { + Shield, + UserCheck, + Database, + FileText, + Globe, + Clock, + CheckCircle, + Download, + Trash2, + Edit, + Eye, + Mail, +} from 'lucide-react'; +import Link from 'next/link'; +import { LandingHeader, LandingFooter } from '@/components/layout'; + +export default function CompliancePage() { + const heroRef = useRef(null); + const contentRef = useRef(null); + + const isHeroInView = useInView(heroRef, { once: true }); + const isContentInView = useInView(contentRef, { once: true }); + + const rights = [ + { + icon: Eye, + title: 'Droit d\'accès', + description: 'Obtenez une copie de toutes les données personnelles que nous détenons sur vous.', + }, + { + icon: Edit, + title: 'Droit de rectification', + description: 'Faites corriger vos données personnelles si elles sont inexactes ou incomplètes.', + }, + { + icon: Trash2, + title: 'Droit à l\'effacement', + description: 'Demandez la suppression de vos données personnelles ("droit à l\'oubli").', + }, + { + icon: Download, + title: 'Droit à la portabilité', + description: 'Recevez vos données dans un format structuré, lisible par machine.', + }, + ]; + + const principles = [ + { + icon: Database, + title: 'Minimisation des données', + description: 'Nous ne collectons que les données strictement nécessaires à nos services.', + }, + { + icon: Clock, + title: 'Limitation de conservation', + description: 'Vos données sont conservées uniquement le temps nécessaire.', + }, + { + icon: Shield, + title: 'Intégrité et confidentialité', + description: 'Vos données sont protégées contre tout accès non autorisé.', + }, + { + icon: FileText, + title: 'Transparence', + description: 'Nous vous informons clairement sur l\'utilisation de vos données.', + }, + ]; + + const measures = [ + { + category: 'Mesures techniques', + items: [ + 'Chiffrement des données au repos et en transit', + 'Authentification multi-facteurs', + 'Journalisation des accès aux données', + 'Sauvegardes chiffrées régulières', + 'Pseudonymisation des données sensibles', + ], + }, + { + category: 'Mesures organisationnelles', + items: [ + 'Délégué à la Protection des Données (DPO) désigné', + 'Formation régulière des employés', + 'Politiques de sécurité documentées', + 'Processus de gestion des incidents', + 'Audits de conformité réguliers', + ], + }, + ]; + + const containerVariants = { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + staggerChildren: 0.1, + }, + }, + }; + + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.5 }, + }, + }; + + return ( +
+ + + {/* Hero Section */} +
+
+
+
+
+ +
+ + + + Conformité européenne + + +

+ Conformité +
+ + RGPD + +

+ +

+ Xpeditis s'engage à respecter le Règlement Général sur la Protection des Données (RGPD) + et à garantir vos droits en matière de protection des données personnelles. +

+ +
+
+ + Conforme RGPD +
+
+ + DPO désigné +
+
+ +
+ + {/* Wave */} +
+ + + +
+
+ + {/* Your Rights */} +
+
+ +

+ Vos droits RGPD +

+

+ Le RGPD vous confère des droits renforcés sur vos données personnelles +

+ + + + {rights.map((right, index) => { + const IconComponent = right.icon; + return ( + +
+ +
+

{right.title}

+

{right.description}

+ + ); + })} + + + {/* Exercise Rights CTA */} + +

+ Pour exercer vos droits, connectez-vous à votre compte ou contactez notre DPO +

+
+ + Accéder à mon compte + + + Contacter le DPO + +
+ +
+
+ + {/* Principles */} +
+
+ +

+ Nos principes de protection des données +

+

+ Des principes fondamentaux qui guident notre traitement des données +

+ + +
+ {principles.map((principle, index) => { + const IconComponent = principle.icon; + return ( + +
+ +
+

{principle.title}

+

{principle.description}

+ + ); + })} +
+
+
+ + {/* Technical & Organizational Measures */} +
+
+ +

+ Mesures de protection +

+

+ Des mesures techniques et organisationnelles pour assurer la sécurité de vos données +

+ + +
+ {measures.map((measure, index) => ( + +

{measure.category}

+
    + {measure.items.map((item, i) => ( +
  • + + {item} +
    • + ))} +
+ + ))} +
+
+
+ + {/* Data Processing Register */} +
+
+ +
+
+ +
+
+

+ Registre des traitements +

+

+ Conformément à l'article 30 du RGPD, nous tenons un registre des activités de traitement + des données personnelles. Ce registre documente : +

+
    +
  • + + Les finalités de chaque traitement +
    • +
  • + + Les catégories de données traitées +
    • +
  • + + Les destinataires des données +
    • +
  • + + Les durées de conservation +
    • +
  • + + Les mesures de sécurité appliquées +
    • +
+
+
+ +
+
+ + {/* Contact DPO */} +
+
+ + +

+ Contacter notre DPO +

+

+ Notre Délégué à la Protection des Données est à votre disposition pour toute question + relative au traitement de vos données personnelles ou à l'exercice de vos droits. +

+
+ + + dpo@xpeditis.com + + + Politique de confidentialité + +
+ +
+
+ + +
+ ); +} diff --git a/apps/frontend/app/contact/page.tsx b/apps/frontend/app/contact/page.tsx new file mode 100644 index 0000000..e741ff0 --- /dev/null +++ b/apps/frontend/app/contact/page.tsx @@ -0,0 +1,565 @@ +'use client'; + +import { useState, useRef } from 'react'; +import { motion, useInView } from 'framer-motion'; +import { + Mail, + Phone, + MapPin, + Clock, + Send, + MessageSquare, + Headphones, + Building2, + CheckCircle2, + Loader2, +} from 'lucide-react'; +import { LandingHeader, LandingFooter } from '@/components/layout'; + +export default function ContactPage() { + const [formData, setFormData] = useState({ + firstName: '', + lastName: '', + email: '', + company: '', + phone: '', + subject: '', + message: '', + }); + const [isSubmitting, setIsSubmitting] = useState(false); + const [isSubmitted, setIsSubmitted] = useState(false); + const [error, setError] = useState(''); + + const heroRef = useRef(null); + const formRef = useRef(null); + const contactRef = useRef(null); + + const isHeroInView = useInView(heroRef, { once: true }); + const isFormInView = useInView(formRef, { once: true }); + const isContactInView = useInView(contactRef, { once: true }); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(''); + setIsSubmitting(true); + + // Simulate form submission + await new Promise((resolve) => setTimeout(resolve, 1500)); + + setIsSubmitting(false); + setIsSubmitted(true); + }; + + const handleChange = ( + e: React.ChangeEvent + ) => { + setFormData((prev) => ({ + ...prev, + [e.target.name]: e.target.value, + })); + }; + + const contactMethods = [ + { + icon: Mail, + title: 'Email', + description: 'Envoyez-nous un email', + value: 'contact@xpeditis.com', + link: 'mailto:contact@xpeditis.com', + color: 'from-blue-500 to-cyan-500', + }, + { + icon: Phone, + title: 'Téléphone', + description: 'Appelez-nous', + value: '+33 1 23 45 67 89', + link: 'tel:+33123456789', + color: 'from-green-500 to-emerald-500', + }, + { + icon: MessageSquare, + title: 'Chat en direct', + description: 'Discutez avec notre équipe', + value: 'Disponible 24/7', + link: '#chat', + color: 'from-purple-500 to-pink-500', + }, + { + icon: Headphones, + title: 'Support', + description: 'Centre d\'aide', + value: 'support.xpeditis.com', + link: 'https://support.xpeditis.com', + color: 'from-orange-500 to-red-500', + }, + ]; + + const offices = [ + { + city: 'Paris', + address: '123 Avenue des Champs-Élysées', + postalCode: '75008 Paris, France', + phone: '+33 1 23 45 67 89', + email: 'paris@xpeditis.com', + isHQ: true, + }, + { + city: 'Rotterdam', + address: 'Wilhelminakade 123', + postalCode: '3072 AP Rotterdam, Netherlands', + phone: '+31 10 123 4567', + email: 'rotterdam@xpeditis.com', + isHQ: false, + }, + { + city: 'Hambourg', + address: 'Am Sandtorkai 50', + postalCode: '20457 Hamburg, Germany', + phone: '+49 40 123 4567', + email: 'hamburg@xpeditis.com', + isHQ: false, + }, + ]; + + const subjects = [ + { value: '', label: 'Sélectionnez un sujet' }, + { value: 'demo', label: 'Demande de démonstration' }, + { value: 'pricing', label: 'Questions sur les tarifs' }, + { value: 'partnership', label: 'Partenariat' }, + { value: 'support', label: 'Support technique' }, + { value: 'press', label: 'Relations presse' }, + { value: 'careers', label: 'Recrutement' }, + { value: 'other', label: 'Autre' }, + ]; + + const containerVariants = { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + staggerChildren: 0.1, + }, + }, + }; + + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.5 }, + }, + }; + + return ( +
+ + + {/* Hero Section */} +
+
+
+
+
+ +
+ + + + Nous contacter + + +

+ Une question ? +
+ + Nous sommes là pour vous + +

+ +

+ Notre équipe est disponible pour répondre à toutes vos questions sur notre plateforme, + nos services et nos tarifs. N'hésitez pas à nous contacter ! +

+ +
+ + {/* Wave */} +
+ + + +
+
+ + {/* Contact Methods */} +
+ +
+ {contactMethods.map((method, index) => { + const IconComponent = method.icon; + return ( + +
+ +
+

{method.title}

+

{method.description}

+

{method.value}

+ + ); + })} +
+ +
+ + {/* Contact Form & Info */} +
+
+
+ {/* Form */} + +

Envoyez-nous un message

+

+ Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais. +

+ + {isSubmitted ? ( + +
+ +
+

Message envoyé !

+

+ Merci pour votre message. Notre équipe vous répondra dans les 24 heures. +

+ + + ) : ( +
+
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ +