561 lines
34 KiB
HTML
561 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" class="scroll-smooth">
|
|
<head><meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ATOMASTE | Solutions d'ingénierie Mécanique - FEA & Simulation</title>
|
|
<meta name="description" content="Atomaste - Ingénierie mécanique sur mesure : simulation FEA, optimisation structurelle, conception CAO et fabrication additive.">
|
|
<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&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background-color: #080f1a;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #080f1a;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #333;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
/* Ambient Glows - Cyan theme matching logo */
|
|
.ambient-glow {
|
|
position: fixed;
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, rgba(0, 200, 220, 0.04) 0%, rgba(0,0,0,0) 70%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.glow-top { top: -20%; left: -10%; }
|
|
.glow-bottom { bottom: -20%; right: -10%; }
|
|
.glow-center { top: 40%; left: 30%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(0, 150, 180, 0.05) 0%, rgba(0,0,0,0) 70%); }
|
|
/* Utility for hiding scrollbar but allowing scroll */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
/* Image Mask for Hero */
|
|
.hero-mask {
|
|
-webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
|
|
mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
|
|
}
|
|
/* Text Gradient - Cyan theme */
|
|
.text-gradient-cyan {
|
|
background: linear-gradient(135deg, #ffffff 30%, #00d4e6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.glass-card {
|
|
background: rgba(20, 20, 20, 0.4);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
.hover-trigger .hover-target {
|
|
opacity: 0;
|
|
transform: translateX(-10px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.hover-trigger:hover .hover-target {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
/* Mesh animation for hero */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
@keyframes pulse-glow {
|
|
0%, 100% { box-shadow: 0 0 20px rgba(0, 200, 220, 0.3); }
|
|
50% { box-shadow: 0 0 40px rgba(0, 200, 220, 0.5); }
|
|
}
|
|
.mesh-glow {
|
|
animation: pulse-glow 3s ease-in-out infinite;
|
|
}
|
|
</style></head>
|
|
<body class="text-gray-400 antialiased selection:bg-cyan-500/20 selection:text-cyan-200 relative overflow-x-hidden">
|
|
|
|
<!-- Ambient Background Effects -->
|
|
<div class="ambient-glow glow-top"></div>
|
|
<div class="ambient-glow glow-bottom"></div>
|
|
<div class="ambient-glow glow-center"></div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed top-0 left-0 w-full z-50 border-b border-white/5 bg-[#080f1a]/90 backdrop-blur-md">
|
|
<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/Logo_Officiel.png" alt="Atomaste Logo" class="h-12">
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
|
|
<a href="#about" class="hover:text-white transition-colors">À propos</a>
|
|
<a href="#services" class="hover:text-white transition-colors">Services</a>
|
|
<a href="#expertise" class="hover:text-white transition-colors">Expertise</a>
|
|
<a href="#projects" class="hover:text-white transition-colors">Projets</a>
|
|
</div>
|
|
<a href="#contact" class="group flex items-center gap-2 text-xs font-semibold tracking-wide uppercase text-white border border-cyan-500/30 px-5 py-2.5 rounded-full hover:bg-cyan-500 hover:text-black transition-all duration-300">
|
|
Contactez-moi
|
|
<i data-lucide="arrow-right" class="w-3 h-3 group-hover:translate-x-1 transition-transform"></i>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="relative z-10 pt-24">
|
|
|
|
<!-- Hero Section -->
|
|
<section class="min-h-[90vh] flex flex-col justify-center px-6 max-w-7xl mx-auto relative pb-20">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-0 items-center">
|
|
<!-- Left: Typography -->
|
|
<div class="lg:col-span-7 flex flex-col gap-8 z-20">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<div class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
|
<span class="font-mono text-xs text-cyan-400 tracking-widest uppercase">Disponible pour projets</span>
|
|
</div>
|
|
|
|
<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-semibold text-white tracking-tighter leading-[0.95] uppercase">
|
|
Simuler <br>
|
|
<span class="text-gray-600">pour mieux</span> <br>
|
|
<span class="text-gradient-cyan">Concevoir</span>
|
|
</h1>
|
|
|
|
<p class="max-w-md text-lg text-gray-400 leading-relaxed font-light border-l-2 border-cyan-500/50 pl-6 mt-4">
|
|
Ingénierie mécanique sur mesure. Simulation FEA, optimisation structurelle et conception innovante avec précision.
|
|
</p>
|
|
|
|
<div class="flex flex-wrap items-center gap-6 mt-8">
|
|
<a href="#services" class="bg-cyan-500 text-black px-8 py-4 rounded-sm font-semibold tracking-tight hover:bg-cyan-400 transition-all transform hover:-translate-y-1 flex items-center gap-2 group">
|
|
DÉCOUVRIR MES SERVICES
|
|
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
|
|
</a>
|
|
<a href="#projects" class="text-white px-6 py-4 rounded-sm border border-white/10 hover:border-cyan-500/50 transition-all flex items-center gap-2 text-sm tracking-wide">
|
|
<i data-lucide="box" class="w-4 h-4"></i>
|
|
VOIR PROJETS
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Visual & Stats -->
|
|
<div class="lg:col-span-5 relative h-[500px] lg:h-[700px] flex items-center justify-center lg:justify-end">
|
|
<!-- Circular Image Mask with FEA visualization -->
|
|
<div class="absolute inset-0 flex items-center justify-center lg:justify-end">
|
|
<div class="w-[300px] h-[300px] md:w-[450px] md:h-[450px] rounded-full overflow-hidden border border-cyan-500/20 relative group mesh-glow">
|
|
<img src="https://images.unsplash.com/photo-1581092921461-eab62e97a780?w=800" alt="FEA Simulation Mesh" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-110 group-hover:scale-100">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-cyan-900/20 to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Stats -->
|
|
<div class="absolute top-10 right-0 lg:right-10 glass-card p-6 rounded-lg" style="animation: float 6s ease-in-out infinite;">
|
|
<div class="text-3xl font-semibold text-white tracking-tighter">FEA</div>
|
|
<div class="text-xs text-cyan-400 uppercase tracking-widest mt-1">Simulation</div>
|
|
</div>
|
|
|
|
<div class="absolute bottom-20 left-0 lg:left-10 glass-card p-6 rounded-lg" style="animation: float 8s ease-in-out infinite 1s;">
|
|
<div class="text-3xl font-semibold text-white tracking-tighter">CAO</div>
|
|
<div class="text-xs text-cyan-400 uppercase tracking-widest mt-1">Conception</div>
|
|
</div>
|
|
|
|
<div class="absolute top-1/2 -right-4 lg:-right-10 glass-card p-4 rounded-lg flex items-center gap-3">
|
|
<div class="bg-cyan-500/20 p-2 rounded-full">
|
|
<i data-lucide="cpu" class="w-4 h-4 text-cyan-400"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-medium text-white">Optimisation</div>
|
|
<div class="text-[10px] text-gray-500 font-mono">Structurelle</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-24 border-t border-white/5">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
|
<div class="relative">
|
|
<div class="aspect-square w-full max-w-md mx-auto rounded-2xl overflow-hidden relative">
|
|
<img src="Media/Site_1_8.png" alt="Antoine - Atomaste" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-500">
|
|
<div class="absolute inset-0 border border-cyan-500/10 rounded-2xl"></div>
|
|
</div>
|
|
<!-- Decorative Elements -->
|
|
<div class="absolute -z-10 top-10 -left-10 w-full h-full border border-dashed border-cyan-500/10 rounded-2xl hidden md:block"></div>
|
|
</div>
|
|
<div class="flex flex-col justify-center">
|
|
<h2 class="text-xs font-mono text-cyan-400 tracking-widest uppercase mb-4">À Propos</h2>
|
|
<h3 class="text-3xl md:text-4xl font-semibold text-white tracking-tight mb-8">
|
|
Solutions d'ingénierie mécanique répondant à vos besoins spécifiques.
|
|
</h3>
|
|
<div class="space-y-6 text-gray-400 font-light leading-relaxed">
|
|
<p>
|
|
Atomaste offre des services d'ingénierie mécanique sur mesure.
|
|
Spécialisé en simulation par éléments finis (FEA) et optimisation structurelle, je transforme
|
|
vos concepts en solutions techniques validées.
|
|
</p>
|
|
<p>
|
|
Mon approche combine rigueur analytique et innovation pour livrer des résultats précis
|
|
et fiables. De l'analyse de contraintes à la conception CAO, chaque projet bénéficie
|
|
d'une expertise technique approfondie.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-6 mt-10">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="activity" class="text-cyan-400 w-5 h-5"></i>
|
|
<span class="text-white text-sm">Simulation FEA</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="target" class="text-cyan-400 w-5 h-5"></i>
|
|
<span class="text-white text-sm">Optimisation</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="pen-tool" class="text-cyan-400 w-5 h-5"></i>
|
|
<span class="text-white text-sm">Conception CAO</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="check-circle" class="text-cyan-400 w-5 h-5"></i>
|
|
<span class="text-white text-sm">Précision</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section - PRIMARY SERVICES -->
|
|
<section id="services" class="py-24 bg-[#0a1320]">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
|
|
<div>
|
|
<h2 class="text-xs font-mono text-cyan-400 tracking-widest uppercase mb-4">Services Principaux</h2>
|
|
<h3 class="text-4xl font-semibold text-white tracking-tight">Simulation & Optimisation</h3>
|
|
</div>
|
|
<p class="max-w-md text-sm text-gray-500 leading-relaxed">
|
|
Expertise de pointe en analyse par éléments finis et optimisation structurelle pour valider et améliorer vos conceptions.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Primary Services Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
|
<!-- FEA Simulation -->
|
|
<div class="glass-card p-8 rounded-xl border border-cyan-500/20 hover:border-cyan-500/40 transition-all group">
|
|
<div class="bg-cyan-500/10 w-14 h-14 rounded-lg flex items-center justify-center mb-6 group-hover:bg-cyan-500/20 transition-colors">
|
|
<i data-lucide="activity" class="w-7 h-7 text-cyan-400"></i>
|
|
</div>
|
|
<h4 class="text-xl font-semibold text-white mb-4">Simulation FEA</h4>
|
|
<p class="text-gray-400 text-sm leading-relaxed mb-6">
|
|
Analyse par éléments finis pour valider vos designs. Études de contraintes, déformations, fatigue et transfert thermique.
|
|
</p>
|
|
<ul class="space-y-2 text-sm text-gray-500">
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
Analyse statique & dynamique
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
Études de fatigue
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
Simulation thermique
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Optimization -->
|
|
<div class="glass-card p-8 rounded-xl border border-cyan-500/20 hover:border-cyan-500/40 transition-all group">
|
|
<div class="bg-cyan-500/10 w-14 h-14 rounded-lg flex items-center justify-center mb-6 group-hover:bg-cyan-500/20 transition-colors">
|
|
<i data-lucide="target" class="w-7 h-7 text-cyan-400"></i>
|
|
</div>
|
|
<h4 class="text-xl font-semibold text-white mb-4">Optimisation Structurelle</h4>
|
|
<p class="text-gray-400 text-sm leading-relaxed mb-6">
|
|
Optimisation topologique et paramétrique pour maximiser la performance tout en minimisant le poids et les coûts.
|
|
</p>
|
|
<ul class="space-y-2 text-sm text-gray-500">
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
Optimisation topologique
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
Réduction de masse
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
Design for AM
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Validation & Certification -->
|
|
<div class="glass-card p-8 rounded-xl border border-cyan-500/20 hover:border-cyan-500/40 transition-all group">
|
|
<div class="bg-cyan-500/10 w-14 h-14 rounded-lg flex items-center justify-center mb-6 group-hover:bg-cyan-500/20 transition-colors">
|
|
<i data-lucide="shield-check" class="w-7 h-7 text-cyan-400"></i>
|
|
</div>
|
|
<h4 class="text-xl font-semibold text-white mb-4">Validation & Rapports</h4>
|
|
<p class="text-gray-400 text-sm leading-relaxed mb-6">
|
|
Documentation technique complète et rapports de validation pour vos processus de certification.
|
|
</p>
|
|
<ul class="space-y-2 text-sm text-gray-500">
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
Rapports d'analyse détaillés
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
Validation de conception
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
|
Support certification
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Secondary Services -->
|
|
<div class="border-t border-white/5 pt-16">
|
|
<h3 class="text-xs font-mono text-gray-500 tracking-widest uppercase mb-8">Services Complémentaires</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
<!-- Design CAO -->
|
|
<div class="glass-card p-6 rounded-lg hover:bg-white/5 transition-colors group">
|
|
<i data-lucide="pen-tool" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-6 h-6 mb-4"></i>
|
|
<h5 class="text-white font-medium mb-2">Conception CAO</h5>
|
|
<p class="text-xs text-gray-500">Modélisation 3D et mise en plan technique</p>
|
|
</div>
|
|
|
|
<!-- Additive Manufacturing -->
|
|
<div class="glass-card p-6 rounded-lg hover:bg-white/5 transition-colors group">
|
|
<i data-lucide="layers" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-6 h-6 mb-4"></i>
|
|
<h5 class="text-white font-medium mb-2">Fabrication Additive</h5>
|
|
<p class="text-xs text-gray-500">Design optimisé pour impression 3D</p>
|
|
</div>
|
|
|
|
<!-- Project Management -->
|
|
<div class="glass-card p-6 rounded-lg hover:bg-white/5 transition-colors group">
|
|
<i data-lucide="gantt-chart" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-6 h-6 mb-4"></i>
|
|
<h5 class="text-white font-medium mb-2">Gestion de Projet</h5>
|
|
<p class="text-xs text-gray-500">Coordination et suivi technique</p>
|
|
</div>
|
|
|
|
<!-- Consulting -->
|
|
<div class="glass-card p-6 rounded-lg hover:bg-white/5 transition-colors group">
|
|
<i data-lucide="message-circle" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-6 h-6 mb-4"></i>
|
|
<h5 class="text-white font-medium mb-2">Consultation</h5>
|
|
<p class="text-xs text-gray-500">Expertise et conseils techniques</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Technical Expertise -->
|
|
<section id="expertise" class="py-24 border-t border-white/5">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
|
|
<div>
|
|
<h2 class="text-xs font-mono text-cyan-400 tracking-widest uppercase mb-4">Expertise</h2>
|
|
<h3 class="text-4xl font-semibold text-white tracking-tight">Outils & Technologies</h3>
|
|
</div>
|
|
<p class="max-w-md text-sm text-gray-500 leading-relaxed">
|
|
Maîtrise des logiciels de simulation et conception les plus avancés de l'industrie.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- Simulation Software -->
|
|
<div class="space-y-6">
|
|
<h4 class="text-lg font-medium text-white border-b border-white/10 pb-4">Simulation FEA</h4>
|
|
<div class="space-y-3">
|
|
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
|
<i data-lucide="circle-dot" class="w-5 h-5 text-cyan-500/50 group-hover:text-cyan-400 transition-colors"></i>
|
|
<span class="text-gray-300 font-medium">ANSYS</span>
|
|
</div>
|
|
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
|
<i data-lucide="circle-dot" class="w-5 h-5 text-cyan-500/50 group-hover:text-cyan-400 transition-colors"></i>
|
|
<span class="text-gray-300 font-medium">Simcenter (NX Nastran)</span>
|
|
</div>
|
|
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
|
<i data-lucide="circle-dot" class="w-5 h-5 text-cyan-500/50 group-hover:text-cyan-400 transition-colors"></i>
|
|
<span class="text-gray-300 font-medium">SolidWorks Simulation</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CAD Software -->
|
|
<div class="space-y-6">
|
|
<h4 class="text-lg font-medium text-white border-b border-white/10 pb-4">Conception CAO</h4>
|
|
<div class="space-y-3">
|
|
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
|
<i data-lucide="circle-dot" class="w-5 h-5 text-cyan-500/50 group-hover:text-cyan-400 transition-colors"></i>
|
|
<span class="text-gray-300 font-medium">Siemens NX</span>
|
|
</div>
|
|
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
|
<i data-lucide="circle-dot" class="w-5 h-5 text-cyan-500/50 group-hover:text-cyan-400 transition-colors"></i>
|
|
<span class="text-gray-300 font-medium">SolidWorks</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analysis Types -->
|
|
<div class="space-y-6">
|
|
<h4 class="text-lg font-medium text-white border-b border-white/10 pb-4">Types d'Analyses</h4>
|
|
<div class="space-y-3">
|
|
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
|
<i data-lucide="activity" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-5 h-5"></i>
|
|
<span class="text-gray-300 font-medium">Statique linéaire</span>
|
|
</div>
|
|
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
|
<i data-lucide="zap" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-5 h-5"></i>
|
|
<span class="text-gray-300 font-medium">Dynamique & Modal</span>
|
|
</div>
|
|
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
|
<i data-lucide="thermometer" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-5 h-5"></i>
|
|
<span class="text-gray-300 font-medium">Thermique</span>
|
|
</div>
|
|
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
|
<i data-lucide="refresh-cw" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-5 h-5"></i>
|
|
<span class="text-gray-300 font-medium">Fatigue & Durabilité</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Grid -->
|
|
<section id="projects" class="py-24 bg-[#0a1320]">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="flex justify-between items-end mb-12">
|
|
<div>
|
|
<h2 class="text-xs font-mono text-cyan-400 tracking-widest uppercase mb-4">Réalisations</h2>
|
|
<h3 class="text-4xl font-semibold text-white tracking-tight">Projets Sélectionnés</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projects Grid Layout -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
<!-- Large Featured Card -->
|
|
<div class="md:col-span-2 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-cyan-500/30 transition-all duration-500 h-[400px]">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-cyan-900/20 to-black/80"></div>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i data-lucide="activity" class="w-32 h-32 text-cyan-500/20"></i>
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 w-full p-8 z-20">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span class="text-cyan-400 font-mono text-xs px-2 py-1 rounded border border-cyan-500/20 bg-cyan-500/10">FEA</span>
|
|
<span class="text-gray-400 font-mono text-xs">Optimisation</span>
|
|
</div>
|
|
<h3 class="text-2xl md:text-3xl font-bold text-white mb-2">Analyse Structurelle</h3>
|
|
<p class="text-gray-400 line-clamp-2 mb-6 max-w-xl">
|
|
Simulation par éléments finis et optimisation topologique pour composants mécaniques haute performance.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Standard Card 1 -->
|
|
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[400px] md:h-auto">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-gray-800/50 to-black/80"></div>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i data-lucide="thermometer" class="w-20 h-20 text-cyan-500/20"></i>
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
|
<h3 class="text-xl font-bold text-white mb-2">Analyse Thermique</h3>
|
|
<p class="text-xs text-gray-400 mb-4 font-mono">Transfert de chaleur • Couplage</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Standard Card 2 -->
|
|
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[300px]">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-gray-800/50 to-black/80"></div>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i data-lucide="zap" class="w-20 h-20 text-cyan-500/20"></i>
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
|
<h3 class="text-xl font-bold text-white mb-2">Analyse Dynamique</h3>
|
|
<p class="text-xs text-gray-400 mb-4 font-mono">Modal • Vibrations</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Standard Card 3 -->
|
|
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[300px]">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-gray-800/50 to-black/80"></div>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i data-lucide="pen-tool" class="w-20 h-20 text-cyan-500/20"></i>
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
|
<h3 class="text-xl font-bold text-white mb-2">Conception CAO</h3>
|
|
<p class="text-xs text-gray-400 mb-4 font-mono">Modélisation • Plans techniques</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Standard Card 4 -->
|
|
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[300px]">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-gray-800/50 to-black/80"></div>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i data-lucide="layers" class="w-20 h-20 text-cyan-500/20"></i>
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
|
<h3 class="text-xl font-bold text-white mb-2">Design for AM</h3>
|
|
<p class="text-xs text-gray-400 mb-4 font-mono">Fabrication additive • Impression 3D</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer / Contact -->
|
|
<footer id="contact" class="pt-24 pb-12 border-t border-white/5">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-24">
|
|
<div>
|
|
<h2 class="text-4xl md:text-6xl font-bold text-white tracking-tighter mb-6">
|
|
Démarrons <br>
|
|
<span class="text-gray-600">votre projet.</span>
|
|
</h2>
|
|
<p class="text-gray-400 max-w-md">
|
|
Besoin d'expertise en simulation FEA, optimisation ou conception mécanique?
|
|
Discutons de votre projet.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col justify-center items-start lg:items-end gap-6">
|
|
<a href="mailto:contact@atomaste.ca" class="group flex items-center gap-4 text-2xl md:text-3xl text-gray-300 hover:text-cyan-400 transition-colors">
|
|
contact@atomaste.ca
|
|
<i data-lucide="arrow-up-right" class="w-6 h-6 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
|
|
</a>
|
|
<div class="flex gap-6">
|
|
<a href="https://linkedin.com" class="text-gray-500 hover:text-cyan-400 transition-colors">LinkedIn</a>
|
|
<a href="https://atomaste.ca" class="text-gray-500 hover:text-white transition-colors">atomaste.ca</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-white/5 text-xs text-gray-600 font-mono">
|
|
<div class="flex items-center gap-4">
|
|
<img src="Media/Logo_Officiel.png" alt="Atomaste" class="h-8">
|
|
<span>© 2025 Atomaste • Rouyn-Noranda, Québec</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
<script>
|
|
// Initialize Icons
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|