1235 lines
69 KiB
HTML
1235 lines
69 KiB
HTML
|
<!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>
|