Compare commits
1 Commits
main
...
improvemen
| Author | SHA1 | Date | |
|---|---|---|---|
| 5b4a057a00 |
30
.htaccess
Normal file
30
.htaccess
Normal file
@@ -0,0 +1,30 @@
|
||||
# Atomaste Static Site
|
||||
Options -Indexes
|
||||
|
||||
# Redirect old broken URLs to homepage
|
||||
RedirectMatch 301 ^/custom-telescope-mirror-support.*$ /
|
||||
RedirectMatch 301 ^/product.*$ /
|
||||
RedirectMatch 301 ^/shop.*$ /
|
||||
|
||||
# Redirect to index.html as default
|
||||
DirectoryIndex index.html
|
||||
|
||||
# Enable GZIP compression
|
||||
<IfModule mod_deflate.c>
|
||||
AddOutputFilterByType DEFLATE text/html text/css application/javascript image/svg+xml
|
||||
</IfModule>
|
||||
|
||||
# Cache static assets
|
||||
<IfModule mod_expires.c>
|
||||
ExpiresActive On
|
||||
ExpiresByType image/png "access plus 1 month"
|
||||
ExpiresByType image/svg+xml "access plus 1 month"
|
||||
ExpiresByType text/css "access plus 1 week"
|
||||
</IfModule>
|
||||
|
||||
# Security Headers
|
||||
<IfModule mod_headers.c>
|
||||
Header set X-Content-Type-Options "nosniff"
|
||||
Header set X-Frame-Options "SAMEORIGIN"
|
||||
Header set Referrer-Policy "strict-origin-when-cross-origin"
|
||||
</IfModule>
|
||||
225
fr.html
225
fr.html
@@ -258,9 +258,119 @@ body {
|
||||
@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">Aller au contenu principal</a>
|
||||
|
||||
<!-- Particle Background Canvas -->
|
||||
<canvas id="particles-canvas"></canvas>
|
||||
@@ -277,7 +387,7 @@ body {
|
||||
<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">
|
||||
<a href="/fr.html" aria-label="Accueil Atomaste"><img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste Logo" class="h-10 md:h-12"></a>
|
||||
</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">
|
||||
@@ -332,7 +442,7 @@ body {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="relative z-10 pt-20">
|
||||
<main id="main-content" 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">
|
||||
@@ -730,7 +840,7 @@ body {
|
||||
</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>
|
||||
<h5 class="text-white font-semibold mb-2">Consultation & GP</h5>
|
||||
<p class="text-xs text-gray-500">Accompagnement technique</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -825,7 +935,7 @@ body {
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-400 leading-relaxed mb-6">
|
||||
Ma démarche d'optimisation allie analyse rigoureuse et algorithmes de recherche performants.
|
||||
Notre 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>
|
||||
@@ -1087,46 +1197,79 @@ body {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<!-- Section Contact -->
|
||||
<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 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-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">
|
||||
Prêt à améliorer vos conceptions grâce à une analyse ÉF rigoureuse et à l'optimisation?
|
||||
Discutons de vos besoins de projet.
|
||||
</p>
|
||||
</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>
|
||||
<!-- Formulaire de contact -->
|
||||
<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">Nom *</label>
|
||||
<input type="text" id="name" name="name" required placeholder="Votre nom">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Courriel *</label>
|
||||
<input type="email" id="email" name="email" required placeholder="votre@courriel.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="company">Entreprise</label>
|
||||
<input type="text" id="company" name="company" placeholder="Votre entreprise (optionnel)">
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="service">Service d'intérêt</label>
|
||||
<select id="service" name="service">
|
||||
<option value="">Sélectionnez un service...</option>
|
||||
<option value="fea">Analyse ÉF & Simulation</option>
|
||||
<option value="optimization">Optimisation structurelle</option>
|
||||
<option value="optomech">Analyse opto-mécanique</option>
|
||||
<option value="cad">Conception CAO</option>
|
||||
<option value="consulting">Consultation technique</option>
|
||||
<option value="other">Autre</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="message">Message *</label>
|
||||
<textarea id="message" name="message" rows="5" required placeholder="Parlez-nous de votre projet..."></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>
|
||||
Envoyer le message
|
||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<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">
|
||||
<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
|
||||
<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">
|
||||
<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 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>
|
||||
@@ -1277,6 +1420,26 @@ body {
|
||||
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' });
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Back to Top Button -->
|
||||
<button id="back-to-top" class="back-to-top" aria-label="Retour en haut">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
234
index.html
234
index.html
@@ -258,9 +258,118 @@ body {
|
||||
@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>
|
||||
@@ -277,7 +386,7 @@ body {
|
||||
<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">
|
||||
<a href="/" aria-label="Atomaste Home"><img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste Logo" class="h-10 md:h-12"></a>
|
||||
</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">
|
||||
@@ -332,7 +441,7 @@ body {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="relative z-10 pt-20">
|
||||
<main id="main-content" 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">
|
||||
@@ -353,7 +462,7 @@ body {
|
||||
<!-- 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">Validate.</span><br>
|
||||
<span class="text-gray-600">Optimize.</span><br>
|
||||
<span class="text-gray-500">Optimize.</span><br>
|
||||
<span class="text-gradient-subtle">Deliver.</span>
|
||||
</h1>
|
||||
|
||||
@@ -730,8 +839,8 @@ body {
|
||||
</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</h5>
|
||||
<p class="text-xs text-gray-500">Technical guidance</p>
|
||||
<h5 class="text-white font-semibold mb-2">Consulting & PM</h5>
|
||||
<p class="text-xs text-gray-500">Guidance & project coordination</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -825,7 +934,7 @@ body {
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-400 leading-relaxed mb-6">
|
||||
My optimization workflow combines rigorous engineering analysis with efficient search algorithms.
|
||||
Our optimization workflow combines rigorous engineering 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 engineering requirements.
|
||||
@@ -1196,7 +1305,7 @@ body {
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-lg font-bold text-white">Fully Integrated Workflow</h5>
|
||||
<p class="text-sm text-gray-400">CAD → FEA → Optimization → Results</p>
|
||||
<p class="text-sm text-gray-400">CAD → FEA → Optimization → Results</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block h-12 w-px bg-white/10"></div>
|
||||
@@ -1211,46 +1320,79 @@ body {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA 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 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">AVAILABLE FOR PROJECTS</span>
|
||||
<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-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">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">
|
||||
Ready to improve your designs through rigorous FEA and optimization?
|
||||
Let's discuss your project requirements.
|
||||
</p>
|
||||
</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>
|
||||
<!-- 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>
|
||||
|
||||
<p class="text-xl text-gray-400 max-w-2xl mx-auto mb-12">
|
||||
Ready to improve your designs through rigorous FEA and optimization?
|
||||
Let's discuss your project requirements.
|
||||
</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">
|
||||
<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
|
||||
<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">
|
||||
<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 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>
|
||||
@@ -1261,10 +1403,10 @@ body {
|
||||
<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>
|
||||
<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
|
||||
Rouyn-Noranda, Québec
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1401,6 +1543,26 @@ body {
|
||||
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' });
|
||||
});
|
||||
}
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user