Antoine/WEBtomaste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
691eb71555e1190ff47264887df20e1957a0c5a0
WEBtomaste/fr.html
Anto01 691eb71555 Update website with new branding and French version 
- Add French version (fr.html) with localized content
- Update logos to new Atomaste branding (light grey logo, favicon)
- Update slogans to use team voice and general language
- Add deployment scripts for Dalidou dev server
- Remove old unused logo files
- Add .gitignore for IDE and sync folders

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-01 21:43:49 -05:00

1235 lines
69 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="fr-CA" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ATOMASTE | Services d'optimisation structurelle et analyse par éléments finis</title>
<meta name="description" content="Atomaste - Services experts en optimisation structurelle et analyse par éléments finis. Simulation multi-physique, optimisation paramétrique et solutions d'ingénierie avancées.">
<link rel="icon" type="image/svg+xml" href="Media/Atomaste_logo_A.svg?v=2">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--cyan-glow: rgba(0, 212, 230, 0.5);
--cyan-primary: #00d4e6;
--bg-dark: #050a12;
--bg-section: #080f1a;
}
html, body {
overflow-x: hidden;
max-width: 100vw;
}
body {
background-color: var(--bg-dark);
font-family: 'Inter', sans-serif;
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #1a2535; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a3545; }
/* Animated Grid Background */
.grid-bg {
background-image:
linear-gradient(rgba(0, 212, 230, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 212, 230, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
0% { background-position: 0 0; }
100% { background-position: 50px 50px; }
}
/* Particle Canvas */
#particles-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* Ambient Glows */
.glow-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
animation: orbFloat 8s ease-in-out infinite;
}
@keyframes orbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -20px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
}
/* Glass Morphism */
.glass {
background: rgba(10, 20, 35, 0.6);
backdrop-filter: blur(20px);
border: 1px solid rgba(0, 212, 230, 0.1);
}
.glass-strong {
background: rgba(5, 15, 30, 0.8);
backdrop-filter: blur(30px);
border: 1px solid rgba(0, 212, 230, 0.15);
}
/* Text Gradients */
.text-gradient {
background: linear-gradient(135deg, #ffffff 0%, #00d4e6 50%, #0891b2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-gradient-subtle {
background: linear-gradient(135deg, #ffffff 40%, #00d4e6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Animated Border */
.border-glow {
position: relative;
}
.border-glow::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(45deg, transparent, var(--cyan-primary), transparent);
background-size: 400% 400%;
animation: borderGlow 3s ease infinite;
z-index: -1;
opacity: 0;
transition: opacity 0.3s;
}
.border-glow:hover::before {
opacity: 1;
}
@keyframes borderGlow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Floating Animation */
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(1deg); }
}
@keyframes floatReverse {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(15px) rotate(-1deg); }
}
.float { animation: float 6s ease-in-out infinite; }
.float-delay { animation: float 7s ease-in-out infinite 1s; }
.float-reverse { animation: floatReverse 8s ease-in-out infinite 0.5s; }
/* Pulse Glow */
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 230, 0.2), 0 0 40px rgba(0, 212, 230, 0.1); }
50% { box-shadow: 0 0 40px rgba(0, 212, 230, 0.4), 0 0 80px rgba(0, 212, 230, 0.2); }
}
.pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }
/* Counter Animation */
@keyframes countUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.stat-number {
animation: countUp 0.5s ease-out forwards;
}
/* Scan Line Effect */
.scan-line {
position: relative;
overflow: hidden;
}
.scan-line::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--cyan-primary), transparent);
animation: scan 3s ease-in-out infinite;
}
@keyframes scan {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
/* Card Hover Effects */
.card-3d {
transform-style: preserve-3d;
transition: transform 0.3s ease;
}
.card-3d:hover {
transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(10px);
}
/* Neural Network Visualization */
.neural-dot {
width: 6px;
height: 6px;
background: var(--cyan-primary);
border-radius: 50%;
animation: neuralPulse 2s ease-in-out infinite;
}
@keyframes neuralPulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.5); }
}
/* Progress Bar Animation */
@keyframes progressFill {
from { width: 0; }
}
.progress-bar {
animation: progressFill 1.5s ease-out forwards;
}
/* Selection */
::selection {
background: rgba(0, 212, 230, 0.3);
color: #fff;
}
/* Responsive typography */
@media (max-width: 768px) {
.hero-title { font-size: 2.5rem; }
}
</style>
</head>
<body class="text-gray-400 antialiased relative overflow-x-hidden">
<!-- Particle Background Canvas -->
<canvas id="particles-canvas"></canvas>
<!-- Grid Background -->
<div class="fixed inset-0 grid-bg pointer-events-none z-0"></div>
<!-- Ambient Glow Orbs -->
<div class="glow-orb w-[600px] h-[600px] bg-cyan-500/5 -top-48 -left-48 fixed"></div>
<div class="glow-orb w-[500px] h-[500px] bg-blue-500/5 bottom-0 right-0 fixed" style="animation-delay: -3s;"></div>
<div class="glow-orb w-[400px] h-[400px] bg-cyan-500/3 top-1/2 left-1/3 fixed" style="animation-delay: -5s;"></div>
<!-- Navigation -->
<nav class="fixed top-0 left-0 w-full z-50 glass-strong overflow-x-hidden">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div class="flex items-center gap-3">
<img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste Logo" class="h-10 md:h-12">
</div>
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
<a href="#about" class="hover:text-cyan-400 transition-colors relative group">
À propos
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-cyan-400 transition-all group-hover:w-full"></span>
</a>
<a href="#services" class="hover:text-cyan-400 transition-colors relative group">
Services
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-cyan-400 transition-all group-hover:w-full"></span>
</a>
<a href="#optimization" class="hover:text-cyan-400 transition-colors relative group">
Optimisation
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-cyan-400 transition-all group-hover:w-full"></span>
</a>
<a href="#expertise" class="hover:text-cyan-400 transition-colors relative group">
Expertise
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-cyan-400 transition-all group-hover:w-full"></span>
</a>
<!-- Language Switcher -->
<a href="index.html" class="flex items-center gap-1.5 text-gray-500 hover:text-cyan-400 transition-colors">
<i data-lucide="globe" class="w-4 h-4"></i>
EN
</a>
</div>
<div class="flex items-center gap-3">
<!-- Language Switcher (Mobile) -->
<a href="index.html" class="md:hidden flex items-center gap-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-sm font-medium">
<i data-lucide="globe" class="w-4 h-4"></i>
EN
</a>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="md:hidden flex items-center justify-center w-10 h-10 glass rounded-lg">
<i data-lucide="menu" class="w-5 h-5 text-cyan-400"></i>
</button>
<a href="#contact" class="hidden sm:flex group items-center gap-2 text-xs font-semibold tracking-wide uppercase text-black bg-cyan-400 px-5 py-2.5 rounded-full hover:bg-cyan-300 hover:shadow-lg hover:shadow-cyan-500/25 transition-all duration-300">
Démarrer un projet
<i data-lucide="arrow-right" class="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden glass-strong border-t border-white/5 w-full">
<div class="px-6 py-4 flex flex-col gap-4">
<a href="#about" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">À propos</a>
<a href="#services" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">Services</a>
<a href="#optimization" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">Optimisation</a>
<a href="#expertise" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">Expertise</a>
<a href="#contact" class="text-center text-black bg-cyan-400 px-5 py-3 rounded-lg font-semibold mt-2">
Démarrer un projet
</a>
</div>
</div>
</nav>
<main class="relative z-10 pt-20">
<!-- Hero Section -->
<section class="min-h-screen flex flex-col justify-center px-6 max-w-7xl mx-auto relative py-20">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<!-- Left: Content -->
<div class="lg:col-span-7 flex flex-col gap-6 z-20">
<!-- Status Badge -->
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 glass px-4 py-2 rounded-full">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-cyan-400"></span>
</span>
<span class="font-mono text-xs text-cyan-400 tracking-wide">DISPONIBLE POUR PROJETS</span>
</div>
</div>
<!-- Main Headline -->
<h1 class="hero-title text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white tracking-tighter leading-[0.9]">
<span class="text-gradient">Valider.</span><br>
<span class="text-gray-600">Optimiser.</span><br>
<span class="text-gradient-subtle">Livrer.</span>
</h1>
<!-- Subheadline -->
<p class="max-w-lg text-lg md:text-xl text-gray-400 leading-relaxed font-light">
Des services d'ingénierie axés sur la simulation pour
<span class="text-white">optimiser vos designs</span>,
<span class="text-white">réduire les risques techniques</span> et
<span class="text-white">accélérer vos cycles de développement</span>.
</p>
<!-- CTA Buttons -->
<div class="flex flex-wrap items-center gap-4 mt-4">
<a href="#services" class="group bg-gradient-to-r from-cyan-500 to-cyan-400 text-black px-8 py-4 rounded-lg font-semibold hover:shadow-xl hover:shadow-cyan-500/25 transition-all transform hover:-translate-y-1 flex items-center gap-3">
<i data-lucide="activity" class="w-5 h-5"></i>
DÉCOUVRIR LES SERVICES
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="#contact" class="group glass text-white px-6 py-4 rounded-lg hover:bg-white/5 transition-all flex items-center gap-3">
<i data-lucide="mail" class="w-5 h-5 text-cyan-400"></i>
Nous contacter
</a>
</div>
<!-- Value Props -->
<div class="flex flex-wrap gap-6 mt-8 pt-8 border-t border-white/5">
<div class="flex items-center gap-2 stat-number">
<i data-lucide="check-circle" class="w-5 h-5 text-cyan-400"></i>
<span class="text-white text-sm">Validation de conception</span>
</div>
<div class="flex items-center gap-2 stat-number" style="animation-delay: 0.1s;">
<i data-lucide="check-circle" class="w-5 h-5 text-cyan-400"></i>
<span class="text-white text-sm">Optimisation de performance</span>
</div>
<div class="flex items-center gap-2 stat-number" style="animation-delay: 0.2s;">
<i data-lucide="check-circle" class="w-5 h-5 text-cyan-400"></i>
<span class="text-white text-sm">Rapports techniques</span>
</div>
</div>
</div>
<!-- Right: Visual -->
<div class="lg:col-span-5 relative h-[500px] lg:h-[700px] flex items-center justify-center">
<!-- Main Circle with Mesh Effect -->
<div class="absolute w-[320px] h-[320px] md:w-[420px] md:h-[420px] rounded-full pulse-glow">
<div class="absolute inset-0 rounded-full overflow-hidden border-2 border-cyan-500/30">
<div class="absolute inset-0 bg-gradient-to-br from-cyan-900/40 via-transparent to-blue-900/40"></div>
<!-- FEA Mesh Pattern -->
<svg class="absolute inset-0 w-full h-full opacity-30" viewBox="0 0 100 100">
<defs>
<pattern id="mesh" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,212,230,0.5)" stroke-width="0.5"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="48" fill="url(#mesh)"/>
</svg>
<!-- Center Icon - Brain with orbit -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="glass w-24 h-24 rounded-2xl flex items-center justify-center">
<i data-lucide="brain" class="w-12 h-12 text-cyan-400"></i>
</div>
</div>
</div>
</div>
<!-- Floating Elements -->
<div class="absolute top-0 right-0 glass p-5 rounded-xl float">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center">
<i data-lucide="activity" class="w-5 h-5 text-cyan-400"></i>
</div>
<div>
<div class="text-white font-semibold">FEA</div>
<div class="text-xs text-cyan-400 font-mono">Analyse structurelle</div>
</div>
</div>
</div>
<div class="absolute bottom-20 left-0 glass p-5 rounded-xl float-delay">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-lg flex items-center justify-center">
<i data-lucide="settings" class="w-5 h-5 text-cyan-400"></i>
</div>
<div>
<div class="text-white font-semibold">CAO</div>
<div class="text-xs text-cyan-400 font-mono">Conception</div>
</div>
</div>
</div>
<div class="absolute top-1/3 -right-4 glass p-4 rounded-xl float-reverse">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-green-500/20 rounded-full flex items-center justify-center">
<i data-lucide="target" class="w-4 h-4 text-green-400"></i>
</div>
<div>
<div class="text-sm text-white font-medium">Optimisation</div>
<div class="text-[10px] text-gray-500 font-mono">Multi-objectif</div>
</div>
</div>
</div>
<!-- Orbiting Dots -->
<div class="absolute inset-0 animate-spin" style="animation-duration: 20s;">
<div class="absolute top-1/2 left-0 neural-dot" style="animation-delay: 0s;"></div>
<div class="absolute top-0 left-1/2 neural-dot" style="animation-delay: 0.5s;"></div>
<div class="absolute top-1/2 right-0 neural-dot" style="animation-delay: 1s;"></div>
<div class="absolute bottom-0 left-1/2 neural-dot" style="animation-delay: 1.5s;"></div>
</div>
</div>
</div>
<!-- Scroll Indicator -->
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-gray-600">
<span class="text-xs font-mono uppercase tracking-widest">Défiler</span>
<div class="w-px h-12 bg-gradient-to-b from-cyan-500/50 to-transparent"></div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-32 border-t border-white/5 relative">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Image Side -->
<div class="relative">
<div class="aspect-square w-full max-w-lg mx-auto relative">
<!-- Decorative Frame -->
<div class="absolute -inset-4 border border-cyan-500/20 rounded-3xl"></div>
<div class="absolute -inset-8 border border-dashed border-cyan-500/10 rounded-3xl hidden md:block"></div>
<!-- Main Image -->
<div class="relative rounded-2xl overflow-hidden glass border border-cyan-500/20">
<img src="Media/Site_1_8.png" alt="Antoine - Atomaste" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
</div>
<!-- Floating Badge -->
<div class="absolute -bottom-6 -right-6 glass p-4 rounded-xl">
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-cyan-500 rounded-xl flex items-center justify-center">
<i data-lucide="award" class="w-6 h-6 text-black"></i>
</div>
<div>
<div class="text-white font-semibold">Fondateur</div>
<div class="text-xs text-gray-400">Atomaste</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content Side -->
<div class="flex flex-col gap-8">
<div>
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-px bg-cyan-500"></div>
<span class="text-cyan-400 font-mono text-sm uppercase tracking-widest">À propos</span>
</div>
<h2 class="text-4xl md:text-5xl font-bold text-white tracking-tight leading-tight">
Ingénierie axée sur l'<span class="text-gradient">optimisation</span>
</h2>
</div>
<div class="space-y-6 text-gray-400 text-lg leading-relaxed">
<p>
Atomaste offre des services spécialisés en génie mécanique axés sur
l'<span class="text-white">optimisation structurelle</span> et l'<span class="text-white">analyse par éléments finis</span>.
</p>
<p>
En combinant rigueur d'ingénierie et méthodes de calcul avancées,
nous livrons des conceptions validées qui atteignent vos objectifs de performance tout en respectant vos contraintes techniques et opérationnelles.
</p>
</div>
<!-- Key Differentiators -->
<div class="grid grid-cols-2 gap-4 mt-4">
<div class="glass p-4 rounded-xl card-3d">
<i data-lucide="activity" class="w-6 h-6 text-cyan-400 mb-3"></i>
<div class="text-white font-medium">Multi-physique</div>
<div class="text-xs text-gray-500 mt-1">Analyse couplée</div>
</div>
<div class="glass p-4 rounded-xl card-3d">
<i data-lucide="target" class="w-6 h-6 text-cyan-400 mb-3"></i>
<div class="text-white font-medium">Optimisation</div>
<div class="text-xs text-gray-500 mt-1">Axée sur la performance</div>
</div>
<div class="glass p-4 rounded-xl card-3d">
<i data-lucide="check-circle" class="w-6 h-6 text-cyan-400 mb-3"></i>
<div class="text-white font-medium">Validation</div>
<div class="text-xs text-gray-500 mt-1">Méthodes rigoureuses</div>
</div>
<div class="glass p-4 rounded-xl card-3d">
<i data-lucide="file-text" class="w-6 h-6 text-cyan-400 mb-3"></i>
<div class="text-white font-medium">Documentation</div>
<div class="text-xs text-gray-500 mt-1">Rapports complets</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-32 bg-gradient-to-b from-[#080f1a] to-[#050a12]">
<div class="max-w-7xl mx-auto px-6">
<!-- Header -->
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-6">
<i data-lucide="briefcase" class="w-4 h-4 text-cyan-400"></i>
<span class="text-cyan-400 font-mono text-sm">SERVICES</span>
</div>
<h2 class="text-4xl md:text-5xl font-bold text-white tracking-tight mb-6">
Ce que nous <span class="text-gradient">résolvons</span>
</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
Valider une conception avant fabrication. Optimiser un produit existant. Résoudre des problèmes de performance.
Nous fournissons l'analyse et les données pour des décisions d'ingénierie éclairées.
</p>
</div>
<!-- Business Outcomes -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
<div class="glass p-5 rounded-xl text-center">
<div class="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center mx-auto mb-3">
<i data-lucide="shield-check" class="w-6 h-6 text-cyan-400"></i>
</div>
<div class="text-white font-semibold text-sm">Réduire les risques</div>
<div class="text-xs text-gray-500 mt-1">Détecter les problèmes avant la production</div>
</div>
<div class="glass p-5 rounded-xl text-center">
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mx-auto mb-3">
<i data-lucide="trending-down" class="w-6 h-6 text-green-400"></i>
</div>
<div class="text-white font-semibold text-sm">Réduire les coûts</div>
<div class="text-xs text-gray-500 mt-1">Moins de prototypes nécessaires</div>
</div>
<div class="glass p-5 rounded-xl text-center">
<div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mx-auto mb-3">
<i data-lucide="clock" class="w-6 h-6 text-purple-400"></i>
</div>
<div class="text-white font-semibold text-sm">Gagner du temps</div>
<div class="text-xs text-gray-500 mt-1">Cycles de développement plus rapides</div>
</div>
<div class="glass p-5 rounded-xl text-center">
<div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center mx-auto mb-3">
<i data-lucide="award" class="w-6 h-6 text-yellow-400"></i>
</div>
<div class="text-white font-semibold text-sm">Atteindre les specs</div>
<div class="text-xs text-gray-500 mt-1">Atteindre les cibles de performance</div>
</div>
</div>
<!-- Primary Services -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<!-- FEA Simulation -->
<div class="glass p-8 rounded-2xl border border-cyan-500/20 hover:border-cyan-500/40 transition-all card-3d group relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-cyan-500/5 rounded-full filter blur-3xl group-hover:bg-cyan-500/10 transition-all"></div>
<div class="relative z-10">
<div class="w-16 h-16 bg-gradient-to-br from-cyan-500 to-cyan-400 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-cyan-500/25">
<i data-lucide="activity" class="w-8 h-8 text-black"></i>
</div>
<h4 class="text-2xl font-bold text-white mb-2">Validation de conception</h4>
<p class="text-cyan-400 text-sm font-medium mb-4">FEA & Simulation</p>
<p class="text-gray-400 leading-relaxed mb-6">
Sachez comment votre conception performera avant de la fabriquer.
Identifiez les points faibles, vérifiez les marges de sécurité et validez par rapport aux exigences.
</p>
<ul class="space-y-3">
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-cyan-400"></i>
<span class="text-gray-300">Analyse de contraintes et déformations</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-cyan-400"></i>
<span class="text-gray-300">Études vibratoires et modales</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-cyan-400"></i>
<span class="text-gray-300">Comportement thermique</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-cyan-400"></i>
<span class="text-gray-300">Prédiction de durée de vie en fatigue</span>
</li>
</ul>
</div>
</div>
<!-- Optimization -->
<div class="glass p-8 rounded-2xl border border-green-500/20 hover:border-green-500/40 transition-all card-3d group relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-green-500/5 rounded-full filter blur-3xl group-hover:bg-green-500/10 transition-all"></div>
<div class="relative z-10">
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-400 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-green-500/25">
<i data-lucide="target" class="w-8 h-8 text-black"></i>
</div>
<h4 class="text-2xl font-bold text-white mb-2">Optimisation de performance</h4>
<p class="text-green-400 text-sm font-medium mb-4">Optimisation structurelle</p>
<p class="text-gray-400 leading-relaxed mb-6">
Obtenez la meilleure conception, pas seulement une qui fonctionne.
Améliorez systématiquement le poids, la rigidité, le coût ou toute métrique importante pour vous.
</p>
<ul class="space-y-3">
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-green-400"></i>
<span class="text-gray-300">Réduction de poids</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-green-400"></i>
<span class="text-gray-300">Optimisation de forme et topologie</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-green-400"></i>
<span class="text-gray-300">Compromis multi-objectifs</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-green-400"></i>
<span class="text-gray-300">Analyse de sensibilité</span>
</li>
</ul>
</div>
</div>
<!-- Precision Engineering -->
<div class="glass p-8 rounded-2xl border border-purple-500/20 hover:border-purple-500/40 transition-all card-3d group relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-500/5 rounded-full filter blur-3xl group-hover:bg-purple-500/10 transition-all"></div>
<div class="relative z-10">
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-400 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-purple-500/25">
<i data-lucide="focus" class="w-8 h-8 text-black"></i>
</div>
<h4 class="text-2xl font-bold text-white mb-2">Systèmes haute précision</h4>
<p class="text-purple-400 text-sm font-medium mb-4">Opto-mécanique & Aérospatial</p>
<p class="text-gray-400 leading-relaxed mb-6">
Pour les applications où les nanomètres comptent.
Analyse spécialisée pour les systèmes optiques, télescopes et instruments de précision.
</p>
<ul class="space-y-3">
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-purple-400"></i>
<span class="text-gray-300">Analyse d'erreur de forme de surface</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-purple-400"></i>
<span class="text-gray-300">Stabilité thermique</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-purple-400"></i>
<span class="text-gray-300">Effets de gravité et pointage</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-purple-400"></i>
<span class="text-gray-300">Optimisation de structure de support</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Secondary Services -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
<i data-lucide="pen-tool" class="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors mb-4"></i>
<h5 class="text-white font-semibold mb-2">Conception CAO</h5>
<p class="text-xs text-gray-500">Siemens NX, SolidWorks</p>
</div>
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
<i data-lucide="layers" class="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors mb-4"></i>
<h5 class="text-white font-semibold mb-2">Conception pour FA</h5>
<p class="text-xs text-gray-500">Fabrication additive</p>
</div>
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
<i data-lucide="file-text" class="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors mb-4"></i>
<h5 class="text-white font-semibold mb-2">Rapports techniques</h5>
<p class="text-xs text-gray-500">Documentation & validation</p>
</div>
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
<i data-lucide="users" class="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors mb-4"></i>
<h5 class="text-white font-semibold mb-2">Consultation</h5>
<p class="text-xs text-gray-500">Accompagnement technique</p>
</div>
</div>
<!-- Analysis Capabilities -->
<div class="glass-strong p-8 rounded-2xl">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 bg-cyan-500/20 rounded-xl flex items-center justify-center">
<i data-lucide="bar-chart-3" class="w-5 h-5 text-cyan-400"></i>
</div>
<h4 class="text-xl font-bold text-white">Capacités d'analyse</h4>
</div>
<div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-3">
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
<i data-lucide="move" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
<span class="text-white text-xs font-medium">Statique linéaire</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
<i data-lucide="waves" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
<span class="text-white text-xs font-medium">Modal</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
<i data-lucide="activity" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
<span class="text-white text-xs font-medium">Vibration</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
<i data-lucide="thermometer" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
<span class="text-white text-xs font-medium">Thermique</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
<i data-lucide="refresh-cw" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
<span class="text-white text-xs font-medium">Fatigue</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group border border-purple-500/20">
<i data-lucide="focus" class="w-5 h-5 text-purple-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
<span class="text-white text-xs font-medium">Opto-méca</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
<i data-lucide="zap" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
<span class="text-white text-xs font-medium">Non-linéaire</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
<i data-lucide="wind" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
<span class="text-white text-xs font-medium">CFD</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
<i data-lucide="rotate-3d" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
<span class="text-white text-xs font-medium">Dynamique</span>
</div>
</div>
</div>
</div>
</section>
<!-- Optimization Approach Section -->
<section id="optimization" class="py-32 border-t border-white/5 relative overflow-hidden">
<!-- Background Pattern -->
<div class="absolute inset-0 opacity-20">
<div class="absolute top-1/4 left-0 w-96 h-96 bg-cyan-500/10 rounded-full filter blur-[100px]"></div>
<div class="absolute bottom-1/4 right-0 w-96 h-96 bg-blue-500/10 rounded-full filter blur-[100px]"></div>
</div>
<div class="max-w-7xl mx-auto px-6 relative z-10">
<!-- Header -->
<div class="text-center mb-20">
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-6">
<i data-lucide="settings" class="w-4 h-4 text-cyan-400"></i>
<span class="text-cyan-400 font-mono text-sm">SERVICES D'OPTIMISATION</span>
</div>
<h2 class="text-4xl md:text-6xl font-bold text-white tracking-tight mb-6">
<span class="text-gradient">Optimisation</span> avancée
</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
Allier méthodes classiques et apprentissage machine pour des conceptions optimales, plus vite.
Applicable à tout problème d'ingénierie multi-physique.
</p>
</div>
<!-- Main Approach Showcase -->
<div class="glass-strong rounded-3xl p-8 md:p-12 mb-16 relative overflow-hidden">
<div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-cyan-500/5 to-transparent"></div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center relative z-10">
<div>
<div class="flex items-center gap-2 mb-6">
<div class="w-3 h-3 rounded-full bg-green-400 animate-pulse"></div>
<span class="font-mono text-sm text-green-400">Exploration intelligente de conception</span>
</div>
<h3 class="text-2xl md:text-3xl font-bold text-white mb-6">
Des exigences et objectifs à la conception optimale
</h3>
<p class="text-gray-400 leading-relaxed mb-6">
Ma démarche d'optimisation allie analyse rigoureuse et algorithmes de recherche performants.
Stabilité thermique, déformation de surface, réponse dynamique, coût de fabrication, objectifs multiples :
l'approche s'adapte à vos exigences.
</p>
<div class="space-y-4">
<div class="flex items-start gap-4">
<div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
<span class="text-cyan-400 font-bold text-sm">1</span>
</div>
<div>
<div class="text-white font-medium">Définir objectifs et contraintes</div>
<div class="text-sm text-gray-500">Cibles de performance, limites de fabrication</div>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
<span class="text-cyan-400 font-bold text-sm">2</span>
</div>
<div>
<div class="text-white font-medium">Exploration automatisée de conception</div>
<div class="text-sm text-gray-500">Études paramétriques, analyse de sensibilité</div>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
<span class="text-cyan-400 font-bold text-sm">3</span>
</div>
<div>
<div class="text-white font-medium">Solution optimale validée</div>
<div class="text-sm text-gray-500">Vérification ÉF, documentation</div>
</div>
</div>
</div>
</div>
<!-- Capabilities Grid -->
<div class="grid grid-cols-2 gap-6">
<div class="glass p-6 rounded-2xl text-center border-glow">
<i data-lucide="git-branch" class="w-8 h-8 text-cyan-400 mx-auto mb-3"></i>
<div class="text-white font-semibold mb-1">Multi-objectif</div>
<div class="text-xs text-gray-500">Solutions Pareto-optimales</div>
</div>
<div class="glass p-6 rounded-2xl text-center border-glow">
<i data-lucide="sliders" class="w-8 h-8 text-green-400 mx-auto mb-3"></i>
<div class="text-white font-semibold mb-1">Paramétrique</div>
<div class="text-xs text-gray-500">Dimension et forme</div>
</div>
<div class="glass p-6 rounded-2xl text-center border-glow">
<i data-lucide="boxes" class="w-8 h-8 text-purple-400 mx-auto mb-3"></i>
<div class="text-white font-semibold mb-1">Topologie</div>
<div class="text-xs text-gray-500">Distribution de matériau</div>
</div>
<div class="glass p-6 rounded-2xl text-center border-glow">
<i data-lucide="gauge" class="w-8 h-8 text-yellow-400 mx-auto mb-3"></i>
<div class="text-white font-semibold mb-1">Temps réel</div>
<div class="text-xs text-gray-500">Suivi de progression</div>
</div>
</div>
</div>
</div>
<!-- Atomizer Section -->
<div class="glass-strong rounded-3xl p-8 md:p-12 border border-cyan-500/20 relative overflow-hidden">
<div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-cyan-500/5 to-transparent"></div>
<!-- Header -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10 relative z-10">
<div class="flex items-center gap-4">
<div class="w-16 h-16 bg-gradient-to-br from-cyan-500 to-cyan-400 rounded-2xl flex items-center justify-center shadow-lg shadow-cyan-500/25">
<i data-lucide="box" class="w-8 h-8 text-black"></i>
</div>
<div>
<h3 class="text-2xl md:text-3xl font-bold text-white">Atomizer</h3>
<p class="text-gray-400 mt-1">Pipeline d'optimisation et cadre de protocoles</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-xs font-mono bg-cyan-500/10 text-cyan-400 border border-cyan-500/20">Siemens NX</span>
<span class="px-3 py-1 rounded-full text-xs font-mono bg-green-500/10 text-green-400 border border-green-500/20">Multi-physique</span>
<span class="px-3 py-1 rounded-full text-xs font-mono bg-purple-500/10 text-purple-400 border border-purple-500/20">Extensible</span>
</div>
</div>
<p class="text-gray-400 leading-relaxed mb-10 max-w-3xl relative z-10">
Atomizer est le pipeline qui structure l'exploration de conception de façon reproductible.
Il connecte solveurs ÉF, extracteurs de physique et algorithmes d'optimisation,
offrant un contrôle total sur les fonctions objectifs, contraintes et post-traitement.
</p>
<!-- Atomizer Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 relative z-10">
<!-- NX CAD Integration -->
<div class="glass p-6 rounded-2xl card-3d group hover:border-cyan-500/30 transition-all">
<div class="w-12 h-12 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<i data-lucide="link" class="w-6 h-6 text-cyan-400"></i>
</div>
<h4 class="text-lg font-bold text-white mb-2">Intégration NX CAO</h4>
<p class="text-gray-400 text-sm leading-relaxed">
Lien paramétrique direct entre les modèles Siemens NX et la boucle d'optimisation via NX Open API.
</p>
</div>
<!-- Optimization Algorithms -->
<div class="glass p-6 rounded-2xl card-3d group hover:border-green-500/30 transition-all">
<div class="w-12 h-12 bg-gradient-to-br from-green-500/20 to-cyan-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<i data-lucide="settings" class="w-6 h-6 text-green-400"></i>
</div>
<h4 class="text-lg font-bold text-white mb-2">Optimiseurs classiques</h4>
<p class="text-gray-400 text-sm leading-relaxed">
TPE, CMA-ES, NSGA-II, MMA et autres algorithmes éprouvés, intégrés via des backends d'optimisation modulaires.
</p>
</div>
<!-- Surrogate Modeling -->
<div class="glass p-6 rounded-2xl card-3d group hover:border-purple-500/30 transition-all">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<i data-lucide="trending-up" class="w-6 h-6 text-purple-400"></i>
</div>
<h4 class="text-lg font-bold text-white mb-2">Modèles de substitution</h4>
<p class="text-gray-400 text-sm leading-relaxed">
Apprentissage machine pour approximer rapidement les simulations ÉF coûteuses.
</p>
</div>
<!-- Multi-Objective -->
<div class="glass p-6 rounded-2xl card-3d group hover:border-yellow-500/30 transition-all">
<div class="w-12 h-12 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<i data-lucide="git-branch" class="w-6 h-6 text-yellow-400"></i>
</div>
<h4 class="text-lg font-bold text-white mb-2">Multi-objectif</h4>
<p class="text-gray-400 text-sm leading-relaxed">
Solutions Pareto-optimales avec fonctions objectifs personnalisées et contraintes d'ingénierie.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Technical Expertise -->
<section id="expertise" class="py-32 bg-gradient-to-b from-[#050a12] to-[#080f1a]">
<div class="max-w-7xl mx-auto px-6">
<!-- Header -->
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-6">
<i data-lucide="code-2" class="w-4 h-4 text-cyan-400"></i>
<span class="text-cyan-400 font-mono text-sm">PILE TECHNIQUE</span>
</div>
<h2 class="text-4xl md:text-5xl font-bold text-white tracking-tight">
Outils & <span class="text-gradient">Technologies</span>
</h2>
</div>
<!-- Tools Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- FEA & Simulation Software -->
<div class="glass-strong p-8 rounded-2xl">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 bg-cyan-500/20 rounded-xl flex items-center justify-center">
<i data-lucide="cpu" class="w-5 h-5 text-cyan-400"></i>
</div>
<h4 class="text-xl font-bold text-white">ÉF & Simulation</h4>
</div>
<div class="space-y-3">
<div class="flex items-center gap-3 p-3 glass rounded-lg hover:bg-white/5 transition-all">
<span class="text-white font-medium">Siemens NX Nastran</span>
</div>
<div class="flex items-center gap-3 p-3 glass rounded-lg hover:bg-white/5 transition-all">
<span class="text-white font-medium">SolidWorks Simulation</span>
</div>
<div class="flex items-center gap-3 p-3 glass rounded-lg hover:bg-white/5 transition-all">
<span class="text-white font-medium">OpenFOAM</span>
<span class="text-xs text-cyan-400 font-mono ml-auto">CFD</span>
</div>
<div class="flex items-center gap-3 p-3 glass rounded-lg hover:bg-white/5 transition-all">
<span class="text-white font-medium">CalculiX</span>
<span class="text-xs text-cyan-400 font-mono ml-auto">Open-source</span>
</div>
<div class="flex items-center gap-3 p-3 glass rounded-lg hover:bg-white/5 transition-all">
<span class="text-white font-medium">Code_Aster</span>
<span class="text-xs text-cyan-400 font-mono ml-auto">Open-source</span>
</div>
<div class="flex items-center gap-3 p-3 glass rounded-lg hover:bg-white/5 transition-all">
<span class="text-white font-medium">FEniCS / Gmsh</span>
<span class="text-xs text-cyan-400 font-mono ml-auto">Maillage</span>
</div>
</div>
</div>
<!-- CAD Software -->
<div class="glass-strong p-8 rounded-2xl">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 bg-green-500/20 rounded-xl flex items-center justify-center">
<i data-lucide="box" class="w-5 h-5 text-green-400"></i>
</div>
<h4 class="text-xl font-bold text-white">CAO & Conception</h4>
</div>
<div class="space-y-3">
<div class="flex items-center gap-3 p-3 glass rounded-lg hover:bg-white/5 transition-all">
<span class="text-white font-medium">Siemens NX</span>
</div>
<div class="flex items-center gap-3 p-3 glass rounded-lg hover:bg-white/5 transition-all">
<span class="text-white font-medium">SolidWorks</span>
</div>
</div>
</div>
</div>
<!-- Development Stack - Full Width -->
<div class="mt-8 glass-strong p-8 rounded-2xl">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 bg-purple-500/20 rounded-xl flex items-center justify-center">
<i data-lucide="code" class="w-5 h-5 text-purple-400"></i>
</div>
<h4 class="text-xl font-bold text-white">Développement & Calcul scientifique</h4>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">Python</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">NumPy</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">SciPy</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">Pandas</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">PyTorch</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">Scikit-learn</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">Optuna</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">pyNastran</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">Matplotlib</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">Plotly</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">FastAPI</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">React</span>
</div>
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all">
<span class="text-white text-sm font-medium">NX Open API</span>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="contact" class="py-32 relative border-t border-white/5">
<div class="absolute inset-0 bg-gradient-to-t from-cyan-500/5 via-transparent to-transparent"></div>
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-8">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
</span>
<span class="text-green-400 font-mono text-sm">DISPONIBLE POUR PROJETS</span>
</div>
<h2 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-8">
<span class="text-gradient">Optimisons</span> ensemble
</h2>
<p class="text-xl text-gray-400 max-w-2xl mx-auto mb-12">
Prêt à améliorer vos conceptions grâce à une analyse ÉF rigoureuse et à l'optimisation?
Discutons de vos besoins de projet.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-16">
<a href="mailto:contact@atomaste.ca" class="group bg-gradient-to-r from-cyan-500 to-cyan-400 text-black px-10 py-5 rounded-xl font-bold text-lg hover:shadow-2xl hover:shadow-cyan-500/25 transition-all transform hover:-translate-y-1 flex items-center gap-3">
<i data-lucide="mail" class="w-5 h-5"></i>
contact@atomaste.ca
<i data-lucide="arrow-up-right" class="w-5 h-5 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
</a>
</div>
<div class="flex items-center justify-center gap-8">
<a href="https://linkedin.com" class="text-gray-500 hover:text-cyan-400 transition-colors flex items-center gap-2">
<i data-lucide="linkedin" class="w-5 h-5"></i>
LinkedIn
</a>
<div class="w-px h-4 bg-white/10"></div>
<a href="https://atomaste.ca" class="text-gray-500 hover:text-white transition-colors flex items-center gap-2">
<i data-lucide="globe" class="w-5 h-5"></i>
atomaste.ca
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-white/5">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-4">
<img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste" class="h-8">
<span class="text-gray-600 font-mono text-sm">© 2025 Atomaste</span>
</div>
<div class="text-gray-600 font-mono text-sm">
Rouyn-Noranda, Québec
</div>
</div>
</div>
</footer>
</main>
<script>
// Initialize Lucide Icons
lucide.createIcons();
// Particle System
const canvas = document.getElementById('particles-canvas');
const ctx = canvas.getContext('2d');
let particles = [];
const particleCount = 50;
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function createParticle() {
return {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3,
size: Math.random() * 2 + 1,
opacity: Math.random() * 0.5 + 0.1
};
}
function initParticles() {
particles = [];
for (let i = 0; i < particleCount; i++) {
particles.push(createParticle());
}
}
function drawParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach((p, i) => {
// Update position
p.x += p.vx;
p.y += p.vy;
// Wrap around edges
if (p.x < 0) p.x = canvas.width;
if (p.x > canvas.width) p.x = 0;
if (p.y < 0) p.y = canvas.height;
if (p.y > canvas.height) p.y = 0;
// Draw particle
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = `rgba(0, 212, 230, ${p.opacity})`;
ctx.fill();
// Draw connections
particles.forEach((p2, j) => {
if (i !== j) {
const dx = p.x - p2.x;
const dy = p.y - p2.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 150) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.strokeStyle = `rgba(0, 212, 230, ${0.1 * (1 - dist / 150)})`;
ctx.lineWidth = 0.5;
ctx.stroke();
}
}
});
});
requestAnimationFrame(drawParticles);
}
window.addEventListener('resize', () => {
resizeCanvas();
initParticles();
});
resizeCanvas();
initParticles();
drawParticles();
// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuBtn && mobileMenu) {
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close menu when clicking a link
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
}
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
}
});
}, observerOptions);
document.querySelectorAll('.glass, .glass-strong').forEach(el => {
observer.observe(el);
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink