Files
WEBtomaste/index.html

1783 lines
107 KiB
HTML
Raw Normal View History

2025-12-10 12:17:30 -05:00
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
2025-12-10 12:17:30 -05:00
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ATOMASTE | Structural Optimization & FEA Simulation Services</title>
<meta name="description" content="Atomaste - Expert structural optimization and finite element analysis services. Multi-physics simulation, parametric optimization, and advanced computational solutions.">
<meta name="keywords" content="structural optimization, FEA, finite element analysis, simulation, simulation services, topology optimization, multi-physics, CAE, design optimization, Montreal, Quebec, Canada">
<meta name="author" content="Atomaste">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://atomaste.ca/">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://atomaste.ca/">
<meta property="og:title" content="ATOMASTE | Structural Optimization & FEA Simulation Services">
<meta property="og:description" content="Expert structural optimization and finite element analysis services. Multi-physics simulation, parametric optimization, and advanced computational solutions.">
<meta property="og:image" content="https://atomaste.ca/Media/logo.svg">
<meta property="og:locale" content="en_CA">
<meta property="og:locale:alternate" content="fr_CA">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ATOMASTE | Structural Optimization & FEA Simulation Services">
<meta name="twitter:description" content="Expert structural optimization and finite element analysis services. Multi-physics simulation, parametric optimization, and advanced computational solutions.">
<meta name="twitter:image" content="https://atomaste.ca/Media/logo.svg">
<!-- Language alternates for SEO -->
<link rel="alternate" hreflang="en" href="https://atomaste.ca/">
<link rel="alternate" hreflang="fr" href="https://atomaste.ca/fr.html">
<link rel="alternate" hreflang="x-default" href="https://atomaste.ca/">
<link rel="icon" type="image/svg+xml" href="Media/favicon.svg?v=2">
<!-- Structured Data for SEO -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "Atomaste",
"legalName": "Atomaste Science and Technology inc.",
"description": "Expert structural optimization and finite element analysis services. Multi-physics simulation, parametric optimization, and advanced computational solutions.",
"url": "https://atomaste.ca",
"logo": "https://atomaste.ca/Media/logo.svg",
"image": "https://atomaste.ca/Media/logo.svg",
"areaServed": ["Canada", "United States", "North America"],
"serviceType": ["Structural Optimization", "Finite Element Analysis", "Multi-physics Simulation", "Topology Optimization", "Simulation Consulting"],
"knowsAbout": ["FEA", "CAE", "Structural Analysis", "Design Optimization", "Simulation"],
"address": {
"@type": "PostalAddress",
"addressLocality": "Montreal",
"addressRegion": "Quebec",
"addressCountry": "CA"
}
}
</script>
2025-12-10 12:17:30 -05:00
<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">
2025-12-10 12:17:30 -05:00
<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;
}
2025-12-10 12:17:30 -05:00
body {
background-color: var(--bg-dark);
font-family: 'Inter', sans-serif;
2025-12-10 12:17:30 -05:00
}
/* 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;
}
.text-gradient-emerald {
background: linear-gradient(135deg, #ffffff 0%, #34d399 50%, #0d9488 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 */
2025-12-10 12:17:30 -05:00
@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); }
2025-12-10 12:17:30 -05:00
}
.stat-number {
animation: countUp 0.5s ease-out forwards;
2025-12-10 12:17:30 -05:00
}
/* 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); }
2025-12-10 12:17:30 -05:00
}
/* 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; }
}
/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.grid-bg { animation: none; }
.glow-orb { animation: none; }
.float, .float-delay, .float-reverse { animation: none; }
.pulse-glow { animation: none; }
.neural-dot { animation: none; }
.scan-line::after { animation: none; }
html { scroll-behavior: auto; }
}
/* Accessibility: Focus States */
*:focus-visible {
outline: 2px solid var(--cyan-primary);
outline-offset: 2px;
}
a:focus-visible, button:focus-visible {
outline: 2px solid var(--cyan-primary);
outline-offset: 2px;
border-radius: 4px;
}
/* Skip to Content Link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--cyan-primary);
color: #000;
padding: 8px 16px;
z-index: 100;
font-weight: 600;
transition: top 0.3s;
}
.skip-link:focus {
top: 0;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(0, 212, 230, 0.9);
color: #000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 50;
border: none;
cursor: pointer;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--cyan-primary);
box-shadow: 0 0 20px rgba(0, 212, 230, 0.5);
}
/* Contact Form Styles */
.contact-form input,
.contact-form textarea,
.contact-form select {
width: 100%;
padding: 1rem;
background: rgba(10, 20, 35, 0.6);
border: 1px solid rgba(0, 212, 230, 0.2);
border-radius: 0.75rem;
color: #fff;
font-family: inherit;
transition: all 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
outline: none;
border-color: var(--cyan-primary);
box-shadow: 0 0 0 3px rgba(0, 212, 230, 0.1);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #6b7280;
}
.contact-form label {
display: block;
margin-bottom: 0.5rem;
color: #9ca3af;
font-size: 0.875rem;
}
.contact-form select option {
background: #0a1428;
color: #fff;
}
</style>
</head>
<body class="text-gray-400 antialiased relative overflow-x-hidden">
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- 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-cyan-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>
2025-12-10 12:17:30 -05:00
<!-- Navigation -->
<nav class="fixed top-0 left-0 w-full z-50 glass-strong overflow-x-hidden">
2025-12-10 12:17:30 -05:00
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div class="flex items-center gap-3">
<a href="/" aria-label="Atomaste Home"><img src="Media/logo.svg" alt="Atomaste Logo" class="h-10 md:h-12"></a>
2025-12-10 12:17:30 -05:00
</div>
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
<a href="#simulation" class="hover:text-cyan-400 transition-colors relative group">
Simulation
<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="#optics" class="hover:text-emerald-400 transition-colors relative group">
Optical Science
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-emerald-400 transition-all group-hover:w-full"></span>
</a>
<a href="#projects" class="hover:text-cyan-400 transition-colors relative group">
Projects
<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="#about" class="hover:text-cyan-400 transition-colors relative group">
About
<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="#contact" class="hover:text-cyan-400 transition-colors relative group">
Contact
<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="fr.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>
FR
</a>
</div>
<div class="flex items-center gap-3">
<!-- Language Switcher (Mobile) -->
<a href="fr.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>
FR
</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">
Start a Project
<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="#simulation" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">Simulation</a>
<a href="#optics" class="text-gray-400 hover:text-emerald-400 transition-colors py-2">Optical Science</a>
<a href="#projects" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">Projects</a>
<a href="#about" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">About</a>
<a href="#contact" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">Contact</a>
<a href="#contact" class="text-center text-black bg-cyan-400 px-5 py-3 rounded-lg font-semibold mt-2">
Start a Project
</a>
2025-12-10 12:17:30 -05:00
</div>
</div>
</nav>
<main id="main-content" class="relative z-10 pt-20">
2025-12-10 12:17:30 -05:00
<!-- ============ UNIFIED HERO ============ -->
<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">AVAILABLE FOR PROJECTS</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">Model.</span><br>
<span class="text-gray-500">Optimize.</span><br>
<span class="text-gradient-subtle">Validate.</span>
2025-12-10 12:17:30 -05:00
</h1>
<!-- Subheadline -->
<p class="max-w-xl text-lg md:text-xl text-gray-400 leading-relaxed font-light">
Atomaste builds physics-based models for mechanical and optical systems, explores better designs through simulation-driven optimization, and validates performance with decision-ready technical evidence.
2025-12-10 12:17:30 -05:00
</p>
<!-- CTA Buttons -->
<div class="flex flex-wrap items-center gap-4 mt-4">
<a href="#projects" 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="layout-grid" class="w-5 h-5"></i>
See selected projects
2025-12-10 12:17:30 -05:00
<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>
Start a project
2025-12-10 12:17:30 -05:00
</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">Simulation &amp; FEA</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-emerald-400"></i>
<span class="text-white text-sm">Optical Science</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">Design Optimization</span>
2025-12-10 12:17:30 -05:00
</div>
</div>
</div>
2025-12-10 12:17:30 -05:00
<!-- 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-cyan-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 -->
<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>
2025-12-10 12:17:30 -05:00
</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">Analysis</div>
</div>
</div>
2025-12-10 12:17:30 -05:00
</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-emerald-500/20 rounded-lg flex items-center justify-center">
<i data-lucide="telescope" class="w-5 h-5 text-emerald-400"></i>
</div>
<div>
<div class="text-white font-semibold">Optics</div>
<div class="text-xs text-emerald-400 font-mono">Telescopes</div>
</div>
2025-12-10 12:17:30 -05:00
</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-emerald-500/20 rounded-full flex items-center justify-center">
<i data-lucide="target" class="w-4 h-4 text-emerald-400"></i>
</div>
<div>
<div class="text-sm text-white font-medium">Design</div>
<div class="text-[10px] text-gray-500 font-mono">Optimization</div>
</div>
2025-12-10 12:17:30 -05:00
</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>
2025-12-10 12:17:30 -05:00
</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">Scroll</span>
<div class="w-px h-12 bg-gradient-to-b from-cyan-500/50 to-transparent"></div>
</div>
2025-12-10 12:17:30 -05:00
</section>
<!-- ============ FIELDS (side-by-side) ============ -->
<section id="fields" class="pt-16 pb-24 border-t border-white/5 relative scroll-mt-20 px-6 max-w-7xl mx-auto">
<div class="text-center mb-12">
<span class="text-cyan-400 font-mono text-sm uppercase tracking-widest">Expertise</span>
<h2 class="text-4xl md:text-5xl font-bold text-white tracking-tight mt-4 mb-4">Our fields of expertise</h2>
<p class="text-gray-400 max-w-2xl mx-auto">Atomaste brings the same analytical rigor to optical science and to simulation-driven design. Choose a field to explore.</p>
</div>
<!-- Two-path cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto w-full">
<!-- Optics card -->
<a href="#optics" class="group glass rounded-3xl p-8 md:p-10 border border-emerald-500/20 hover:border-emerald-500/50 transition-all duration-300 card-3d relative overflow-hidden">
<div class="absolute top-0 right-0 w-40 h-40 bg-emerald-500/10 rounded-full filter blur-3xl group-hover:bg-emerald-500/20 transition-all"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="w-16 h-16 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-emerald-500/25">
<i data-lucide="telescope" class="w-8 h-8 text-black"></i>
</div>
<span class="font-mono text-xs text-emerald-400 tracking-widest uppercase mb-2">Telescope mirrors &amp; metrology</span>
<h2 class="text-3xl font-bold text-white mb-3">Atomaste <span class="text-gradient-emerald">Optical Science</span></h2>
<p class="text-gray-400 leading-relaxed mb-6 flex-grow">
Telescope mirror design, wavefront modeling, interferometric metrology, and polishing science for high-performance optical systems.
</p>
<span class="inline-flex items-center gap-2 text-emerald-400 font-semibold text-sm group-hover:gap-3 transition-all">
Explore optics
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</span>
</div>
</a>
<!-- Simulation card -->
<a href="#simulation" class="group glass rounded-3xl p-8 md:p-10 border border-cyan-500/20 hover:border-cyan-500/50 transition-all duration-300 card-3d relative overflow-hidden">
<div class="absolute top-0 right-0 w-40 h-40 bg-cyan-500/10 rounded-full filter blur-3xl group-hover:bg-cyan-500/20 transition-all"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="w-16 h-16 bg-gradient-to-br from-cyan-400 to-cyan-500 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>
<span class="font-mono text-xs text-cyan-400 tracking-widest uppercase mb-2">Simulation &amp; Optimization</span>
<h2 class="text-3xl font-bold text-white mb-3">Atomaste <span class="text-gradient">Simulation</span></h2>
<p class="text-gray-400 leading-relaxed mb-6 flex-grow">
Finite element analysis, structural optimization, and simulation-driven solutions that validate and improve your designs.
</p>
<span class="inline-flex items-center gap-2 text-cyan-400 font-semibold text-sm group-hover:gap-3 transition-all">
Explore simulation
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</span>
</div>
</a>
</div>
</section>
<!-- ============ OPTICS DIVISION ============ -->
<section id="optics" class="py-32 border-t border-emerald-500/10 relative overflow-hidden scroll-mt-20">
<div class="glow-orb w-[500px] h-[500px] bg-emerald-500/5 top-0 left-0 absolute" style="animation-delay: -2s;"></div>
<div class="max-w-7xl mx-auto px-6 relative z-10">
<!-- Header -->
<div class="text-center mb-16">
<div class="flex items-center justify-center gap-3 mb-4">
<div class="w-12 h-px bg-emerald-500"></div>
<span class="text-emerald-400 font-mono text-sm uppercase tracking-widest">Atomaste Optical Science</span>
<div class="w-12 h-px bg-emerald-500"></div>
</div>
<h2 class="text-4xl md:text-6xl font-bold text-white tracking-tight mb-6">
Optical science for <span class="text-gradient-emerald">high-performance instruments</span>
</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
Wavefront-driven mirror design, interferometric metrology, and polishing science for telescopes and precision instruments.
</p>
</div>
<!-- Capability cards (uniform, image-ready) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 1: Mirror design -->
<div class="glass rounded-2xl border border-emerald-500/10 overflow-hidden hover:border-emerald-500/30 transition-all card-3d flex flex-col">
<div class="aspect-[16/9] border-b border-emerald-500/10 bg-gradient-to-br from-emerald-900/20 to-transparent flex flex-col items-center justify-center text-center p-4">
<i data-lucide="disc" class="w-9 h-9 text-emerald-500/40"></i>
<span class="text-gray-600 font-mono text-[10px] mt-2">[ image to be added ]</span>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-lg font-bold text-white mb-2">Lightweight mirror design</h4>
<p class="text-gray-400 text-sm leading-relaxed flex-grow">
Lightweight primary mirrors in glass-ceramics such as ZERODUR® and CLEARCERAM®-Z, designed so that geometry and support act as one integrated structure, optimized for mass, stiffness, and manufacturability.
</p>
</div>
</div>
<!-- 2: Wavefront -->
<div class="glass rounded-2xl border border-emerald-500/10 overflow-hidden hover:border-emerald-500/30 transition-all card-3d flex flex-col">
<div class="aspect-[16/9] border-b border-emerald-500/10 bg-gradient-to-br from-emerald-900/20 to-transparent flex flex-col items-center justify-center text-center p-4">
<i data-lucide="waves" class="w-9 h-9 text-emerald-500/40"></i>
<span class="text-gray-600 font-mono text-[10px] mt-2">[ image to be added ]</span>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-lg font-bold text-white mb-2">Wavefront-driven optimization</h4>
<p class="text-gray-400 text-sm leading-relaxed flex-grow">
Finite-element deformation fields are converted into optical path difference and annular Zernike metrics, linking structural design choices directly to optical performance.
</p>
</div>
</div>
<!-- 3: Support systems -->
<div class="glass rounded-2xl border border-emerald-500/10 overflow-hidden hover:border-emerald-500/30 transition-all card-3d flex flex-col">
<div class="aspect-[16/9] border-b border-emerald-500/10 bg-gradient-to-br from-emerald-900/20 to-transparent flex flex-col items-center justify-center text-center p-4">
<i data-lucide="layers" class="w-9 h-9 text-emerald-500/40"></i>
<span class="text-gray-600 font-mono text-[10px] mt-2">[ image to be added ]</span>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-lg font-bold text-white mb-2">Support-system optics</h4>
<p class="text-gray-400 text-sm leading-relaxed flex-grow">
A multi-point axial whiffletree and floating lateral supports carry changing gravity loads without distorting the optical surface. Interface stiffness is evaluated in terms of wavefront error.
</p>
</div>
</div>
<!-- 4: Metrology -->
<div class="glass rounded-2xl border border-emerald-500/10 overflow-hidden hover:border-emerald-500/30 transition-all card-3d flex flex-col">
<div class="aspect-[16/9] border-b border-emerald-500/10 bg-gradient-to-br from-emerald-900/20 to-transparent flex flex-col items-center justify-center text-center p-4">
<i data-lucide="scan-eye" class="w-9 h-9 text-emerald-500/40"></i>
<span class="text-gray-600 font-mono text-[10px] mt-2">[ image to be added ]</span>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-lg font-bold text-white mb-2">Interferometric metrology</h4>
<p class="text-gray-400 text-sm leading-relaxed flex-grow">
A folded-beam Fizeau architecture with a computer-generated hologram enables full-aperture testing of fast aspheric mirrors during polishing and verification.
</p>
</div>
</div>
<!-- 5: Polishing science -->
<div class="glass rounded-2xl border border-emerald-500/10 overflow-hidden hover:border-emerald-500/30 transition-all card-3d flex flex-col">
<div class="aspect-[16/9] border-b border-emerald-500/10 bg-gradient-to-br from-emerald-900/20 to-transparent flex flex-col items-center justify-center text-center p-4">
<i data-lucide="orbit" class="w-9 h-9 text-emerald-500/40"></i>
<span class="text-gray-600 font-mono text-[10px] mt-2">[ image to be added ]</span>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-lg font-bold text-white mb-2">Model-guided polishing science</h4>
<p class="text-gray-400 text-sm leading-relaxed flex-grow">
Physics-based simulation of the swing-arm polishing process, covering tool motion, removal functions, and Zernike-mode correctability, to identify which surface errors the machine can address and how force-control choices reduce risk for a lightweighted mirror.
</p>
</div>
</div>
<!-- 6: Carbon-fiber R&D -->
<div class="glass rounded-2xl border border-emerald-500/10 overflow-hidden hover:border-emerald-500/30 transition-all card-3d flex flex-col">
<div class="aspect-[16/9] border-b border-emerald-500/10 bg-gradient-to-br from-emerald-900/20 to-transparent flex flex-col items-center justify-center text-center p-4">
<i data-lucide="flask-conical" class="w-9 h-9 text-emerald-500/40"></i>
<span class="text-gray-600 font-mono text-[10px] mt-2">[ image to be added ]</span>
</div>
<div class="p-6 flex flex-col flex-grow">
<h4 class="text-lg font-bold text-white mb-2">Carbon-fiber optical structures</h4>
<p class="text-gray-400 text-sm leading-relaxed flex-grow">
An ongoing in-house research project exploring carbon-fiber (CFRP) mirror blanks and optical support structures, aimed at ultralight, stiff, and thermally stable optics for next-generation instruments.
</p>
</div>
</div>
</div>
<!-- Optics CTA -->
<div class="text-center mt-14">
<a href="#projects" class="inline-flex items-center gap-3 bg-gradient-to-r from-emerald-400 to-teal-500 text-black px-8 py-4 rounded-lg font-semibold hover:shadow-xl hover:shadow-emerald-500/25 transition-all transform hover:-translate-y-1">
<i data-lucide="layout-grid" class="w-5 h-5"></i>
See optical projects
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</section>
<!-- ============ OPTICAL FABRICATION PARTNER ============ -->
<section id="partner" class="py-24 border-t border-white/5 relative scroll-mt-20">
<div class="max-w-7xl mx-auto px-6">
<div class="glass-strong rounded-3xl p-8 md:p-12 relative overflow-hidden">
<div class="absolute top-0 right-0 w-40 h-40 bg-emerald-500/10 rounded-full filter blur-3xl"></div>
<div class="relative z-10">
<div class="flex items-center justify-between gap-8 flex-wrap mb-8">
<div>
<span class="font-mono text-xs text-emerald-400 tracking-widest uppercase">Optical fabrication partner</span>
<h2 class="text-3xl md:text-4xl font-bold text-white mt-3">Optiques Fullum</h2>
</div>
<a href="https://www.optiquesfullum.com/" target="_blank" rel="noopener" class="shrink-0 block rounded-xl bg-white/5 border border-white/10 p-4 hover:border-emerald-500/30 transition-all">
<img src="Media/Optiques_Fullum_Atomaste_logo.png" alt="Optiques Fullum logo" class="h-16 w-auto">
</a>
</div>
<p class="text-gray-400 leading-relaxed max-w-3xl mb-8">
Atomaste is proud to be an official Optiques Fullum partner on professional optical projects. Atomaste designs, simulates, and optimizes telescope optics and optomechanical systems, while Optiques Fullum manufactures, polishes, and builds the finished telescope hardware. Together, the collaboration connects physics-based models to finished, verified optical systems.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Atomaste role -->
<div class="glass p-6 rounded-2xl border border-cyan-500/10">
<div class="flex items-center gap-3 mb-4">
<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 class="text-white font-bold">Atomaste</div>
</div>
<ul class="space-y-2 text-gray-400 text-sm">
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-cyan-400 shrink-0"></i> Design</li>
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-cyan-400 shrink-0"></i> Simulation</li>
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-cyan-400 shrink-0"></i> Optimization</li>
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-cyan-400 shrink-0"></i> Analysis &amp; validation</li>
</ul>
</div>
<!-- Optiques Fullum role -->
<div class="glass p-6 rounded-2xl border border-emerald-500/10">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-emerald-500/20 rounded-lg flex items-center justify-center">
<i data-lucide="telescope" class="w-5 h-5 text-emerald-400"></i>
</div>
<div class="text-white font-bold">Optiques Fullum</div>
</div>
<ul class="space-y-2 text-gray-400 text-sm">
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400 shrink-0"></i> Optical fabrication</li>
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400 shrink-0"></i> Polishing</li>
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400 shrink-0"></i> Manufacturing</li>
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400 shrink-0"></i> Telescope system build</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ PROJECTS ============ -->
<section id="projects" class="py-32 border-t border-white/5 relative scroll-mt-20">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<div class="flex items-center justify-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">Selected projects</span>
<div class="w-12 h-px bg-cyan-500"></div>
</div>
<h2 class="text-4xl md:text-6xl font-bold text-white tracking-tight mb-6">Concrete optical and simulation systems</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
Selected work across telescope design, optical metrology, and model-guided manufacturing systems.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Project 1: GigaBIT -->
<div class="glass rounded-2xl border border-white/5 overflow-hidden hover:border-emerald-500/30 transition-all card-3d flex flex-col">
<div class="aspect-[16/9] border-b border-white/5 overflow-hidden">
<img src="Media/projects/gigaBIT_balloon_imaging_telescope_card.png" alt="GigaBIT balloon imaging telescope" class="w-full h-full object-cover" loading="lazy">
</div>
<div class="p-6 flex flex-col flex-grow">
<span class="font-mono text-[10px] text-emerald-400 tracking-widest uppercase mb-2">Balloon-borne telescope</span>
<h3 class="text-xl font-bold text-white mb-3">GigaBIT balloon imaging telescope</h3>
<p class="text-gray-400 text-sm leading-relaxed flex-grow">
Design and simulation of the 1.2 m-class primary mirror system, including the lightweight mirror blank, floating support architecture, gravity-case analysis, and wavefront-error-driven optimization.
</p>
</div>
</div>
<!-- Project 2: Optiques Fullum folded Newtonian -->
<!-- TODO: update aperture/spec once Antoine provides the confirmed telescope image and size. -->
<div class="glass rounded-2xl border border-white/5 overflow-hidden hover:border-emerald-500/30 transition-all card-3d flex flex-col">
<div class="aspect-[16/9] border-b border-white/5 overflow-hidden">
<img src="Media/projects/large_aperture_folded_newtonian_telescope_card.png" alt="Optiques Fullum folded Newtonian telescope" class="w-full h-full object-cover" loading="lazy">
</div>
<div class="p-6 flex flex-col flex-grow">
<span class="font-mono text-[10px] text-emerald-400 tracking-widest uppercase mb-2">Large-aperture telescope system</span>
<h3 class="text-xl font-bold text-white mb-3">Optiques Fullum folded Newtonian telescope</h3>
<p class="text-gray-400 text-sm leading-relaxed flex-grow">
Optomechanical design and simulation support for a folded Newtonian telescope concept with Optiques Fullum, connecting telescope layout, mirror support, structural behavior, and fabrication constraints.
2025-12-10 12:17:30 -05:00
</p>
</div>
</div>
<!-- Project 3: Interferometer rig -->
<div class="glass rounded-2xl border border-white/5 overflow-hidden hover:border-emerald-500/30 transition-all card-3d flex flex-col">
<div class="aspect-[16/9] border-b border-white/5 overflow-hidden">
<img src="Media/projects/interferometer_optical_test_rig_card.png" alt="Interferometer optical test rig" class="w-full h-full object-cover" loading="lazy">
</div>
<div class="p-6 flex flex-col flex-grow">
<span class="font-mono text-[10px] text-emerald-400 tracking-widest uppercase mb-2">Optical metrology</span>
<h3 class="text-xl font-bold text-white mb-3">Interferometer rig</h3>
<p class="text-gray-400 text-sm leading-relaxed flex-grow">
Interferometric test-rig architecture for high-performance mirror verification, including folded-beam layout planning, CGH/Fizeau-style testing concepts, alignment constraints, and measurement workflow design.
2025-12-10 12:17:30 -05:00
</p>
</div>
</div>
2025-12-10 12:17:30 -05:00
<!-- Project 4: Semi-deterministic polisher -->
<div class="glass rounded-2xl border border-white/5 overflow-hidden hover:border-emerald-500/30 transition-all card-3d flex flex-col">
<div class="aspect-[16/9] border-b border-white/5 overflow-hidden">
<img src="Media/projects/semi_deterministic_polishing_system_card.png" alt="Semi-deterministic polishing system" class="w-full h-full object-cover" loading="lazy">
</div>
<div class="p-6 flex flex-col flex-grow">
<span class="font-mono text-[10px] text-emerald-400 tracking-widest uppercase mb-2">Closed-loop polishing</span>
<h3 class="text-xl font-bold text-white mb-3">Semi-deterministic polisher</h3>
<p class="text-gray-400 text-sm leading-relaxed flex-grow">
Model-guided polishing system concept for controlled optical correction, combining tool-motion simulation, removal-function understanding, feedback from metrology, and closed-loop process control.
</p>
2025-12-10 12:17:30 -05:00
</div>
</div>
</div>
</div>
</section>
<!-- ============ SIMULATION DIVISION ============ -->
<section id="simulation" class="py-24 border-t border-white/5 relative scroll-mt-20">
<div class="max-w-7xl mx-auto px-6 text-center">
<div class="flex items-center justify-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">Atomaste Simulation</span>
<div class="w-12 h-px bg-cyan-500"></div>
</div>
<h2 class="text-4xl md:text-6xl font-bold text-white tracking-tight mb-6">Simulation-driven <span class="text-gradient">design &amp; optimization</span></h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
From finite-element validation to automated design exploration, Atomaste turns complex mechanical systems into optimized, evidence-backed designs.
</p>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-32 bg-gradient-to-b from-[#080f1a] to-[#050a12]">
2025-12-10 12:17:30 -05:00
<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>
2025-12-10 12:17:30 -05:00
</div>
<h2 class="text-4xl md:text-5xl font-bold text-white tracking-tight mb-6">
What We <span class="text-gradient">Solve</span>
</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
Whether you need to validate a design before manufacturing, optimize an existing product,
or troubleshoot performance issues, we provide the analysis and insights to make confident, informed decisions.
2025-12-10 12:17:30 -05:00
</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">Reduce Risk</div>
<div class="text-xs text-gray-500 mt-1">Catch issues before production</div>
</div>
<div class="glass p-5 rounded-xl text-center">
<div class="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center mx-auto mb-3">
<i data-lucide="trending-down" class="w-6 h-6 text-emerald-400"></i>
</div>
<div class="text-white font-semibold text-sm">Cut Costs</div>
<div class="text-xs text-gray-500 mt-1">Fewer prototypes needed</div>
</div>
<div class="glass p-5 rounded-xl text-center">
<div class="w-12 h-12 bg-teal-500/20 rounded-xl flex items-center justify-center mx-auto mb-3">
<i data-lucide="clock" class="w-6 h-6 text-teal-400"></i>
</div>
<div class="text-white font-semibold text-sm">Save Time</div>
<div class="text-xs text-gray-500 mt-1">Faster development cycles</div>
</div>
<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="award" class="w-6 h-6 text-cyan-400"></i>
</div>
<div class="text-white font-semibold text-sm">Meet Specs</div>
<div class="text-xs text-gray-500 mt-1">Hit performance targets</div>
</div>
</div>
<!-- Primary Services -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
2025-12-10 12:17:30 -05:00
<!-- 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">Design Validation</h4>
<p class="text-cyan-400 text-sm font-medium mb-4">FEA & Simulation</p>
<p class="text-gray-400 leading-relaxed mb-6">
Know how your design will perform before building it.
Identify weak points, verify safety margins, and validate against requirements.
</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">Stress & deformation analysis</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">Vibration & modal studies</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">Thermal behavior</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">Fatigue life prediction</span>
</li>
</ul>
</div>
2025-12-10 12:17:30 -05:00
</div>
<!-- Optimization -->
<div class="glass p-8 rounded-2xl border border-emerald-500/20 hover:border-emerald-500/40 transition-all card-3d group relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 rounded-full filter blur-3xl group-hover:bg-emerald-500/10 transition-all"></div>
<div class="relative z-10">
<div class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-emerald-400 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-emerald-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">Performance Optimization</h4>
<p class="text-emerald-400 text-sm font-medium mb-4">Structural Optimization</p>
<p class="text-gray-400 leading-relaxed mb-6">
Get the best design, not just a working one.
Systematically improve weight, stiffness, cost, or any metric that matters to you.
</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-emerald-400"></i>
<span class="text-gray-300">Weight reduction</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-emerald-400"></i>
<span class="text-gray-300">Shape & topology optimization</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-emerald-400"></i>
<span class="text-gray-300">Multi-objective trade-offs</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-emerald-400"></i>
<span class="text-gray-300">Design sensitivity analysis</span>
</li>
</ul>
</div>
</div>
<!-- Precision Analysis -->
<div class="glass p-8 rounded-2xl border border-teal-500/20 hover:border-teal-500/40 transition-all card-3d group relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-teal-500/5 rounded-full filter blur-3xl group-hover:bg-teal-500/10 transition-all"></div>
<div class="relative z-10">
<div class="w-16 h-16 bg-gradient-to-br from-teal-500 to-teal-400 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-teal-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">High-Precision Systems</h4>
<p class="text-teal-400 text-sm font-medium mb-4">Opto-Mechanical & Aerospace</p>
<p class="text-gray-400 leading-relaxed mb-6">
For applications where nanometers matter.
Specialized analysis for optical systems, telescopes, and precision instruments.
</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-teal-400"></i>
<span class="text-gray-300">Surface form error analysis</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-teal-400"></i>
<span class="text-gray-300">Thermal stability</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-teal-400"></i>
<span class="text-gray-300">Gravity & pointing effects</span>
</li>
<li class="flex items-center gap-3 text-sm">
<i data-lucide="check" class="w-5 h-5 text-teal-400"></i>
<span class="text-gray-300">Support structure optimization</span>
</li>
</ul>
</div>
2025-12-10 12:17:30 -05:00
</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">CAD Design</h5>
<p class="text-xs text-gray-500">Siemens Designcenter, 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">Design for AM</h5>
<p class="text-xs text-gray-500">Additive manufacturing</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">Technical Reports</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">Consulting & PM</h5>
<p class="text-xs text-gray-500">Guidance & project coordination</p>
</div>
</div>
2025-12-10 12:17:30 -05:00
<!-- 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>
2025-12-10 12:17:30 -05:00
</div>
<h4 class="text-xl font-bold text-white">Analysis Capabilities</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">Linear Static</span>
2025-12-10 12:17:30 -05:00
</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">Thermal</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-teal-500/20">
<i data-lucide="focus" class="w-5 h-5 text-teal-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
<span class="text-white text-xs font-medium">Opto-Mech</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-linear</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">Dynamic</span>
2025-12-10 12:17:30 -05:00
</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-cyan-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">OPTIMIZATION SERVICES</span>
2025-12-10 12:17:30 -05:00
</div>
<h2 class="text-4xl md:text-6xl font-bold text-white tracking-tight mb-6">
Advanced <span class="text-gradient">Optimization</span>
</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
Combining classical optimization methods with machine learning to find optimal designs faster.
Applicable to any multi-physics problem.
2025-12-10 12:17:30 -05:00
</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-emerald-400 animate-pulse"></div>
<span class="font-mono text-sm text-emerald-400">Intelligent Design Exploration</span>
</div>
<h3 class="text-2xl md:text-3xl font-bold text-white mb-6">
From requirements and objectives to optimal design
</h3>
<p class="text-gray-400 leading-relaxed mb-6">
Our optimization workflow combines rigorous numerical analysis with efficient search algorithms.
Whether targeting thermal stability, minimizing surface deformation, improving dynamic response,
reducing manufacturing cost, or balancing multiple competing objectives simultaneously,
the approach adapts to your specific performance requirements.
</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">Define objectives & constraints</div>
<div class="text-sm text-gray-500">Performance targets, manufacturing limits</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">Automated design exploration</div>
<div class="text-sm text-gray-500">Parametric studies, sensitivity analysis</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">Validated optimal solution</div>
<div class="text-sm text-gray-500">FEA verification, 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-Objective</div>
<div class="text-xs text-gray-500">Pareto-optimal solutions</div>
</div>
<div class="glass p-6 rounded-2xl text-center border-glow">
<i data-lucide="sliders" class="w-8 h-8 text-emerald-400 mx-auto mb-3"></i>
<div class="text-white font-semibold mb-1">Parametric</div>
<div class="text-xs text-gray-500">Dimension & shape</div>
2025-12-10 12:17:30 -05:00
</div>
<div class="glass p-6 rounded-2xl text-center border-glow">
<i data-lucide="boxes" class="w-8 h-8 text-teal-400 mx-auto mb-3"></i>
<div class="text-white font-semibold mb-1">Topology</div>
<div class="text-xs text-gray-500">Material distribution</div>
2025-12-10 12:17:30 -05:00
</div>
<div class="glass p-6 rounded-2xl text-center border-glow">
<i data-lucide="gauge" class="w-8 h-8 text-cyan-400 mx-auto mb-3"></i>
<div class="text-white font-semibold mb-1">Real-time</div>
<div class="text-xs text-gray-500">Progress monitoring</div>
2025-12-10 12:17:30 -05:00
</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>
2025-12-10 12:17:30 -05:00
<!-- 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>
2025-12-10 12:17:30 -05:00
</div>
<div>
<h3 class="text-2xl md:text-3xl font-bold text-white">Atomizer</h3>
<p class="text-gray-400 mt-1">Optimization pipeline & protocol framework</p>
2025-12-10 12:17:30 -05:00
</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 Designcenter</span>
<span class="px-3 py-1 rounded-full text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Multi-physics</span>
<span class="px-3 py-1 rounded-full text-xs font-mono bg-teal-500/10 text-teal-400 border border-teal-500/20">Extensible</span>
</div>
2025-12-10 12:17:30 -05:00
</div>
<p class="text-gray-400 leading-relaxed mb-10 max-w-3xl relative z-10">
Atomizer is the optimization pipeline that enables structured, repeatable design exploration.
It provides the protocols and infrastructure to connect FEA solvers, custom physics extractors,
and optimization algorithms, giving full control over objective functions, constraints, and post-processing workflows.
</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-cyan-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>
2025-12-10 12:17:30 -05:00
</div>
<h4 class="text-lg font-bold text-white mb-2">Designcenter CAD Integration</h4>
<p class="text-gray-400 text-sm leading-relaxed">
Direct parametric link between Siemens Designcenter models and the optimization loop via NX Open API.
</p>
</div>
<!-- Optimization Algorithms -->
<div class="glass p-6 rounded-2xl card-3d group hover:border-emerald-500/30 transition-all">
<div class="w-12 h-12 bg-gradient-to-br from-emerald-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-emerald-400"></i>
2025-12-10 12:17:30 -05:00
</div>
<h4 class="text-lg font-bold text-white mb-2">Classical Optimizers</h4>
<p class="text-gray-400 text-sm leading-relaxed">
TPE, CMA-ES, NSGA-II, MMA, and other proven algorithms, integrated through modular optimization backends.
</p>
</div>
<!-- Surrogate Modeling -->
<div class="glass p-6 rounded-2xl card-3d group hover:border-teal-500/30 transition-all">
<div class="w-12 h-12 bg-gradient-to-br from-teal-500/20 to-teal-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-teal-400"></i>
2025-12-10 12:17:30 -05:00
</div>
<h4 class="text-lg font-bold text-white mb-2">Surrogate Modeling</h4>
<p class="text-gray-400 text-sm leading-relaxed">
Machine learning surrogates that approximate expensive FEA simulations for rapid design exploration.
</p>
</div>
<!-- Multi-Objective -->
<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-teal-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-cyan-400"></i>
2025-12-10 12:17:30 -05:00
</div>
<h4 class="text-lg font-bold text-white mb-2">Multi-Objective</h4>
<p class="text-gray-400 text-sm leading-relaxed">
Pareto-optimal solutions with custom objective functions and design constraints.
</p>
2025-12-10 12:17:30 -05:00
</div>
</div>
</div>
<!-- Optimization CTA -->
<div class="mt-12">
<div class="glass-strong rounded-3xl p-8 md:p-10 text-center relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-emerald-500/5"></div>
<div class="relative z-10">
<h3 class="text-2xl md:text-3xl font-bold text-white mb-3">Ready to improve your designs through rigorous FEA and optimization?</h3>
<p class="text-gray-400 max-w-2xl mx-auto mb-6">Whether it is structural performance or an optical system, let's discuss your project requirements.</p>
<a href="#contact" class="inline-flex items-center gap-3 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">
<i data-lucide="mail" class="w-5 h-5"></i>
Start a project
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
2025-12-10 12:17:30 -05:00
</div>
</section>
<!-- Technical Expertise -->
<section id="expertise" class="py-32 bg-gradient-to-b from-[#050a12] to-[#080f1a] relative overflow-hidden">
<!-- Background Effects -->
<div class="absolute inset-0 pointer-events-none">
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-cyan-500/5 rounded-full filter blur-[120px]"></div>
<div class="absolute bottom-1/4 -right-32 w-96 h-96 bg-teal-500/5 rounded-full filter blur-[120px]"></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="layers" class="w-4 h-4 text-cyan-400"></i>
<span class="text-cyan-400 font-mono text-sm">TECHNICAL STACK</span>
2025-12-10 12:17:30 -05:00
</div>
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight mb-6">
Tools & <span class="text-gradient">Technologies</span>
</h2>
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
Industry-leading software combined with custom automation for maximum efficiency and precision.
</p>
2025-12-10 12:17:30 -05:00
</div>
<!-- Primary Tools - Hero Cards -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
<!-- FEA & Simulation - Featured -->
<div class="glass-strong p-8 rounded-3xl border border-cyan-500/20 relative overflow-hidden group hover:border-cyan-500/40 transition-all duration-500">
<div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl from-cyan-500/10 to-transparent rounded-full filter blur-2xl group-hover:from-cyan-500/20 transition-all duration-500"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-8">
<div class="flex items-center gap-4">
<div class="w-14 h-14 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="cpu" class="w-7 h-7 text-black"></i>
</div>
<div>
<h4 class="text-2xl font-bold text-white">FEA & Simulation</h4>
<p class="text-cyan-400 text-sm font-mono">Core Analysis Tools</p>
</div>
</div>
<div class="hidden sm:flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-500/10 border border-cyan-500/20">
<span class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></span>
<span class="text-xs text-cyan-400 font-mono">PRIMARY</span>
</div>
</div>
2025-12-10 12:17:30 -05:00
<!-- Primary Tools -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
<div class="glass p-4 rounded-xl hover:bg-white/5 transition-all group/item cursor-default">
<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center">
<span class="text-cyan-400 font-bold text-xs">S3D</span>
</div>
<span class="text-white font-semibold">Simcenter 3D</span>
</div>
<p class="text-xs text-gray-500 ml-11">Linear & nonlinear structural</p>
</div>
<div class="glass p-4 rounded-xl hover:bg-white/5 transition-all group/item cursor-default">
<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center">
<span class="text-cyan-400 font-bold text-xs">SW</span>
</div>
<span class="text-white font-semibold">SolidWorks Simulation</span>
</div>
<p class="text-xs text-gray-500 ml-11">Integrated CAD analysis</p>
</div>
2025-12-10 12:17:30 -05:00
</div>
<!-- Secondary Tools -->
<div class="space-y-2">
<div class="text-xs text-gray-500 uppercase tracking-wider mb-3 font-mono">Open-Source & Specialized</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">OpenFOAM <span class="text-cyan-400/70 text-xs ml-1">CFD</span></span>
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">CalculiX</span>
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Code_Aster</span>
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">FEniCS</span>
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Gmsh <span class="text-cyan-400/70 text-xs ml-1">Meshing</span></span>
</div>
</div>
2025-12-10 12:17:30 -05:00
</div>
</div>
<!-- CAD & Design - Featured -->
<div class="glass-strong p-8 rounded-3xl border border-emerald-500/20 relative overflow-hidden group hover:border-emerald-500/40 transition-all duration-500">
<div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl from-emerald-500/10 to-transparent rounded-full filter blur-2xl group-hover:from-emerald-500/20 transition-all duration-500"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-8">
<div class="flex items-center gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-emerald-400 rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/25">
<i data-lucide="box" class="w-7 h-7 text-black"></i>
</div>
<div>
<h4 class="text-2xl font-bold text-white">CAD & Design</h4>
<p class="text-emerald-400 text-sm font-mono">Parametric Modeling</p>
</div>
</div>
<div class="hidden sm:flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20">
<span class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></span>
<span class="text-xs text-emerald-400 font-mono">PRIMARY</span>
</div>
</div>
<!-- Primary CAD Tools -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
<div class="glass p-4 rounded-xl hover:bg-white/5 transition-all group/item cursor-default">
<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 bg-emerald-500/20 rounded-lg flex items-center justify-center">
<span class="text-emerald-400 font-bold text-xs">NX</span>
</div>
<span class="text-white font-semibold">Siemens Designcenter</span>
</div>
<p class="text-xs text-gray-500 ml-11">Advanced surfacing & assemblies</p>
</div>
<div class="glass p-4 rounded-xl hover:bg-white/5 transition-all group/item cursor-default">
<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 bg-emerald-500/20 rounded-lg flex items-center justify-center">
<span class="text-emerald-400 font-bold text-xs">SW</span>
</div>
<span class="text-white font-semibold">SolidWorks</span>
</div>
<p class="text-xs text-gray-500 ml-11">Rapid prototyping & drawings</p>
</div>
</div>
<!-- CAD Capabilities -->
<div class="space-y-2">
<div class="text-xs text-gray-500 uppercase tracking-wider mb-3 font-mono">Capabilities</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Parametric Design</span>
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Surface Modeling</span>
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Assembly Design</span>
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Technical Drawings</span>
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Design for AM</span>
</div>
</div>
2025-12-10 12:17:30 -05:00
</div>
</div>
</div>
2025-12-10 12:17:30 -05:00
<!-- Archived per request: Development & Scientific Computing and Fully Integrated Workflow sub-sections removed. -->
</div>
</section>
<!-- ============ ABOUT (company-wide) ============ -->
<section id="about" class="py-32 border-t border-white/5 relative scroll-mt-20">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<div class="flex items-center justify-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">About Atomaste</span>
<div class="w-12 h-px bg-cyan-500"></div>
</div>
<h2 class="text-4xl md:text-6xl font-bold text-white tracking-tight mb-6">Atomaste <span class="text-gradient">Science and Technology</span></h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
Atomaste, officially Atomaste Science and Technology inc., is a Québec-based company that brings rigorous analysis and simulation to high-performance design across two complementary fields.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Founder image -->
<div class="relative order-2 lg:order-1">
<div class="aspect-square w-full max-w-lg mx-auto relative">
<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>
<div class="relative rounded-2xl overflow-hidden glass border border-cyan-500/20 h-full">
<img src="Media/hero-image.png" alt="Founder of 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>
<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">Antoine Letarte</div>
<div class="text-xs text-gray-400">Founder, Atomaste</div>
</div>
</div>
</div>
2025-12-10 12:17:30 -05:00
</div>
</div>
<!-- Text -->
<div class="space-y-6 text-gray-400 text-lg leading-relaxed order-1 lg:order-2">
<p>We work at the intersection of computation and the physical world, from finite-element simulation and structural optimization for industrial clients, to wavefront-driven optical science for astronomical instruments.</p>
<p>Whether the goal is validating a design before manufacturing or shaping a telescope mirror to nanometre tolerances, the same principles apply. We model the physics carefully, optimize against the metrics that matter, and deliver results you can trust.</p>
<div class="grid grid-cols-2 gap-4 pt-2">
<div class="glass p-5 rounded-xl border border-emerald-500/10">
<div class="text-white font-medium">Optical Science</div>
<div class="text-xs text-gray-500 mt-1">Telescope design, wavefront, metrology</div>
</div>
<div class="glass p-5 rounded-xl border border-cyan-500/10">
<div class="text-white font-medium">Simulation</div>
<div class="text-xs text-gray-500 mt-1">FEA, structural optimization, validation</div>
</div>
2025-12-10 12:17:30 -05:00
</div>
<div class="flex items-center gap-2 text-gray-500 text-sm pt-2">
<i data-lucide="map-pin" class="w-4 h-4 text-cyan-400"></i>
Rouyn-Noranda, Québec, Canada
2025-12-10 12:17:30 -05:00
</div>
</div>
</div>
</div>
</section>
<!-- Contact 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 relative z-10">
<div class="text-center mb-12">
<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-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
</span>
<span class="text-emerald-400 font-mono text-sm">AVAILABLE FOR PROJECTS</span>
</div>
<h2 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-8">
Let's <span class="text-gradient">optimize</span> together
</h2>
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
From structural simulation to optical systems, tell us about your project and we will get back to you quickly.
</p>
</div>
<!-- Contact Form -->
<form action="https://formspree.io/f/xbddjnrr" method="POST" class="contact-form glass-strong p-8 rounded-2xl max-w-2xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label for="name">Name *</label>
<input type="text" id="name" name="name" required placeholder="Your name">
</div>
<div>
<label for="email">Email *</label>
<input type="email" id="email" name="email" required placeholder="your@email.com">
</div>
</div>
<div class="mb-6">
<label for="company">Company</label>
<input type="text" id="company" name="company" placeholder="Your company (optional)">
</div>
<div class="mb-6">
<label for="service">Service Interest</label>
<select id="service" name="service">
<option value="">Select a service...</option>
<option value="fea">FEA & Simulation</option>
<option value="optimization">Structural Optimization</option>
<option value="optomech">Opto-Mechanical Analysis</option>
<option value="cad">CAD Design</option>
<option value="consulting">Technical Consulting</option>
<option value="other">Other</option>
</select>
</div>
<div class="mb-6">
<label for="message">Message *</label>
<textarea id="message" name="message" rows="5" required placeholder="Tell us about your project..."></textarea>
</div>
<button type="submit" class="w-full group bg-gradient-to-r from-cyan-500 to-cyan-400 text-black px-8 py-4 rounded-xl font-bold text-lg hover:shadow-2xl hover:shadow-cyan-500/25 transition-all transform hover:-translate-y-1 flex items-center justify-center gap-3">
<i data-lucide="send" class="w-5 h-5"></i>
Send Message
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
</button>
</form>
<div class="flex items-center justify-center gap-8 mt-12">
<a href="mailto:contact@atomaste.ca" class="text-gray-500 hover:text-cyan-400 transition-colors flex items-center gap-2">
<i data-lucide="mail" class="w-5 h-5"></i>
contact@atomaste.ca
</a>
<div class="w-px h-4 bg-white/10"></div>
<a href="https://www.linkedin.com/company/atomaste/" target="_blank" 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>
</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">
2025-12-10 12:17:30 -05:00
<div class="flex items-center gap-4">
<img src="Media/logo.svg" alt="Atomaste" class="h-8">
<span class="text-gray-600 font-mono text-sm">© 2026 Atomaste Science and Technology inc.</span>
</div>
<div class="text-gray-600 font-mono text-sm">
Rouyn-Noranda, Québec
2025-12-10 12:17:30 -05:00
</div>
</div>
</div>
</footer>
</main>
<script>
// Initialize Lucide Icons
2025-12-10 12:17:30 -05:00
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);
});
// Back to Top Button
const backToTopBtn = document.getElementById('back-to-top');
if (backToTopBtn) {
window.addEventListener('scroll', () => {
if (window.scrollY > 500) {
backToTopBtn.classList.add('visible');
} else {
backToTopBtn.classList.remove('visible');
}
});
backToTopBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
2025-12-10 12:17:30 -05:00
</script>
<!-- Back to Top Button -->
<button id="back-to-top" class="back-to-top" aria-label="Back to top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
</button>
2025-12-10 12:17:30 -05:00
</body>
</html>