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) {
|
@media (max-width: 768px) {
|
||||||
.hero-title { font-size: 2.5rem; }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="text-gray-400 antialiased relative overflow-x-hidden">
|
<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 -->
|
<!-- Particle Background Canvas -->
|
||||||
<canvas id="particles-canvas"></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">
|
<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="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||||
<div class="flex items-center gap-3">
|
<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>
|
||||||
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
|
<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">
|
<a href="#about" class="hover:text-cyan-400 transition-colors relative group">
|
||||||
@@ -332,7 +442,7 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main class="relative z-10 pt-20">
|
<main id="main-content" class="relative z-10 pt-20">
|
||||||
|
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section -->
|
||||||
<section class="min-h-screen flex flex-col justify-center px-6 max-w-7xl mx-auto relative py-20">
|
<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>
|
||||||
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
|
<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>
|
<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>
|
<p class="text-xs text-gray-500">Accompagnement technique</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -825,7 +935,7 @@ body {
|
|||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<p class="text-gray-400 leading-relaxed mb-6">
|
<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 :
|
Stabilité thermique, déformation de surface, réponse dynamique, coût de fabrication, objectifs multiples :
|
||||||
l'approche s'adapte à vos exigences.
|
l'approche s'adapte à vos exigences.
|
||||||
</p>
|
</p>
|
||||||
@@ -1087,46 +1197,79 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA Section -->
|
<!-- Section Contact -->
|
||||||
<section id="contact" class="py-32 relative border-t border-white/5">
|
<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="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="max-w-4xl mx-auto px-6 relative z-10">
|
||||||
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-8">
|
<div class="text-center mb-12">
|
||||||
<span class="relative flex h-2 w-2">
|
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-8">
|
||||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
<span class="relative flex h-2 w-2">
|
||||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||||
</span>
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
|
||||||
<span class="text-green-400 font-mono text-sm">DISPONIBLE POUR PROJETS</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>
|
</div>
|
||||||
|
|
||||||
<h2 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-8">
|
<!-- Formulaire de contact -->
|
||||||
<span class="text-gradient">Optimisons</span> ensemble
|
<form action="https://formspree.io/f/xbddjnrr" method="POST" class="contact-form glass-strong p-8 rounded-2xl max-w-2xl mx-auto">
|
||||||
</h2>
|
<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">
|
<div class="flex items-center justify-center gap-8 mt-12">
|
||||||
Prêt à améliorer vos conceptions grâce à une analyse ÉF rigoureuse et à l'optimisation?
|
<a href="mailto:contact@atomaste.ca" class="text-gray-500 hover:text-cyan-400 transition-colors flex items-center gap-2">
|
||||||
Discutons de vos besoins de projet.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-16">
|
|
||||||
<a href="mailto:contact@atomaste.ca" class="group bg-gradient-to-r from-cyan-500 to-cyan-400 text-black px-10 py-5 rounded-xl font-bold text-lg hover:shadow-2xl hover:shadow-cyan-500/25 transition-all transform hover:-translate-y-1 flex items-center gap-3">
|
|
||||||
<i data-lucide="mail" class="w-5 h-5"></i>
|
<i data-lucide="mail" class="w-5 h-5"></i>
|
||||||
contact@atomaste.ca
|
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>
|
</a>
|
||||||
</div>
|
<div class="w-px h-4 bg-white/10"></div>
|
||||||
|
|
||||||
<div class="flex items-center justify-center gap-8">
|
|
||||||
<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">
|
<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>
|
<i data-lucide="linkedin" class="w-5 h-5"></i>
|
||||||
LinkedIn
|
LinkedIn
|
||||||
</a>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -1277,6 +1420,26 @@ body {
|
|||||||
document.querySelectorAll('.glass, .glass-strong').forEach(el => {
|
document.querySelectorAll('.glass, .glass-strong').forEach(el => {
|
||||||
observer.observe(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>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
234
index.html
234
index.html
@@ -258,9 +258,118 @@ body {
|
|||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.hero-title { font-size: 2.5rem; }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="text-gray-400 antialiased relative overflow-x-hidden">
|
<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 -->
|
<!-- Particle Background Canvas -->
|
||||||
<canvas id="particles-canvas"></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">
|
<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="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||||
<div class="flex items-center gap-3">
|
<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>
|
||||||
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
|
<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">
|
<a href="#about" class="hover:text-cyan-400 transition-colors relative group">
|
||||||
@@ -332,7 +441,7 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main class="relative z-10 pt-20">
|
<main id="main-content" class="relative z-10 pt-20">
|
||||||
|
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section -->
|
||||||
<section class="min-h-screen flex flex-col justify-center px-6 max-w-7xl mx-auto relative py-20">
|
<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 -->
|
<!-- 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]">
|
<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-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>
|
<span class="text-gradient-subtle">Deliver.</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
@@ -730,8 +839,8 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
|
<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>
|
<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>
|
<h5 class="text-white font-semibold mb-2">Consulting & PM</h5>
|
||||||
<p class="text-xs text-gray-500">Technical guidance</p>
|
<p class="text-xs text-gray-500">Guidance & project coordination</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -825,7 +934,7 @@ body {
|
|||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<p class="text-gray-400 leading-relaxed mb-6">
|
<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,
|
Whether targeting thermal stability, minimizing surface deformation, improving dynamic response,
|
||||||
reducing manufacturing cost, or balancing multiple competing objectives simultaneously,
|
reducing manufacturing cost, or balancing multiple competing objectives simultaneously,
|
||||||
the approach adapts to your specific engineering requirements.
|
the approach adapts to your specific engineering requirements.
|
||||||
@@ -1196,7 +1305,7 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 class="text-lg font-bold text-white">Fully Integrated Workflow</h5>
|
<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>
|
</div>
|
||||||
<div class="hidden md:block h-12 w-px bg-white/10"></div>
|
<div class="hidden md:block h-12 w-px bg-white/10"></div>
|
||||||
@@ -1211,46 +1320,79 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA Section -->
|
<!-- Contact Section -->
|
||||||
<section id="contact" class="py-32 relative border-t border-white/5">
|
<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="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="max-w-4xl mx-auto px-6 relative z-10">
|
||||||
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-8">
|
<div class="text-center mb-12">
|
||||||
<span class="relative flex h-2 w-2">
|
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-8">
|
||||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
<span class="relative flex h-2 w-2">
|
||||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||||
</span>
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
|
||||||
<span class="text-green-400 font-mono text-sm">AVAILABLE FOR PROJECTS</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>
|
</div>
|
||||||
|
|
||||||
<h2 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-8">
|
<!-- Contact Form -->
|
||||||
Let's <span class="text-gradient">optimize</span> together
|
<form action="https://formspree.io/f/xbddjnrr" method="POST" class="contact-form glass-strong p-8 rounded-2xl max-w-2xl mx-auto">
|
||||||
</h2>
|
<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">
|
<div class="flex items-center justify-center gap-8 mt-12">
|
||||||
Ready to improve your designs through rigorous FEA and optimization?
|
<a href="mailto:contact@atomaste.ca" class="text-gray-500 hover:text-cyan-400 transition-colors flex items-center gap-2">
|
||||||
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">
|
|
||||||
<i data-lucide="mail" class="w-5 h-5"></i>
|
<i data-lucide="mail" class="w-5 h-5"></i>
|
||||||
contact@atomaste.ca
|
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>
|
</a>
|
||||||
</div>
|
<div class="w-px h-4 bg-white/10"></div>
|
||||||
|
|
||||||
<div class="flex items-center justify-center gap-8">
|
|
||||||
<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">
|
<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>
|
<i data-lucide="linkedin" class="w-5 h-5"></i>
|
||||||
LinkedIn
|
LinkedIn
|
||||||
</a>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -1261,10 +1403,10 @@ body {
|
|||||||
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste" class="h-8">
|
<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>
|
||||||
<div class="text-gray-600 font-mono text-sm">
|
<div class="text-gray-600 font-mono text-sm">
|
||||||
Rouyn-Noranda, Québec
|
Rouyn-Noranda, Québec
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1401,6 +1543,26 @@ body {
|
|||||||
document.querySelectorAll('.glass, .glass-strong').forEach(el => {
|
document.querySelectorAll('.glass, .glass-strong').forEach(el => {
|
||||||
observer.observe(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>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user